Incorporare HMI Esterni

Molte macchine industriali espongono il proprio HMI (Human-Machine Interface) tramite un webserver locale. Questa guida mostra come rendere quegli HMI accessibili dall’interfaccia IronFlock usando il widget Embed, un reverse proxy nginx e i tunnel di accesso remoto.

Esempio Base: Macchina Singola

Il caso più semplice è una singola macchina CNC (o PLC, telecamera, ecc.) il cui webserver HMI è raggiungibile dalla rete locale del dispositivo edge — per esempio su 192.168.1.50:8080.

1. Configura l’indirizzo della macchina come parametro dell’app

Usa un parametro dell’app per consentire all’utente di configurare l’indirizzo HMI locale della macchina (es. 192.168.1.50:8080). In questo modo l’indirizzo non è hardcoded e può essere impostato per ogni installazione su dispositivo.

2. Aggiungi un reverse proxy nginx nel codice edge

Nella configurazione Docker dell’app, includi un semplice container nginx che legge l’indirizzo della macchina configurato e lo instrada su una porta fissa del dispositivo edge — per esempio localhost:3000. Il codice edge legge il parametro dell’app e configura nginx di conseguenza.

3. Definisci la porta fissa nel port template

Nel tuo port template, dichiara la porta su cui nginx rimane in ascolto:


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

La porta deve essere fissa (non assegnata dinamicamente) perché le porte di accesso remoto non possono essere aggiunte in fase di esecuzione — vengono definite al momento della release e configurate per ogni installazione.

Dichiarando la porta in port-template.yml, gli amministratori del progetto possono abilitare o disabilitare l’accesso remoto alla macchina CNC nelle impostazioni dell’app. Quando l’app viene installata per la prima volta su un dispositivo, l’utente deve autorizzare esplicitamente l’accesso remoto a questa porta nelle impostazioni di installazione. Questa è una funzionalità di sicurezza — l’accesso remoto non è abilitato per impostazione predefinita.

L’accesso remoto è necessario in questo caso perché l’utente che accede all’HMI si trova sul proprio laptop locale, non sulla rete del dispositivo edge. La tecnologia tunnel di IronFlock crea una connessione sicura dal browser dell’utente fino alla porta inoltrata del dispositivo edge.

Nell’UI Builder, aggiungi un widget Embed che punta all’indirizzo del tunnel di accesso remoto del dispositivo sulla porta 3000. L’HMI originale della macchina CNC appare direttamente all’interno della board IronFlock.

Questa configurazione base fornisce accesso remoto all’HMI di una singola macchina per dispositivo — senza VPN, senza modifiche al firewall.

Avanzato: Più Macchine per Dispositivo

Quando un dispositivo edge è connesso a più macchine, puoi estendere il pattern per servire tutti i loro HMI attraverso una singola porta inoltrata usando il routing basato su percorso.

1. Memorizza gli indirizzi delle macchine in una tabella del data backend

Aggiungi una tabella al tuo data backend che tiene traccia dei dettagli di ogni macchina, incluso l’indirizzo del webserver locale e il percorso inoltrato:


# .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. Instrada più macchine attraverso nginx

Configura nginx per effettuare il reverse-proxy di ogni macchina su un percorso separato sotto la stessa porta fissa. Per esempio, instrada 192.168.1.50:8080 su localhost:3000/cnc1/ e 192.168.1.51:8080 su localhost:3000/cnc2/. Memorizza questi percorsi inoltrati nella tabella machines in modo che la board sappia dove trovare ogni HMI.

La stessa porta fissa e lo stesso port template dell’esempio base si applicano — una porta serve tutte le macchine tramite percorsi diversi.

Nell’UI Builder, crea una pagina della board separata per ogni HMI di macchina e aggiungi un widget Embed su ciascuna pagina che legge il forwarded_hmi_path dalla tabella machines e lo usa come URL di incorporamento.

Per consentire agli utenti di passare da un HMI all’altro, usa la funzionalità Pagine e Navigazione. Aggiungi un widget Side Navigation che elenca tutte le macchine connesse come menu laterale verticale. Gli elementi della barra laterale possono essere generati dinamicamente dalla tabella machines in modo che le nuove macchine appaiano automaticamente. Quando un utente clicca sul nome di una macchina, la board naviga alla pagina corrispondente e il widget Embed su quella pagina carica l’HMI corretto.

Il Risultato

Gli utenti possono scorrere tutte le macchine connesse nella board, selezionarne una e interagire con il suo HMI originale direttamente all’interno di IronFlock — senza VPN, senza schede separate del browser, senza configurazione del firewall. Il widget embed, il data backend e il tunnel di accesso remoto lavorano insieme per creare una superficie di controllo unificata e sicura per un’intera flotta di macchine.