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.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Carte KPI
- Indicateur d’état
- Widgets SCADA

Nos choix express
Pas le temps ? Filez droit vers la carte ou l’indicateur qu’il vous faut.
- 01Meilleur choix global : la tuile KPI classiqueKPI Indicator
- 02Le meilleur tableau de bord KPI complet (temps de cycle et cadence)Crane Logistics KPI
- 03Le meilleur pour une valeur process avec consigne et limites d’alarmeProcess Status Indicator
- 04Le meilleur pour les compteurs de rebuts et de pièces rejetéesRejected Parts Counter
- 05Le meilleur pour les heures de marche et la maintenanceMachine Hour Counter Card
- 06La meilleure vue d’ensemble d’atelierMachine Status Grid
- 07Le meilleur pour l’historique des états (chronologie de disponibilité)Status Bar
- 08La meilleure colonne lumineuse (stack light)Status Lights
- 09La meilleure carte de valeur minimalisteSquare Info Card
- 10La meilleure LED d’état uniqueStatus LED
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

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
02Le meilleur tableau de bord KPI complet (temps de cycle et cadence)
Crane Logistics KPI

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
03Le meilleur pour une valeur process avec consigne et limites d’alarme
Process Status Indicator

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
setValueetsetSetpoint) : vérifiez la liste Interface avant de relier
Propriétés à relier
- tagId
- descriptor
- unit
- minValue
- maxValue
- warningThreshold
- alarmThreshold
- decimalPlaces
- backgroundColor
04Le meilleur pour les compteurs de rebuts et de pièces rejetées
Rejected Parts Counter

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
05Le meilleur pour les heures de marche et la maintenance
Machine Hour Counter Card

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
isRunningn’est pas visible dans l’aperçu publié
Propriétés à relier
- isRunning
- iconType
- resetButtonLabel
- darkMode
- backgroundColor
06La meilleure vue d’ensemble d’atelier
Machine Status Grid

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
07Le meilleur pour l’historique des états (chronologie de disponibilité)
Status Bar

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
08La meilleure colonne lumineuse (stack light)
Status Lights

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
09La meilleure carte de valeur minimaliste
Square Info Card

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
10La meilleure LED d’état unique
Status LED

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
backgroundColorpour les vues sombres
Propriétés à relier
- isActive
- activeLabel
- inactiveLabel
- glowEnabled
- glowIntensity
- borderThickness
- backgroundColor
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
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
Voir le produitStateClicked. L’aperçu est une petite liste dans un grand canevas presque vide.
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
Voir le produitresetTimer. Les textes de l’aperçu sont en partie en espagnol et la carte est minuscule.
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.
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.Copiez-le dans votre projet TIA Portal
Copiez le fichier
{GUID}.zip, toujours compressé, dans le dossier de votre projet, sousUserFiles\CustomControls(créez les deux dossiers s’ils n’existent pas). Ne l’extrayez pas.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.
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.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.
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.