Summary

The HTML code examples in this document show how to integrate ImageMover solutions with other applications, such as electronic health records.

The audience for this document is IT personnel.

Introduction

To integrate with ImageMover solutions using HTML, please refer to the fully-functional code examples below. These examples provide the following outcomes:

A minimum integration example that generates a QR code for use with ImageMover Mobile
A full integration example that displays a QR code, patient demographics, and ImageMover labeling for use with ImageMover Mobile
A full integration for uploading DICOM files in ImageMover Media
A full integration for uploading multimedia files in ImageMover Media
A full integration for both ImageMover Mobile and ImageMover Media which provides multiple tabs for navigating to either application.

These examples provide flexible integration for any web-based integration – read on for solution-specific integration details.

ImageMover Mobile

Get started with ImageMover Mobile by generating a QR code. To generate a QR code, the first step is to get patient demographics from the EHR. In the HTML examples below, pass the patient demographics to the ImageMover Server. The ImageMover Server will generate the QR code that is displayed in the EHR. The first code example has been simplified to display only the QR code. The second example displays the full ImageMover Mobile user interface.

ImageMover Media

To get started with ImageMover Media integration, pass patient demographics provided by the EHR using the third and fourth code examples below. If enabled, you can also use this example without patient demographics to directly upload media to PACS/VNA without EHR integration.

Multiple applications

Use the final example to integrate multiple ImageMover applications with the Application Tabs interface. When using this integration method, you can configure the available Application Tabs on the ImageMover Server.

Implementation notes

You must have access to an ImageMover Server for the code examples to function correctly.
In the examples below, replace <hostname> with the fully-qualified domain name (FQDN) of your ImageMover Server.
In the examples below, patient demographic parameters have been inserted directly into the custom HTML element, typically using .asp or .php programming in an EHR or patient portal. For comparison, passing this URL string to the ImageMover Server will produce an equivalent result:

?mrn=A11171&name=PATIENT^TEST&dob=195003108&sex=F&acc=139099876&date=20170101

HTML integration examples

Minimum QR code integration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Script Tag needs to be included in Head or somewhere on the page, don't lazy load -->
    <script type="text/javascript" id="witsjs" src="https://<hostname>/script/wits.script.min.js"></script>
</head>
<body>

    <!-- Min Example App Setup -->
    <div lang="en" ng-app="witsMD"> 
        <qrcodepage min='true' params='{name: "PATIENT^TEST^", dob: "19500310", mrn:"A11171", acc:"139099876", date:"20050620", gender: "F", studyDescription:"SURGERY"}'></qrcodepage>
    </div>

</body>
</html>

Full QR code integration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Script Tag needs to be included in Head or somewhere on the page, don't lazy load -->
    <script type="text/javascript" id="witsjs" src="https://<hostname>/script/wits.script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://<hostname>/css/wits.css">   
</head>
<body>
  
    <!-- Example App Setup -->
    <div lang="en" ng-app="witsMD"> 
        <qrcodepage params='{name: "PATIENT^TEST^", dob: "19500310", mrn:"A11171", acc:"139099876", date:"20170101", gender: "F", studyDescription:"SURGERY"}'></qrcodepage>
    </div>

</body>
</html>

DICOM Uploader integration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Script Tag needs to be included in Head or somewhere on the page, don't lazy load -->
    <script type="text/javascript" id="witsjs" src="https://<hostname>/script/wits.script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://<hostname>/css/wits.css">  
</head>
<body>

    <!-- Example Uploader App Setup -->
    <div lang="en" ng-app="witsMD"> 
        <uploaderpage type="dicom" params='{name: "PATIENT^TEST^", dob: "19500310", mrn:"A11171", acc:"139099876", date:"20170101", gender: "F", studyDescription:"SURGERY"}'></uploaderpage>
    </div>

</body>
</html>

Multimedia Uploader integration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Script Tag needs to be included in Head or somewhere on the page, don't lazy load -->
    <script type="text/javascript" id="witsjs" src="https://<hostname>/script/wits.script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://<hostname>/css/wits.css">  
</head>
<body>

    <!-- Example Uploader App Setup -->
    <div lang="en" ng-app="witsMD"> 
        <uploaderpage type="media" params='{name: "PATIENT^TEST^", dob: "19500310", mrn:"A11171", acc:"139099876", date:"20170101", gender: "F", studyDescription:"SURGERY"}'></uploaderpage>
    </div>

</body>
</html>

Multiple Application Tabs integration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- Script Tag needs to be included in Head or somewhere on the page, don't lazy load -->
    <script type="text/javascript" id="witsjs" src="https://<hostname>/script/wits.script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://<hostname>/css/wits.css">  
</head>
<body>

    <!-- Example Multiple App Setup -->
    <div lang="en" ng-app="witsMD"> 
        <imageconnect params='{name: "PATIENT^TEST^", dob: "19500310", mrn:"A11171", acc:"139099876", date:"20050620", gender: "F", studyDescription:"SURGERY"}'></imageconnect>
    </div>

</body>
</html>

Support

For additional questions about ImageMover, please contact us:

ImageMoverMD

Customer Documentation

Technical Note: HTML Integration Examples - RevB