103 lines
3.2 KiB
Markdown
103 lines
3.2 KiB
Markdown
# 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://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
|
|
<code>Google Font: Roboto</code>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://unpkg.com/@ohif/viewer">
|
|
<code>@ohif/viewer@latest</code>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<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>
|
|
|
|
```js
|
|
// Set before importing `ohif-viewer`
|
|
window.config = {
|
|
// default: '/'
|
|
routerBasename: '/',
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
<ol start="5"><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 containerId = 'id-of-div-to-render-component-to';
|
|
var componentRenderedOrUpdatedCallback = function() {
|
|
console.log('OHIF Viewer rendered/updated');
|
|
};
|
|
window.OHIFViewer.installViewer(
|
|
window.config,
|
|
containerId,
|
|
componentRenderedOrUpdatedCallback
|
|
);
|
|
```
|
|
|
|
#### Tips & Tricks
|
|
|
|
> I'm having trouble getting this to work. Where can I go for help?
|
|
|
|
First, check out this fully functional [CodeSandbox][code-sandbox] 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.
|
|
|
|
> My application's styles are impacting the OHIF Viewer's look and feel. What
|
|
> can I do?
|
|
|
|
When you include stylesheets and scripts, 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.
|
|
|
|
> We're trying to embed the OHIF Viewer into an existing React App, but seeing
|
|
> react-dom and react conflicts. What can we do?
|
|
|
|
`installViewer` is a convenience method that pulls in some dependencies that may
|
|
not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
|
|
which is a react component that takes the `configuration` outlined above as
|
|
props. You can use it as a reusable component, and to avoid `react` version
|
|
conflict issues.
|
|
|
|
<!--
|
|
LINKS
|
|
-->
|
|
|
|
[code-sandbox]: https://codesandbox.io/s/ohif-script-tag-v103-iniiu
|