Aller au contenu principal
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

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 tout, de la création de modèles de base aux techniques de conception avancées.

📋 Aperçu​

Qu'est-ce que les modèles d'affichage public ?​

Les modèles servent de plans 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 à travers plusieurs installations
  • ⚙️ Permettent un déploiement rapide de visualisations standardisées
  • 🔄 Supportent des mises à jour faciles sur toutes les configurations liées

Avantages clés​

AvantageDescription
🚀 EfficacitéCréer une fois, utiliser sur plusieurs installations
🎯 CohérenceMaintenir des normes de conception uniformes
🔧 FlexibilitéModifications faciles sans recréer depuis le début

🚀 Premiers Pas​

Flux de travail des modèles​

  1. 📐 Concevoir la mise en page - Planifiez votre structure visuelle
  2. 🎨 Créer un modèle - Construire à l'aide de l'éditeur de modèles
  3. 💾 Enregistrer le modèle - Stocker pour réutilisation à travers les installations

Prérequis​

Avant de créer des modèles, assurez-vous d'avoir :

  • ✅ Un compte SmartgridX avec les permissions appropriées
  • ✅ Des objectifs de conception clairs pour votre visualisation
  • ✅ Des besoins en contenu (images, points de données, mises en page)

🎛️ Interface de Gestion des Modèles​

Accéder au Gestionnaire de Modèles​

infographicimage

É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 d'aperçu

Cela ouvre l'interface de gestion des modèles où vous pouvez visualiser, créer, éditer et supprimer des modèles.

Tableau d'Aperçu des Modèles​

infographicimage

Actions disponibles :

  • ➕ Ajouter - Bouton vert pour commencer la création de modèles
  • ✏️ Éditer - Modifier la conception du modèle existant
  • 🗑️ Supprimer - Retirer le modèle inutilisé

🎨 Processus de Création de Modèles​

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​

infographicimage

Paramètres du Titre​

Titre du Modèle :

  • Objectif : Identifie le modèle dans les listes et configurations
  • Meilleures pratiques : Utilisez des noms descriptifs, spécifiques au projet
  • Exemples : "Tableau de bord-KPI-Usine", "Mise en page-Suivi de l'Énergie", "Affichage-Multi-Zone"

Configuration des Marges​

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

Curseur de Marge (0-100 px) :

  • 📐 Plage : 0 à 100 pixels du bord de l'affichage
  • 🎯 Objectif : Crée un espacement sécurisé pour éviter la coupe de contenu
  • 📱 Application : Assure la visibilité sur divers types d'affichages
  • ⚙️ Recommandation : Utilisez 10-20 px pour les affichages standard, 30-50 px pour les écrans plein format

Impact visuel :

  • 0 px de marge - Le contenu s'étend jusqu'aux bords de l'affichage
  • 50 px de marge - Le contenu commence 50 pixels de tous les bords
  • 100 px de marge - Zone de sécurité maximale avec un espacement important

Fonctionnalité de Sauvegarde​

Le 💾 Bouton de Sauvegarde (coin supérieur droit) vous permet de sauvegarder votre modèle actuel.

🧩 Système de Mise en Page des Blocs​

Comprendre le Système de Grille​

infographicimage

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 pourcentages (1 unité = 1 % de la dimension totale)
  • 🎯 Précision : Permet un positionnement et une dimensionnement précis
  • 📱 Réactif : S'adapte automatiquement à différentes tailles d'écran

Exemples de Mise en Page des Blocs​

Configuration : 100 de largeur × 100 de hauteur
Résultat : Couverture plein écran
Cas d'utilisation : Visualisation unique large, image plein écran

┌─────────────────────────────────┐
│                                 │
│         BLOQUE COMPLET          │
│                                 │
│                                 │
└─────────────────────────────────┘

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 des dimensions par défaut
Étapes suivantes : Positionnez et redimensionnez si nécessaire

Positionner des Blocs​

Glisser-Déposer :

  • 🖱️ Cliquez et maintenez n'importe quel bloc pour le déplacer
  • 📍 L'aperçu en temps réel montre la position pendant le glissement
  • 🧲 L'alignement à la grille aide à un alignement précis
  • 👁️ Des guides visuels apparaissent pour aider à l'alignement

Redimensionner des Blocs​

Poignée de Redimensionnement :

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

Contrôles de Précision​

infographicimage

Panneau de Position à Droite​

Lorsque un bloc est sélectionné, le panneau de droite fournit :

Contrôles de Position :

  • 📍 Position X - Décalage horizontal depuis le bord gauche (0-100)
  • 📍 Position Y - Décalage vertical depuis le bord supérieur (0-100)
  • 🎨 Z-Index - Ordre des couches 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​

infographicimage

Accéder à la Configuration des Blocs​

Méthode :

  1. Sélectionnez un bloc dans le canevas de l'éditeur
  2. Le panneau de configuration apparaît en bas de l'écran
  3. Le menu déroulant des types de blocs est l'option de configuration principale

Remarque : Tous les blocs ne sont pas encore configurables. Cela changera à mesure que le développement avancera. Plus de types de blocs seront ajoutés dans les futures mises à jour.

Types de Blocs Disponibles​

Objectif : Afficher des images statiques, des logos, des arrière-plans, des GIFs
Options de configuration :

  • 📁 Source de l'image - Téléchargez ou utilisez une URL qui sera utilisée par défaut pour ce bloc. Vous pouvez laisser cela vide si vous souhaitez forcer la sélection d'une image dans la configuration

Cas d'utilisation :

  • Logos d'entreprise et branding
  • Images d'arrière-plan
  • Photos d'équipement
  • GIFs

Exemples de Modèles​

infographicimage

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

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

Nom des blocs dans cet exemple :

  • Chaque bloc montre son objectif prévu
  • Étiquetage clair aide à la configuration
  • Organisation logique facilite la maintenance

📚 Documentation Connexe​

Prochaines Étapes​

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

  1. ⚙️ Configurer les Installations - Appliquer des 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-utilisateurs sur les Modèles

💡 Résumé des Meilleures Pratiques​

Conception de Modèle​

✅ Principes de conception :

  • 🎯 Restez simple - Concentrez-vous sur les informations essentielles
  • 📱 Concevez de manière réactive - 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
  • 🔄 Entretien régulier - Supprimez les modèles inutilisés
  • 👥 Partagez des normes - Assurez la cohérence de l'équipe

🎨 Prêt à Concevoir ? Avec votre modèle créé et configuré, vous êtes prêt à déployer des visualisations époustouflantes à travers vos installations SmartgridX !