Ecosystem integration for installing and running 3DICOM Core Renderer (3CR) within the Browser (client-side)
Use the package manager npm or yarn to install @3cr/sdk-browser
npm
npm install @3cr/sdk-browser
yarn
yarn add @3cr/sdk-browser
-
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);
-
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>
-
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);
-
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);
-
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>' } }), });
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.