Vidéo : console d'administration Habr. Vous permet de réguler le karma, la notation et de bannir les utilisateurs.
TL; DR: Dans cet article, je vais essayer de créer un panneau de contrôle Habr comique en utilisant l'environnement de développement d'interface industrielle Webaccess/HMI Designer et le terminal WebOP.
L'interface homme-machine (IHM) est un ensemble de systèmes permettant l'interaction humaine avec des machines contrôlées. Ce terme est généralement appliqué aux systèmes industriels dotés d’un opérateur et d’un panneau de commande.
WebOP — un terminal industriel autonome de création d'interfaces homme-machine. Utilisé pour créer des panneaux de contrôle de production, des systèmes de surveillance, des salles de contrôle, des contrôleurs de maison intelligente, etc. Prend en charge la connexion directe aux équipements industriels et peut fonctionner dans le cadre d'un système SCADA.
Terminal WebOP - matériel
Le terminal WebOP est un ordinateur de faible consommation basé sur un processeur ARM, dans un seul boîtier avec un moniteur et un écran tactile, conçu pour exécuter un programme avec une interface graphique créée dans HMI Designer. Selon le modèle, les terminaux embarquent diverses interfaces industrielles : RS-232/422/485, bus CAN pour la connexion aux systèmes automobiles, port USB Host pour connecter des périphériques supplémentaires, port USB Client pour connecter le terminal à un ordinateur, audio entrée et sortie audio, lecteur de carte MicroSD pour la mémoire non volatile et le transfert des paramètres.
Les appareils se positionnent comme un remplacement économique des PC tout-en-un, pour des tâches qui ne nécessitent pas de processeurs puissants et les ressources d'un ordinateur de bureau à part entière. WebOP peut fonctionner comme un terminal autonome pour le contrôle et l'entrée/sortie de données, associé à d'autres WebOP ou dans le cadre d'un système SCADA.
Le terminal WebOP peut se connecter directement aux appareils industriels
Refroidissement passif et protection IP66
En raison de la faible dissipation thermique, certains modèles WebOP sont entièrement conçus sans refroidissement actif par air. Cela permet de monter les appareils dans des zones sensibles aux niveaux sonores et réduit la quantité de poussière pénétrant à l'intérieur du boîtier.
Le panneau avant est réalisé sans espaces ni joints, a un niveau de protection IP66 et permet une pénétration directe de l'eau sous pression.
Face arrière du terminal WOP-3100T
Une mémoire non volatile
Pour éviter la perte de données, WebOP dispose de 128 Ko de mémoire non volatile, qui peut être utilisée de la même manière qu'avec la RAM. Il peut stocker des relevés de compteurs et d’autres données critiques. En cas de panne de courant, les données seront enregistrées et restaurées après un redémarrage.
Mise à jour à distance
Le programme exécuté sur le terminal peut être mis à jour à distance via un réseau Ethernet ou via des interfaces série RS-232/485. Cela simplifie la maintenance, car cela élimine le besoin d'aller sur tous les terminaux pour mettre à jour le logiciel.
Modèles WebOP
- les appareils les plus abordables construits sur la base du système d'exploitation en temps réel HMI RTOS. La série est représentée par WebOP-///, avec des diagonales d'écran de 4,3 pouces, 7 pouces, 8 pouces et 10.1 pouces, respectivement.
— des modèles plus avancés basés sur le système d'exploitation Windows CE. Ils se distinguent de la série 2000T par un grand nombre d'interfaces matérielles et disposent d'une interface CAN intégrée. Les appareils fonctionnent dans une plage de température étendue (-20~60°C) et disposent d'une protection antistatique (Air : 15KV/Contact : 8KV). La gamme répond pleinement aux exigences de la norme IEC-61000, qui permet aux dispositifs d'être utilisés dans la fabrication de semi-conducteurs où les décharges statiques constituent un problème. La série est représentée par WebOP-//, avec des diagonales d'écran de 7 pouces, 10.1 pouces et 12.1 pouces, respectivement.
Environnement de développement WebAccess/HMI Designer
Prêt à l'emploi, le terminal WebOP n'est qu'un ordinateur ARM basse consommation sur lequel vous pouvez exécuter n'importe quel logiciel, mais l'intérêt de cette solution réside dans l'environnement de développement d'interface industrielle propriétaire WebAcess/HMI. Le système consiste en deux composants:
- Concepteur IHM — environnement de développement d'interfaces et de logique de programmation. Fonctionne sous Windows sur l'ordinateur du programmeur. Le programme final est compilé en un seul fichier et transféré au terminal pour exécution au moment de l'exécution. Le programme est disponible en russe.
- Temps d'exécution de l'IHM - runtime pour exécuter le programme compilé sur le terminal final. Il peut fonctionner non seulement sur les terminaux WebOP, mais également sur les ordinateurs Advantech UNO, MIC et de bureau classiques. Il existe des versions d'exécution pour Linux, Windows, Windows CE.
Bonjour tout le monde - créer un projet
Commençons par créer une interface de test pour notre panneau de contrôle Habr. Je vais exécuter le programme sur le terminal exécutant WinCE. Commençons par créer un nouveau projet dans HMI Designer. Pour exécuter un programme sur WebOP, il est important de sélectionner le bon modèle ; le format du fichier final en dépendra. À cette étape, vous pouvez également sélectionner l'architecture du bureau, puis le fichier final sera compilé pour le runtime X86.
Créer un nouveau projet et choisir une architecture
Sélection du protocole de communication par lequel le programme compilé sera chargé dans WebOP. A cette étape, vous pouvez sélectionner une interface série, ou spécifier l'adresse IP du terminal.
Interface de création de projet. Sur le côté gauche se trouve un organigramme des composants du futur programme. Pour l'instant, nous ne nous intéressons qu'à la rubrique Écrans, ce sont directement les écrans avec les éléments d'interface graphique qui seront affichés sur le terminal.
Tout d'abord, créons deux écrans avec le texte « Hello World » et la possibilité de basculer entre eux à l'aide de boutons. Pour ce faire, nous ajouterons un nouvel écran, Screen #2, et sur chaque écran nous ajouterons un élément de texte et deux boutons pour basculer entre les écrans (Screen Buttons). Configurons chaque bouton pour passer à l'écran suivant.
Interface pour configurer le bouton pour basculer entre les écrans
Le programme Hello World est prêt, vous pouvez maintenant le compiler et l'exécuter. Au stade de la compilation, des erreurs peuvent survenir en cas de variables ou d'adresses mal spécifiées. Toute erreur est considérée comme fatale ; le programme ne sera compilé que s'il n'y a pas d'erreur.
L'environnement offre la possibilité de simuler un terminal afin que vous puissiez déboguer le programme sur votre ordinateur localement. Il existe deux types de simulation :
- Simulation en ligne — toutes les sources de données externes spécifiées dans le programme seront utilisées. Il peut s'agir d'USO ou d'appareils connectés via des interfaces série ou Modbus TCP.
- Simulation hors ligne — simulation sans utilisation d'appareils externes.
Bien que nous ne disposions pas de données externes, nous utilisons la simulation hors ligne, après avoir préalablement compilé le programme. Le programme final sera situé dans le dossier du projet, avec le nom Nom du projet_Nom du programme.px3
Le programme exécuté dans la simulation peut être contrôlé avec le curseur de la souris de la même manière que sur l'écran tactile d'un terminal WebOP. Nous voyons que tout fonctionne comme prévu. Super.
Pour télécharger le programme sur un terminal physique, cliquez simplement sur le bouton Télécharger. Mais comme je n'ai pas configuré la connexion du terminal à l'environnement de développement, vous pouvez simplement transférer le fichier à l'aide d'une clé USB ou d'une carte mémoire MicroSD.
L'interface du programme est intuitive, je ne passerai pas en revue tous les blocs graphiques. Créer des arrière-plans, des formes et du texte sera clair pour quiconque a utilisé des programmes similaires à Word. Pour créer une interface graphique, aucune compétence en programmation n'est requise, tous les éléments sont ajoutés en faisant glisser la souris sur le formulaire.
Travailler avec la mémoire
Maintenant que nous savons créer des éléments graphiques, apprenons à travailler avec du contenu dynamique et un langage de script. Créons un graphique à barres affichant les données d'une variable U $ 100. Dans les paramètres du graphique, sélectionnez le type de données : entier 16 bits et la plage de valeurs du graphique : de 0 à 10.
Le programme prend en charge l'écriture de scripts dans trois langages : VBScript, JavaScript et son propre langage. J'utiliserai la troisième option car il existe des exemples dans la documentation et une aide sur la syntaxe automatique directement dans l'éditeur.
Ajoutons une nouvelle macro :
Écrivons un code simple pour modifier progressivement les données d'une variable pouvant être suivies sur un graphique. Nous ajouterons 10 à la variable et la remettrons à zéro lorsqu'elle sera supérieure à 100.
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
Pour exécuter le script en boucle, définissez-le dans les paramètres de configuration générale comme Macro principale, avec un intervalle d'exécution de 250 ms.
Compilons et exécutons le programme dans le simulateur :
A ce stade, nous avons appris à manipuler les données en mémoire et à les afficher visuellement. Cela suffit déjà pour créer un système de surveillance simple, recevant des données d'appareils externes (capteurs, contrôleurs) et les enregistrant en mémoire. Dans HMI Designer, différents blocs d'affichage des données sont disponibles : sous forme de cadrans circulaires avec flèches, divers diagrammes et graphiques. À l'aide de scripts JavaScript, vous pouvez télécharger des données à partir de sources externes via HTTP.
Panneau de contrôle Habr
En utilisant les compétences acquises, nous réaliserons une interface comique pour la console d'administration Habr.
Notre télécommande doit pouvoir :
- Changer de profil utilisateur
- Stocker les données de karma et de notation
- Modifiez le karma et les valeurs de note à l'aide des curseurs
- Lorsque vous cliquez sur le bouton « bannir », le profil doit être marqué comme banni, l'avatar doit être barré.
Nous afficherons chaque profil sur une page distincte, nous créerons donc une page pour chaque profil. Nous stockerons le karma et la note dans des variables locales en mémoire, qui seront initialisées à l'aide de la macro de configuration au démarrage du programme.
L'image est cliquable
Ajuster le karma et la note
Pour ajuster le karma, nous utiliserons le curseur (Slide Switch). Nous spécifions la variable initialisée dans Setup Macro comme adresse d'enregistrement. Limitons la plage des valeurs du curseur de 0 à 1500. Désormais, lorsque le curseur se déplace, de nouvelles données seront écrites en mémoire. Dans ce cas, l'état initial du curseur correspondra aux valeurs de la variable en mémoire.
Pour afficher les valeurs numériques du karma et de la note, nous utiliserons l'élément d'affichage numérique. Le principe de son fonctionnement est similaire au schéma de l'exemple de programme « Hello World » ; on indique simplement l'adresse de la variable dans Monitor Address.
Bouton Interdire
Le bouton « ban » est implémenté à l'aide de l'élément Toggle Switch. Le principe de stockage des données est similaire aux exemples ci-dessus. Dans les paramètres, vous pouvez sélectionner différents textes, couleurs ou images, en fonction de l'état du bouton.
Lorsque vous appuyez sur le bouton, l'avatar doit être barré en rouge. Ceci est facile à mettre en œuvre à l’aide du bloc Picture Display. Il vous permet de spécifier plusieurs images associées à l'état du bouton Toggle Switch. Pour ce faire, le bloc reçoit la même adresse que le bloc avec le bouton et le nombre d'états. L'image avec les plaques signalétiques sous l'avatar est configurée de la même manière.
Conclusion
Dans l'ensemble, j'ai aimé le produit. Auparavant, j'avais déjà utilisé une tablette Android pour des tâches similaires, mais développer une interface pour celle-ci est beaucoup plus difficile et les API du navigateur ne permettent pas un accès complet aux périphériques. Un terminal WebOP peut remplacer une combinaison d’une tablette Android, d’un ordinateur et d’un contrôleur.
HMI Designer, malgré sa conception archaïque, est assez avancé. Sans compétences particulières en programmation, vous pouvez rapidement esquisser une interface fonctionnelle. L'article ne traite pas de tous les blocs graphiques, qui sont nombreux : tuyaux animés, cylindres, graphiques, interrupteurs à bascule. Il prend en charge de nombreux contrôleurs industriels populaires et contient des connecteurs de base de données.
références
L'environnement de développement WebAccess/HMI Designer et Runtime peut être téléchargé
→
Source: habr.com