Czuję się już trochę zmęczony tą niepewnością o dalsze losy mojej domowej automatyki. Najpierw BLYNK teraz VIRTUINO zaskakuje mnie "propozycją" wysokopłatnej subskrypcji swoich produktów. Zmęczony również potrzebą uczenia się od początku działania systemu przeprogramowania ESP walczenia z błędami. Postanowiłem wziąć sprawy w swoje ręce i stworzyć swój własny program obsługi SMART HOME.
Byłbym nieuczciwy porównując styl rozwodu BLYNKa i VIRTUNO. BLYNK, który w dużej mierze powstał z pomocą ogromnej społeczności pasjonatów pogonił ich (nas) wszystkich bez dania racji. A przecież to my finansowaliśmy ich na Kickstarterze czy potem dokupując widżety. W zamian dostaliśmy propozycję kupienia subskrypcji na poziomie biznesowym.
Ilias stworzył VIRTUNO własnym kosztem i wysiłkiem a zmiana modelu biznesowego w niczym nie naruszyła nabytych (co prawda za niewielkie pieniądze) praw dotychczasowych użytkowników. Zapowiedział również wsparcie starych wersji Virtuino by mogły pracować w zmieniających się systemach komputerowo/tabletowych.
Ale nie mam złudzeń, że taki stan będzie trwał wiecznie wiec postanowiłem jak na wstępie - co moje to moje i niczym nie będę musiał przejmować się na przyszłość. Zachętą do tego stał się oczywiście AI. Pomaga mi już mocno przy programowaniu ESP. Przypadkiem podpowiedział mi możliwość stworzenia prostej aplikacji na przeglądarkę do podglądu danych wysyłanych przez mikrokontrolery do VIRTUINO via Websocket.
- JA: Zrób prosty panel webowy i podłącz przeglądarkę jako trzeciego klienta – działa identycznie!
https://100-x-arduino.blogspot.com/2025/11/dwukierunkowa-komunikacja-websocket.html
więc zrobiłem (czytaj zleciłem zrobienie) takiego mini szpiega moich ESP z możliwością wymuszania na nich pewnych stanów komendami VIRTUINO
https://100-x-arduino.blogspot.com/2025/11/esp32-c3-websocket-klient-w.html
Przygotowałem sobie kilka plików dla poszczególnych ESP i podglądałem co one tam sobie gadają. Oczywiście nie widziałem komend z VIRTUINO - mój programik w HTML był kolejnym klientem podłączonym do serwera Websocket w ESP i odbierał to co serwer rozsyła do wszystkich klientów.
Początkowo komendy do ESP wysyłam mini terminalem stworzonym w HTML przez AI. Ale na polecenie
JA: zmień tak by obok terminala wyświetlającego to co teraz pojawiły się dwa przyciski których jeden wyśle to co teraz >1 (zielony a drugi >0 (czerwony) i wskaźnik typu led który świeci się kolorem ostatnio naciśinętego przycisku
dostałem plik HTM który zaczął wyglądać jak początek mojego systemu sterowania mikrokontrolerami. Najważniejsze było to że AI świetnie rozumiał krótkie moje polecenia wstawiania kolejnych funkcji a program (HTML) odpalał się błyskawicznie w przeglądarce i działał bez zarzutu
Kluczowe było moje pytanie
JA: pytanie czy taki kod html może obsługiwać wesocket więcej niż jeden adres IP jednocześnie (komunikacja z 2 lub więcej ESP32)
AI: Tak, jak najbardziej. JavaScript w przeglądarce może bez problemu otwierać i utrzymywać wiele jednoczesnych połączeń WebSocket pod różne adresy IP.
Każde połączenie jest osobną instancją obiektu new WebSocket().
NO I SIĘ ZACZĘŁO!!!!
Zdopingowany zmianami w dostępie do VIRTUINO postanowiłem pociągnąć temat dalej. Mocno ułatwił mi w tym Iias wstawiając bardzo prosty schemat obsługi transmisji Websocket dla VIRTUINO bezpośrednio w kod ESP (BLYNK miał w tym celu dość rozbudowane biblioteki). Mając pełną kontrolę nad tym co dzieje się w module łatwo narzuciłem sposób komunikacji tworzonej aplikacji z moimi ESP. Praktycznie odtwarzałem schemat działania aplikacji VIRTUINO bez jakiejkolwiek zmiany kodów w ESP !
Jako partnera AI wybrałem darmowy dostęp GEMINI. CHATGPT szybko pogubił się w tworzeniu bardziej złożonego kodu. Gemini jak do tej pory nie pomylił się ani razu i za każdą iteracją generuje bezbłędny kod. To znaczy kod ma oczywiście błędy ale spowodowane czynnikiem ludzkim - jak mu czegoś nie wyjaśnię dokładnie zrobi to po swojemu co nie zawsze jest tym o co mi chodziło.
Szybko jednak doszedłem do właściwego schematu pracy z Gemini. Po pierwsze tworzyłem prosty rysunek widoku panelu jaki chciałem dostać. Po drugie wydawałem proste czytelne (dla mnie) polecenia funkcji, które ma zaimplementować w kolejnej wersji - nie więcej niż 2-3 zmiany w jednym kroku.. I na koniec dołączałem poprzednią działającą i sprawdzoną wersję programu.
Zajęło mi około tygodnia po około 1-2 h dziennie by uzyskać kopię działania VIRTUINO. Polecenia typu zrób to i to tak i tak + proste rysunki widoków kolejnych ekranów. Nie przeczytałem ani linijki kodu generowanego przez AI nie mówiąc o ich zmianie czy ingerencji. Potrzebowałem 12 - 14 iteracji dla uzyskania efektu końcowego i pojawił się w pełni działający projekt ze wszystkimi funkcjami programu komercyjnego + mnóstwo funkcji tam niedostępnych np. piękny terminal czy dowolnie kształtowany moduł wykresów.
Karty, widżety nie są jeszcze tak kolorowe i bogata jak w VIRTUINO - ALE DZIAŁAJĄ !!!
Kodu jeszcze nie zamieszczam - wciąż go szlifuję a właściwie uczę się dopiero co można wycisnąć z HTML i AI. Również dlatego, że w miarę gotowy program (strona HTML ??) , który jest obecnie w fazie testów ma ok 2500 linii kodu !!!! AI szacuje czas potrzebny na napisanie takiej ilości kodu średnio rozgarniętemu programiście na 2-4 tygodni pracy na pełen etat. Plik ma mniej niż 150 kB a po uruchomieniu zajmuje ok 50 MB RAM. Pójdzie na Android od 5 ale najlepiej od 8 i większość przeglądarek z ostatnich 5 lat i oczywiście WIN MAC Linux. Dla mnie bomba.
Jest kilka świetnych rzeczy przy takiej współpracy nad projektem z AI.
>>Po pierwsze - masz problem - zapytaj może AI znajdzie rozwiązanie
JA: czy masz możliwość zapisania gdzieś (najlepiej wewnątzr HTML) zmienionych nastaw dzień i noc by ponownym uruchomieniu pliku były poprzednie a nie domyślne
AI: Tak, jak najbardziej! Najlepszym i najwygodniejszym rozwiązaniem w przeglądarkach internetowych jest użycie wbudowanego mechanizmu localStorage.
>>Po drugie znakomicie ułatwiona jest detekcja i usuwanie nieprawidłowego działania programu.
JA: czemu wykres wyświetla się tylko na części ekranu?
Brak stylów CSS dla znacznika
<canvas>: Element<canvas>nie ma przypisanych stylówwidth: 100%orazheight: 100%. Domyślnie w HTML przyjmuje on sztywną szerokość przeglądarki (300px) i wyrównuje się do lewej strony kontenera.canvas-container.Pomiary w JavaScript: Funkcja
resizeCanvas()pobierała wymiary z samego elementu<canvas>(canvas.getBoundingClientRect()), który był ograniczony do 300px, zamiast pobierać wymiary z jego rodzica (.canvas-container).
Jak to naprawić?
resizeCanvas() w JavaScriptcontent://media/external/...), pochodzący z menedżera pobierania. Nowoczesne przeglądarki (Opera, Brave, Chrome) traktują ten protokół jako źródło lokalne i niezaszyfrowane, dlatego wyświetlają ostrzeżenieSystemy mobilne blokują niektóre funkcje JavaScriptu (w tym połączenia WebSocket) dla plików odpalanych lokalnie z dysku (content:// lub file://).
Aby panel działał jak prawdziwa strona/aplikacja internetowa:
Zainstaluj na tablecie darmową aplikację serwera HTTP (np. Simple HTTP Server lub AWebServer – do pobrania z AppGallery, Aurora Store lub APKPure).
> Po trzecie AI podpowiada co warto zrobić by poprawić funkcjonowanie programu
AI: Ważna uwaga: Pamięć (RAM) vs Procesor (CPU)
Zużycie RAM jest znikome, ale przy 1000 rekordów warto zwrócić uwagę na płynność działania procesora:
Podczas przełączania karty funkcja renderTerminal() czyści okno i w pętli tworzy 1000 nowych elementów <span>. Na słabszych telefonach z Androidem może to wywołać lekkie mikro-przycięcie (ok. 50–150 ms) w momencie kliknięcia przycisku karty.
Rekomendacja: Jeśli terminal ma działać przez wiele godzin/dni bez resetu, warto dodać prosty bufor kołowy w funkcji dodającej logi, np.:
if (dev.logs.length > 1000) {
dev.logs.shift(); // Usuwa najstarszy wpis, zapobiegając rozrastaniu się pamięci i spadkom FPS}
A czasami waro zapytać wprost
JA: pytanie czy masz jakieś propozycje odnośnie wyglądu funkcji działania innych w kartach które zrobiłeś?
AI: Oto konkretne propozycje usprawnień wizualnych i funkcjonalnych przygotowane z myślą o rozbudowie kodu:
Karta P (POMPA)
Dynamiczne kolory jakości powietrza (AQI):
Tła kasetek CO2 (V26) i TVOC (V27) zmieniają kolor w zależności od odczytu (np. zielony dla CO2 < 800 ppm, żółty 800–1200 ppm, czerwony > 1200 ppm).
Animowany stan pracy:
Wskaźnik LED stanu pompy może delikatnie pulsować (glow effect) podczas pracy, a w tle kasetki statusu pojawia się kręcąca się ikona wirnika/pompy.
Ikony graficzne wewnątrz przycisków:
Zamiast samych prostych okręgów wewnątrz kwadratów – dedykowane ikony SVG/SVG-font (np. dom dla K-dom, łapa dla Kotów, gwiazda dla Gwiazdy, płomień/bąbelki dla Jacuzzi)
itd.........
> Po czwarte AI pięknie i szybko generuje pełną dokumentację projektu (zamieszczę ją razem z kodem gdy będzie w miarę ostateczna)
Podsumowując - praca nad aplikacją przy pomocy AI to czysta przyjemność. Co jeszcze dobrego może z tego wyniknąć wie napewno nasz ulubiony ciąg dalszy
Brak komentarzy:
Prześlij komentarz