@3cr/sdk-browser

1.0.17 • Public • Published

@3cr/sdk-browser

Ecosystem integration for installing and running 3DICOM Core Renderer (3CR) within the Browser (client-side)

Install @3cr/sdk-browser package

Use the package manager npm or yarn to install @3cr/sdk-browser

npm

npm install @3cr/sdk-browser

yarn

yarn add @3cr/sdk-browser

Using the Package

  1. Register 3DICOM Core Renderer version

    Insert this loader script in your startup scripts on your site. This will allow you to directly interact with 3CR's instance.

    Typescript (.ts)

    import { registerVersion } from '@3cr/sdk-browser';
    
    const VERSION_3CR: string = '1.0.0';
    
    await registerVersion(VERSION_3CR);

    Javascript (.js)

    import { registerVersion } from '@3cr/sdk-browser';
    
    const VERSION_3CR = '1.0.0';
    
    await registerVersion(VERSION_3CR);
  2. Create HTML Canvas

    Create a canvas element within your HTML Markup and assign it an id.

    You will have to ensure that the size (width & height) both match the inline css styling and the canvas styling

    html

    <canvas
     id="renderer-canvas"
     width="1080"
     height="1920"
     tabindex="-1"
     style=" width: 1920px; height: 1080px; "
    >
    </canvas>
  3. Register response handler for 3DICOM Core Renderer Instance

    You will need to register a function that can accept the responses from the 3CR instance.

    Typescript (.ts)

    import { registerOnPayloadHandler } from '@3cr/sdk-browser';
    import { FrontEndPayload } from '@3cr/sdk-browser/types/payload';
    
    function onPayload(json: FrontEndPayload) {
      console.log("Payload recieved from 3CR!", json)
    }
    
    await registerOnPayloadHandler(onPayload);

    Javascript (.js)

    import { registerOnPayloadHandler } from '@3cr/sdk-browser';
    
    function onPayload(json) {
      console.log("Payload recieved from 3CR!", json)
    }
    
    await registerOnPayloadHandler(onPayload);
  4. Attach the 3CR Instance to the HTML Canvas

    Get the HTML Element from the DOM Object and inject it into the instance.

    Typescript (.ts)

    import { createInstance } from '@3cr/sdk-browser';
    const canvas: HTMLCanvasElement = document.querySelector('#renderer-canvas') as HTMLCanvasElement;
    
    await createInstance(canvas);

    Javascript (.js)

    import { createInstance } from '@3cr/sdk-browser';
    const canvas = document.querySelector('#renderer-canvas');
    
    await createInstance(canvas);
  5. Execute payload on Instance

    Get the HTML Element from the DOM Object and inject it into the instance.

    Typescript (.ts)

    import { executePayload } from '@3cr/sdk-browser';
    import { FrontEndInterfaces, FileManagementActions } from '@3cr/sdk-browser/types/payload';
    
    await executePayload({
       Version: '1.0.0',
       Interface: FrontEndInterfaces.file_management,
       Action: FileManagementActions.fm_01,
       Message: JSON.stringify({
          Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
          DecryptionKey: {
            Key: '<Encryption Key>',
            Iv: '<Encryption IV>'
          }
       }),
    });

    Javascript (.js)

    import { executePayload } from '@3cr/sdk-browser';
    
    await executePayload({
       Version: '1.0.0',
       Interface: 'file_management',
       Action: 'fm_01',
       Message: JSON.stringify({
          Url: 'https://somethingtodownload.com/some.3vxl.compressed.encrypted',
          DecryptionKey: {
            Key: '<Encryption Key>',
            Iv: '<Encryption IV>'
          }
       }),
    });

Contributing

Pull requests are welcome. For changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @3cr/sdk-browser

Weekly Downloads

71

Version

1.0.17

License

ISC

Unpacked Size

23.2 kB

Total Files

10

Last publish

Collaborators

  • elliottcooper