Strona 1 z 1

Node red - sposób na szybki i schludny interfejs użytkownika

: 04 paź 2021, 20:31
autor: Pikczu
Witam,
Trafił mi się pierwszy luźny dzień, można się po-obijać w godzinach pracy i stąd ten post.
Chciałem się z wami podzielić całkiem ciekawym rozwiązaniem na wszelkiego rodzaju interfejsy użytkownika.

Czyli Node-red i dash-board https://nodered.org
Obrazek

Pierwszy raz na Node-red natknąłem się jakieś 3 lata temu, pierwsze uruchomienie zrobiłem na raspberry PI.

Co to jest node-red:
Node-RED to narzędzie programistyczne do łączenia urządzeń sprzętowych, interfejsów API i usług online na nowe i interesujące sposoby.
Udostępnia edytor oparty na przeglądarce, który ułatwia łączenie tzw "flows" (oryginalne tłumaczenie "przepływ" dla słowa "flows" chyba nie ma sensu ) przy użyciu szerokiej gamy węzłów w palecie, które można wdrożyć w środowisku wykonawczym jednym kliknięciem.
Node-RED zapewnia edytor "flows-ów" oparty na przeglądarce, który ułatwia łączenie elementów przy użyciu szerokiej gamy węzłów w palecie. "Flows-y" można następnie wdrażać w środowisku wykonawczym jednym kliknięciem.
Funkcje JavaScript można tworzyć w edytorze za pomocą edytora tekstu sformatowanego.
Wbudowana biblioteka umożliwia zapisywanie przydatnych funkcji, szablonów lub "flows-ów" do ponownego wykorzystania.
Środowisko działa praktycznie na każdej platformie sprzętowej, PC, mac, linux, i cloud itd.

Co można na tym zrobić?
Naprawę sporo i to bardzo bardzo szybko.
Na potrzeby mojego nigdy nie kończącego się projektu sterownika do obracania anteny, podnoszenia masztu i sterownia wszystkim w około.
Jako serwera użyłem małego "komputerka" od Intela z Ubuntu na pokładzie, model DCPP847DYE już leciwy ale działa całkiem nieźle.
WIN_20211004_18_17_07_Pro.jpg
Połączyłem kilka prostych puzzli i wyszedł prosty a zarazem skuteczny interfejs użytkownika dostępny przez przeglądarkę.
flow_1.png
Komunikacji miedzy serwerem a Xmega128a3U odbywa się po UDP ale równie dobrze można zrobić to poprzez konwerter USB na serial (ale to inny temat)

W rozmieszczeniu przycisków, wyświetlaczy i wszelkiego rodzaju elementów graficznych pomaga nam siatka na której w prosty sposób możemy umieścić nasze elementy.
Obrazek