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. 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.

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

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.

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

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