Flash Bee: projektowanie pulpitu na okrągły wyświetlacz w Lopaka

Urządzenie

Natknęliśmy się na Flash Bee autorstwa gokux i musieliśmy zatrzymać się i popatrzeć na ekran. To ręczny detektor piorunów, kieszonkowy radar burzowy w masywnej żółtej obudowie drukowanej w 3D. Przypinasz go do plecaka na wędrówce, a on nasłuchuje elektromagnetycznego trzasku, który wyrzucają pioruny, z odległości do 40 km, a potem mówi ci, jak daleko są wyładowania i czy burza się zbliża, czy oddala. Bez internetu, bez aplikacji pogodowej, po prostu niebo odczytane prosto z powietrza.

Pod maską jest Seeed Studio XIAO ESP32-C3 odczytujący czujnik piorunów AS3935, z okrągłym kolorowym wyświetlaczem z przodu. Wyłapuje wyładowania zarówno między chmurą a ziemią, jak i wewnątrz chmur, zlicza je, odczytuje, jak silne było każde z nich, i prowadzi bieżącą historię. Część, o której chcemy porozmawiać, to ten ekran.

Ekran

Wyświetlacz to okrągły panel GC9A01: 240x240 pikseli, pełny kolor, Round Display dla Seeed Studio XIAO. Okrągłe ekrany to osobna łamigłówka projektowa. Nie ma rogów, w które można by coś upchnąć, więc cały układ musi organizować się wokół środka, a Flash Bee trafia w wygląd klimatem zestawu wskaźników:

1. Odległość wyładowania. Wartość-bohater, dokładnie na środku, duża i pogrubiona: kilometry do najbliższego wyładowania.
2. Wskaźnik energii wyładowania. Jasny łuk przylegający do prawej krawędzi, który wypełnia się siłą ostatniego wyładowania.
3. Wyładowania i energia. Dwa odczyty na linii bazowej poniżej środka: licznik wyładowań i wartość energii.
4. Historia energii. Mały pasek słupków wzdłuż dołu pokazujący kilka ostatnich wyładowań.

Za tym wszystkim siedzi delikatny ślad radaru i pierścienie prowadzące, co sprzedaje wrażenie „skanowania burzy”.

Projektowanie w Lopaka

Cały ekran został złożony w Lopaka, a okrągły pulpit to świetna jej wizytówka. Oto jak układa się ten layout:

1. Nowy projekt. Otwórz lopaka.app, załóż projekt, wybierz TFT_eSPI jako bibliotekę i 240 x 240 dla okrągłego wyświetlacza.
2. Wyśrodkuj bohatera. Wrzuć dużą etykietę tekstową na środek dla odległości, z mniejszym „km” pod spodem. Ta liczba ciągle się zmienia, więc zrób z niej zmienną za pomocą przycisku tworzenia zmiennej w inspektorze.
3. Obramuj odczyty. Dodaj dwie małe etykiety sekcji, STRIKES i ENERGY, każdą ze zmienną wartością pod spodem. Cienka linia bazowa między nimi a środkiem utrzymuje porządek.
4. Dodaj pierścienie. Narysuj parę koncentrycznych kół jako delikatne pierścienie prowadzące, żeby zakotwiczyć okrągłą kompozycję.
5. Zostaw miejsce na żywe elementy. Łuk energii, ślad radaru i słupki historii są animowane z danych czujnika, więc te elementy są napędzane w kodzie na wierzchu layoutu. Lopaka jest właścicielem stałej ramki: etykiet, pierścieni, pozycji i wartości, które oznaczyłeś jako zmienne.

Wszystko jest ustawione względem środka, co jest całą sztuczką przy okrągłych ekranach, a Lopaka pokazuje ci okrągłe granice podczas pracy, więc nic ważnego nie wślizgnie się pod ramkę.

Kod

Przy eksporcie Lopaka zamienia układ w wywołania rysowania TFT_eSPI i oddaje każdą zmienną, żeby twój firmware mógł ją ustawić. Środkowy odczyt w tym stylu wychodzi mniej więcej tak:

tft.setTextDatum(MC_DATUM);
tft.setTextColor(TFT_YELLOW, TFT_BLACK);
tft.setTextSize(6);
tft.drawString(distance, 120, 90);    // variable: km to nearest strike
tft.setTextSize(3);
tft.drawString("km", 120, 122);

tft.setTextDatum(ML_DATUM);
tft.setTextSize(2);
tft.drawString("STRIKES", 40, 150);
tft.drawString(strikeCount, 40, 168); // variable

Podawaj mu żywe wartości w każdej klatce, wypychaj na panel, a układ, który ułożyłeś w przeglądarce, pojawi się na okrągłym wyświetlaczu.

Noś go

Całość mieszka w wytrzymałej obudowie drukowanej w 3D z pętlą na smycz i klipsem, więc jeździ na pasku plecaka, gdzie możesz na nią zerknąć. Prawdziwa, ukończona konstrukcja, a nie płytka prototypowa.

Wypróbuj

Chcesz własny okrągły pulpit? Otwórz lopaka.app, załóż projekt TFT_eSPI w rozmiarze 240 x 240 i projektuj prosto na okrągłym obszarze rysowania. To bezpłatne i działa w twojej przeglądarce. Biblioteka ikon i animacje Lopaka przydają się przy tego rodzaju wyglądzie wskaźników, a galeria jest pełna ekranów do skopiowania, gdy się zarejestrujesz.

Autorzy

Flash Bee autorstwa gokux, pełna konstrukcja z częściami i kodem na Instructables. Zbudowany na XIAO ESP32-C3 z czujnikiem AS3935 i okrągłym wyświetlaczem GC9A01.