Document original : LUGE 2025.1 : IHM Personnalisable sans developpement specifique (PDF, 2,4 Mo, 21 pages)
Pour illustrer, cette présentation :
- Sans PowerPoint
- Uniquement en LabVIEW
Comment réaliser des IHM personnalisables ?
- Facilement
- Configurables
- Sans développement spécifique
Le présentateur : Anthony ASARO
Développeur logiciel depuis 6 ans
LabVIEW Architect
TestStand Developer
Responsable Ergonomie des Interfaces Utilisateurs Responsable outils internes (User.lib de Mesulog)
La société MESULOG en bref
- Activité : Développement logiciel test et mesure
- Localisation : Moirans (Grenoble, 38)
- Partenaire National Instruments, WATS, Pickering
- Développeurs certifiés LabVIEW et TestStand
- Compétences : LabVIEW / TestStand / VeriStand
Nerys Group en bref
NERYS GROUP
Création en 2022 – 22 pers
2007 – 15 pers
2000 – 7 pers
Moirans (38)
Gardanne (13) & La Croix de la Rochette (73)
CONCEPTION DE BANCS D'ESSAIS ET DE SYSTÈMES DE MESURE
ÉTUDE ET RÉALISATION DE LOGICIELS DÉDIÉS AU TEST ET À LA MESURE
(ENDURANCE, CARACTÉRISATION, CONTRÔLE)
- Baies de contrôle commande
- Développement cartes électroniques
- Modélisation et conception mécanique
- Systèmes de mesure
- Formation LabVIEW par des formateurs professionnels certifiés (CPI)
- Développement sur plateforme NI LabVIEW, TestStand, VeriStand
- Optimisation, fiabilisation de code
- Certifications LabVIEW et TestStand
- Formation TestStand par des formateurs professionnels certifiés (CPI)
2 entreprises = 1 équipe
Diapositive 6
Nouvelle Direction 2025
Nouvelle Direction
Février 2025
www.mesulog.fr
Retrouvez ma présentation sur www.mesulog.fr
Diapositive 8
L’histoire de cette présentation
Contexte :
Pour les développement d’IHM dans un logiciel, le client peut nous demander : ➔ S’adapter à la charte graphique de l’entreprise (couleurs / police / logo) ➔ Changer le thème du logiciel (thème sombre/claire, mode intérieur/extérieur) ➔ …
Problématique :
Si la charte graphique évolue L’équipe de développement doit alors changer l’interface graphique des logiciels ➔ Consommateur de temps (génération d’exécutable à chaque version) ➔ Oblige à modifier le code source + exécutable
?
Objectif :
Avoir une solution permettant de modifier l’interface graphique du logiciel ➔ Sans code spécifique ➔ Sans modifier le code source ➔ Facilement
Inspiration : CSS
Solution : LSS
CSS
1 result found
Respecter des bonnes pratiques de développement d’IHM
Quel objet numérique choisir ? Quel objet bouton choisir ?
Démonstration de ce toolkit
Utilisation et évolution du toolkit
Exemple 1
Quelle est la différence ?
Comme l'évolution de Darwin, LabVIEW s'adapte pour que les IHMS restent agréable à regarder
Réponse
Exemple 2
Quelle est la différence ?
Réponse
Réponse
Commandes Indicateurs
Exemple 3
Quelle est la différence ?
Réponse
Réponse
Réponse
Explication 4
Grâce à :
- la séparation de l’image arrière plan et l’image premier plan ➔ Permet de dupliquer facilement les boutons
- Une décoration LabVIEW en arrière plan ➔ Permet de redimensionner facilement le bouton
Exemple 5
Quelle est la différence ?
Réponse
Réponse
Réponse
Défaut
Clic souris Survol souris
F T F T F T
? Survol souris ?
Synthèse
Avez-vous remarqué ?
Pendant mes exemples, avez-vous remarqué :
- Mon VI servant de diaporama n’a jamais été exécuté ?
- La police du titre a changé à chaque slide ?
- La taille de la date a changé à chaque slide ? Et le tout sans avoir réalisé un code spécifique pour ma présentation
Exemple LSS
- Repeindre tous les boutons en rouge : Boolean{bool.false-color:#FF0000;}
- Repeindre tous les boutons en vert : Boolean{bool.false-color:#00FF00;}
- Repeindre les décoration : Decoration{background-color:#ffffff;}
- Repeindre les Panes : Pane{background-color:#000000;}
- Repeindre les Splitter : Splitter{background-color:#000000;}
- Modification de la couleur d’une commande texte : #Bas de page{font-color:#000000;}
- Afficher le logo mode sombre : #MesulogDark{visible:true;}
- Cacher le logo mode jour : #MesulogWhite{visible:false;}
Licence Layout & Style Sheets (LSS)
Licences Palette DMC
Conclusion
Code d’origine : gestion de 2 couleurs uniquement
Boolean{ bool.false-color:#color1+2; bool.true-color:#color1+2; }
? ?
Code Mesulog : gestion de TOUTES les couleurs (12)
Boolean{ bool.mesulog-color:@0#color1#color2; bool.mesulog-color:@1#color1#color2; bool.mesulog-color:@2#color1#color2 bool.mesulog-color:@3#color1#color2 bool.mesulog-color:@4#color1#color2 bool.mesulog-color:@5#color1#color2 }
0 1 2
3 4 5
