Embedded viewer docs
This commit is contained in:
dannyrb
parent
3b8987ecb1
commit
223d986f82
@ -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)
|
||||
|
||||
---
|
||||
|
||||
4
docs/latest/deployment/_embedded-viewer-diagram.md
Normal file
4
docs/latest/deployment/_embedded-viewer-diagram.md
Normal file
@ -0,0 +1,4 @@
|
||||
<div style="text-align: center;">
|
||||
<img src="/assets/img/embedded-viewer-diagram.png" alt="Embedded Viewer Diagram" style="margin: 0 auto;" />
|
||||
<div><i>embedded viewer diagram</i></div>
|
||||
</div>
|
||||
109
docs/latest/deployment/embedded-viewer.md
Normal file
109
docs/latest/deployment/embedded-viewer.md
Normal file
@ -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:
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<code>bootstrap@3.3.7</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://fonts.googleapis.com/css?family=Sanchez">
|
||||
<code>Google Font @ Sanchez</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
|
||||
<code>fontawesome@5.7.2</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/react@16/umd/react.production.min.js">
|
||||
<code>react@16.8.6</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
|
||||
<code>react-dom@16.8.6</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/ohif-viewer/dist/index.umd.js">
|
||||
<code>ohif-viewer@latest</code>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ol start="2">
|
||||
<li>the HTML <code>base</code> tag</li>
|
||||
<li>The <a href="">WADO Image Loader Codecs and Web Worker source code</a>
|
||||
should be accessible from your server's root</li>
|
||||
<li>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:</li>
|
||||
</ol>
|
||||
|
||||
```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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
<ol start="3"><li>
|
||||
Render the viewer in the web page's target <code>div</code>
|
||||
</li></ol>
|
||||
|
||||
```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
|
||||
[`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
|
||||
|
||||
This should produce the expected result while also protecting your page from any
|
||||
globally defined styles/scripts.
|
||||
@ -1,124 +1,43 @@
|
||||
# Deployment
|
||||
|
||||
The OHIF Viewer can be embedded in other web applications via it's [packaged
|
||||
script source][ohif-viewer-npm], or as a standalone PWA ([progressive web
|
||||
application][pwa-url] by building and hosting a collection of static assets. In
|
||||
either case, you will need to configure your instance of the Viewer so that it
|
||||
can connect to your data source (the database or PACS that provides the data
|
||||
script source][ohif-viewer-npm], or served up as a stand-alone PWA ([progressive
|
||||
web application][pwa-url] by building and hosting a collection of static assets.
|
||||
In either case, you will need to configure your instance of the Viewer so that
|
||||
it can connect to your data source (the database or PACS that provides the data
|
||||
your Viewer will display). Let's unpack that a little:
|
||||
|
||||
## Overview
|
||||
|
||||
The OHIF Viewer is a tool. It
|
||||
Our goal is to make deployment as simple and painless as possible; however,
|
||||
there is an inherent amount of complexity in customizing, optimizing, and
|
||||
deploying web applications. If
|
||||
|
||||
## Deployment Scenarios
|
||||
|
||||
### 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 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.
|
||||
|
||||
<div style="text-align: center;">
|
||||
<img src="/assets/img/embedded-viewer-diagram.png" alt="Embedded Viewer Diagram" style="margin: 0 auto;" />
|
||||
<i>embedded viewer diagram</i>
|
||||
</div>
|
||||
- Read more about it here: [Embedded Viewer](/deployment/embedded-viewer.html)
|
||||
- And check out our
|
||||
[live demo on CodeSandbox](https://codesandbox.io/s/lrjoo3znxm)
|
||||
|
||||
1. Create a new web page or template that includes the following external
|
||||
dependencies:
|
||||
{% include "./_embedded-viewer-diagram.md" %}
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<code>bootstrap@3.3.7</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://fonts.googleapis.com/css?family=Sanchez">
|
||||
<code>Google Font @ Sanchez</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
|
||||
<code>fontawesome@5.7.2</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/react@16/umd/react.production.min.js">
|
||||
<code>react@16.8.6</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
|
||||
<code>react-dom@16.8.6</code>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://unpkg.com/ohif-viewer/dist/index.umd.js">
|
||||
<code>ohif-viewer@latest</code>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
### Stand-alone Viewer
|
||||
|
||||
<ol start="2"><li>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:</li></ol>
|
||||
Deploying the OHIF Viewer as a stand-alone web application provides many
|
||||
benefits, but comes at the cost of time and complexity.
|
||||
|
||||
```js
|
||||
var props = {
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
#### Hosted Static Assets
|
||||
|
||||
<ol start="3"><li>
|
||||
Render the viewer in the web page's target <code>div</code>
|
||||
</li></ol>
|
||||
...
|
||||
|
||||
```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
|
||||
[`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
|
||||
|
||||
This should produce the expected result while also protecting your page from any
|
||||
globally defined styles/scripts.
|
||||
|
||||
### PWA Built From Source
|
||||
#### Docker
|
||||
|
||||
...
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
# Embed the viewer using a script tag
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/lrjoo3znxm?fontsize=14" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
|
||||
|
||||
## Important notes:
|
||||
|
||||
- You must correctly specify `rootUrl` **and** the HTML `<base>` 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
|
||||
Loading…
Reference in New Issue
Block a user