OHIF Remote

Library for host applications to control the OHIF viewer using iframe postMessage RPC

Getting Started

Install this package with NPM.

npm install @flywheel-io/ohif-remote

Import OHIFRemote and attach it to a new or existing OHIF viewer iframe. This example creates a new iframe pointing to https://dev.flywheel.io/ohif-viewer?remote. The ?remote query parameter is important, and tells the OHIF viewer to wait for a connection before initializing.

Register event callbacks and connect to the OHIF viewer. Invoke methods (set project and open task) within the Init event callback.

import { OHIFRemote, RemoteEvent } from '@flywheel-io/ohif-remote';

(function init() {
  const $iframe = document.createElement('iframe');
  $iframe.src = 'https://dev.flywheel.io/ohif-viewer?remote';
  $iframe.style.width = 'calc(100vw - 24px)';
  $iframe.style.height = 'calc(100vh - 24px)';
  document.body.appendChild($iframe);

  $iframe.addEventListener('load', () => {
    const ohif = new OHIFRemote({
      receiveWindow: window,
      sendWindow: $iframe.contentWindow,
      targetUrl: $iframe.src,
    });
    ohif.on(RemoteEvent.Init, () => {
      console.log('OHIFRemote initialized');
      ohif
        .setProject('61095a04703bfa1fdbcf6613')
        .openTask('61655e0434090f77efe5ec0e');
    });
    ohif.on(RemoteEvent.TaskOpened, ({ task }) => {
      console.log(`Task ${task._id} opened`);
    });
    ohif.connect();
  });
}());

Events and Methods

A connected OHIFRemote instance can listen to events from and issue methods to the OHIF viewer.

Listening to an event example:

ohif.on(RemoteEvent.TaskOpened, ({ task }) => {
  console.log(`Task ${task._id} opened`);
});

Calling methods example:

ohif
  .setProject('61095a04703bfa1fdbcf6613')
  .openTask('61655e0434090f77efe5ec0e');