[Task] | Projekt Systemu Wizualnego (Design System & Icons)

[PEXEL2002]

Opis zadania i szczegółowe wymagania

Należy opracować spójny język wizualny dla frontendowej części aplikacji LD-Lab. Kluczowym elementem jest stworzenie zestawu ikon dla elementów drabinki (Iteracja 1) oraz zdefiniowanie stanów wizualnych komponentów. W tym zadaniu musi zawierać się:

• Zaprojektowanie ikon w formacie SVG dla podstawowych elementów: Styku NO, Styku NC, Cewki (Standard, Set, Reset), Timera oraz Licznika.
• Zdefiniowanie globalnej palety kolorystycznej, obejmującej: kolor tła, kolor domyślnej linii zasilającej, kolor oznaczający aktywny przepływ prądu (np. neonowy zielony) oraz kolor braku zasilania (np. ciemnoszary).
• Dobranie czytelnej, najlepiej technicznej/monospaced typografii do wyświetlania adresów zmiennych (np. I0.0, Q0.1) bezpośrednio nad lub pod elementami.

Dodatkowy kontekst i źrodła pomocnicze

Docelowy symulator ma być „przystępny i elastyczny”. Główną inspiracją pod kątem układu mogą być profesjonalne środowiska inżynierskie (jak TIA Portal), jednak wizualnie projekt powinien reprezentować nowoczesne, webowe wydanie (z użyciem React + Vite). Warto wdrożyć system zmiennych CSS (lub konfigurację w frameworku np. Tailwind CSS), co znacząco ułatwi późniejszą zmianę stylów podczas streamingu danych live (przełączanie klas).

Definicja wykonania zadania

• Przygotowano pliki SVG dla wszystkich bazowych elementów drabinki.
• Zdefiniowano zmienne CSS (lub odpowiedniki) dla kolorów odpowiadających stanom przepływu prądu (active oraz inactive).
• Stworzono zestaw ikon o jednakowych wymiarach ramki (viewBox), co zagwarantuje poprawne, bezproblemowe pozycjonowanie elementów na liniach (szczeblach) w siatce renderera.