Style et thèmes

Chaque board dans IronFlock vient avec une apparence par défaut, mais vous avez un contrôle total sur son aspect. Les paramètres de style du tableau de bord vous permettent d’appliquer un thème, d’ajuster la mise en page en grille et de contrôler l’apparence des widgets — le tout depuis un seul panneau de paramètres. Pour les widgets individuels qui nécessitent une apparence différente, vous pouvez remplacer le style global directement dans l’éditeur de widget.

Thèmes

Un thème définit le ton visuel général de votre board en un clic. IronFlock est livré avec un ensemble de thèmes intégrés — chacun définit une palette coordonnée de couleurs, d’arrière-plans et de valeurs par défaut de style qui s’appliquent à l’ensemble du tableau de bord.

Pour appliquer un thème :

Ouvrez le panneau Paramètres du board (icône engrenage dans la barre d’outils supérieure).
Allez dans la section Thème.
Choisissez un thème dans la liste.

Tous les widgets, arrière-plans et couleurs de texte se mettent à jour instantanément pour correspondre au thème sélectionné.

Les thèmes sont un point de départ — pas un choix verrouillé. Après avoir choisi un thème, vous pouvez remplacer n’importe quel paramètre individuel (couleurs, bordures, arrière-plans) et ces remplacements ont priorité sur les valeurs par défaut du thème.

Mise en page

Le canvas du board possède plusieurs propriétés de mise en page qui contrôlent comment les widgets sont positionnés, comment le canvas se comporte à différentes tailles d’écran, et si le board défile ou se met à l’échelle. Ces propriétés fonctionnent ensemble pour définir le comportement spatial de votre tableau de bord.

Accrochage à la grille

Lorsque l’Accrochage à la grille est activé, les widgets s’alignent sur la cellule de grille la plus proche lors du placement ou du déplacement. La grille divise le canvas en une matrice de lignes et de colonnes — les widgets s’alignent toujours sur les limites des cellules, ce qui maintient une mise en page structurée et ordonnée.

Lorsque l’Accrochage à la grille est désactivé, les widgets peuvent être positionnés librement n’importe où sur le canvas avec une précision au pixel près. C’est le mode à utiliser pour les mises en page de style SCADA où les symboles doivent être placés à des positions exactes pour correspondre à un schéma de processus, un plan d’étage ou un schéma d’équipement.

Propriétés de l’accrochage à la grille :

Colonnes — Le nombre de divisions verticales sur le canvas. Un nombre de colonnes plus élevé offre un positionnement horizontal plus fin. Un nombre plus faible aligne les widgets sur des positions plus larges.
Lignes — Le nombre de divisions horizontales. Plus de lignes signifie un contrôle vertical plus fin ; moins de lignes signifie un accrochage vertical plus grossier.

Astuce : Pour les boards SCADA utilisant l’accrochage à la grille, configurez un nombre élevé de lignes et de colonnes (par exemple 48×32 ou plus) pour obtenir un contrôle précis du placement des symboles tout en bénéficiant de l’alignement sur la grille.

Débordement X / Débordement Y

Ces propriétés contrôlent si le canvas s’étend au-delà de la fenêtre visible.

Débordement X — Lorsqu’il est activé, le canvas peut s’étendre au-delà du bord droit de l’écran. Une barre de défilement horizontale apparaît afin que les utilisateurs puissent faire défiler vers le contenu placé en dehors de la largeur initiale de la fenêtre. Les widgets ne se mettent pas à l’échelle horizontalement lorsque l’écran est redimensionné.
Débordement Y — Lorsqu’il est activé, le canvas peut s’étendre au-delà du bord inférieur de l’écran. Une barre de défilement verticale apparaît pour le contenu placé sous la hauteur initiale de la fenêtre. Les widgets ne se mettent pas à l’échelle verticalement lorsque l’écran est redimensionné.

Le débordement fonctionne avec l’accrochage à la grille activé comme désactivé. Lorsque le débordement est actif dans une direction, la mise en page devient non responsive dans cette direction — les widgets conservent leur taille au lieu de s’étirer ou de se rétrécir avec la fenêtre. Ceci est utile pour les grands schémas SCADA, les flux de processus larges ou les schémas d’équipement hauts où la mise en page complète ne doit pas être compressée pour s’adapter à la fenêtre.

Lorsque les deux débordements sont désactivés, les widgets sont contraints à la zone visible et se mettent à l’échelle de manière responsive avec l’écran.

Mise à l’échelle pour s’adapter

La Mise à l’échelle pour s’adapter fait que l’ensemble du board se met à l’échelle proportionnellement pour remplir l’espace d’écran disponible. Vous définissez un rapport hauteur/largeur fixe pour le canvas, et le board s’agrandit ou se réduit pour s’adapter à la fenêtre du navigateur tout en préservant ce rapport.

Propriétés de la mise à l’échelle pour s’adapter :

Rapport hauteur/largeur — Le rapport largeur/hauteur du canvas (par exemple 16:9, 4:3, ou une valeur personnalisée). Le board maintiendra toujours ce rapport quelles que soient les dimensions réelles de l’écran. Un espace vide (letterboxing) apparaît sur les côtés ou en haut/bas si le rapport hauteur/largeur de l’écran ne correspond pas.

La mise à l’échelle pour s’adapter fonctionne avec l’accrochage à la grille activé comme désactivé. Elle est mutuellement exclusive avec le débordement — lorsque la mise à l’échelle pour s’adapter est active, le canvas ne défile pas car l’ensemble de la mise en page est toujours visible.

Ce mode est idéal pour :

Écrans de salle de contrôle — Le tableau de bord remplit n’importe quel écran proprement sans défilement ni distorsion
Écrans kiosque — Une mise en page fixe qui s’adapte automatiquement à différentes tailles d’écran
Tableaux de bord de présentation — Apparence cohérente sur les ordinateurs portables, projecteurs et écrans muraux

Chaque widget possède des propriétés optionnelles Largeur fixe et Hauteur fixe qui peuvent être activées individuellement. Lorsqu’elles sont activées, le widget ne se redimensionne pas dans cette direction lorsque l’écran est redimensionné — il devient non responsive sur cet axe tandis que le reste de la mise en page du board reste fluide.

Ceci est utile lorsque certains éléments nécessitent une taille stable quelles que soient les dimensions de l’écran. Par exemple, une barre latérale de navigation contenant des étiquettes de texte devrait conserver une largeur fixe afin que le texte reste lisible, même si le reste du board se met à l’échelle de manière responsive.

Pour définir une taille fixe sur un widget :

Sélectionnez le widget sur le canvas.
Ouvrez l’Éditeur de widget.
Activez Largeur fixe et/ou Hauteur fixe.

Symboles SCADA et taille fixe

Lorsque des symboles SCADA sont placés sur un board, ils ont à la fois Largeur fixe et Hauteur fixe activées par défaut. Les icônes en surbrillance dans la barre d’outils du widget indiquent les contraintes de taille fixe actives :

Widget SCADA avec indicateurs de largeur fixe et de hauteur fixe

Les symboles SCADA représentent des équipements physiques et des éléments de processus — ils doivent conserver leurs proportions et leurs positions relatives pour représenter fidèlement une disposition du monde réel. Dans un mode d’accrochage à la grille responsive, cela n’est possible que lorsque les dimensions des symboles sont fixes. Sans taille fixe, le redimensionnement responsive déformerait les symboles et les décalerait de leur alignement.

Consultez les Options de mise en page des boards SCADA pour un aperçu de la façon dont ces modes de mise en page s’appliquent spécifiquement aux tableaux de bord SCADA.

Résumé des modes de mise en page

Mode	Accrochage à la grille	Débordement	Mise à l’échelle pour s’adapter	Comportement
Grille responsive	Activé	Désactivé	Désactivé	Les widgets s’alignent sur les cellules de la grille ; la mise en page s’adapte à l’écran. Utilisez Largeur/Hauteur fixe sur les widgets individuels (par exemple les symboles SCADA) pour les maintenir stables
Grille non responsive	Activé	Activé	Désactivé	Les widgets s’alignent sur les cellules de la grille mais ne se mettent pas à l’échelle dans la direction du débordement ; faites défiler pour voir la mise en page complète
Grille à l’échelle	Activé	Désactivé	Activé	Les widgets s’alignent sur les cellules de la grille ; l’ensemble de la mise en page s’adapte à un rapport hauteur/largeur fixe
Canvas défilant	Désactivé	Activé	Désactivé	Positionnement libre sur un canvas surdimensionné ; faites défiler pour voir la mise en page complète
Canvas à l’échelle	Désactivé	Désactivé	Activé	Positionnement libre avec un rapport hauteur/largeur fixe ; l’ensemble de la mise en page s’adapte à l’écran

Pour configurer les propriétés de mise en page :

Ouvrez le panneau Paramètres du board.
Trouvez la section Mise en page.
Activez l’Accrochage à la grille et définissez les lignes/colonnes, ou désactivez-le et configurez le Débordement ou la Mise à l’échelle pour s’adapter avec le rapport hauteur/largeur souhaité.

Style global des widgets

Au-delà du thème, vous pouvez affiner l’apparence de tous les widgets depuis les paramètres de style du tableau de bord. Ces paramètres s’appliquent globalement — chaque widget du board en hérite, sauf s’il est remplacé individuellement.

Ce que vous pouvez personnaliser :

Bordures — Contrôlez la largeur et la couleur des bordures autour des widgets. Réglez-les à zéro pour un aspect sans bordure, ou rendez-les proéminentes pour séparer visuellement les widgets.
Arrondis des coins — Ajustez le rayon de bordure pour passer de coins rectangulaires nets à des cartes entièrement arrondies.
Arrière-plans — Définissez la couleur d’arrière-plan du widget ou rendez les widgets transparents pour laisser apparaître l’arrière-plan du board.

Pour définir les styles globaux des widgets :

Ouvrez le panneau Paramètres du board.
Allez dans la section Style.
Ajustez les bordures, l’arrondi des coins et les paramètres d’arrière-plan selon vos besoins.

Ces modifications s’appliquent immédiatement à tous les widgets du board.

Parfois, un seul widget doit se démarquer — un indicateur d’état avec un arrière-plan coloré, une carte d’en-tête sans bordure, ou un graphique avec un espacement supplémentaire. Au lieu de modifier le style global, vous pouvez le remplacer pour ce widget spécifique.

Pour remplacer les styles d’un seul widget :

Cliquez sur le widget sur le canvas pour le sélectionner.
Ouvrez l’Éditeur de widget (le panneau de paramètres du widget).
Trouvez les paramètres de style ou d’apparence dans l’éditeur de widget.
Ajustez les bordures, l’arrondi des coins ou l’arrière-plan pour ce widget uniquement.

Les paramètres par widget ont priorité sur le style global du tableau de bord. Si vous modifiez ultérieurement le style global ou changez de thème, les widgets avec des remplacements conservent leur apparence personnalisée.

Astuce : Utilisez les styles globaux pour définir une base cohérente, puis utilisez les remplacements par widget avec parcimonie pour les éléments qui nécessitent un traitement particulier.

Tout assembler

Un flux de travail de style typique ressemble à ceci :

Choisissez un thème qui correspond à l’identité visuelle de votre projet.
Ajustez la grille si vous avez besoin d’un contrôle plus précis sur le placement des widgets.
Définissez les styles globaux des widgets pour les bordures, les coins et les arrière-plans afin d’affiner le thème.
Remplacez les widgets individuels dans l’éditeur de widget là où des éléments spécifiques nécessitent une apparence différente.

Cette approche en couches — thème → styles globaux → remplacements par widget — maintient vos boards cohérents tout en vous offrant une flexibilité totale là où cela compte.