@3cr/viewer-browser-development

Ecosystem integration for installing and running 3DICOM Online Viewer (3CR-OV) within the Browser (client-side)

3DICOM Online Viewer (3CR-OV) Playground

Include @3cr/viewer-browser-development script

Choose one of the following ways

• HTML Script Tag

  Insert this line into your index.html

  <script src="https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@{{version}}/dist/Viewer3CR.umd.js"> </script>

  Note: Please ensure you replace the {{version}} with the version of the viewer you want.

• JS/TS way

  You can also include it dynamically within your code.

  Typescript (.ts)

  export async function loadViewerScript(version: string): Promise<void> {
    return new Promise<void>((resolve) => {
      const s = document.createElement('script');
      s.onload = () => {
        resolve()
      }
      s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@${version}/dist/Viewer3CR.umd.js`;
      document.head.appendChild(s);
    })
  }
  
  // ...
  
  await loadViewerScript("1.0.0");

  Javascript (.js)

  export async function loadViewerScript(version) {
    return new Promise((resolve) => {
      const s = document.createElement('script');
      s.onload = () => {
        resolve()
      }
      s.src = `https://cdn.jsdelivr.net/npm/@3cr/viewer-browser-development@${version}/dist/Viewer3CR.umd.js`;
      document.head.appendChild(s);
    })
  }
   
  // ...
  
  await loadViewerScript("1.0.0");

Using the Package

1. Register 3DICOM Online Viewer version

   Call the registerViewer function with the version of 3CR you would like to view. This will generate a new container to load the viewer within and register the 3CR Instance.

   Typescript (.ts) / Javascript (.js)

   const VERSION_3CR: string = '1.0.0';
   
   await window.registerViewer(VERSION_3CR)

2. Load in the 3VXL file

   Generate the 3VXL file and Decryption Key/Iv and supply that to the loadViewer function

   Note: You can supply undefined/nothing to the loadViewer() function to display a default scan for testing purposes.

   Typescript (.ts) / Javascript (.js)

   const payload = {
     Url: "<Some presigned URL to a 3VXL file.>",
     DecryptionKey: {
       Iv: "<Initialisation Vector of the Key>",
       Key: "<Decryption Key>"
     }
   }
   await window.loadViewer(payload)
   
   // OR
   
   await window.loadViewer()

3. (Optional) Clean up

   In order to ensure the css namespace and data from the viewer is cleaned up and removed after execution, call ejectViewer

   Note: You may also want to clean up the initial script you loaded on your site, by removing the nodes of the script you created in Include @3cr/viewer-browser-development script

   Typescript (.ts) / Javascript (.js)

   await window.ejectViewer()

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