Przejdź do głównej zawartości
Disclaimer

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

Zarządzanie szablonami wyświetlania publicznego

Szablony wyświetlania publicznego są podstawą Twoich niestandardowych wizualizacji. Określają układ, strukturę i elementy wizualne, które będą stosowane w Twoich instalacjach. Ten kompleksowy przewodnik obejmuje wszystko, od podstawowego tworzenia szablonów po zaawansowane techniki projektowe.

📋 Przegląd​

Czym są Szablony wyświetlania publicznego?​

Szablony służą jako wielokrotne plany, które:

  • 📐 Określają wizualne układy dla Twoich wyświetlaczy publicznych
  • 🧩 Organizują bloki treści i ich położenie
  • 🎨 Ustanawiają spójność projektu w wielu instalacjach
  • ⚙️ Umożliwiają szybkie wdrażanie zunifikowanych wizualizacji
  • 🔄 Wspierają łatwe aktualizacje we wszystkich powiązanych konfiguracjach

Kluczowe korzyści​

KorzyśćOpis
🚀 WydajnośćUtwórz raz, używaj w wielu instalacjach
🎯 SpójnośćUtrzymaj jednolite standardy projektowe
🔧 ElastycznośćŁatwa modyfikacja bez konieczności tworzenia od podstaw

🚀 Rozpoczęcie pracy​

Przepływ pracy z szablonami​

  1. 📐 Zaprojektuj układ - Zaplanuj swoją strukturę wizualną
  2. 🎨 Utwórz szablon - Zbuduj za pomocą edytora szablonów
  3. 💾 Zapisz szablon - Przechowuj do ponownego użycia w instalacjach

Wymagania wstępne​

Przed stworzeniem szablonów upewnij się, że masz:

  • ✅ Konto SmartgridX z odpowiednimi uprawnieniami
  • ✅ Jasne cele projektowe dla swojej wizualizacji
  • ✅ Wymagania dotyczące treści (obrazy, punkty danych, układy)

🎛️ Interfejs zarządzania szablonami​

Dostęp do Menedżera szablonów​

infographicimage

Kroki nawigacyjne:

  1. Zaloguj się na swoje konto SmartgridX
  2. Przejdź do 'Wyświetlaczy publicznych' w głównym pasku bocznym
  3. Kliknij przycisk 'Szablon wyświetlania publicznego' na stronie przeglądowej

Otwiera to interfejs zarządzania szablonami, w którym możesz przeglądać, tworzyć, edytować i usuwać szablony.

Tabela przeglądu szablonów​

infographicimage

Dostępne akcje:

  • ➕ Dodaj - Zielony przycisk do rozpoczęcia tworzenia szablonu
  • ✏️ Edytuj - Modyfikuj istniejący projekt szablonu
  • 🗑️ Usuń - Usuń nieużywany szablon

🎨 Proces tworzenia szablonów​

Rozpoczynanie nowego szablonu​

Kliknij przycisk "Utwórz nowy szablon", aby otworzyć interfejs edytora szablonów.

Konfiguracja nagłówka szablonu​

infographicimage

Ustawienia tytułu​

Tytuł szablonu:

  • Cel: Identyfikuje szablon na listach i w konfiguracjach
  • Najlepsze praktyki: Używaj opisowych, specyficznych dla projektu nazw
  • Przykłady: "Dashboard-KPI-Fabryka", "Układ-Monitorowania-Energii", "Wyświetlacz-Multi-Strefowy"

Konfiguracja marginesów​

Ustawienia marginesów definiują bezpieczny obszar od krawędzi wyświetlacza:

Suwnica marginesów (0-100px):

  • 📐 Zakres: od 0 do 100 pikseli od krawędzi wyświetlacza
  • 🎯 Cel: Tworzy bezpieczne odstępy, aby zapobiec obcięciu treści
  • 📱 Zastosowanie: Zapewnia widoczność na różnych typach wyświetlaczy
  • ⚙️ Rekomendacja: Używaj 10-20px dla standardowych wyświetlaczy, 30-50px dla ekranów od krawędzi do krawędzi

Wpływ wizualny:

  • 0px margines - Treść rozciąga się do krawędzi wyświetlacza
  • 50px margines - Treść zaczyna się 50 pikseli od wszystkich krawędzi
  • 100px margines - Maksymalny bezpieczny obszar z dużymi odstępami marginesów

Funkcjonalność zapisu​

Przycisk 💾 Zapisz (w prawym górnym rogu) umożliwia zapisanie aktualnego szablonu.

🧩 System układu bloków​

Zrozumienie systemu siatki​

infographicimage

Podstawy siatki​

Edytor szablonów korzysta z systemu siatki procentowej 100×100:

Właściwości siatki:

  • 📐 Wymiary: 100 jednostek szerokości × 100 jednostek wysokości
  • 📊 Jednostki: Wartości procentowe (1 jednostka = 1% całkowitego wymiaru)
  • 🎯 Precyzja: Umożliwia dokładne pozycjonowanie i rozmiarowanie
  • 📱 Responsywność: Automatycznie dostosowuje się do różnych rozmiarów ekranu

Przykłady układu bloków​

Konfiguracja: 100 szerokości × 100 wysokości
Wynik: Pełnoekranowe przykrycie
Przypadek użycia: Pojedyncza duża wizualizacja, obraz na pełny ekran

┌─────────────────────────────────┐
│                                 │
│         PEŁNY BLOK              │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulacja blokami​

Dodawanie bloków​

Metoda: Kliknij przycisk "Dodaj blok" (w prawym górnym rogu edytora)
Wynik: Nowy blok pojawia się z domyślnymi wymiarami
Kroki następne: Ustal pozycję i rozmiar według potrzeb

Pozycjonowanie bloków​

Przeciągnij i upuść:

  • 🖱️ Kliknij i przytrzymaj dowolny blok, aby go przenieść
  • 📍 Podgląd w czasie rzeczywistym pokazuje położenie podczas przeciągania
  • 🧲 Przypinanie do siatki pomaga w precyzyjnym wyrównaniu
  • 👁️ Wskazówki wizualne pojawiają się, aby pomóc w wyrównaniu

Zmiana rozmiaru bloków​

Uchwyt do zmiany rozmiaru:

  • 📐 Prawy dolny róg pokazuje uchwyt do zmiany rozmiaru, gdy blok jest wybrany
  • 🔧 Przeciągnij, aby zmienić rozmiar zarówno szerokości, jak i wysokości jednocześnie
  • 📊 Wartości w czasie rzeczywistym pokazują aktualne wymiary

Kontrola precyzji​

infographicimage

Panel pozycjonowania po prawej stronie​

Gdy blok jest wybrany, prawy panel zapewnia:

Kontrole położenia:

  • 📍 Pozycja X - Poziomy offset od lewej krawędzi (0-100)
  • 📍 Pozycja Y - Pionowy offset od górnej krawędzi (0-100)
  • 🎨 Z-Index - Kolejność warstw dla nakładających się bloków
  • 📏 Szerokość - Procentowa szerokość bloku (1-100)
  • 📏 Wysokość - Procentowa wysokość bloku (1-100)

⚙️ Konfiguracja bloków​

Typy bloków i właściwości​

infographicimage

Dostęp do konfiguracji bloków​

Metoda:

  1. Wybierz blok w obszarze roboczym edytora
  2. Panel konfiguracji pojawia się w dolnej części ekranu
  3. Menu rozwijane typu bloku jest główną opcją konfiguracyjną

Uwaga: Nie wszystkie bloki są obecnie konfigurowalne. To się zmieni w miarę postępu prac rozwojowych. Więcej typów bloków zostanie dodanych w przyszłych aktualizacjach.

Dostępne typy bloków​

Cel: Wyświetlanie statycznych obrazów, logo, tła, GIF-ów
Opcje konfiguracyjne:

  • 📁 Źródło obrazu - Prześlij lub podaj URL, który będzie używany jako domyślny dla tego bloku. Możesz pozostawić to puste, jeśli chcesz wymusić wybór obrazu w konfiguracji

Zastosowania:

  • Logo firmy i branding
  • Obrazy tła
  • Zdjęcia sprzętu
  • GIF-y

Przykłady szablonów​

infographicimage

Ten przykład demonstruje dobrze zorganizowany szablon z:

  • 📊 Jasną organizacją bloków z opisowymi etykietami
  • 📐 Odpowiednimi odstępami i wyrównaniem
  • 🎯 Funkcjonalnymi typami bloków dostosowanymi do różnych potrzeb treści

Nazewnictwo bloków w tym przykładzie:

  • Każdy blok pokazuje swój zamierzony cel
  • Jasne etykietowanie ułatwia konfigurację
  • Logiczna organizacja wspiera konserwację

📚 Powiązana dokumentacja​

Kolejne kroki​

Po stworzeniu szablonu:

  1. ⚙️ Skonfiguruj instalacje - Zastosuj szablony do konkretnych instalacji
  2. 🎛️ Połącz kontrolery - Podłącz sprzęt wyświetlający
  3. 🚀 Przewodnik dla początkujących - Kompletna przegląd workflow

Zaawansowane tematy​

  • 🎨 Zaawansowane techniki projektowania
  • 📊 Niestandardowa integracja danych
  • 🔄 Automatyczne aktualizacje szablonów
  • 👥 Współpraca nad szablonami w wielu użytkowników

💡 Podsumowanie najlepszych praktyk​

Projektowanie szablonów​

✅ Zasady projektowania:

  • 🎯 Zachowaj prostotę - Skup się na istotnych informacjach
  • 📱 Projektuj responsywnie - Testuj na różnych rozmiarach ekranów
  • 🎨 Utrzymuj spójność - Stosuj ustandaryzowane kolory i układy

Zarządzanie szablonami​

✅ Wskazówki organizacyjne:

  • 📝 Używaj opisowych nazw - Ułatwiaj wyszukiwanie szablonów
  • 🔄 Regularna konserwacja - Usuwaj nieużywane szablony
  • 👥 Dziel się standardami - Zapewnij spójność w zespole

🎨 Gotowy do projektowania? Po utworzeniu i skonfigurowaniu szablonu, jesteś gotowy do wdrożenia oszałamiających wizualizacji w swoich instalacjach SmartgridX!