Gestion des modèles d'affichage public

Les modèles d'affichage public sont la base de vos visualisations personnalisées. Ils définissent la mise en page, la structure et les éléments visuels qui seront appliqués à vos installations. Ce guide complet couvre tous les aspects, de la création de modèles de base aux techniques de conception avancées.

📋 Vue d’ensemble

Que sont les modèles d'affichage public ?

Les modèles servent de modèles réutilisables qui :

• 📐 Définissent les mises en page visuelles de vos affichages publics
• 🧩 Organisent les blocs de contenu et leur positionnement
• 🎨 Établissent une cohérence de conception entre plusieurs installations
• ⚙️ Permettent le déploiement rapide de visualisations standardisées
• 🔄 Prennent en charge les mises à jour faciles de toutes les configurations liées

Principaux avantages

🚀 Pour commencer

Flux de travail des modèles

1. 📐 Concevoir la mise en page - Planifiez votre structure visuelle
2. 🎨 Créer le modèle - Créez-le à l'aide de l'éditeur de modèles
3. 💾 Enregistrer le modèle - Stockez-le pour le réutiliser sur plusieurs installations

Prérequis

Avant de créer des modèles, assurez-vous de disposer des éléments suivants :

• ✅ Compte SmartgridX avec les autorisations appropriées
• ✅ Objectifs de conception clairs pour votre visualisation
• ✅ Exigences relatives au contenu (images, points de données, mises en page)

🎛️ Interface de gestion des modèles

Accéder au gestionnaire de modèles

Étapes de navigation :

1. Connectez-vous à votre compte SmartgridX
2. Accédez à « Affichages publics » dans la barre latérale principale
3. Cliquez sur le bouton « Modèle d'affichage public » sur la page récapitulative

Cette interface de gestion des modèles vous permet d'afficher, de créer, de modifier et de supprimer des modèles.

Tableau récapitulatif des modèles

Actions disponibles :

• ➕ Ajouter - Bouton vert pour commencer la création d'un modèle
• ✏️ Modifier - Modifier la conception d'un modèle existant
• 🗑️ Supprimer - Supprimer un modèle inutilisé

🎨 Processus de création d'un modèle

Commencer un nouveau modèle

Cliquez sur le bouton « Créer un nouveau modèle » pour ouvrir l'interface de l'éditeur de modèles.

Configuration de l'en-tête du modèle

Paramètres du titre

Titre du modèle :

• Objectif : Identifie le modèle dans les listes et les configurations
• Bonnes pratiques : Utilisez des noms descriptifs et spécifiques au projet
• Exemples : "Factory-KPI-Dashboard", "Energy-Monitoring-Layout", "Multi-Zone-Display"

Configuration des marges

Les paramètres de marge définissent la zone de sécurité par rapport aux bordures de l'affichage :

Curseur de marge (0-100 px) :

• 📐 Plage : 0 à 100 pixels à partir du bord de l'affichage
• 🎯 Objectif : Crée un espacement de sécurité pour éviter que le contenu ne soit coupé
• 📱 Application : Garantit la visibilité sur différents types d'affichage
• ⚙️ Recommandation : Utilisez 10 à 20 px pour les affichages standard et 30 à 50 px pour les écrans bord à bord

Impact visuel :

• Marge de 0 px - Le contenu s'étend jusqu'aux bords de l'affichage
• Marge de 50 px - Le contenu commence à 50 pixels de toutes les bordures
• Marge de 100 px - Zone de sécurité maximale avec un espacement important par rapport aux bordures

Fonctionnalité d'enregistrement

Le bouton 💾 Enregistrer (en haut à droite) vous permet d'enregistrer votre modèle actuel.

🧩 Système de mise en page par blocs

Comprendre le système de grille

Principes fondamentaux de la grille

L'éditeur de modèles utilise un système de grille basé sur des pourcentages de 100×100 :

Propriétés de la grille :

• 📐 Dimensions : 100 unités de largeur × 100 unités de hauteur
• 📊 Unités : Valeurs en pourcentage (1 unité = 1 % de la dimension totale)
• 🎯 Précision : Permet un positionnement et un dimensionnement précis
• 📱 Responsive : S'adapte automatiquement aux différentes tailles d'écran

Exemples de mises en page par blocs

┌─────────────────────────────────┐
│                                 │
│         FULL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│                 │               │
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
│                 │               │
└─────────────────┴───────────────┘

┌─────────────────────────────────┐
│            BLOCK 1              │
│                                 │
├─────────────────────────────────┤
│            BLOCK 2              │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
├─────────────────┼───────────────┤
│    BLOCK 3      │   BLOCK 4     │
│                 │               │
└─────────────────┴───────────────┘

Manipulation des blocs

Ajouter des blocs

Méthode : Cliquez sur le bouton « Ajouter un bloc » (en haut à droite de l'éditeur)
Résultat : Un nouveau bloc apparaît avec les dimensions par défaut
Étapes suivantes : Positionnez-le et redimensionnez-le selon vos besoins

Positionner les blocs

Glisser-déposer :

• 🖱️ Cliquez et maintenez n'importe quel bloc pour le déplacer
• 📍 L'aperçu en temps réel affiche la position pendant le déplacement
• 🧲 L'alignement sur la grille facilite un alignement précis
• 👁️ Des repères visuels apparaissent pour faciliter l'alignement

Redimensionner les blocs

Poignée de redimensionnement :

• 📐 Le coin inférieur droit affiche une poignée de redimensionnement lorsque le bloc est sélectionné
• 🔧 Faites glisser pour redimensionner simultanément la largeur et la hauteur
• 📊 Les valeurs en temps réel affichent les dimensions actuelles

Contrôles de précision

Panneau de position à droite

Lorsqu'un bloc est sélectionné, le panneau de droite fournit les éléments suivants :

Contrôles de position :

• 📍 Position X - Décalage horizontal par rapport au bord gauche (0-100)
• 📍 Position Y - Décalage vertical par rapport au bord supérieur (0-100)
• 🎨 Z-Index - Ordre des calques pour les blocs qui se chevauchent
• 📏 Largeur - Pourcentage de largeur du bloc (1-100)
• 📏 Hauteur - Pourcentage de hauteur du bloc (1-100)

⚙️ Configuration des blocs

Types et propriétés des blocs

Accéder à la configuration d'un bloc

Méthode :

1. Sélectionnez un bloc dans la zone de travail de l'éditeur
2. Le panneau de configuration apparaît en bas de l'écran
3. La liste déroulante du type de bloc est la principale option de configuration

Remarque : Tous les blocs ne sont pas actuellement configurables. Cela changera au fur et à mesure de l'avancement du développement. D'autres types de blocs seront ajoutés dans les prochaines mises à jour.

Types de blocs disponibles

Exemples de modèles

Cet exemple présente un modèle bien structuré avec :

• 📊 Organisation claire des blocs avec des libellés descriptifs
• 📐 Espacement et alignement appropriés
• 🎯 Types de blocs fonctionnels pour différents besoins de contenu

Nommage des blocs dans cet exemple :

• Chaque bloc indique son objectif prévu
• Un libellé clair facilite la configuration
• Une organisation logique facilite la maintenance

📚 Documentation associée

Prochaines étapes

Après avoir créé votre modèle :

1. ⚙️ Configurer les installations - Appliquer les modèles à des installations spécifiques
2. 🎛️ Lier les contrôleurs - Connecter le matériel d’affichage
3. 🚀 Guide de démarrage - Aperçu complet du flux de travail

Sujets avancés

• 🎨 Techniques de conception avancées
• 📊 Intégration de données personnalisées
• 🔄 Mises à jour automatisées des modèles
• 👥 Collaboration multi-utilisateur sur les modèles

💡 Résumé des bonnes pratiques

Conception des modèles

✅ Principes de conception :

• 🎯 Privilégiez la simplicité - Concentrez-vous sur les informations essentielles
• 📱 Concevez de manière responsive - Testez sur différentes tailles d’écran
• 🎨 Maintenez la cohérence - Utilisez des couleurs et des mises en page standardisées

Gestion des modèles

✅ Conseils d’organisation :

• 📝 Utilisez des noms descriptifs - Facilitez la recherche des modèles
• 🔄 Effectuez une maintenance régulière - Supprimez les modèles inutilisés
• 👥 Partagez les normes - Assurez la cohérence de l’équipe

🎨 Prêt à concevoir ? Une fois votre modèle créé et configuré, vous êtes prêt à déployer de superbes visualisations sur vos installations SmartgridX !