@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