Ga naar hoofdinhoud
Disclaimer

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

Beheer van Publieke Weergave Sjablonen

Publieke weergave sjablonen zijn de basis van uw aangepaste visualisaties. Ze definiëren de lay-out, structuur en visuele elementen die zullen worden toegepast op uw installaties. Deze uitgebreide gids behandelt alles van basis sjablooncreatie tot geavanceerde ontwerptechnieken.

📋 Overzicht​

Wat zijn Publieke Weergave Sjablonen?​

Sjablonen dienen als herbruikbare blauwdrukken die:

  • 📐 Visuele lay-outs voor uw publieke weergaven definiëren
  • 🧩 Inhoudsblokken en hun positionering organiseren
  • 🎨 Ontwerpconsistentie over meerdere installaties vaststellen
  • ⚙️ Snelle implementatie van gestandaardiseerde visualisaties mogelijk maken
  • 🔄 Eenvoudige updates over alle gekoppelde configuraties ondersteunen

Belangrijkste Voordelen​

VoordeelBeschrijving
🚀 EfficiëntieEen keer maken, gebruiken over meerdere installaties
🎯 ConsistentieHandhaaf uniforme ontwerpnormen
🔧 FlexibiliteitEenvoudige aanpassing zonder opnieuw te creëren

🚀 Aan de Slag​

Sjabloon Workflow​

  1. 📐 Ontwerp Lay-out - Plan uw visuele structuur
  2. 🎨 Maak Sjabloon - Bouw met behulp van de sjablooneditor
  3. 💾 Opslaan Sjabloon - Opslaan voor hergebruik over installaties

Vereisten​

Voordat u sjablonen maakt, zorg ervoor dat u:

  • ✅ SmartgridX-account met de juiste permissies
  • ✅ Duidelijke ontwerpcdoelen voor uw visualisatie
  • ✅ Inhoudseisen (afbeeldingen, gegevenspunten, lay-outs)

🎛️ Sjabloon Beheerinterface​

Toegang tot de Sjabloonbeheerder​

infographicimage

Navigatiestappen:

  1. Login op uw SmartgridX-account
  2. Navigeer naar 'Publieke weergaven' in de zijbalk
  3. Klik op de 'Publieke weergave Sjabloon' knop op de overzichtspagina

Dit opent de sjabloonbeheerinterface waar u sjablonen kunt bekijken, maken, bewerken en verwijderen.

Sjabloon Overzicht Tabel​

infographicimage

Beschikbare acties:

  • ➕ Toevoegen - Groene knop om sjablooncreatie te starten
  • ✏️ Bewerken - Wijzig ontwerp van bestaand sjabloon
  • 🗑️ Verwijderen - Verwijder ongebruikt sjabloon

🎨 Sjablooncreatieproces​

Een Nieuw Sjabloon Starten​

Klik op de "Nieuwe Sjabloon Maken" knop om de sjablooneditorinterface te openen.

Sjabloonkop Configuratie​

infographicimage

Titelinstellingen​

Sjabloontitel:

  • Doel: Identificeert het sjabloon in lijsten en configuraties
  • Best practices: Gebruik beschrijvende, project-specifieke namen
  • Voorbeelden: "Fabriek-KPI-Dashboard", "Energie-Monitoring-Lay-out", "Multi-Zone-Weergave"

Marges Configuratie​

Marge-instellingen definiëren het veilige gebied vanaf de rand van het display:

Marge Slider (0-100px):

  • 📐 Bereik: 0 tot 100 pixels van de rand van het display
  • 🎯 Doel: Creëert veilige ruimte om inhoudsnede te voorkomen
  • 📱 Toepassing: Zorgt voor zichtbaarheid op verschillende displaytypes
  • ⚙️ Aanbeveling: Gebruik 10-20px voor standaard displays, 30-50px voor rand-tot-rand schermen

Visuele impact:

  • 0px marge - Inhoud strekt zich uit tot de rand van het display
  • 50px marge - Inhoud begint 50 pixels van alle randen
  • 100px marge - Maximale veilige ruimte met aanzienlijke randafstand

Opslaan Functionaliteit​

De 💾 Opslaan knop (bovenrechts) stelt u in staat om uw huidige sjabloon op te slaan.

🧩 Bloklay-outsysteem​

Het Grid Systeem Begrijpen​

infographicimage

Basisprincipes van het Grid​

De sjablooneditor gebruikt een 100×100 percentage-gebaseerd grid systeem:

Grid Eigenschappen:

  • 📐 Dimensies: 100 eenheden breedte × 100 eenheden hoogte
  • 📊 Eenheden: Percentage waarden (1 eenheid = 1% van de totale dimensie)
  • 🎯 Precisie: Staat exacte positionering en sizing toe
  • 📱 Responsief: Past zich automatisch aan verschillende schermformaten aan

Voorbeelden van Bloklay-outs​

Configuratie: 100 breedte × 100 hoogte
Resultaat: Volledige schermdekking
Gebruikscase: Enkele grote visualisatie, volledige schermafbeelding

┌─────────────────────────────────┐
│                                 │
│         VOLLEDIG BLIJVEN        │
│                                 │
│                                 │
└─────────────────────────────────┘

Blokmanipulatie​

Blokken Toevoegen​

Methode: Klik op de "Block Toevoegen" knop (bovenrechts van de editor)
Resultaat: Nieuw blok verschijnt met standaardafmetingen
Volgende stappen: Positioneer en wijzig de grootte indien nodig

Blokken Positioneren​

Slepen en Neerzetten:

  • 🖱️ Klik en houd vast op een blok om het te verplaatsen
  • 📍 Real-time voorbeeld toont positie tijdens het slepen
  • 🧲 Grid vastklikken helpt bij nauwkeurige uitlijning
  • 👁️ Visuele richtlijnen verschijnen om te helpen bij uitlijning

Blokken Wijzigen​

Hendel voor Wijziging:

  • 📐 Onderste rechterhoek toont wijzighendel wanneer blok is geselecteerd
  • 🔧 Slepen om te wijzigen zowel breedte als hoogte tegelijk
  • 📊 Real-time waarden tonen huidige afmetingen

Precisie Bediening​

infographicimage

Rechterzijde Positioneringspaneel​

Wanneer een blok is geselecteerd, biedt het rechterpaneel:

Positioneringsbedieningen:

  • 📍 X-positie - Horizontale offset vanaf de linker rand (0-100)
  • 📍 Y-positie - Verticale offset van de bovenrand (0-100)
  • 🎨 Z-Index - Laagvolgorde voor overlappende blokken
  • 📏 Breedte - Blokbreedte percentage (1-100)
  • 📏 Hoogte - Blokhoogte percentage (1-100)

⚙️ Blokconfiguratie​

Bloktypen en Eigenschappen​

infographicimage

Toegang tot Blokconfiguratie​

Methode:

  1. Selecteer een blok in de editorcanvas
  2. Configuratiepaneel verschijnt onderaan het scherm
  3. Dropdown voor bloktype is de primaire configuratieoptie

Opmerking: Niet alle blokken zijn momenteel configureerbaar. Dit zal veranderen naarmate de ontwikkeling vordert. Meer bloktypen zullen in toekomstige updates worden toegevoegd.

Beschikbare Bloktypen​

Doel: Toon statische afbeeldingen, logo's, achtergronden, GIF's
Configuratieopties:

  • 📁 Afbeeldingsbron - Upload of URL die als standaard voor dit blok zal worden gebruikt. Je kunt dit leeg laten als je wilt dat er een afbeelding in de configuratie moet worden geselecteerd.

Toepassingsgevallen:

  • Bedrijfslogo's en branding
  • Achtergrondafbeeldingen
  • Foto's van apparatuur
  • GIF's

Template Voorbeelden​

infographicimage

Dit voorbeeld toont een goed gestructureerd sjabloon met:

  • 📊 Duidelijke blokorganisatie met beschrijvende labels
  • 📐 Juiste spatiëring en uitlijning
  • 🎯 Functionele bloktypen voor verschillende inhoudsbehoeften

Block benaming in dit voorbeeld:

  • Elk blok toont zijn bedoelde doel
  • Duidelijke labeling helpt bij de configuratie
  • Logische organisatie ondersteunt onderhoud

📚 Gerelateerde Documentatie​

Volgende Stappen​

Na het maken van je sjabloon:

  1. ⚙️ Configuren Installaties - Pas sjablonen toe op specifieke installaties
  2. 🎛️ Koppel Controllers - Verbind met weergavehardware
  3. 🚀 Starthandleiding - Compleet overzicht van de workflow

Geavanceerde Onderwerpen​

  • 🎨 Geavanceerde Ontwerptechnieken
  • 📊 Aangepaste Data-integratie
  • 🔄 Geautomatiseerde Sjabloonupdates
  • 👥 Multi-gebruikersjabloon samenwerking

💡 Samenvatting van Beste Praktijken​

Sjabloonontwerp​

✅ Ontwerprincipes:

  • 🎯 Houd het simpel - Focus op essentiële informatie
  • 📱 Ontwerp responsief - Test op verschillende schermformaten
  • 🎨 Behoud consistentie - Gebruik gestandaardiseerde kleuren en indelingen

Sjabloonmanagement​

✅ Organisatietips:

  • 📝 Gebruik beschrijvende namen - Maak sjablonen gemakkelijk te vinden
  • 🔄 Regelmatig onderhoud - Verwijder ongebruikte sjablonen
  • 👥 Deel standaarden - Zorg voor consistentie binnen het team

🎨 Klaar om te Ontwerpen? Met je sjabloon aangemaakt en geconfigureerd, ben je klaar om verbluffende visualisaties uit te rollen over je SmartgridX-installaties!