Le protocole Custom CAN ID est largement utilisé dans le domaine de l'automatisation industrielle pour le contrôle des équipements. Dans ce contexte, une carte Arduino constitue une solution pratique pour l'intégration système et peut également servir de contrôleur hôte pour les Smart Displays, notamment pour les modèles dépourvus de fonction tactile. Grâce au protocole Custom CAN ID, une carte Arduino permet de piloter efficacement des Smart Displays non tactiles.
Cet article présente un programme de démonstration utilisant un Arduino UNO associé à un CAN Shield pour piloter un Smart Display via le protocole Custom CAN ID, avec un OLED Knob Display comme interface de commande. Ce programme permet d'explorer différentes fonctions et opérations d'un Smart Display non tactile. Il constitue également une référence pratique pour les développeurs souhaitant approfondir leurs connaissances en intégration système et en pilotage de Smart Displays tactiles ou non tactiles à l'aide d'un OLED Knob Display. Le schéma ci-dessous illustre la mise en œuvre de l'application.
Pour commencer, lancez une version à jour de GUI Builder et créez un nouveau projet. Saisissez le nom souhaité pour le projet et vérifiez que le dossier du projet est automatiquement sélectionné. Sélectionnez ensuite le type de périphérique ; dans cet exemple, un écran 10,1" est utilisé. Choisissez le protocole souhaité et conservez l'orientation de l'écran en mode paysage par défaut. Sélectionnez un modèle d'interface utilisateur vierge, puis cliquez sur le bouton Create pour créer le projet. La figure ci-dessous illustre les différentes étapes.
Une fois le projet créé, la page suivante s'affiche.
Le scénario de démonstration nécessite au total quatre pages. Il faut donc ajouter trois pages supplémentaires. Pour cela, cliquez sur le bouton Page, puis sur le bouton Plus afin d'ajouter les trois nouvelles pages.
L'étape suivante consiste à ajouter un arrière-plan personnalisé. Accédez à la section Resource et sélectionnez l'option Background. Dans l'option 2, trois arrière-plans prédéfinis sont disponibles pour les pages Industry, Medical et Vehicle. Pour ajouter un autre arrière-plan, cliquez sur le bouton Add Widget de l'option 3. Dans l'option 4, cliquez ensuite sur le bouton à trois points (...) situé à gauche du bouton Reset. Cette fonction permet d'ajouter un arrière-plan personnalisé afin de remplacer l'arrière-plan par défaut utilisé sur la première page.
Dans la section Pages, il est ensuite possible de sélectionner le style d'arrière-plan souhaité parmi les options disponibles, comme illustré dans la figure ci-dessous.
Passons maintenant à l'ajout d'un Widget personnalisé. Pour le scénario de démonstration, un Multistate Widget personnalisé est utilisé afin de sélectionner les pages Industry, Medical et Vehicle. Revenez tout d'abord à la section Controls de la première page, puis accédez à la section Resource et sélectionnez l'option Multistate Widget. Cliquez sur Add Widget dans l'option 2, puis sur Modify dans l'option 3. À l'étape 4, supprimez toutes les images par défaut associées au Widget. À l'étape 5, cliquez sur Add, puis sélectionnez individuellement, à l'étape 6, les images personnalisées des Widgets dans le dossier local de votre ordinateur. Enfin, à l'étape 7, cliquez sur OK pour ajouter les images personnalisées à la liste du Multistate Widget, comme illustré dans la figure ci-dessous.
Revenez ensuite à la section Controls de la première page. Conformément au scénario de démonstration, sélectionnez le Multistate Widget personnalisé permettant de choisir entre les pages Industry, Medical et Vehicle. Faites glisser le Widget dans la zone de mise en page prévue à cet effet. La configuration de la première page est alors terminée.
Appliquez ensuite la même procédure aux trois autres pages créées. Sur la deuxième page, sélectionnez un Widget correspondant à l'application Industry ; sur la troisième, un Widget correspondant à l'application Medical ; et sur la quatrième, un Widget correspondant à l'application Vehicle. Faites ensuite glisser chaque Widget dans la zone de mise en page de la page correspondante.
Après avoir créé les quatre pages et placé les Widgets correspondants sur chacune d'elles, vérifiez que la page de démarrage contient bien le Multistate Widget personnalisé permettant de sélectionner les pages Industry, Medical et Vehicle. Vous pouvez ensuite procéder à la compilation du projet. Accédez à la section Page Information, cliquez sur le bouton Device, puis sélectionnez Device Properties. Vérifiez que les paramètres du protocole sont corrects, sélectionnez le port COM approprié et définissez le débit en bauds souhaité. Cliquez ensuite sur « Connect to Device » pour établir la connexion avec le périphérique. Enfin, cliquez sur le bouton Upload, comme illustré dans la figure ci-dessous, pour lancer le chargement du projet et attendez la fin de l'opération.
Une fois le chargement du projet terminé, cliquez sur OK comme indiqué dans la figure ci-dessous.
Une fois le chargement terminé, l'écran de démarrage s'affiche comme illustré dans la figure ci-dessous.
Après l'écran de démarrage, le Smart Display passe à la première page. La compilation et le chargement du projet via GUI Builder sont alors terminés, comme illustré dans la figure ci-dessous.
Le code ci-dessous commence par la section includes, dans laquelle sont importées les bibliothèques et les fichiers d'en-tête nécessaires au programme. Il s'agit notamment des bibliothèques Adafruit_SSD1327, Adafruit_FT6206, Adafruit_GFX et SPI, ainsi que de fichiers d'en-tête personnalisés tels que mcp2515_can.h, lcdgfx_gui.h et lcdgfx.h.
La section defines vient ensuite et permet de définir les constantes et les configurations de broches nécessaires. Elle comprend notamment les paramètres du codeur rotatif, les dimensions de l'écran OLED, les paramètres du bus CAN et les paramètres des Widgets.
Enfin, une instruction conditionnelle vérifie le type de microcontrôleur utilisé afin de sélectionner l'interface série appropriée. Si le code s'exécute sur un microcontrôleur SAMD, l'interface SerialUSB est utilisée. Dans les autres cas, l'interface Serial standard est utilisée.
En résumé, le code ci-dessous importe les bibliothèques et fichiers d'en-tête nécessaires, définit les principales constantes et configurations de broches, puis sélectionne l'interface série appropriée en fonction du type de microcontrôleur utilisé.
Le programme déclare et initialise ensuite plusieurs variables et broches nécessaires à son fonctionnement. Par exemple :
SPI_CS_PIN : cette constante est définie sur la valeur 9 et correspond à la broche Chip Select utilisée pour la communication SPI.
CAN_INT_PIN : cette constante est définie sur la valeur 2 et correspond à la broche d'interruption du bus CAN.
CAN : une instance de la classe mcp2515_can est créée et initialisée avec la valeur SPI_CS_PIN. Elle est utilisée pour la communication sur le bus CAN.
ts : une instance de la classe Adafruit_FT6206 est créée pour gérer les fonctions tactiles.
display : une instance de la classe DisplaySSD1327_128x128_SPI est créée et initialisée avec les configurations de broches nécessaires à la communication SPI avec l'écran SSD1327.
La section de code ci-dessous déclare et initialise plusieurs tableaux de variables de type unsigned char. Chaque tableau remplit la fonction suivante :
“configMsg” : tableau de 8 éléments de type unsigned char représentant un message de configuration.
`PageIndex_0` à `PageIndex_3` : chacun de ces tableaux contient 8 éléments de type unsigned char et représente respectivement les index de page 0 à 3.
“displayMode” : tableau de 8 éléments de type unsigned char représentant le mode d'affichage.
Le programme comprend également plusieurs tableaux nommés `stmp`, `stmp1`, `stmp2`, jusqu'à `stmp12`. Chacun contient également 8 éléments de type unsigned char et sert à stocker les octets de données associés à différents Widgets ou composants. Ces tableaux sont notamment utilisés pour conserver les données correspondant aux différents Widgets.
En résumé, ces tableaux regroupent les données nécessaires au fonctionnement du programme, notamment les messages de configuration, les index de page, le mode d'affichage et les données associées aux Widgets.
Le code définit ensuite une fonction nommée “bitmapDemo”, qui reçoit un paramètre entier “imageIndex”. Cette fonction permet d'afficher une image sur l'OLED Knob Display.
Les images utilisées ainsi que leur position et leurs dimensions respectives sont définies dans le fichier d'en-tête "Image.h".
La fonction ci-dessous attend une réponse sur le bus CAN. Elle effectue des temporisations successives tout en vérifiant la valeur de la variable indicateur Recv. Dès qu'une réponse est reçue, la valeur de Recv est réinitialisée à 0.
Ce code définit une fonction nommée `changePageFunction`, chargée de modifier la valeur de page dans le système de communication CAN. En fonction du paramètre `pageValue` reçu, la fonction envoie les messages correspondants sur le bus CAN afin de changer de page. Les messages envoyés varient selon la valeur de `pageValue` et correspondent aux différents tableaux `PageIndex`.
La fonction "handleTouchEvents" gère les événements tactiles sur l'écran. Elle détecte les interactions tactiles, convertit les coordonnées et exécute différentes actions en fonction de la pression et de la durée de l'appui. Elle utilise également la fonction `changePageFunction` pour mettre à jour la page active en fonction de l'interaction détectée. Par exemple, lorsqu'un appui long est détecté, "changePageFunction" est appelée avec la valeur "nowPage" afin de revenir à la page d'accueil. Lorsqu'un appui court est détecté, "changePageFunction" est appelée avec la valeur "nowPage" afin d'accéder à la page sélectionnée.
Le code ci-dessous correspond à la fonction "setup" d'Arduino, exécutée une seule fois au démarrage du programme. Cette fonction initialise les broches, établit la communication série, configure l'écran, initialise le bus CAN et démarre le contrôleur tactile.
La fonction commence par configurer le mode de plusieurs broches (pinA, pinB, pinC et EN_Pin), soit comme entrées avec résistances de pull-up activées, soit comme sortie. La broche de sortie EN_Pin est ensuite positionnée à l'état logique haut.
La communication série est ensuite initialisée à un débit de 115200 bauds, puis le programme attend que la connexion soit établie.
L'objet display est ensuite initialisé et différents paramètres, notamment la police et la couleur, sont configurés. Une image bitmap est affichée à une position définie sur l'écran, puis une temporisation de 2 secondes est appliquée.
Une interruption est ensuite associée à la broche CAN_INT_PIN. La fonction MCP2515_ISR est définie comme routine à exécuter lorsque l'interruption est déclenchée. Cette interruption est déclenchée sur un front descendant du signal.
Le bus CAN est initialisé à un débit de 250 kbit/s. En cas d'échec de l'initialisation, le programme effectue une nouvelle tentative après une temporisation. Une fois l'initialisation réussie, le bus CAN est configuré en mode normal et un message de confirmation est envoyé sur l'interface série.
Les masques et filtres CAN sont ensuite configurés afin d'accepter toutes les trames, y compris les trames étendues.
Le contrôleur tactile est ensuite initialisé. Si l'initialisation échoue, un message d'erreur est affiché et le programme entre dans une boucle infinie.
Enfin, lorsque le contrôleur tactile a été initialisé avec succès, un message de confirmation est envoyé sur l'interface série.
Cette fonction correspond probablement à une routine de service d'interruption (ISR) du MCP2515, le contrôleur CAN. Lorsqu'une interruption est déclenchée, elle définit un indicateur et affiche un message.
Les fonctions suivantes assurent la gestion de l'état du Knob. La fonction setKnobState met à jour l'état du Knob et configure une temporisation pour détecter l'état Idle, tandis que la fonction isKnobIdle vérifie, à partir de la valeur du timer, si le Knob est actuellement à l'état Idle.
La fonction redrawScreen() actualise l'affichage en fonction de l'état courant du Knob. Elle vérifie si cet état a changé, efface l'écran, puis affiche l'image bitmap correspondant au nouvel état.
La section suivante de la fonction loop() lit l'état de trois broches et détermine un nouvel état à partir de leurs valeurs. Si ce nouvel état diffère du précédent, plusieurs actions sont exécutées, notamment la mise à jour du compteur, de MultiStateValue, de GaugeValue et des valeurs d'autres variables associées aux Widgets.
La section suivante de la fonction loop() traite le cas où le Knob est tourné dans une direction donnée. Les variables concernées sont alors mises à jour et les fonctions nécessaires sont appelées. La variable correspondant à l'état précédent est ensuite actualisée en vue de la prochaine exécution de loop().
La section ci-dessous présente la suite de la fonction loop(). Après le bloc de code précédent, les opérations suivantes sont exécutées.
La variable oldState est mise à jour avec la valeur de newState.
Si nowPage est égal à 0, ou si le numéro de page est 1, le programme vérifie si MultiStateValue est différent de LastMultiStateValue. Si les deux valeurs diffèrent, LastMultiStateValue est mis à jour avec la valeur de MultiStateValue, puis cette dernière est enregistrée dans le tableau stmp1. Un message contenant la valeur de MultiStateValue est ensuite envoyé sur le bus CAN avec l'identifiant Multi-State 0x716.
Si nowPage est égal à 1, ou si le numéro de page est 2, le programme effectue des vérifications similaires sur plusieurs variables associées aux Widgets, notamment CircleProgressValue, HorizontalSliderValue, VerticalSliderValue, TemperatureValue, GaugeValue, FixedWidgetValue et IndicatorValue. Si l'une de ces variables diffère de sa valeur précédente, cette dernière est mise à jour et un message contenant la nouvelle valeur est transmis sur le bus CAN avec l'identifiant correspondant.
Si nowPage est égal à 2, ou si le numéro de page est 3, des vérifications similaires sont effectuées pour les Widgets disponibles sur la page 3, notamment CircleProgressValue, HorizontalSliderValue, GraphValue et AnimationValue. Si l'une de ces variables diffère de sa valeur précédente, cette dernière est mise à jour et un message contenant la nouvelle valeur est transmis sur le bus CAN avec l'identifiant correspondant.
Si nowPage est égal à 3, ou si le numéro de page est 4, le programme effectue le même type de vérification pour les Widgets disponibles sur cette page, notamment HorizontalSliderValue, GaugeValue, FixedWidgetValue, AnimationValue, IndicatorValue et ToggleButtonValue. Si l'une de ces variables diffère de sa valeur précédente, cette dernière est mise à jour et un message contenant la nouvelle valeur est transmis sur le bus CAN avec l'identifiant correspondant.
Après le bloc de code précédent de la fonction loop(), la fonction handleTouchEvents() est appelée afin de traiter les événements tactiles.
Si le Knob est à l'état Idle, c'est-à-dire si isKnobIdle() renvoie 1, la fonction setKnobState() définit son état sur KNOB_IDLE. La fonction redrawScreen() est ensuite appelée pour actualiser l'affichage. Cette étape marque la fin du code principal du projet de démonstration.
Après avoir vérifié et chargé le programme avec Arduino IDE, l'affichage de l'OLED Knob change : l'image du Smart Display est remplacée par une indication Touch ou Rotate. À ce stade, le Smart Display et l'OLED Knob Display affichent tous deux la page d'accueil par défaut.
Vous pouvez maintenant exécuter les différents scénarios de démonstration. Depuis la page d'accueil, tournez le bouton rotatif pour sélectionner l'une des trois pages disponibles : Industry, Medical ou Vehicle, comme illustré dans la figure ci-dessous.
Une fois la page sélectionnée, un appui court sur l'OLED Knob Display permet de basculer immédiatement le Smart Display vers la page correspondante.
Pour illustrer à nouveau le fonctionnement de la démonstration, partez de la page d'accueil et tournez le bouton rotatif afin de sélectionner l'une des trois autres pages. Dans cet exemple, la page Medical est sélectionnée.
Après avoir sélectionné la page Medical, effectuez simplement un appui court sur l'OLED Knob Display pour afficher la page correspondante sur le Smart Display.
En tournant le bouton rotatif de l'OLED Knob Display vers la gauche ou vers la droite, vous pouvez contrôler les différents Widgets présents sur cette page, comme illustré dans la figure ci-dessous.
Un appui long sur l'OLED Knob Display permet de revenir automatiquement à la page d'accueil, également appelée Page 1. Par ailleurs, si aucune rotation ni aucun appui n'est effectué sur l'OLED Knob Display pendant 10 secondes, l'affichage est réinitialisé et revient à la page d'accueil.
La démonstration associant le Smart Display 10,1" et l'OLED Knob Rotator Display est maintenant terminée. Elle permet de contrôler différentes pages et de passer de l'une à l'autre à l'aide d'appuis courts ou longs sur l'OLED Knob Rotator Display. Elle permet également d'interagir avec les différents Widgets disponibles sur chaque page.
Le programme présenté ci-dessus peut être téléchargé depuis GitHub à l'adresse suivante : https://bit.ly/3oT0o5M. Vous y trouverez également des informations complémentaires sur ce projet de démonstration.
La configuration matérielle réelle est présentée dans la figure ci-dessous.
Ce programme présente un exemple pratique d'utilisation d'une carte Arduino avec un OLED Knob Rotator Display et le protocole Custom CAN ID pour gérer différentes pages et naviguer entre elles à l'aide d'appuis courts ou longs. Il permet également d'interagir avec les différents Widgets disponibles sur chaque page et de les contrôler. Cet exemple constitue une référence utile aussi bien pour les développeurs débutants que pour les développeurs expérimentés souhaitant approfondir leurs connaissances en programmation côté hôte et dans ses applications pour le pilotage des Smart Displays, notamment ceux dépourvus de fonction tactile.
Recevez des e-mails sur les nouvelles mises à jour de Winstar
Prix/Fiche technique/Requête générale
Contactez-nous pour toute information technique
En cliquant sur "Autoriser tous les cookies", vous acceptez le stockage de cookies sur votre appareil pour améliorer la navigation sur le site, analyser l'utilisation du site et aider dans nos efforts de marketing et de performance. Vous pouvez trouver plus d'informations à ce sujet dans notre politique. Politique de confidentialité