diff --git a/docs/latest/SUMMARY.md b/docs/latest/SUMMARY.md index 4d644d42c..e8a3c2f4e 100644 --- a/docs/latest/SUMMARY.md +++ b/docs/latest/SUMMARY.md @@ -27,7 +27,7 @@ --- - [Deployment](deployment/index.md) - - [Embed the Viewer](deployment/script-tag.md)) + - [Embed the Viewer](deployment/embedded-viewer.md)) - [Connecting to Image Archives](data/index.md) --- diff --git a/docs/latest/deployment/_embedded-viewer-diagram.md b/docs/latest/deployment/_embedded-viewer-diagram.md new file mode 100644 index 000000000..6af9e0a30 --- /dev/null +++ b/docs/latest/deployment/_embedded-viewer-diagram.md @@ -0,0 +1,4 @@ +
+ Embedded Viewer Diagram +
embedded viewer diagram
+
diff --git a/docs/latest/deployment/embedded-viewer.md b/docs/latest/deployment/embedded-viewer.md new file mode 100644 index 000000000..c4e4c2eb5 --- /dev/null +++ b/docs/latest/deployment/embedded-viewer.md @@ -0,0 +1,109 @@ +# Embedded Viewer + +The quickest and easiest way to get the OHIF Viewer up and running is to embed +it into an existing web application. It allows us to forego a "build step", and +add a powerful medical imaging viewer to an existing web page using only a few +include tags. Here's how it works: + +{% include "./_embedded-viewer-diagram.md" %} + +1. Create a new web page or template that includes the following external + dependencies: + + + +
    +
  1. the HTML base tag
    2. +
  2. The WADO Image Loader Codecs and Web Worker source code + should be accessible from your server's root
    3. +
  3. Create a JS Object to hold the OHIF Viewer's configuration. Here are some + example values that would allow the viewer to hit our public PACS:
    4. +
+ +```js +var props = { + // Directory your application runs in (e.g. /viewer/) + routerBasename: '/', + rootUrl: 'https://lrjoo3znxm.codesandbox.io', + servers: { + dicomWeb: [ + { + name: 'DCM4CHEE', + wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado', + qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', + wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', + qidoSupportsIncludeField: true, + imageRendering: 'wadors', + thumbnailRendering: 'wadors', + requestOptions: { + requestFromBrowser: true, + }, + }, + ], + }, +} +``` + +
  1. + Render the viewer in the web page's target div +
+ +```js +// Made available by the `ohif-viewer` script included in step 1 +var Viewer = window.OHIFStandaloneViewer.App +var app = React.createElement(Viewer, props, null) + +ReactDOM.render(app, document.getElementById('ohif-viewer-target')) +``` + +#### Tips & Tricks + +> I'm having trouble getting this to work. Where can I go for help? + +First, check out this fully functional +[CodeSandbox](https://codesandbox.io/s/lrjoo3znxm) example. If you're still +having trouble, feel free to search or GitHub issues. Can't find anything +related your problem? Create a new one. + +> When I include bootstrap, other styles on my page no longer work correctly. +> What can I do? + +When we include `bootsrap` (and the other dependencies), they are added +globally. This has the potential of causing conflicts with other scripts and +styles on the page. To prevent this, `embed` the viewer in a new/empty web page. +Have that working? Good. Now `embed` that new page using an +[` - -## Important notes: - -- You must correctly specify `rootUrl` **and** the HTML `` tag. -- If your application runs in a subdirectory (e.g. /viewer/), this must be specified in `routerBasename` -- Currently, the WADO Image Loader Codecs and Web Worker source code must also be server at the ROOT URL