web-hmi-development

name	web-hmi-development
description	Développer des IHMs web industrielles en HTML, CSS et JS.
version	1.1.0
author	EVA
license	Privée EVA St-Étienne
platforms	["windows","linux"]
metadata	{"tags":["web-hmi","html5","css3","javascript","ignition-perspective","wincc-unified","svg","webvisu","websocket"],"related_skills":["scada-hmi-programming-languages","ot-it-integration-languages"]}

Développement d'IHM Web Modernes pour les Systèmes SCADA et de Supervision

Cette compétence encadre le développement d'interfaces homme-machine (IHM) basées sur les standards du web (HTML5, CSS3, JavaScript) pour les plateformes de supervision modernes comme Ignition Perspective, Siemens WinCC Unified ou CODESYS WebVisu.

---

1. Scripting et Subscription d'Événements avec l'API WinCC Unified

WinCC Unified n'utilise plus les scripts C/VBS legacy. Les animations et traitements asynchrones s'appuient sur un runtime JavaScript moderne. Le script ci-dessous montre comment s'abonner de manière optimale à un groupe de variables PLC (Tags) pour mettre à jour l'interface sans latence.

// Connexion et abonnement asynchrone à un groupe de Tags dans WinCC Unified
let tagGroup = HMIRuntime.Tags.CreateTagSet();

// Ajout des variables a surveiller
tagGroup.Add("Tag_Mesure_Debit");
tagGroup.Add("Tag_Vanne_Statut");
tagGroup.Add("Tag_Alerte_Niveau");

// Lecture asynchrone avec callback
tagGroup.ReadAsync(function(errorCode, tagValues) {
    if (errorCode === 0) {
        // Traitement initial
        UpdateHmiDisplay(tagValues);
    } else {
        HMIRuntime.Trace("Erreur lors de la lecture asynchrone du groupe de Tags : " + errorCode);
    }
});

function UpdateHmiDisplay(tagValues) {
    // 1. Mise a jour de la mesure de debit
    let debitItem = Screen.Items("Text_Debit");
    debitItem.Text = tagValues("Tag_Mesure_Debit").Value.toFixed(2) + " m3/h";

    // 2. Gestion de l'affichage de la vanne (couleur dynamique)
    let vanneWidget = Screen.Items("Vanne_Widget");
    let statut = ().;
    
    (statut) {
         : 
            vanneWidget. = ; 
            ;
         : 
            vanneWidget. = ; 
            ;
         : 
            vanneWidget. = ; 
            ;
        : 
            vanneWidget. = ; 
    }
}

---

2. Graphiques Vectoriels SVG Dynamiques et Animes

Les graphiques industriels (synoptiques) doivent être vectoriels (SVG) pour s'adapter à toutes les résolutions d'écran sans perte de qualité.

Widget SVG Dynamique de Pompe Industrielle

Voici le code XML/SVG d'une pompe animée en fonction de son état (rotation continue si active, rouge clignotant si défaut).

<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id="pompe-widget">
  <style>
    /* Definition des animations CSS */
    @keyframes rotation-helice {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes clignotement-defaut {
      0% { fill: #ff0000; }
      50% { fill: #800000; }
      100% { fill: #ff0000; }
    }

    /* Classes d'etats appliquees par JavaScript */
    .pompe-corps {
      fill: #2c3e50;
      stroke: #34495e;
      stroke-width: 2;
    }
    .helice-active {
      transform-origin: 50px 50px;
      animation: rotation-helice 1s linear infinite;
    }
    .defaut-actif {
      animation: clignotement-defaut 0.8s infinite;
    }
  

  
  
  

  
  

  
  
    
    
    
    
  

Pour activer le mode défaut via JavaScript :

// Activer l'affichage du defaut
document.getElementById("indicateur-defaut").classList.add("defaut-actif");
// Arreter la rotation de l'helice
document.getElementById("helice").classList.remove("helice-active");

---

3. Conception Responsive et Tactile (Grille CSS)

Les dalles tactiles d'atelier exigent des layouts fluides mais fixes pour éviter la gigue d'affichage lorsque l'opérateur clique.

Feuille de Style CSS standard pour Pupitres Industriels

/* Container de synoptique principal */
.dashboard-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
  gap: 10px;
  background-color: #1a1a24;
  color: #e2e8f0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  padding: 10px;
}

/* En-tete avec les informations de l'usine */
.header-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2d3748;
  border-bottom: 2px solid #4a5568;
  padding: 0 15px;
}

/* Grille de cartes de mesures */
.mesures-grid {
  grid-column: 1 / 4; /* Colonne gauche pour la telemesure */
  display: flex;
  flex-direction: column;
  gap: 15px;
}


 {
  : ;
  : ;
  : ;
  :    (, , , );
}


 {
  : ;
  : ; 
  :  ;
  : ;
  : bold;
  : ;
  : none;
  : pointer;
  : ;
  : background-color ;
}

 {
  : ;
  : ;
}
 {
  : ; 
}