> For the complete documentation index, see [llms.txt](https://docs.roboflow.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roboflow.com/workflows/tutorials/integrate-with-ignition/embed-the-device-hmi.md).

# Embed the Device HMI

Put the Roboflow Device HMI, with its live video and recent detections, on an Ignition Perspective or Vision screen.

Every edge device managed in Deployment Manager runs the Device HMI, an operator screen with the live camera feed, the pass rate, and recent detections. Embedding it in Ignition is the fastest way to put Roboflow on your operators' screens: one component, no scripting.

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-52102ca0b3bc7f010f5f77ca8c62f0e14b161241%2Fignition-device-hmi-embed.png?alt=media" alt="An Ignition Perspective view named Bottle Line 1 with the Roboflow Device HMI embedded in an Inline Frame, showing a live annotated feed, a 78.7 percent pass rate, and recent pass and fail detections"><figcaption><p>The Device HMI in a Perspective Inline Frame.</p></figcaption></figure>

The HMI is a Roboflow screen inside your Ignition view. Ignition cannot read values from it or send it tag values. To use Roboflow results in Ignition's own tags, alarms, and screens, see [Live Data](/workflows/tutorials/integrate-with-ignition/live-data.md), [Live Video](/workflows/tutorials/integrate-with-ignition/live-video.md), and [Historical Data](/workflows/tutorials/integrate-with-ignition/historical-data.md).

{% hint style="info" %}
These steps and screenshots are from Ignition 8.1 (Designer 8.1.55). Menu names, dialogs, and property names can differ in other versions, including 8.3.
{% endhint %}

## Prerequisites

* An edge device managed in [Deployment Manager](https://docs.roboflow.com/deployment/self-hosted/enterprise/deployment-manager), running at least one stream.
* Every computer that shows the view must reach the device on port `3000`. The HMI loads in the operator's browser, not on the Ignition gateway. It reads video and events from the device's other services itself, so clients need no other port.

## Find the HMI Address

The HMI runs at `http://<device-ip>:3000`. The device's card in Deployment Manager links to it. Pick what to embed:

<table data-search="false"><thead><tr><th>Address</th><th>Shows</th></tr></thead><tbody><tr><td><code>http://&#x3C;device-ip>:3000/</code></td><td>The whole HMI: live feed, pass rate, and recent detections</td></tr><tr><td><code>http://&#x3C;device-ip>:3000/stream/&#x3C;stream></code></td><td>One stream's video, full screen, with nothing around it</td></tr></tbody></table>

`<stream>` is the stream's name. In the HMI, the open-in-new-tab icon on a stream's tab opens its address.

Open the address in a browser on an operator's computer before you add it to Ignition. Give the device a fixed IP address or a DNS name, because Ignition stores the address.

## Perspective

1. In Designer, open a Perspective view and drag an "Inline Frame" component onto it.
2. Set `props.src` to the HMI address.
3. Size the component. For one stream, keep it close to the camera's shape (ex: 16:9).

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-45436383c06d632d963e3e0074804b6d195682d3%2Fignition-designer-hmi-inline-frame.png?alt=media" alt="Ignition Designer with a Perspective view showing the Roboflow Device HMI in an Inline Frame, and the Property Editor with src set to http://192.168.10.57:3000/"><figcaption><p>The Device HMI in an Inline Frame. It loads in the Designer too.</p></figcaption></figure>

To use one view for every line, add a `deviceHost` view parameter and bind `props.src` to an expression:

```
"http://" + {view.params.deviceHost} + ":3000/"
```

### Perspective Over HTTPS

The HMI is served over HTTP. Browsers block an `http://` page inside a page loaded over `https://`, so if your Perspective sessions use HTTPS, the frame stays blank. Put an HTTPS reverse proxy in front of the HMI and use its `https://` address, or open the sessions over HTTP on the plant network.

## Vision

1. In Designer, open a Vision window and drag a "Web Browser" component onto it. It's in the "Web Browser" group of the Component Palette.
2. In the Vision Property Editor, under "Data", keep "Mode" set to "URL" and set "Starting URL" to the HMI address.
3. To hide the browser's address bar, turn off "Show Navigation Buttons" under "Behavior".

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-13d2380d602dab774927f20a105303210d277156%2Fignition-vision-hmi-web-browser.png?alt=media" alt="Ignition Designer with a Vision window showing the Roboflow Device HMI in a Web Browser component, and the Vision Property Editor with Mode set to URL and Starting URL set to http://192.168.10.57:3000/"><figcaption><p>The Device HMI in a Vision Web Browser component.</p></figcaption></figure>

In Ignition 8.1 the Web Browser component comes from the Web Browser module, which is installed and licensed on its own. In 8.3 it is part of Vision. The component shows the HMI as its own page, so the HTTPS limit above doesn't apply to Vision. Learn more about the [Web Browser component](https://docs.inductiveautomation.com/docs/8.3/appendix/components/vision-components/misc/web-browser).

## Troubleshooting

<table data-search="false"><thead><tr><th>Problem</th><th>Fix</th></tr></thead><tbody><tr><td>The frame is blank in a session over HTTPS</td><td>The browser blocks the mixed content. See Perspective Over HTTPS.</td></tr><tr><td>The frame shows "This site can't be reached"</td><td>Open the HMI address in a browser on the same computer. If it fails there, the computer can't reach the device on port <code>3000</code>.</td></tr><tr><td>The HMI loads, but the video area is empty</td><td>The stream name in the address doesn't match a running stream. Check the stream in Deployment Manager.</td></tr><tr><td>"Device settings" won't unlock inside Ignition</td><td>Open the HMI address in its own browser tab to change device settings.</td></tr></tbody></table>

## Security

The HMI's live view has no sign-in. Anyone who can reach the device on port `3000` can watch the video. Keep the device on a trusted network, and change the default "Device settings" password.