Language Switcher
Pliki dashboardu
- Szczegóły
Kilka osób prosiło mnie w międzyczasie o udostępnienie kodu dashboardu. Bardzo było mi ciężko zabrać się za to, bo wszstko powstawało w pośpiechu i ciężko było mi dojść po czasie, co jest czym...
Ostatecznie jednak przygotowałem małą paczkę, na bazie której można budować dalej. Nie jest dokonała, pewnie znajdą się wniej powtórzenia, ale jako materiał poglądowy - wystarczy.
Układ dashboardu bazuje na darmowej templatce bootstrapa SB Admin 2. Jeśli będizecie szukać dodatkowych elementów takich jak widgety, wykresy itd. proponuję zajrzeć tam w pierwszej kolejności.
Po stronie PLC należy przygotować wizualizację z elementami odpowiadającymi wszystkim zmiennym wykorzystywanym na stronie www. Wizualizacje muszą być spakowane (Resources -> Targets Settings -> Visualization i checkbox Compression). Każda wizualizacja do przekazywania danych o adresach musi być oznaczona jako Web-Visualization (prawy klawisz na obiekt wizualizacji -> Object Properties). Po stronie dashboardu w plikach "nazwawizualizacj.js" trzeba skonfigurować wszystkie elementy. Szczątkowe opisy są w przykładowych plikach, resztę trzeba rozpracować :)
Parę słów o zawartości:
1. config.php - zawiera definicję elementów lewego menu. Pozwala określić główne pozycje, pod-opcje i ikony z zasobów Awesome Icons. $defaultPage określa, która strona ma się otwierać jako pierwsza po zalogowaniu.
2. login.php - w wierszu 18 należy ustalić dane do logowania. Teraz jest admin/password
3. index.php - można dostosować nazwę strony, która pojawia się w lewym górnym rogu.
Najważniejsze z punktu widzenia PLC są
4. wago/check_addresses.php jest odpytywany po uruchomieniu każdej strony. Pobiera z PLC plik wizualizacji (domyślnie "v_datatransfer"), rozpakowuje go i zwraca adresy w postaci |0|0|..... Koniecznie trzeba w nim zmienić adres PLC w linii 17.
5. wago/read.php służy do odczytywania danych z PLC, trzeba zmienić adres sterownika w linii 12
6. wago/write.php służy do zapisywania danych w PLC, trzeba zmienić adres sterownika w linii 7
Od strony samego dashboardu (html/js/php)
7. VISU/parter.png i VISU/piwnica.png - obrazki wizualizacji, do zamiany na własne szkice
8. pages/visu-1.php i pages/visu-2.php - należy dostosować dane o rozmiarze obrazka tła wizualizacji (z punktu powyżej) i ew. jego nazwy
9. js/visu-1.js i js.visu-2.js - główne pliki konfiguracyjne danego widoku. Na początku należy zdefiniować adresy, rodzaj zmiennych itd. Ich pozycjonowanie najłatwiej robiło mi się w Chrome przy wykrzystaniu opcji deweloperskich (F12) i ręcznym przemieszczaniu poszczególnych elementów
10. Katalog TEMP jest używany przez check_addresses.php. Wrzucane są tam pobrane pliki z PLC przed i po rozpakowaniui.
Oto link do paczki ze wszystkimi plikami. Oczywiście używacie go na własne ryzyko a ja nie daję żadnej gwarancji i nie odpowaidam za cokolwiek, co z nim zrobicie. W przypadku dalszego wykorzystania bardzo proszę o pozostawienie danych autora i linku do tej strony :)