1 godzinę temu
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łnej skali 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 obrazku 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 macierzy heksadecymalnej.
Należy wykonać taką konwersję dla obrazka bazowego oraz po dwie dla obszarów odpowiadających kolejnym położeniom 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 a następnie należy wgrać grafikę skojarzoną ze wskazówką na szóstce pamiętając oczywiście pod jakim adresem 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 ż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 z predefiniowanych obrazów albo cały obraz w tym obszarze będzie generowany w czasie rzeczywistym za pomocą prymitywnych funkcji 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 z 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łnej skali 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 obrazku 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 macierzy heksadecymalnej.
Należy wykonać taką konwersję dla obrazka bazowego oraz po dwie dla obszarów odpowiadających kolejnym położeniom 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 a następnie należy wgrać grafikę skojarzoną ze wskazówką na szóstce pamiętając oczywiście pod jakim adresem 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 ż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 z predefiniowanych obrazów albo cały obraz w tym obszarze będzie generowany w czasie rzeczywistym za pomocą prymitywnych funkcji 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 z 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