Dokumentacja widgetów

Panele IronFlock są zbudowane z widgetów. Każdy typ widgetu służy konkretnemu celowi — od wyświetlania danych na żywo po przechwytywanie danych od użytkownika. Dodaj dowolny widget przeciągając go z panelu widgetów na kanwę panelu, a następnie konfiguruj go przez panel ustawień.

Widgety dzielą się na cztery grupy: Wizualizacja danych dla wykresów i wyświetlaczy stanu, Treść i multimedia dla treści statycznych i rozbudowanych, Wprowadzanie i sterowanie do przechwytywania danych i wysyłania poleceń, oraz Nawigacja do poruszania się między stronami panelu.

Wizualizacja danych

Widgety przekształcające dane na żywo i historyczne w wykresy, mierniki i wyświetlacze stanu.

Wykres kartezjański

Wyświetla dane szeregów czasowych lub kategorycznych jako wykresy liniowe, słupkowe lub kombinację. Obsługuje wiele serii danych na tym samym wykresie.

Kiedy używać: Trendy wartości czujników w czasie, porównywanie wielu sygnałów obok siebie, pokazywanie dziennych sum jako słupków.

Co konfigurujesz:

• Jedna lub więcej serii danych, każda wskazująca na kolumnę danych z aplikacji
• Typ wykresu per seria: liniowy, słupkowy lub bąbelkowy
• Typ osi X: czasowa lub kategoryczna
• Etykieta osi Y i okno czasowe (np. ostatnie 5 minut zagregowane per minuta)
• Kolory per seria

Miernik

Radialny miernik pokazujący pojedynczą wartość na żywo z kolorowymi strefami progowymi.

Kiedy używać: Temperatura, ciśnienie, poziom napełnienia lub dowolna wartość, gdzie chcesz błyskawiczny status ze strefami zielona/żółta/czerwona.

Co konfigurujesz:

• Kolumna danych do odczytu (zawsze pokazuje ostatnią wartość)
• Jednostka i precyzja dziesiętna
• Granice stref kolorów (np. bezpieczna: 0–60, ostrzeżenie: 60–80, krytyczna: 80–120)
• Opcjonalnie: uśredniaj ostatnie N odczytów dla wygładzenia szumów

Wyświetlacz wartości

Pokazuje jedną lub więcej pojedynczych wartości z etykietami i jednostkami. Czysty i minimalistyczny — świetny do kafelków KPI.

Kiedy używać: Pokazywanie aktualnej temperatury, czasu pracy, ostatniego zdarzenia lub dowolnej kluczowej metryki jako liczby.

Co konfigurujesz:

• Jedna lub więcej kolumn danych, każda z etykietą i jednostką
• Precyzja dziesiętna
• Kolory tekstu per wartość

Sygnał

Zwarte wskaźniki stanu — kółka lub kwadraty — zmieniające kolor na podstawie bieżącej wartości, dające natychmiastowy przegląd statusu.

Kiedy używać: Tablice online/offline urządzeń, stany OK/ostrzeżenie/błąd wielu zasobów, lampki statusu oparte na progach.

Co konfigurujesz:

• Jeden lub więcej sygnałów, każdy odczytujący kolumnę danych
• Reguły mapowania kolorów per sygnał: dokładne dopasowania (np. ONLINE) lub porównania numeryczne (np. >=70)
• Układ (poziomy lub pionowy) i kształt (kółko lub kwadrat)
• Opcjonalny tytuł i podtytuł

Wykres pierścieniowy

Kołowy wykres pokazujący proporcjonalne segmenty.

Kiedy używać: Pokazywanie rozkładu — np. urządzenia online vs offline, udział produkcji według typu produktu.

Co konfigurujesz:

• Segmenty, każdy z etykietą, kolorem i kolumną danych (lub wartością stałą)
• Rozmiar wycięcia (kontroluje średnicę wewnętrznego otworu)

Tabela

Wyświetla wiersze danych w formacie tabelarycznym z konfigurowalnymi kolumnami.

Kiedy używać: Pokazywanie listy maszyn, ostatnich zdarzeń, protokołów inspekcji lub dowolnego zestawu danych strukturalnych.

Co konfigurujesz:

• Kolumny, każda z nagłówkiem, kolumną danych i typem wyświetlania
• Wysokość wiersza i rozmiar czcionki nagłówka
• Liczba wyświetlanych wierszy

Typy wyświetlania kolumn: zwykły tekst, liczba, stan (mapuje wartości na kolory), boolean, obraz lub przycisk (klikalny link).

Mapa ciepła

Siatka mapy ciepła do wizualizacji intensywności w dwóch wymiarach.

Kiedy używać: Zużycie energii według godziny i dnia tygodnia, wykorzystanie maszyn per zmianę, wzorce anomalii w czasie.

Co konfigurujesz:

• Kolumny osi X (np. godzina dnia) i osi Y (np. dzień tygodnia)
• Kolumna wartości dla intensywności ciepła
• Skala min/maks oraz czy używać ciągłego, czy stopniowanego gradientu kolorów

Historia stanu

Pozioma oś czasu pokazująca kiedy stany się zmieniały w czasie, jeden wiersz na zasób.

Kiedy używać: Historia statusu maszyn (pracuje / zatrzymana / konserwacja), dzienniki zmian, osie czasu zdarzeń.

Co konfigurujesz:

• Nazwy stanów i ich kolory (np. Pracuje = zielony, Awaria = czerwony)
• Kolumny danych dla znacznika czasu, wartości stanu i nazwy zasobu

Mapa

Wyświetla dane geograficzne na interaktywnej mapie. Obsługuje znaczniki kołowe i linie śledzenia.

Kiedy używać: Pokazywanie lokalizacji urządzeń, śledzenie pojazdów, pozycje zasobów terenowych.

Co konfigurujesz:

• Styl mapy (jasny lub ciemny)
• Jedna lub więcej serii: okręgi (znaczniki ostatniej pozycji) lub linie (trasy ruchu)
• Kolumny danych dla szerokości i długości geograficznej
• Kolumna przestawna do podziału danych według urządzenia lub zasobu

SCADA

Renderuje interaktywne przemysłowe symbole SVG — pompy, zawory, zbiorniki, silniki, rury, mierniki — z biblioteki SCADA ThingsBoard, z wiązaniami danych na żywo i kolorowaniem opartym na stanie.

Kiedy używać: Schematy procesów i mimiki instalacji — pokazywanie stanu na żywo pomp, zaworów, zbiorników i przepływów na schemacie.

Co konfigurujesz:

• Typ symbolu do wyświetlenia
• Wiązania danych sterujące stanem symbolu (pracuje/zatrzymany, otwarty/zamknięty, poziomy cieczy)
• Kolory stanu (pracuje, zatrzymany, ostrzeżenie, krytyczny) i inne style per symbol

Aby tworzyć pełne ekrany procesów, zobacz SCADA.

Treść i multimedia

Widgety dla treści statycznych i rozbudowanych — obrazy, sformatowany tekst i osadzone strony internetowe.

Obraz

Wyświetla statyczny obraz z URL. Przydatne dla logo, diagramów lub instruktażowej grafiki.

Nakładka obrazu

Umieszcza wartości danych na żywo na tle obrazu — świetne do planów pięter, diagramów lub schematów.

Kiedy używać: Nakładanie temperatur na plan fabryki, pokazywanie poziomów napełnienia na diagramie zbiornika.

Co konfigurujesz:

• Adres URL obrazu tła
• Pinezki nakładki: paski postępu lub etykiety tekstowe umieszczone we względnych współrzędnych na obrazie
• Kolumna danych dla każdej pinezki (wartość na żywo lub stała)

Markdown

Renderuje Markdown (CommonMark i GitHub Flavored Markdown) z podświetlonymi składniowo blokami kodu i interpolacją zmiennych na żywo.

Kiedy używać: Panele dokumentacji, instrukcje lub dynamiczne notatki łączące sformatowany tekst z wartościami danych na żywo.

Co konfigurujesz:

• Tekst źródłowy Markdown
• Zmienne odwoływane w tekście przez {{variableName}}, każda powiązana z kolumną danych lub wartością stałą

Etykieta

Wyświetla pojedynczą konfigurowalną etykietę tekstową z pełną kontrolą nad typografią i wyrównaniem.

Kiedy używać: Tytuły sekcji, podpisy, statyczne adnotacje lub pojedyncza dynamiczna wartość renderowana jako tekst.

Co konfigurujesz:

• Tekst do wyświetlenia (podziały wierszy są zachowane)
• Rozmiar czcionki, kolor, grubość i styl
• Wyrównanie poziome i pionowe oraz kolor tła

Osadzony widok

Osadza zewnętrzną zawartość internetową w izolowanym iframe — pojedynczą stronę lub kilka ułożonych w responsywnej siatce.

Kiedy używać: Integrowanie paneli innych firm, dokumentacji, zewnętrznych narzędzi lub dowolnej strony dostępnej przez sieć w obrębie panelu.

Co konfigurujesz:

• Adres URL do osadzenia (strona docelowa musi zezwalać na osadzanie w iframe)
• Opcjonalny tytuł wyświetlany nad zawartością
• Tryb wielokrotnego osadzania: wiele adresów URL ułożonych w siatce z konfigurowalną przerwą

Wprowadzanie i sterowanie

Widgety przechwytujące dane od użytkownika lub wysyłające polecenia i filtry z powrotem do platformy.

Formularz

Konfigurowalny formularz wprowadzania danych, który zapisuje dane od użytkownika w backendzie danych aplikacji.

Kiedy używać: Ręczne przechwytywanie danych — protokoły inspekcji, dzienniki konserwacji, dane od operatora, wartości zadane parametrów.

Co konfigurujesz:

• Pola formularza różnych typów: tekst, liczba, pole wyboru, obszar tekstowy, lista rozwijana, data/czas
• Opcje per pole: etykieta, wymagane, wartość domyślna, walidacja, min/maks i docelowa kolumna danych
• Opcjonalny tytuł, podtytuł oraz czy formularz otwiera się w oknie dialogowym

Przełącznik

Jeden lub więcej przełączników Material Design odzwierciedlających wartość na żywo i wyzwalających akcję urządzenia po przełączeniu.

Kiedy używać: Włączanie/wyłączanie urządzeń, przełączanie binarnych ustawień urządzenia, wysyłanie poleceń sterowania z panelu.

Co konfigurujesz:

• Jeden lub więcej przełączników, każdy odczytujący kolumnę danych
• Mapowanie stanu dla WŁ./WYŁ.: dokładne wartości lub porównania numeryczne (np. >50)
• Docelowa aplikacja, urządzenie i temat akcji wywoływany przy przełączeniu
• Etykieta i kolory wartości per przełącznik

Lista rozwijana filtrów

Lista rozwijana z predefiniowanymi opcjami, która publikuje wybraną wartość jako parametr filtra do wykorzystania przez inne widgety.

Kiedy używać: Pozwalanie użytkownikom filtrować cały panel według typu urządzenia, linii, lokalizacji lub dowolnej kategorii.

Co konfigurujesz:

• Etykieta wyświetlana nad listą rozwijaną
• Klucz parametru, do którego odwołują się inne widgety w zapytaniach danych
• Lista opcji, każda z etykietą i wartością

Kalendarz filtrów

Wybieracz zakresu dat/czasu — pojedyncza data lub zakres — który przechowuje wybrane znaczniki czasu jako parametry filtra dla innych widgetów.

Kiedy używać: Panele szeregów czasowych, analiza historyczna i raporty z oknem czasowym wybieranym przez użytkownika.

Co konfigurujesz:

• Klucze parametrów początku i końca (użyj jednego dla trybu pojedynczej daty, obu dla zakresu)
• Liczba miesięcy wyświetlanych jednocześnie (1–3)
• Etykieta pola

Nawigacja

Widgety do poruszania się między stronami i sekcjami panelu wielostronicowego.

Pasek nawigacji

Poziomy górny pasek nawigacji z klikalnym tytułem lub marką oraz wieloma elementami z routingiem.

Kiedy używać: Nawigacja najwyższego poziomu między stronami panelu wielostronicowego.

Co konfigurujesz:

• Tekst tytułu/marki i jego docelowa trasa
• Elementy nawigacji, każdy z etykietą, ikoną Material i trasą
• Rozmiar czcionki, grubość i kolory
• Dynamiczne segmenty trasy przez podstawianie {{variable}}

Przycisk nawigacji

Pojedynczy klikalny przycisk kierujący do innej strony lub wykonujący nawigację wstecz w przeglądarce.

Kiedy używać: Przyciski wstecz, linki z wezwaniem do działania lub przejście do określonego widoku panelu.

Co konfigurujesz:

• Etykieta przycisku i opcjonalna ikona Material
• Docelowa trasa (pozostaw puste dla automatycznej nawigacji wstecz)
• Rozmiar czcionki i kolory
• Dynamiczne segmenty trasy przez podstawianie {{variable}}

Nawigacja boczna

Pionowe menu boczne z ikonami Material i podświetlaniem aktywnego elementu na podstawie trasy.

Kiedy używać: Stała nawigacja boczna dla paneli z kilkoma sekcjami lub widokami.

Co konfigurujesz:

• Tytuł z opcjonalną trasą
• Elementy nawigacji, każdy z etykietą, ikoną Material i trasą
• Podświetlanie aktywnego elementu na podstawie bieżącej trasy
• Rozmiar czcionki, grubość i kolory