Intégration d’IHM externes

De nombreuses machines industrielles exposent leur propre IHM (Interface Homme-Machine) via un serveur web local. Ce guide montre comment rendre ces IHM accessibles depuis l’interface IronFlock en utilisant le widget Intégration, un proxy inverse nginx et des tunnels d’accès à distance.

Exemple de base : Machine unique

Le cas le plus simple est une machine CNC (ou automate, caméra, etc.) dont le serveur web IHM est accessible depuis le réseau local de l’appareil edge — par exemple à 192.168.1.50:8080.

1. Configurer l’adresse de la machine comme paramètre d’application

Utilisez un paramètre d’application pour permettre à l’utilisateur de configurer l’adresse IHM locale de la machine (par ex. 192.168.1.50:8080). Ainsi l’adresse n’est pas codée en dur et peut être définie par installation d’appareil.

2. Ajouter un proxy inverse nginx dans votre code edge

Dans la configuration Docker de votre application, incluez un conteneur nginx simple qui lit l’adresse de machine configurée et la transmet à un port fixe sur l’appareil edge — par exemple localhost:3000. Le code edge lit le paramètre d’application et configure nginx en conséquence.

3. Définir le port fixe dans votre template de port

Dans votre template de port, déclarez le port sur lequel nginx écoute :


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

Le port doit être fixe (et non attribué dynamiquement), car les ports d’accès à distance ne peuvent pas être ajoutés à l’exécution — ils sont définis lors de la publication d’une version et configurés pour chaque installation.

En déclarant le port dans port-template.yml, l’application offre un accès à distance à la machine CNC. L’installation de l’application sur un appareil de production active ce tunnel. Il reste privé — seuls les utilisateurs connectés à IronFlock ayant accès à l’appareil peuvent l’ouvrir — et les utilisateurs disposant du privilège réseau peuvent le désactiver dans les paramètres de l’application.

L’accès à distance est nécessaire ici, car l’utilisateur qui accède à l’IHM se trouve sur son ordinateur portable local, et non sur le réseau de l’appareil edge. La technologie de tunnel d’IronFlock établit une connexion sécurisée depuis le navigateur de l’utilisateur jusqu’au port transféré de l’appareil edge.

Dans l’UI Builder, ajoutez un widget Intégration pointant vers l’adresse du tunnel d’accès à distance de l’appareil sur le port 3000. L’IHM originale de la machine CNC apparaît directement dans le board IronFlock.

Cette configuration de base vous donne un accès à distance à l’IHM d’une seule machine par appareil — sans VPN, sans modification du pare-feu.

Avancé : Plusieurs machines par appareil

Quand un appareil edge est connecté à plusieurs machines, vous pouvez étendre ce modèle pour servir toutes leurs IHM via un seul port transféré en utilisant le routage par chemin.

1. Stocker les adresses des machines dans une table backend de données

Ajoutez une table à votre backend de données qui suit les détails de chaque machine, incluant l’adresse du serveur web local et le chemin transféré :


# .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. Router plusieurs machines via nginx

Configurez nginx comme proxy inverse de chaque machine sur un chemin distinct du même port fixe. Par exemple, transférez 192.168.1.50:8080 vers localhost:3000/cnc1/ et 192.168.1.51:8080 vers localhost:3000/cnc2/. Reportez ces chemins transférés dans la table machines afin que le board sache où trouver chaque IHM.

Le même port fixe et le même template de port que dans l’exemple de base s’appliquent — un seul port sert toutes les machines via des chemins différents.

Dans l’UI Builder, créez une page de board séparée pour l’IHM de chaque machine et ajoutez sur chaque page un widget Intégration qui lit le forwarded_hmi_path depuis la table machines et l’utilise comme URL d’intégration.

Pour permettre aux utilisateurs de passer d’une IHM à l’autre, utilisez la fonctionnalité Pages et navigation. Ajoutez un widget Navigation latérale qui liste toutes les machines connectées sous forme de menu de barre latérale vertical. Les éléments de la barre latérale peuvent être générés dynamiquement à partir de la table machines, de sorte que les nouvelles machines apparaissent automatiquement. Lorsqu’un utilisateur clique sur le nom d’une machine, le board navigue vers la page correspondante et le widget Intégration de cette page charge la bonne IHM.

Le résultat

Les utilisateurs peuvent parcourir toutes les machines connectées dans le board, en sélectionner une et interagir avec son IHM originale directement dans IronFlock — sans VPN, sans onglet de navigateur séparé, sans configuration de pare-feu. Le widget Intégration, le backend de données et le tunnel d’accès à distance fonctionnent ensemble pour créer une interface de contrôle unifiée et sécurisée pour toute une flotte de machines.