Langue:Français

Blog · Custom Web Controls

Les 10 meilleures cartes KPI et indicateurs d’état Custom Web Control pour WinCC Unified et WinCC V8 (gratuits)

Début novembre 2026, nous avons ouvert chaque carte KPI, chaque compteur et chaque indicateur d’état Custom Web Control du catalogue HMIx — dix-sept candidats —, examiné chaque aperçu à la loupe, lu chaque fiche produit et gardé les dix que nous poserions sans hésiter sur une vue d’ensemble WinCC Unified ou WinCC V8. Tous gratuits, tous livrés en ZIP CWC, et chacun le meilleur dans un rôle différent : de la simple tuile KPI à la colonne lumineuse.

Par l’équipe HMIx12 min de lectureMis à jour le
  • Custom Web Control
  • CWC
  • WinCC Unified
  • WinCC V8
  • TIA Portal
  • Carte KPI
  • Indicateur d’état
  • Widgets SCADA
Quatre Custom Web Controls KPI et d’état du catalogue HMIx en grille : un tableau de bord KPI sombre de logistique de grue avec temps de cycle, sparklines et graphique de répartition des charges, une tuile KPI vert foncé affichant Pressure 1285 PSI en hausse de 12.5 %, une vue d’ensemble d’atelier de neuf machines avec voyants verts, jaunes et rouges, et une chronologie d’états avec segments verts, rouges et gris
La photo de famille : les vrais aperçus de quatre contrôles de cet article, exactement tels que leurs créateurs les ont publiés. Nous les avons seulement mis côte à côte.

Pourquoi une carte KPI Custom Web Control en vaut la peine

Toute vue d’ensemble finit par répondre aux mêmes quelques questions. La ligne tourne-t-elle ? À quelle distance sommes-nous de l’objectif ? Combien de pièces avons-nous rebutées sur ce poste ? Combien d’heures ce robot a-t-il faites depuis sa dernière maintenance ? Un trend répond à « comment en est-on arrivé là » ; une carte KPI ou un indicateur d’état répond à « où en est-on maintenant », en un chiffre ou une couleur, lisible depuis l’autre bout de la salle de contrôle.

On peut construire tout ça avec des rectangles, des champs E/S et beaucoup de dynamisation, et la plupart d’entre nous l’ont fait. Une carte KPI Custom Web Control (CWC) réunit le chiffre, l’unité, la flèche de tendance, les limites et les couleurs d’état dans un seul objet que l’on pose sur la vue et que l’on relie. Un CWC est une petite application web — HTML, CSS et JavaScript emballés dans un ZIP — que WinCC Unified (TIA Portal) et WinCC V8 exécutent dans la vue. Ses propriétés apparaissent dans la liste Interface comme les autres : une variable comme rejectCount ou isActive le pilote directement, et ses événements, comme Clicked, permettent à vos scripts IHM d’ouvrir un faceplate ou une vue de détail.

Ce qui fait qu’une carte KPI ou un indicateur d’état mérite d’être téléchargé

Avant la liste, la grille d’évaluation. Voici ce que nous avons regardé, à peu près dans l’ordre de ce qui nous agace le plus quand ça manque :

  • Lisible à trois mètres. Un gros chiffre, une unité claire et un libellé en mots simples. Si l’opérateur doit se pencher, la carte a échoué.
  • Une couleur qui veut dire quelque chose. Vert, ambre et rouge liés à un état, une limite ou un seuil, pas à la décoration. Un indicateur d’état toujours de la même couleur n’est qu’un autocollant.
  • Du contexte dans la carte. Une flèche de tendance, une consigne, des limites d’avertissement et d’alarme ou un petit historique transforment un chiffre en information.
  • Une interface propre. Des propriétés aux noms clairs sur la fiche produit, pour savoir ce que chaque variable va piloter, plus un événement ou deux pour descendre dans le détail.
  • Le bon indicateur pour le bon usage. Une tuile KPI, un tableau de bord KPI, une valeur process avec limites, un compteur de rebuts, un compteur horaire, une vue d’ensemble d’atelier, une chronologie d’états, une colonne lumineuse, une carte minimaliste et une LED : nous avons retenu un champion par usage.

Comment nous les avons choisis (et ce que nous n’avons pas fait)

Début novembre 2026, nous avons cherché dans le catalogue HMIx tous les Custom Web Controls gratuits conçus pour montrer une valeur ou un état d’un coup d’œil : cartes et tuiles KPI, compteurs, cartes d’état, voyants, LED et vues d’ensemble d’états. Les jauges, les graphiques à barres, les trends et les tableaux de données ont déjà leurs propres articles, nous avons donc laissé de côté ici les tuiles à sparkline traitées avec les graphiques de tendance. Pour chaque candidat, nous avons regardé son vrai aperçu (pas la couverture du catalogue avec son grand titre par-dessus) et lu sa fiche produit pour voir quelles propriétés, quels événements et quelles méthodes elle documente. Les téléchargements n’ont servi qu’à départager les ex aequo.

Deux contrôles sont passés dans les mentions honorables, et deux Motor Status Cards ont été écartées parce que leurs galeries ne montrent que l’icône du contrôle : il n’y a donc rien à juger. Quand une galerie publiait une petite carte au milieu d’un immense canevas vide, nous avons recadré le fond vide pour cet article, sans toucher au dessin. Et une mise en garde : nous avons jugé des aperçus et de la documentation ; nous n’avons pas fait tourner ces contrôles dans un Runtime réel. Ils ont été générés par IA et chaque fiche produit rappelle de les tester dans votre propre projet TIA Portal avant la mise en production.

Les 10 meilleures cartes KPI et indicateurs d’état Custom Web Control, un par un

Chaque fiche montre le vrai aperçu, ce que nous avons aimé, ce qu’il faut garder en tête et les propriétés nommées sur sa fiche produit, puis la vignette du catalogue : cliquez dessus pour ouvrir la fiche produit et télécharger le contrôle gratuitement.

01Meilleur choix global : la tuile KPI classique

KPI Indicator

KPI Indicator Custom Web Control : une tuile vert foncé avec une barre d’accent cyan à gauche, le libellé Pressure, la valeur 1285 PSI en grands chiffres blancs et une flèche montante avec 12.5 %
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

S’il ne fallait en garder qu’un, ce serait celui-ci. Une tuile large avec une barre d’accent colorée sur son bord gauche, un petit libellé gris (« PRESSURE »), une énorme valeur blanche (« 1285 ») avec son unité à côté (« PSI ») et, en dessous, une flèche avec un pourcentage (« ▲ 12.5% »). C’est exactement ce que doit être une carte KPI : un chiffre lisible depuis l’autre bout de la pièce et une ligne de contexte. Avec 9 téléchargements et un avis cinq étoiles en novembre 2026, c’est aussi l’un des contrôles les plus populaires de cette liste.

Sa galerie montre trois looks du même contrôle : vert foncé avec une barre cyan, gris foncé avec une barre jaune et une flèche descendante orange, et bleu marine sans aucune ligne de tendance. C’est l’interface à l’œuvre. label et unit nomment la valeur, decimalPlaces règle la résolution, trendValue et trendDirection pilotent la flèche, showTrend la masque, et accentColor, trendColor et backgroundColor portent vos couleurs d’état. Un événement Clicked est prêt pour descendre vers un faceplate ou une vue de trend.

Ce qu’on aime

  • Valeur énorme et lisible avec son unité : la tuile KPI de manuel
  • Flèche de tendance et pourcentage désactivables
  • Couleurs d’accent et de tendance que vous pouvez lier à un état

À garder en tête

  • Sa fiche compte 10 propriétés et en nomme neuf : vérifiez dans la liste Interface de TIA Portal celle qui porte la valeur
  • Une valeur par tuile : pour une rangée de KPI complète, posez-en plusieurs

Propriétés à relier

  • label
  • unit
  • decimalPlaces
  • trendValue
  • trendDirection
  • showTrend
  • accentColor
  • trendColor
  • backgroundColor
KPI Indicator : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

KPI Indicator

Gratuit · WinCC Unified & V8 · CWC (.zip)

02Le meilleur tableau de bord KPI complet (temps de cycle et cadence)

Crane Logistics KPI

Crane Logistics KPI Custom Web Control : un tableau de bord sombre intitulé Crane Logistics Monitor avec une horloge, des cartes levage en cours 00:45 et inter-charge 02:12 avec sparklines orange et cyan, levages par heure 24 pour un objectif de 30, un graphique à barres de répartition des types de charge pour conteneurs, palettes, sacs et bobines, et cycle moyen 01:30 et durée maximale 03:45
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Quand une carte ne suffit pas. « CRANE LOGISTICS MONITOR » en orange coiffe un tableau de bord complet avec une horloge dans le coin : « Current lifting » à 00:45 avec une sparkline orange, « Inter-load » à 02:12 avec une cyan, « Lifts per hour » à 24 pour un objectif de 30, un graphique à barres horizontales des types de charge (conteneurs, palettes, sacs et bobines) et une colonne de statistiques de cycle : moyenne 01:30, pic 03:45 et minimum. C’est le contrôle le plus téléchargé de cet article, avec 12 téléchargements et un avis cinq étoiles en novembre 2026.

Sa fiche est d’une rare précision : 30 propriétés. liftingTimeSeconds et interLoadTimeSeconds alimentent les cartes en direct, le contrôle suit averageCycleSeconds, maxCycleSeconds et minCycleSeconds, liftingHistory trace les sparklines et loadTypes la répartition. Chaque légende a sa propre propriété, de labelLiftsPerHour à labelDistribution, et accentColor1 à accentColor3 fixent la palette. Les événements CycleCompleted, ThresholdAlert et TargetReached, et les méthodes exportLogisticsData et resetStatistics, complètent le tout.

Ce qu’on aime

  • Six KPI, deux sparklines et un graphique à barres dans un seul objet
  • Tous les libellés renommables : il s’adapte au-delà des grues
  • Des événements pour les alertes et les objectifs, plus export et remise à zéro

À garder en tête

  • Construit autour des cycles de grue : pour d’autres machines, il faut en renommer la majeure partie
  • Dans l’aperçu, la barre de progression vers l’objectif de 30 ne montre aucun remplissage visible, et la carte du bas est coupée

Propriétés à relier

  • liftingTimeSeconds
  • interLoadTimeSeconds
  • averageCycleSeconds
  • maxCycleSeconds
  • minCycleSeconds
  • liftingHistory
  • loadTypes
  • labelLiftsPerHour
  • labelDistribution
  • accentColor1
  • accentColor2
  • accentColor3
  • backgroundColor
Crane Logistics KPI : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Crane Logistics KPI

Gratuit · WinCC Unified & V8 · CWC (.zip)

03Le meilleur pour une valeur process avec consigne et limites d’alarme

Process Status Indicator

Process Status Indicator Custom Web Control : une carte sombre pour PT-104 Discharge Pressure avec une plage de 0.0 à 100.0 bar, la valeur 76.6 bar, une consigne de 70.0 bar, une barre horizontale orange avec un repère de consigne et des zones d’avertissement et d’alarme, et des cases limite basse 0.0, avertissement haut 80.0 et alarme haute 90.0 bar
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Celui qui pense comme un ingénieur instrumentation. L’en-tête affiche « PT-104 Discharge Pressure » avec un badge de plage (« 0.0 – 100.0 bar »). En dessous, la valeur 76.6 bar en grands chiffres et, à droite, « Setpoint 70.0 bar » en orange. Une barre horizontale se remplit en orange jusqu’à la valeur, avec un triangle qui marque la consigne et des zones ambre et rouge plus sombres en fin d’échelle. Trois cases en bas détaillent les limites : limite basse 0.0 bar, avertissement haut 80.0 bar en ambre et alarme haute 90.0 bar en rouge.

Sa fiche nomme neuf de ses 11 propriétés : tagId et descriptor identifient la mesure, unit, minValue et maxValue définissent l’échelle, warningThreshold et alarmThreshold fixent les limites, decimalPlaces la résolution et backgroundColor le thème. L’événement AlarmTriggered se déclenche sur un dépassement de limite, et les méthodes setValue et setSetpoint permettent à un script de le mettre à jour. Bref, un mini-faceplate pour n’importe quelle mesure analogique, avec l’écart à la consigne visible d’un coup d’œil.

Ce qu’on aime

  • Valeur, consigne et limites réunies, avec repère et descripteur façon ISA
  • Zones d’avertissement et d’alarme dessinées sur la barre
  • Un événement d’alarme exploitable par vos scripts

À garder en tête

  • Dans l’aperçu, un contour bleu en pointillés encadre la ligne de la valeur et traverse le texte « Setpoint 70.0 bar »
  • La fiche ne nomme pas les propriétés de la valeur et de la consigne (il existe les méthodes setValue et setSetpoint) : vérifiez la liste Interface avant de relier

Propriétés à relier

  • tagId
  • descriptor
  • unit
  • minValue
  • maxValue
  • warningThreshold
  • alarmThreshold
  • decimalPlaces
  • backgroundColor
Process Status Indicator : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Process Status Indicator

Gratuit · WinCC Unified & V8 · CWC (.zip)

04Le meilleur pour les compteurs de rebuts et de pièces rejetées

Rejected Parts Counter

Rejected Parts Counter Custom Web Control : une carte sombre ambrée pour la station REJ-MONITOR-04 avec un badge PCS, un cumul de rejets de 142, une pastille indiquant plus 4 pcs par 5 minutes et une courbe d’accumulation en escalier montant de 124 à 142 entre 18:33 et 18:42
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Un compteur qui raconte une histoire. La carte, dans des tons sombres et chauds avec un accent ambre, nomme sa station (« REJ-MONITOR-04 »), affiche un badge d’unité « PCS », le cumul de rejets en grands chiffres ambrés (142) et une petite pastille avec le rythme récent (« +4 pcs/5m »). En dessous, une courbe en escalier intitulée « Accumulation Trend (Step) » grimpe de 124 à 142 entre 18:33 et 18:42. Un regard suffit pour savoir non seulement combien de pièces sont parties au rebut, mais aussi si ça s’aggrave.

Sa fiche compte 11 propriétés et en nomme dix. rejectCount est la valeur principale et deltaRate l’incrément récent, stationTag identifie la station, maxHistoryPoints fixe la profondeur du buffer de tendance, metricLabel, unitText et chartCaption renomment les textes, et accentColor, panelColor et backgroundColor règlent la palette. Il est haut et étroit, parfait pour la colonne latérale d’une vue qualité ou de fin de ligne.

Ce qu’on aime

  • Cumul, rythme et historique dans une seule carte
  • Courbe en escalier adaptée aux compteurs (pas de fausses pentes)
  • Tous les textes renommables pour des pièces bonnes, des arrêts ou des alarmes

À garder en tête

  • Dans l’aperçu, le nom de la station passe sur deux lignes et la légende du graphique se colle à la valeur du haut de l’axe
  • Format haut : il lui faut une colonne, pas une rangée

Propriétés à relier

  • rejectCount
  • deltaRate
  • stationTag
  • maxHistoryPoints
  • metricLabel
  • unitText
  • chartCaption
  • accentColor
  • panelColor
  • backgroundColor
Rejected Parts Counter : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Rejected Parts Counter

Gratuit · WinCC Unified & V8 · CWC (.zip)

05Le meilleur pour les heures de marche et la maintenance

Machine Hour Counter Card

Machine Hour Counter Card Custom Web Control : une carte blanche pour l’équipement Robot CRX10 Fanuc avec une icône de robot, des heures cumulées de 12477 h, le commentaire Check joint 3 lubrication et un bouton Reset
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Pour l’équipe maintenance. Une carte blanche et épurée nomme l’équipement (« Robot CRX10 Fanuc ») à côté d’une icône de robot, affiche « Accumulated hours » en grands chiffres foncés (12477 h) et, en bas, un commentaire d’état (« Check joint 3 lubrication ») à côté d’un bouton « Reset ». C’est le compteur horaire que vous colleriez sur la machine, avec une note pour le poste suivant.

D’après sa fiche, les heures viennent directement d’une valeur DINT de l’automate, et isRunning allume un halo animé en dégradé sur le bord de la carte quand la machine tourne. iconType choisit le symbole de l’équipement, resetButtonLabel renomme le bouton, qui déclenche l’événement OnReset, darkMode bascule entre sombre et clair, et backgroundColor s’accorde à votre vue. La méthode triggerReset permet aussi à un script de le remettre à zéro. Utilisez-le sur les vues de maintenance préventive pour moteurs, pompes, compresseurs ou robots.

Ce qu’on aime

  • Compteur horaire clair avec nom de l’équipement et note de maintenance
  • Bouton de remise à zéro avec son propre événement, prêt pour votre logique automate
  • Modes sombre et clair

À garder en tête

  • La fiche ne donne pas le nom exact des propriétés des heures, du titre et du commentaire : vérifiez la liste Interface, et décochez Lecture seule sur les variables que la remise à zéro écrit
  • Le halo de isRunning n’est pas visible dans l’aperçu publié

Propriétés à relier

  • isRunning
  • iconType
  • resetButtonLabel
  • darkMode
  • backgroundColor
Machine Hour Counter Card : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Machine Hour Counter Card

Gratuit · WinCC Unified & V8 · CWC (.zip)

06La meilleure vue d’ensemble d’atelier

Machine Status Grid

Machine Status Grid Custom Web Control : une Plant Floor Overview sombre avec neuf tuiles, six machines comme Extruder 01 et Robotic Arm 06 en marche avec voyants verts, Pump Station 07 et Cooling Tower 08 en avertissement avec voyants jaunes et Main Generator 09 à l’arrêt avec un voyant rouge
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Toute l’usine sur une seule vue. Sous le titre « PLANT FLOOR OVERVIEW », une grille de trois sur trois tuiles, chacune avec un voyant brillant, un identifiant (M01 à M09), un nom et un état : six machines, de « Extruder 01 » à « Robotic Arm 06 », sont RUNNING en vert, « Pump Station 07 » et « Cooling Tower 08 » affichent WARNING en jaune, et « Main Generator 09 » est STOPPED en rouge. Chaque tuile a aussi un bord gauche coloré, si bien que l’intrus saute aux yeux, même sur un mur d’écrans.

Sa fiche se concentre sur la mise en page. Machine Count fixe le nombre de tuiles affichées, Title Size, Element Size, Indicator Size et ID Label Size règlent la typographie et les voyants, et Background Color l’accorde à votre thème. C’est le genre de contrôle que l’on met sur la vue d’accueil d’une machine OEM ou d’une ligne, pour que l’opérateur sache où regarder avant d’ouvrir quoi que ce soit.

Ce qu’on aime

  • Image rouge-jaune-vert instantanée de toute une ligne
  • Nombre de machines et tailles réglables
  • Design sombre, calme et très contrasté

À garder en tête

  • La fiche ne nomme que des propriétés de mise en page : la façon d’alimenter le nom et l’état de chaque machine n’est pas décrite, lisez donc la documentation incluse avant de planifier vos variables
  • Le texte est petit et la majeure partie de chaque tuile est vide dans l’aperçu

Propriétés à relier

  • Machine Count
  • Title Size
  • Element Size
  • Indicator Size
  • ID Label Size
  • Background Color
Machine Status Grid : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Machine Status Grid

Gratuit · WinCC Unified & V8 · CWC (.zip)

07Le meilleur pour l’historique des états (chronologie de disponibilité)

Status Bar

Status Bar Custom Web Control : une Process State Timeline sombre avec horloge, une fenêtre de 45 minutes et 4 événements, le texte State 1 actif depuis 01:36 et une large chronologie de segments vert, rouge, gris et vert avec une légende pour marche, alarme ou arrêt, attente ou manuel et inconnu
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Un indicateur d’état qui a de la mémoire. Intitulé « Status Bar – Process State Timeline », il affiche dans l’en-tête une horloge, une fenêtre de 45 minutes et un nombre d’événements, une pastille « State 1 – Active for 01:36 » et, en dessous, une large chronologie de blocs colorés : du vert, une longue plage rouge, du gris et de nouveau du vert, chacun avec sa durée. Une légende explique les couleurs : State 1 marche/OK, State 2 alarme/arrêt, State 3 attente/manuel et Unknown.

D’après sa fiche, il ajoute un nouveau segment à chaque changement de la propriété status, conserve une fenêtre glissante définie par maxHistoryMinutes et fait grandir le segment actif en douceur à chaque updateInterval. showTooltips affiche au survol le début, la fin et la durée de chaque bloc, state1Label à unknownStateLabel renomment les états, barHeight et borderRadius lui donnent sa forme et backgroundColor s’accorde à votre thème. OnStatusChanged et OnHistoryCleared dialoguent avec vos scripts, et resetHistory et exportHistoryJson gèrent l’enregistrement.

Ce qu’on aime

  • Montre combien de temps la machine a passé dans chaque état, pas seulement l’état actuel
  • Infobulles au survol avec début, fin et durée
  • Export JSON de l’historique pour les rapports

À garder en tête

  • Sa fiche décrit une chronologie construite à partir des changements reçus dans une fenêtre glissante ; elle ne mentionne pas la lecture de l’archive WinCC
  • Les libellés de durée dans les segments sont minuscules dans l’aperçu

Propriétés à relier

  • status
  • maxHistoryMinutes
  • updateInterval
  • showTooltips
  • state1Label
  • unknownStateLabel
  • barHeight
  • borderRadius
  • backgroundColor
Status Bar : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Status Bar

Gratuit · WinCC Unified & V8 · CWC (.zip)

08La meilleure colonne lumineuse (stack light)

Status Lights

Status Lights Custom Web Control : une colonne lumineuse à cinq segments sur un mât, sur fond vert foncé, avec le segment blanc du haut et le segment vert du milieu allumés et les segments bleu, ambre et rouge atténués
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Le jumeau numérique de la colonne lumineuse qui trône sur chaque machine. Une tour fine sur un mât métallique avec cinq segments, blanc, bleu, vert, ambre et rouge de haut en bas : ceux qui sont allumés brillent, les autres restent atténués. Dans l’aperçu, les segments blanc et vert sont allumés. Les opérateurs la comprennent instantanément, parce qu’ils voient la vraie tous les jours. Elle compte 9 téléchargements et un avis cinq étoiles en novembre 2026.

Sa fiche décrit un nombre illimité de niveaux définis dans le tableau segments. opacityInactive règle l’atténuation des segments éteints, showLabels ajoute un texte à chaque niveau, et borderWidth, borderColor et backgroundColor ajustent le cadre. Les méthodes setSegmentState, setSegmentColor et setSegmentStatus commutent les segments et le clignotement depuis vos scripts, et l’événement SegmentClicked peut déclencher un acquittement.

Ce qu’on aime

  • Familière d’emblée à tous ceux qui travaillent en atelier
  • Autant de segments que nécessaire, avec clignotement
  • Événement de clic par segment

À garder en tête

  • La première image de la galerie montre la colonne avec tous les segments éteints ; la seconde, allumée, est celle que nous montrons
  • Pilotée par un tableau et des méthodes plutôt que par un booléen par voyant : prévoyez un petit script

Propriétés à relier

  • segments
  • showLabels
  • opacityInactive
  • borderWidth
  • borderColor
  • backgroundColor
Status Lights : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Status Lights

Gratuit · WinCC Unified & V8 · CWC (.zip)

09La meilleure carte de valeur minimaliste

Square Info Card

Square Info Card Custom Web Control : une carte carrée bleu foncé affichant Temperature 78.3 °C, avec en dessous un panneau de démo pour simuler les mises à jour de propriétés WinCC pour moteur, état, température, niveau de cuve et pression
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Parfois, moins c’est plus. Une carte carrée bleu foncé aux coins arrondis affiche un petit libellé (« TEMPERATURE ») et une seule valeur (« 78.3 °C ») au centre. Rien d’autre. Sa fiche promet qu’elle garde son format 1:1 à n’importe quelle taille et ajoute une animation douce au survol, ce qui en fait une brique nette pour une grille de tuiles identiques.

Sa fiche compte 8 propriétés et les nomme toutes : title et value portent le contenu, accentColor colore la barre de mise en valeur en haut, cardColor et backgroundColor donnent de la profondeur, titleColor et valueColor le texte, et borderRadius adoucit ou durcit les coins. OnCardClicked ouvre une popup de détail et updateDisplay permet à un script de la rafraîchir.

Ce qu’on aime

  • Format carré et net qui s’aligne en grille
  • Interface courte, les huit propriétés nommées
  • Événement de clic pour la navigation

À garder en tête

  • L’aperçu inclut un panneau de démo pour simuler des valeurs, si bien que la carte elle-même paraît petite
  • La barre d’accent en haut n’est qu’une ligne à peine visible dans l’aperçu

Propriétés à relier

  • title
  • value
  • accentColor
  • cardColor
  • titleColor
  • valueColor
  • borderRadius
  • backgroundColor
Square Info Card : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Square Info Card

Gratuit · WinCC Unified & V8 · CWC (.zip)

10La meilleure LED d’état unique

Status LED

Status LED Custom Web Control : une LED ronde verte et brillante avec un léger halo sur fond blanc et le libellé Stopped en dessous
Le vrai aperçu du contrôle, tel que publié dans le catalogue. Cliquez pour ouvrir la fiche produit.

Le plus petit contrôle de la liste, et le plus utile sur les vues chargées. Une LED ronde et brillante avec un léger halo et un libellé en dessous. Elle fait une seule chose : dire à l’opérateur si quelque chose est en marche ou à l’arrêt, sans lui demander de lire.

Sa fiche nomme ses 7 propriétés. isActive commute l’état, activeLabel et inactiveLabel fixent le texte de chacun, glowEnabled ajoute une pulsation rythmée et glowIntensity la rend visible dans les salles de contrôle très éclairées, tandis que borderThickness et backgroundColor ajustent le look. Les méthodes toggleState et setState et l’événement StateChanged couvrent le côté scripts.

Ce qu’on aime

  • Un booléen en entrée, un signal clair en sortie
  • Pulsation optionnelle pour les états qui demandent de l’attention
  • Encombrement minime pour les vues d’ensemble et les synoptiques

À garder en tête

  • L’aperçu montre une LED verte libellée « STOPPED » : vérifiez quelle couleur utilise chaque état avant de vous fier aux valeurs par défaut
  • Fond blanc dans l’aperçu : réglez backgroundColor pour les vues sombres

Propriétés à relier

  • isActive
  • activeLabel
  • inactiveLabel
  • glowEnabled
  • glowIntensity
  • borderThickness
  • backgroundColor
Status LED : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

Status LED

Gratuit · WinCC Unified & V8 · CWC (.zip)

Mentions honorables : deux indicateurs de plus qui valent le coup d’œil

Deux contrôles qui n’ont pas intégré le top 10 à cause de leurs aperçus. Cliquez sur la vignette pour ouvrir la fiche produit.

  • State List Indicator : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    State List Indicator

    Une liste claire intitulée « System Status » avec System Ready, Process Running, Emergency Stop et Cooling Active, chacun avec un badge d’état, un compteur d’états actifs et un événement StateClicked. L’aperçu est une petite liste dans un grand canevas presque vide.

    Voir le produit
  • Sensor Status Card : carte KPI et indicateur d’état Custom Web Control gratuit pour WinCC Unified et WinCC V8, vignette du catalogue

    Sensor Status Card

    Une carte capteur claire et compacte avec un anneau affichant la luminosité en %, un état avec son icône, un badge auto et un chronomètre de fonctionnement avec une méthode resetTimer. Les textes de l’aperçu sont en partie en espagnol et la carte est minuscule.

    Voir le produit

Vous n’avez pas trouvé votre indicateur ? Créez le vôtre (ou remixez-en un) avec l’IA, gratuitement

Un aveu : toutes les cartes KPI et tous les indicateurs d’état de cet article ont été créés avec le générateur IA de HMIx. C’est pour ça que nous pouvons le dire sans rougir : si aucun ne montre votre KPI comme vous en avez besoin, vous pouvez générer le vôtre en quelques minutes.

Décrivez la carte avec vos mots (par exemple, « tuile TRS avec le pourcentage en grands chiffres, disponibilité, performance et qualité en dessous, vert au-dessus de 85 %, ambre au-dessus de 65 % et rouge en dessous, et un événement au clic ») et le générateur vous guide pas à pas : le design, les propriétés, événements et méthodes que vous utiliserez dans WinCC, une simulation pour essayer des valeurs et le paquet Custom Web Control final pour WinCC Unified et WinCC V8. Le même outil crée aussi des SVG dynamiques quand un dessin léger suffit.

  • Remixez n’importe quel contrôle de cette liste : sur sa fiche produit, le bouton « Modifier dans le générateur IA » l’ouvre directement dans le générateur, prêt à recevoir vos demandes, comme « mets la LED en rouge quand elle est inactive », « ajoute un objectif à la carte » ou « affiche huit machines au lieu de neuf ». Les liens « Modifier avec l’IA » de cet article font la même chose.
  • Gratuit pour essayer : vous pouvez commencer sans compte, avec une petite allocation quotidienne de crédits, et le plan Community est gratuit.
  • Le résultat est à vous : téléchargez le paquet et ajoutez-le à votre projet TIA Portal comme n’importe quel autre contrôle de cette page.

Comment utiliser une carte KPI Custom Web Control dans WinCC Unified (et WinCC V8)

La version courte, pour quand vous avez déjà choisi votre carte. Notre guide des Custom Web Controls détaille chaque étape avec schémas et captures d’écran.

  1. Téléchargez le ZIP

    Ouvrez la fiche produit, connectez-vous avec votre compte gratuit et téléchargez le contrôle. Le ZIP téléchargé contient la documentation et, à l’intérieur, le paquet du contrôle nommé {GUID}.zip : c’est ce fichier intérieur qu’il vous faut.

  2. Copiez-le dans votre projet TIA Portal

    Copiez le fichier {GUID}.zip, toujours compressé, dans le dossier de votre projet, sous UserFiles\CustomControls (créez les deux dossiers s’ils n’existent pas). Ne l’extrayez pas.

  3. Actualisez Mes contrôles et faites-le glisser

    Dans TIA Portal, ouvrez la task card Outils, développez la palette Mes contrôles et cliquez sur Actualiser. Le contrôle apparaît dans la liste : faites-le glisser sur votre vue et dimensionnez-le.

  4. Reliez et testez les propriétés

    Sélectionnez le contrôle et, dans la fenêtre d’inspection, ouvrez Propriétés → Propriétés → Interface. Reliez d’abord la valeur principale (rejectCount, isActive, status…) à une variable interne, ajoutez un champ E/S qui écrit la même variable et lancez Runtime : changez la valeur et regardez la carte, les couleurs et les limites réagir. Décochez Lecture seule pour les variables que le contrôle réécrit, comme une remise à zéro. Une fois que tout se comporte bien, passez à vos vraies variables automate.

  5. Sous WinCC V8

    Chaque contrôle du top de cet article est indiqué comme compatible WinCC V8 sur sa fiche produit. Le paquet est le même ; suivez la documentation WinCC V8 pour importer et configurer des Custom Web Controls dans cet environnement.

Astuce de pro : décidez une fois pour toutes de la signification de chaque couleur et utilisez-la partout. Si le vert veut dire « en marche » sur le Machine Status Grid, il doit vouloir dire « en marche » sur la Status LED et les Status Lights aussi, et une tuile ambre doit toujours signifier un avertissement. Reliez les propriétés de couleur (accentColor, trendColor…) à la même logique d’état sur toute la vue, et réservez les couleurs vives à ce qui demande de l’attention, comme le recommande ISA-101.

Lire le guide complet des Custom Web Controls

Questions fréquentes

Ces cartes KPI et indicateurs d’état Custom Web Control sont-ils vraiment gratuits ?

Oui. Chaque contrôle de cet article est publié comme produit gratuit sur HMIx. Il vous suffit d’un compte gratuit pour les télécharger.

Pourquoi utiliser un Custom Web Control pour une carte KPI dans WinCC Unified ?

Vous pouvez construire une carte KPI avec des objets de base, des champs E/S et de la dynamisation, mais une carte KPI Custom Web Control réunit la valeur, l’unité, la flèche de tendance, les limites et les couleurs d’état dans un seul objet aux propriétés et événements nommés. Vous reliez quelques variables au lieu d’animer une douzaine de formes, et toutes les cartes de la vue ont le même look et le même comportement.

Quelle est la différence entre une carte KPI et un indicateur d’état ?

Une carte KPI montre une valeur — pression, rebuts, temps de cycle ou heures de marche —, généralement avec une unité, une tendance ou des limites. Un indicateur d’état montre un état — en marche, avertissement, arrêt ou alarme — avec une couleur ou un voyant. Cet article inclut les deux, plus des combinaisons comme le Process Status Indicator, qui affiche une valeur avec sa consigne et ses limites d’alarme.

Comment afficher l’état de plusieurs machines sur une seule vue ?

Utilisez un contrôle de vue d’ensemble comme le Machine Status Grid pour une image rouge-jaune-vert de toute la ligne, le Status Bar pour voir combien de temps une machine a passé dans chaque état, ou plusieurs Status LED ou Status Lights posées sur un synoptique d’usine. Vérifiez dans la documentation de chaque contrôle comment les états sont alimentés, car certains utilisent une propriété par état et d’autres un tableau ou des méthodes.

Fonctionnent-ils sur les WinCC Unified Comfort Panels et sur WinCC V8 ?

Leurs fiches produit indiquent une compatibilité avec WinCC Unified, Unified Comfort Panels compris, et avec WinCC V8. Comme pour tout contrôle généré par IA, testez le comportement dans votre propre projet et sur votre appareil cible avant la mise en production.

Puis-je modifier l’une de ces cartes ?

Bien sûr. Vous pouvez modifier vous-même le HTML, le CSS et le JavaScript du contrôle, ou cliquer sur « Modifier dans le générateur IA » sur la fiche produit et demander les modifications en langage courant. La seconde option est généralement plus rapide, car le générateur s’occupe de l’interface et du paquet.

Notre verdict

Si vous n’en téléchargez qu’un, prenez le KPI Indicator : une grosse valeur, une unité et une flèche de tendance dans une tuile que vous aurez reliée en quelques minutes. Pour un tableau de bord KPI complet, le Crane Logistics KPI ; pour une mesure avec consigne et limites, le Process Status Indicator ; pour les rebuts, le Rejected Parts Counter ; pour la maintenance, la Machine Hour Counter Card ; pour toute l’usine d’un coup d’œil, le Machine Status Grid ; pour la disponibilité dans le temps, le Status Bar ; pour une colonne lumineuse, les Status Lights ; pour une tuile minimaliste, la Square Info Card ; et pour un simple signal marche/arrêt, la Status LED.

Et si votre KPI réclame une carte qu’aucun ne dessine (c’est toujours le cas), n’oubliez pas que le générateur qui les a créés n’est qu’à un clic.