Pokażę teraz jak wykonałem animowany miernik stanowiący większą część panelu dotykowego Waleta.
Do tego celu potrzebne jest narzędzie do wektorowej grafiki a w moim przypadku, w naturalny sposób (linux) jest to Inkscape (ma także wersję dla Windows) gdzie takie elementy jak na przykład tęczowy łuk daje się osiągnąć w kilka minut. Żałuję, że nie mam zmysłu graficznego więc to co udało mi się uzyskać nie dorasta do pracy zawodowego grafika.
[Obrazek: https://lx-net.pl/walet/image/gag_base_n.png]
Początkowo musi powstać baza graficzna w o rozmiarze 320x240 pikseli. Widoczne tu trzy skale dotyczą siły odbioru (S), dopasowania anteny (SWR) oraz mocy w antenie (P).
Założyłem, że skala będzie mieć 16 poziomów od umownego zera do umownej pełnego wychylenia a położenie wskazówki będzie definiowała odpowiednia część programu związana z pomiarem siły sygnału przy odbiorze i mocą lub SWR przy nadawaniu.
[Obrazek: https://lx-net.pl/walet/image/gag_02_n.png]
Dla każdego z tych poziomów należy wrysować wskazówkę na odpowiedniej pozycji. Program wektorowy ułatwia to znakomicie. Każde położenie wskazówki ma wirtualną oś obrotu w tym samym miejscu a w zależności od potrzeb, każdy element na tych rysunkach, jako obiekt wektorowy, można włączyć do obrazu lub go wyłączyć, obrócić etc.
[Obrazek: https://lx-net.pl/walet/image/g02_e.png] [Obrazek: https://lx-net.pl/walet/image/g02_f.png]
Następnie należy wyciąć z obu widocznych rysunków dwa identyczne obszary i zapamiętać jako pliki graficzne w taki sposób, że na jednym z nich wrysowana jest wskazówka. Oba te obszary mają ten sam rozmiar co do piksela a dodatkowo należy zapamiętać prawy górny adres pierwszego piksela na wycinanym obszarze bo obrazy te będą wklejane do obrazu podstawowego w opisany wyżej sposób za pomocą polecenia tft.pushImage.
Kolejną operacją jest, również opisana wcześniej, konwersja grafiki do postaci RGB w formie macierzy heksadecymalnej.
Należy wykonać taką konwersję dla obrazka bazowego oraz po dwie dla obszarów odpowiadających kolejnym położeniom wskazówki od 0 do 15.
W ten sposób powstaną pliki pozwalające na animację położenia wskazówki a robi się to w taki sposób, że jeśli na przykład ostatnie położenie wskazówki było na pozycji 4 a należy ją przestawić na pozycję 6 to najpierw należy zamaskować położenie wskazówki na czwórce grafiką bez wskazówki i kolejno należy wgrać grafikę skojarzoną ze wskazówką na szóstce pamiętając oczywiście pod jakim adresem ekranu należy wkleić każdą z grafik.
Alternatywne rozwiązanie mogłoby polegać na ładowaniu całego rysunku skali ze wskazówką w odpowiednim miejscu ale to najgorsze z rozwiązań.
Ilość danych do przesłania rośnie proporcjonalnie do pola powierzchni obrazów a więc kwadratowo z ich liniowymi rozmiarami. Pomimo połączenia wyświetlacza z procesorem za pomocą interface SPI, który działa z prędkościami znacznie powyżej 1MB/s, kwadratowa zależność złożoności grafiki szybko wyczerpuje zasoby procesora a w tym przypadku zależy nam na prędkości działania skali.
Dla porównania, bazowy rysunek pełnej skali ma rozmiar w formacie .jpg 21.4kB ale po konwersji do formatu RGB urasta do 230.0kB!. Podobnie, dwa wycinki dla położenia 2 na skali mają w formacie .jpg rozmiary odpowiednio 2.9 i 3.3kB ale po konwersji urastają do 16.1kB. Wiąże się to z koniecznością podania dla każdego z pikseli współrzędnych dla każdego z trzech kolorów i nie ma tu żadnej kompresji danych.
W folderze Arduino/graph/ można podejrzeć każdą z użytych w programie grafik jako tablicę wartości heksadecymalnych.
Dla przykładu grafika ze wskazówką na pozycji dwa jak wyżej ma około 250 linii w edytorze tekstowym:
static const uint16_t g02f[] PROGMEM = {
0x0000, 0x4800, 0xcdd7, 0xad55, 0x0000, 0x0000, 0x0000, 0x0000,
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0841, 0x9492,
.
.
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000
};
Jak kiedyś starczy czasu i nie będę miał co robić, to poprawię grafikę bo uważam, że wskazówka powinna być nieco grubsza ale wiąże się to ze żmudną manipulacją, wycinaniem, konwersją etc.
W obecnym stanie na dole ekranu Waleta znajduje się pole, które kiedyś mam nadzieję wyposażyć w funkcjonalność pseudo wodospadu i w zależności od wybranej metody będę stosował jak dla skali zestaw predefiniowanych obrazów albo cały obraz w tym obszarze będzie generowany w czasie rzeczywistym za pomocą prymitywnych funkcji takich jak jak rysowanie piksela, linii, prostokąta etc.
Inne elementy ekranu Waleta to mniej skomplikowane formaty graficzne, na przykład dioda LED w kolorze zielonym i czerwonym jest generowana za pomocą polecenia okręgu z wypełnieniem o odpowiedniej barwie. Może wyjątkiem są klawisze z prawej strony, które zastosowałem jako gotowe podprogramy z linku prowadzącego do opisu instalacji bibliotek TFT.
cdn. lj
Github
Do tego celu potrzebne jest narzędzie do wektorowej grafiki a w moim przypadku, w naturalny sposób (linux) jest to Inkscape (ma także wersję dla Windows) gdzie takie elementy jak na przykład tęczowy łuk daje się osiągnąć w kilka minut. Żałuję, że nie mam zmysłu graficznego więc to co udało mi się uzyskać nie dorasta do pracy zawodowego grafika.
[Obrazek: https://lx-net.pl/walet/image/gag_base_n.png]
Początkowo musi powstać baza graficzna w o rozmiarze 320x240 pikseli. Widoczne tu trzy skale dotyczą siły odbioru (S), dopasowania anteny (SWR) oraz mocy w antenie (P).
Założyłem, że skala będzie mieć 16 poziomów od umownego zera do umownej pełnego wychylenia a położenie wskazówki będzie definiowała odpowiednia część programu związana z pomiarem siły sygnału przy odbiorze i mocą lub SWR przy nadawaniu.
[Obrazek: https://lx-net.pl/walet/image/gag_02_n.png]
Dla każdego z tych poziomów należy wrysować wskazówkę na odpowiedniej pozycji. Program wektorowy ułatwia to znakomicie. Każde położenie wskazówki ma wirtualną oś obrotu w tym samym miejscu a w zależności od potrzeb, każdy element na tych rysunkach, jako obiekt wektorowy, można włączyć do obrazu lub go wyłączyć, obrócić etc.
[Obrazek: https://lx-net.pl/walet/image/g02_e.png] [Obrazek: https://lx-net.pl/walet/image/g02_f.png]
Następnie należy wyciąć z obu widocznych rysunków dwa identyczne obszary i zapamiętać jako pliki graficzne w taki sposób, że na jednym z nich wrysowana jest wskazówka. Oba te obszary mają ten sam rozmiar co do piksela a dodatkowo należy zapamiętać prawy górny adres pierwszego piksela na wycinanym obszarze bo obrazy te będą wklejane do obrazu podstawowego w opisany wyżej sposób za pomocą polecenia tft.pushImage.
Kolejną operacją jest, również opisana wcześniej, konwersja grafiki do postaci RGB w formie macierzy heksadecymalnej.
Należy wykonać taką konwersję dla obrazka bazowego oraz po dwie dla obszarów odpowiadających kolejnym położeniom wskazówki od 0 do 15.
W ten sposób powstaną pliki pozwalające na animację położenia wskazówki a robi się to w taki sposób, że jeśli na przykład ostatnie położenie wskazówki było na pozycji 4 a należy ją przestawić na pozycję 6 to najpierw należy zamaskować położenie wskazówki na czwórce grafiką bez wskazówki i kolejno należy wgrać grafikę skojarzoną ze wskazówką na szóstce pamiętając oczywiście pod jakim adresem ekranu należy wkleić każdą z grafik.
Alternatywne rozwiązanie mogłoby polegać na ładowaniu całego rysunku skali ze wskazówką w odpowiednim miejscu ale to najgorsze z rozwiązań.
Ilość danych do przesłania rośnie proporcjonalnie do pola powierzchni obrazów a więc kwadratowo z ich liniowymi rozmiarami. Pomimo połączenia wyświetlacza z procesorem za pomocą interface SPI, który działa z prędkościami znacznie powyżej 1MB/s, kwadratowa zależność złożoności grafiki szybko wyczerpuje zasoby procesora a w tym przypadku zależy nam na prędkości działania skali.
Dla porównania, bazowy rysunek pełnej skali ma rozmiar w formacie .jpg 21.4kB ale po konwersji do formatu RGB urasta do 230.0kB!. Podobnie, dwa wycinki dla położenia 2 na skali mają w formacie .jpg rozmiary odpowiednio 2.9 i 3.3kB ale po konwersji urastają do 16.1kB. Wiąże się to z koniecznością podania dla każdego z pikseli współrzędnych dla każdego z trzech kolorów i nie ma tu żadnej kompresji danych.
W folderze Arduino/graph/ można podejrzeć każdą z użytych w programie grafik jako tablicę wartości heksadecymalnych.
Dla przykładu grafika ze wskazówką na pozycji dwa jak wyżej ma około 250 linii w edytorze tekstowym:
static const uint16_t g02f[] PROGMEM = {
0x0000, 0x4800, 0xcdd7, 0xad55, 0x0000, 0x0000, 0x0000, 0x0000,
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0841, 0x9492,
.
.
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000,
0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000
};
Jak kiedyś starczy czasu i nie będę miał co robić, to poprawię grafikę bo uważam, że wskazówka powinna być nieco grubsza ale wiąże się to ze żmudną manipulacją, wycinaniem, konwersją etc.
W obecnym stanie na dole ekranu Waleta znajduje się pole, które kiedyś mam nadzieję wyposażyć w funkcjonalność pseudo wodospadu i w zależności od wybranej metody będę stosował jak dla skali zestaw predefiniowanych obrazów albo cały obraz w tym obszarze będzie generowany w czasie rzeczywistym za pomocą prymitywnych funkcji takich jak jak rysowanie piksela, linii, prostokąta etc.
Inne elementy ekranu Waleta to mniej skomplikowane formaty graficzne, na przykład dioda LED w kolorze zielonym i czerwonym jest generowana za pomocą polecenia okręgu z wypełnieniem o odpowiedniej barwie. Może wyjątkiem są klawisze z prawej strony, które zastosowałem jako gotowe podprogramy z linku prowadzącego do opisu instalacji bibliotek TFT.
cdn. lj
Github