Embedding External HMIs

Many industrial machines expose their own HMI (Human-Machine Interface) through a local webserver. This guide shows how to make those HMIs accessible from the IronFlock UI using the Embed widget, an nginx reverse proxy, and remote access tunnels.

Basic Example: Single Machine

The simplest case is a single CNC machine (or PLC, camera, etc.) whose HMI webserver is reachable from the edge device’s local network — for example at 192.168.1.50:8080.

1. Configure the machine address as an app parameter

Use an app parameter to let the user configure the machine’s local HMI address (e.g. 192.168.1.50:8080). This way the address is not hardcoded and can be set per device installation.

2. Add an nginx reverse proxy in your edge code

In your app’s Docker setup, include a simple nginx container that reads the configured machine address and forwards it to a fixed port on the edge device — for example localhost:3000. The edge code reads the app parameter and configures nginx accordingly.

3. Define the fixed port in your port template

In your port template, declare the port that nginx listens on:


# .ironflock/port-template.yml
ports:
  - name: CNC Machine HMI
    port: 3000
    main: false

The port must be fixed (not dynamically assigned) because remote access ports cannot be added at runtime — they are defined at release time and configured per installation.

By declaring the port in port-template.yml, project admins can enable or disable remote access to the CNC machine in the app settings. When the app is first installed on a device, the user must explicitly allow remote access to this port in the installation settings. This is a security feature — remote access is not enabled by default.

Remote access is required here because the user accessing the HMI is on their local laptop, not on the edge device’s network. IronFlock’s tunnel technology creates a secure connection from the user’s browser through to the edge device’s forwarded port.

In the UI Builder, add an Embed widget that points to the device’s remote access tunnel address on port 3000. The CNC machine’s original HMI now appears directly inside the IronFlock board.

This basic setup gives you remote access to a single machine’s HMI per device — no VPN, no firewall changes.

Advanced: Multiple Machines per Device

When an edge device is connected to several machines, you can extend the pattern to serve all of their HMIs through a single forwarded port using path-based routing.

1. Store machine addresses in a data backend table

Add a table to your data backend that tracks each machine’s details, including the local webserver address and the forwarded path:


# .ironflock/data-template.yml
data:
  tables:
    - tablename: machines
      maintainLatestFlagFor: ['machine_id']
      columns:
        - id: tsp
          dataType: timestamp
        - id: machine_id
          dataType: string
        - id: name
          dataType: string
        - id: local_hmi_address
          dataType: string
        - id: forwarded_hmi_path
          dataType: string

2. Route multiple machines through nginx

Configure nginx to reverse-proxy each machine on a separate path under the same fixed port. For example, forward 192.168.1.50:8080 to localhost:3000/cnc1/ and 192.168.1.51:8080 to localhost:3000/cnc2/. Store these forwarded paths back into the machines table so the board knows where to find each HMI.

The same fixed port and port template from the basic example applies — one port serves all machines via different paths.

In the UI Builder, create a separate board page for each machine’s HMI and add an Embed widget on each page that reads the forwarded_hmi_path from the machines table and uses it as the embed URL.

To let users switch between HMIs, use the Pages & Navigation feature. Add a Side Navigation widget that lists all connected machines as a vertical sidebar menu. The sidebar items can be generated dynamically from the machines table so that new machines appear automatically. When a user clicks a machine name, the board navigates to the corresponding page and the Embed widget on that page loads the correct HMI.

The Result

Users can browse through all connected machines in the board, select one, and interact with its original HMI directly within IronFlock — no VPN, no separate browser tab, no firewall configuration. The embed widget, data backend, and remote access tunnel work together to create a unified and secure control surface for an entire fleet of machines.