Po ostatnim wyczynie zespołu Spacex, kiedy to doszło do udanego startu statku kosmicznego Dragon, zrobiło się głośno o technologii jakiej inżynierowie użyli do wyświetlenia interfejsu użytkownika. Ku zdziwieniu wielu programistów, wszystkie dane procesowe związane z działaniem i sterowaniem Smokiem były wyświetlane przy użyciu Chromium + JavaScript. Czyli w dużym uproszczeniu, była to przeglądarka internetowa, w której była wyświetlona aplikacja webowa.
Zainspirowany tym wydarzeniem postanowiłem przenieść tą jakby nie było kosmiczna technologie na nasze przemysłowe poletko. W tym artykule postaramy się wykonać interfejs, między człowiekiem a maszyna (HMI) przy użyciu najnowszych technologii prosto z kosmosu.
Startujemy wziiiuuuum….
To co zrobię w tym artykule, to będę chciał dobrać się do pamięci sterownika PLC, a następnie interesujące nas bity wysłać w eter przy pomocy technologii WebSocket, a to wszystko przy użycia języka Python. Jeśli to nam się uda to nie pozostanie nic innego jak stworzyć panel użytkownika, na którym to będziemy mogli wyświetlić wartości naszych bitów lub je wysterować. Do tego zadanie zaprzęgniemy jedną z obecnie najpopularniejszych bibliotek języka JavaScript, mianowicie ReactJS.
Wiem, że istnieje mnóstwo gotowych rozwiązani dzięki którym możemy to zrealizować. Cały projekt jest stworzony w celach edukacyjnych i przede wszystkim dla zabawy. Dzięki takiemu podejściu zyskujemy dostęp do całej gamy narzędzi wykorzystywanych w tworzeniu aplikacji webowych, desktopowych czy mobilnych, które to bardzo potrafią pomóc w wielu obszarach choćby łatwiejszej pracy zespołowej nad jednym projektem, dzięki kontroli wersji (git) i przede wszystkim mnogość dostępnych materiałów do nauki i społeczność, która jest związana z tymi technologiami i chętna do pomocy.
Kolejnymi rzeczami, które dzięki temu możemy zyskać to ilość gotowych bibliotek i API, które możemy wykorzystywać w naszej aplikacji. W bardzo łatwy sposób możemy dodać logowanie do naszej aplikacji przy pomocy naszych kont gmail, fb lub Microsoftu. Istnieje bardzo wiele API wysyłające np. dane z aktualną pogodą.
Spinając to wszystko razem możemy stworzyć np. aplikacje, do której mamy dostęp po zalogowaniu. Aplikacja pobiera i waliduje dane dotyczące pogody (idąc krok dalej możemy wykorzystać algorytmy uczenia maszynowego do optymalizacji) na podstawie danych pogodowych i naszej logiki sterujemy PLC, który to już może robić wszystko począwszy od aktywacji pomp do podlewania roślin skończywszy na zaparzeniu kawy. Tylko nasza kreatywność jest tu ograniczeniem.
Na potrzeby tego artykułu z racji stworzymy sobie symulator rakiety. Całość chciałem podzielić na trzy główne etapy.
Etap I
Przygotowanie prostej aplikacji w TIA Portal opartej o sterownik S7-1500. Wybór padł na Siemensa dlatego, że z nim mam najwięcej styczności a po drugie taki PLC jest mózgiem mojej stacji szkoleniowej.
Etap II
Na tym etapie przygotujemy kod w pythonie który będzie mostkiem pomiędzy naszym sterownikiem, a panelem sterowania rakietą. W tym etapie możemy wydzielić kolejne kroki:
- Przygotowanie funkcji do pisania i czytania z pamięci sterownika.
- Utworzenia producenta i konsumenta danych dla naszej aplikacji klienckiej.
- Stworzenie i wystartowania serwera.
Etap III
Tutaj stworzymy naszą aplikację webową, która będzie wyświetlała interesujące nas dane w oknie przeglądarki oraz wysyłała rozkazy do rakiety. Tutaj też pokuszę się o rozbicie tego na podetapy:
- Zaprojektowanie jak nasza aplikacja ma wyglądać.
- Nawiązanie połączenia z serwerem pythona, odebranie wiadomości.
- Wysyłanie rozkazów.
- Stworzenie Timera.
Weźmy się w końcu do roboty.
Etap I – TIA Portal
Z racji miejsca, w którym się znajdujemy podejrzewam, że bardzo dużo czytelników zna TIA portal lepiej niż ja, dlatego nie będę się zbyt rozpisywał nad tym jak tworzyć projekt, konfigurować hardware itd. Skupie się na tym na co musimy zwrócić uwagę, żeby nasza aplikacja stal się dostępny dla naszego pythonowego serwera.
Po tym jak wpadłem na pomysł stworzenia takiego rozwiązania dla HMI, a przy okazji chcąc się nauczyć języka pythona zacząłem przeszukiwać Internet jak się za to zabrać. Trafiłem na bibliotekę snap7, która pasowała idealnie do tego co chcę zrobić i była dostępna dla pythona.
W tym miejscu również polecam dokumentacje biblioteki snap7, w której dowiemy się między innymi z jakim sterownikami jest ona kompatybilna. http://snap7.sourceforge.net/
Poniżej, moja konfiguracja Hardwerowa PLC (Stacja szkoleniowa)
W TIA portal musimy w klikać odpowiednie przywileje (wszystko to znajdziemy na stronie snap7).
Teraz czas na napisanie logiki, która będzie realizował nasz PLC. Tak jak na wstępnie pisałem chcę, żeby było coś bardzo prostego wręcz trywialnego a tylko pokazało, że jest to możliwe.
Będziemy mieć dwa przyciski, którymi kolejno będziemy uruchamiać najpierw nasz rakietowy silnik, a drugi uruchomi 10 sekundowy timer. Po 10 sekundach nasza rakieta wystartuje.
Na nasze potrzeby to wszystko.
Etap II – serwer w pythonie
W tym miejscu czas wspomnieć o tym, że interpreter pythona jest multiplatformowy. Dla nas oznacza to, że nasza aplikacja równie dobrze może być uruchamiana np. na raspberryPI. Jednym z warunków koniecznych jest to, że nasz serwer pythona musi być uruchomiony na maszynie, która znajduje się w tej samej sieci co nasz sterownik PLC.
Dobrą praktyką w programowaniu w języku python jest tworzenie środowiska programistycznego per aplikacje. Pozwala nam to zachować porządek w przypadku instalowania dodatkowych bibliotek. Wszystkie zależności potrzebne do działania naszej aplikacji są odseparowane pomiędzy naszymi projektami, co pozwala na używanie różnych bibliotek czy ich wersji w zależności od Aplikacji.
Do używania pythona potrzebna jest elementarna wiedze na temat poruszania i posługiwania się terminalem.
Zaczniemy od stworzenia folderu dla naszej aplikacji. Ja nazwę go ServerSocketIO.
Następnie będąc w naszym folderze uruchamiamy poniże polecenie, które utworzy nam nowe środowisko o nazwie socketio i folder o tej samej nazwie, w której znajduje się skrypt aktywujący.
Teraz pozostało nam aktywować nasze środowisko.
Po instalacji pythona w nasze ręce jest oddawany dedykowany manager bibliotek – pip. Używając właśnie tego narzędzia dodamy nasze pakiety. W tym miejscu zamieszczę linki przydatne w tym, co właśnie robimy.
Linki:
- https://www.python.org/downloads/
- https://pypi.org/project/python-snap7/
- https://websockets.readthedocs.io/en/stable/intro.html
- https://sourceforge.net/projects/snap7/
- https://python-snap7.readthedocs.io/en/latest/client.html
Używając kolejno poleceń dodamy niezbędne zależności:
Już prawie mamy wszystko przygotowane, do pełni szczęścia musimy jeszcze ręcznie dokopiować jedną bibliotekę snap7.dll do folderu, gdzie mamy zainstalowanego pythona. Plik snap7.dll znajdziemy po rozpakowaniu archiwum ze strony https://sourceforge.net/projects/snap7/ . Domyślna ścieżka instalacji pythona 3.7 to:
C:\\Users\\username\\AppData\\Local\\Programs\\Python\\Python37-32
Przejdziemy do pisania kodu, dla porządku stworzymy sobie 2 pliki jeden plc.py, w którym będziemy pisać funkcje do odczytu i zapisu wartości bitów w pamięci naszego S7-1500. Drugi plik nazwiemy server.py – w nim będzie napisany nasz główny program.
Plc.py
W naszym pliku korzystając z dobrodziejstw biblioteki snap7, która to w linii 2 i 3 importujemy, stworzyliśmy 4 funkcje odpowiednio odpowiedzialne za odczyt/zapis wyjść cyfrowych oraz odczyt/zapis wejść cyfrowych.
Funkcje do odczytu jako swoje parametry przyjmują:
- plc – Sterownik (który utworzymy w programie głównym),
- byte – konkretny numer bajtu sterownika,
- bit – numer bitu na bajcie, który podaliśmy wcześniej.
I zwracają True albo False – w zależności od tego w jakim stanie jest bit, który odpytujemy.
Funkcje do zapisu dodatkowo przyjmują:
- cmd – wartość 0 lub 1 co oznacza stan niski lub wysoki na danym bicie.
Funkcja do zapisu ustawia wybrany bit pamięć w stan zadany w parametrze cmd.
Funkcja read_area(), odnosi się do konkretnych obszarów pamięci sterownika. W dokumentacji znajdziemy, że PE to nasze Process Inputs, PA to Process Outputs.
Plik server.py
Tutaj zaczniemy od zaimportowania pliku, który przed chwilą utworzyliśmy oraz biblioteki snap7.
Następnie stworzymy sobie obiekt, który będzie reprezentował nasz sterownik PLC oraz kilka zmiennych potrzebnych do połączenia z naszym sterownikiem – IP, RACK, SLOT co się kryje pod tymi zmiennymi automatycy doskonale wiedzą. Następnie spróbujemy się połączyć ze sterownikiem, który znajduje się w tej samej sieci pod adresem 192.168.10.56.
Teraz stworzymy sobie 2 funkcje, pierwsza consumer(message) w zależności od tego co otrzyma w wiadomości od naszej aplikacji webowej będzie ustawiać bit I0.0 lub I0.1 w stan wysoki lub niski.
Druga producer() będzie komunikować ze sterownikiem dzięki funkcja, które napisaliśmy w pliku plc.py oraz zwracać status połączenia ze sterownikiem dzięki funkcji get_conncected() dostępnej z biblioteki snap7. Tak przygotowane dane będzie opakowywać w format przyjazny dla przeglądarek mianowicie w JSON.
Teraz korzystając z dokumentacji do biblioteki websocket (https://websockets.readthedocs.io/en/stable/intro.html), asynchronicznie obsługujemy nasze funkcje consumer i producer i uruchamiamy serwer na podanym przez nas porcie.
Nasz serwer jest gotowy!!!
Etap III – Aplikacja webowa w ReactJS
Zgodnie z zaleceniem twórcy reacta naszą aplikację stworzymy korzystając z narzędzia
- create-react-app
https://pl.reactjs.org/docs/create-a-new-react-app.html
Zanim przejdziemy do pisania kodu zastanówmy się jak nasza aplikacja ma wyglądać, lub jeśli jest to faktycznie coś więcej niż zabawa, możemy zlecić przygotowanie layoutu i grafiki profesjonalnemu designerowi, który uwzględni wszystkie dobre praktyki związane z UI(User interface) i UX(User experience). My jako programiści dostaniemy gotowe elementy graficzne, które pozostanie nam „zakodować”. Jeśli natomiast sami chcemy pokusić się o wymyślenie naszego wyglądu poza oczywiście kartką i ołówkiem polecam narzędzie Adobe XD, które świetnie nadaje się do prototypownia naszych pomysłów.
Ja swój panel sterowania rakietą wyobrażam sobie w ten sposób.
Najważniejsze, czyli pomysł mamy – teraz zostało nam naszą ideę ożywić i przenieść do przeglądarki.
I tu wchodzi react, cały na biało…. Ekh, z racji tego, że temat jest bardzo szeroki skrótowo pozwolę sobie opisać o co tu chodzi. W podejściu klasycznym do tworzenia aplikacji webowych używamy HTML jako języka znaczników, dzięki któremu w przeglądarce możemy wyświetlać nasze treści, a dalej CSS – technologii, która mówi przeglądarce jak nasze treści zawarte w HTML mają wyglądać (kolor, rozmiar i 1000 innych rzeczy). JavaScript to język skryptowy, wykonywany przez przeglądarkę, który pozwala zamienić nasze statyczne strony w coś bardziej interaktywnego, dzięki JS-owi możemy prosić serwery o wysłanie nam jakichś danych jak i sami wysyłać dane do niego. Poza tym możemy dowolnie edytować nasze właściwości CSS lub dynamicznie dodawać, edytować i usuwać znaczniki HTML.
React wszystkie te technologie upchnął w jedną i dzięki temu narzędziu możemy pisać wszystko używając tylko JavaScript. Oczywiście istnieje bardzo dużo podejść do tematu i są różne możliwości wykorzystywania biblioteki ReactJS.
Ja do przeniesienia naszego layout do przeglądarki, wykorzystam bibliotek Bootstrap, a właściwie jej reactową implementację, która nosi nazwę „reactstrap”. Dzięki niej łatwo możemy ułożyć elementy na stronie używając wierszy i kolumn. Nie jest to artykuł stricte poświęcony reactowi czy bootstrapowi dlatego, wszystkich chętnych do zgłębienia tych technologii odsyłam do dokumentacji.
Postępując zgodnie z instrukcjami na stronie create-react-app, udało nam się zainstalować i uruchomić naszą pierwszą reactową aplikację. Nie pozostało nam nic innego jak usunąć nie potrzebne nam rzeczy i napisać nasze. Całość mojego kodu będzie dostępny na moim githubie, także będzie można w domowym zaciszu zobaczyć co tam się wydarzyło.
Tak wygląda nasze wizja przeniesiona na kod reacta. Do tego jeszcze parę linijek kodu w CSS, która trochę to wszystko podkoloryzuje.
Nasza część „statyczna” jest gotowa, teraz czas pchnąć w to wszystko trochę życia i zacząć rozmawiać z naszym PLC za pośrednictwem naszego serwera w pythonie.
Nie będę dokładnie opisywał co robi każda linia, pozwolę sobie tylko na objaśnienie jaka logika ukryta jest za tym kodem.
Do komunikacji z naszym serwerem użyjemy narzędzie „react-use-websocket“. Na początku przygotowujemy sobie dane, ja to roboczo nazywam na „pierwsze wczytanie” aplikacji, które później sobie nadpiszemy już wartościami wysyłanymi przez nasz PLC za pośrednictwem naszego serwera. Zabieg ten ma calu poprawne wyświetlenie aplikacji za nim nawiążemy połączenie z serwerem.
W kolejnym kroku właśnie ustawiamy już nasza zmieną „input” właściwymi danymi z serwera, które to znajdują się w obiekcie należącym do naszego „hooka” do obsługi websocketów lastJsonMessage. Funkcja useEffect sprawi, że dane będę na bieżąco aktualizowane.
Kolejne dwie funkcje są odpowiedzialne za wysyłanie danych do serwera po użyciu naszych przełączników w panelu sterowania. Jeśli przełącznik timer lub engine zmieni swoja wartość, czyli innymi słowy zostanie naciśnięty, do serwera powędruje przygotowana przez nas wiadomość. Funkcje handleEngine i handleTimer obsługują właśnie zmianę tych wartości. Ostatnia rzeczą jest timer odliczający od 10 do 0, który zostanie uruchomiony po użyciu przełącznika timer.
Tak ogólnie prezentuje się implementacja naszego frontu.
Linki do githuba.
Server – https://github.com/sobiecki-marcin/iAutomatyka
Klient- https://github.com/sobiecki-marcin/iAutomatyka_ReactJS_HMI
Poniżej filmik ze startu naszej rakiety
Podsumowanie
Podsumowując, rozwiązanie może nie należy do najprostszych, ale daje w zamian nieograniczone możliwości.
Dzięki temu, że zarówno nasz serwer jak i klient mogą być uruchomione na RaspberryPI, a malinka posiada wyjście HDMI, to możemy w łatwy sposób wyświetlić naszą wizualizację. Ewentualnie tak skonfigurować aplikację Reactową, że będzie dostępna w całej naszej lokalnej sieci, pod adresem IP hosta, na którym jest uruchomiona. Sprawi to, że będziemy mieć dostęp do naszej aplikacji na każdym urządzeniu w sieci czy to telefon, tablet czy inny komputer.
Ocena artykułu zgłoszonego do Konkursu iAutomatyka 4.0 pisz artykuły, zdobywaj punkty, wymieniaj je na nagrody.
Kryterium 1 2 3 4 5 6 7 8 9 10 Punkty (0-2) 1 2 2 2 2 0 2 2 1 1 Suma zdobytych punktów: 15
