Hoppa till huvudinnehåll
Disclaimer

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

Hantering av Offentliga Visningsmallar

Offentliga visningsmallar är grunden för dina anpassade visualiseringar. De definierar layout, struktur och visuella element som kommer att tillämpas på dina installationer. Denna omfattande guide täcker allt från grundläggande skapande av mallar till avancerade designtekniker.

📋 Översikt​

Vad är Offentliga Visningsmallar?​

Mallar fungerar som återanvändbara mönster som:

  • 📐 Definierar visuella layouter för dina offentliga visningar
  • 🧩 Organiserar innehållsblock och deras positionering
  • 🎨 Etablerar designkonsekvens över flera installationer
  • ⚙️ Möjliggör snabb distribution av standardiserade visualiseringar
  • 🔄 Stöder enkla uppdateringar över alla kopplade konfigurationer

Nyckelfördelar​

FördelBeskrivning
🚀 EffektivitetSkapa en gång, använd över flera installationer
🎯 KonsekvensBibehåll enhetliga designstandarder
🔧 FlexibilitetLätt att modifiera utan att återskapa från grunden

🚀 Komma igång​

Mallarbetsflöde​

  1. 📐 Designa Layout - Planera din visuella struktur
  2. 🎨 Skapa Mall - Bygg med hjälp av mallredigeraren
  3. 💾 Spara Mall - Lagra för återanvändning över installationer

Förutsättningar​

Innan du skapar mallar, se till att du har:

  • ✅ SmartgridX-konto med lämpliga behörigheter
  • ✅ Klara designmål för din visualisering
  • ✅ Innehållskrav (bilder, datapunkter, layouter)

🎛️ Mallhanteringsgränssnitt​

Åtkomst till Mallhanteraren​

infographicimage

Navigeringssteg:

  1. Logga in på ditt SmartgridX-konto
  2. Navigera till 'Offentliga visningar' i den vänstra sidopanelen
  3. Klicka på 'Offentlig visning Mall'-knappen på översiktssidan

Detta öppnar gränssnittet för mallhantering där du kan visa, skapa, redigera och ta bort mallar.

Översiktstabel för Mallar​

infographicimage

Tillgängliga åtgärder:

  • ➕ Lägg till - Grön knapp för att påbörja skapandet av en mall
  • ✏️ Redigera - Modifiera befintlig malldesign
  • 🗑️ Ta bort - Ta bort oanvänd mall

🎨 Mallskapande Process​

Börja en Ny Mall​

Klicka på "Skapa Ny Mall" knappen för att öppna gränssnittet för mallredigering.

Mallhuvudkonfiguration​

infographicimage

Titelinställningar​

Malltitel:

  • Syfte: Identifierar mallen i listor och konfigurationer
  • Bästa metoder: Använd beskrivande, projektspecifika namn
  • Exempel: "Fabrik-KPI-Dashboard", "Energi-Övervaknings-Layout", "Multi-Zone-Display"

Marginalkonfiguration​

Marginalinställningar definierar det säkra området från visningens kanter:

Marginalreglage (0-100px):

  • 📐 Omfång: 0 till 100 pixlar från visningens kant
  • 🎯 Syfte: Skapar säker avstånd för att förhindra innehållsklippning
  • 📱 Tillämpning: Säkerställer synlighet på olika visningstyper
  • ⚙️ Rekommendation: Använd 10-20px för standardvisningar, 30-50px för kant-till-kant-skärmar

Visuell påverkan:

  • 0px marginal - Innehållet sträcker sig till visningens kanter
  • 50px marginal - Innehållet börjar 50 pixlar från alla kanter
  • 100px marginal - Maximalt säkert område med betydande kantavstånd

Spara Funktionalitet​

💾 Spara-knappen (i det övre högra hörnet) låter dig spara din nuvarande mall.

🧩 Blocklayoutsystem​

Förståelse för Rutnätsystemet​

infographicimage

Rutnätsgrunder​

Mallredigeraren använder ett 100×100 procentbaserat rutnätsystem:

Rutnätsattribut:

  • 📐 Dimensioner: 100 enheter bredd × 100 enheter höjd
  • 📊 Enheter: Procentvärden (1 enhet = 1% av total dimension)
  • 🎯 Precision: Möjliggör exakt positionering och storleksjustering
  • 📱 Responsiv: Anpassar sig automatiskt till olika skärmstorlekar

Exempel på Blocklayout​

Konfiguration: 100 bredd × 100 höjd
Resultat: Fyller hela skärmen
Användningsfall: En stor visualisering, fullskärmsbild

┌─────────────────────────────────┐
│                                 │
│         HELA BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

Blockmanipulation​

Lägga till Block​

Metod: Klicka på "Lägg till Block"-knappen (övre högra hörnet av redigeraren)
Resultat: Nytt block visas med standarddimensioner
Nästa steg: Positionera och justera storleken vid behov

Positionera Block​

Dra och Släpp:

  • 🖱️ Klicka och håll något block för att flytta det
  • 📍 Realtidsförhandsvisning visar positionen medan du drar
  • 🧲 Rutnätsinställning hjälper till med exakt justering
  • 👁️ Visuella guider dyker upp för att hjälpa till med justeringen

Justera Blockstorlek​

Ändra storlek-handtag:

  • 📐 Nedre högra hörnet visar ändra storlek-handtag när blocket är valt
  • 🔧 Dra för att justera storleken både bredd och höjd samtidigt
  • 📊 Realtidsvärden visar aktuella dimensioner

Precisionkontroller​

infographicimage

Höger Sidopanel för Position​

När ett block är valt, ger den högra panelen:

Positionskontroller:

  • 📍 X-position - Horisontell förskjutning från vänster kant (0-100)
  • 📍 Y-position - Vertikal förskjutning från övre kant (0-100)
  • 🎨 Z-index - Lagerordning för överlappande block
  • 📏 Bredd - Procentandel av blockbredd (1-100)
  • 📏 Höjd - Procentandel av blockhöjd (1-100)

⚙️ Blockkonfiguration​

Blocktyper och Egenskaper​

infographicimage

Åtkomst till Blockkonfiguration​

Metod:

  1. Välj ett block i redigeringsytan
  2. Konfigurationspanelen visas längst ner på skärmen
  3. Blocktypens rullgardinsmeny är det primära konfigurationsalternativet

Notera: Inte alla block är för närvarande konfigurerbara. Detta kommer att förändras i takt med att utvecklingen fortsätter. Fler blocktyper kommer att läggas till i framtida uppdateringar.

Tillgängliga Blocktyper​

Syfte: Visa statiska bilder, logotyper, bakgrunder, GIF:er
Konfigurationsalternativ:

  • 📁 Bildkälla - Ladda upp eller ange URL som kommer att användas som standard för detta block. Du kan lämna detta tomt om du vill tvinga en bild att väljas i konfigurationen

Användningsfall:

  • Företagslogotyper och varumärkesprofilering
  • Bakgrundsbilder
  • Utrustningsfoton
  • GIF:er

Mall Exempel​

infographicimage

Detta exempel demonstrerar en välstrukturerad mall med:

  • 📊 Tydlig blockorganisation med beskrivande etiketter
  • 📐 Rätt mellanrum och justering
  • 🎯 Funktionella blocktyper för olika innehållsbehov

Blocknamn i detta exempel:

  • Varje block visar sitt avsedda syfte
  • Tydlig märkning hjälper med konfiguration
  • Logisk organisation stöder underhåll

📚 Relaterad Dokumentation​

Nästa Steg​

Efter att ha skapat din mall:

  1. ⚙️ Konfigurera Installationer - Tillämpa mallar på specifika installationer
  2. 🎛️ Länk Kontrollanter - Anslut för att visa hårdvara
  3. 🚀 Kom igång-guide - Komplett arbetsflödesöversikt

Avancerade Ämnen​

  • 🎨 Avancerade Designtekniker
  • 📊 Anpassad Dataintegration
  • 🔄 Automatiserade Malluppdateringar
  • 👥 Samarbete om Mallar för Flera Användare

💡 Bästa Praxis Sammanfattning​

Malldesign​

✅ Designprinciper:

  • 🎯 Håll det enkelt - Fokusera på väsentlig information
  • 📱 Designa responsivt - Testa på olika skärmstorlekar
  • 🎨 Upprätthåll konsekvens - Använd standardiserade färger och layouter

Mallhantering​

✅ Organiseringstips:

  • 📝 Använd beskrivande namn - Gör mallar lätta att hitta
  • 🔄 Regelbundet underhåll - Ta bort oanvända mallar
  • 👥 Dela standarder - Säkerställ teamkonsekvens

🎨 Redo att Designa? Med din mall skapad och konfigurerad är du redo att distribuera fantastiska visualiseringar i dina SmartgridX-installationer!