{"id":523,"date":"2018-04-01T17:35:45","date_gmt":"2018-04-01T17:35:45","guid":{"rendered":"http:\/\/hayperek.pl\/?p=523"},"modified":"2018-04-01T17:35:45","modified_gmt":"2018-04-01T17:35:45","slug":"swiat-w-kolorze-lcd-cz-2","status":"publish","type":"post","link":"https:\/\/hayperek.pl\/en\/2018\/04\/01\/swiat-w-kolorze-lcd-cz-2\/","title":{"rendered":"\u015awiat w kolorze &#8211; LCD cz.2"},"content":{"rendered":"<h5>Biblioteka graficzna<\/h5>\n<p>Istotnym elementem systemu posiadaj\u0105cego GUI jest biblioteka graficzna. Nie spos\u00f3b bowiem wymaga\u0107 od ka\u017cdej aplikacji, ka\u017cdego komponentu aby samodzielnie &#8222;si\u0119ga\u0142&#8221; do wy\u015bwietlacza i mozolnie rysowa\u0142 na nim piksel po pikselu. Absolutnie podstawow\u0105 funkcjonalno\u015b\u0107 stanowi\u0105 tzw. prymitywy graficzne &#8211; punkty, linie czy okr\u0119gi. Kolejnym krokiem s\u0105 figury sk\u0142adaj\u0105ce si\u0119 z linii: prostok\u0105ty, tr\u00f3jk\u0105ty &#8211; og\u00f3lnie m\u00f3wi\u0105c wieloboki. Odr\u0119bn\u0105 kategori\u0119 stanowi\u0105 metody s\u0142u\u017c\u0105ce do rysowania tekstu, zazwyczaj wykorzystuj\u0105ce do tego celu predefiniowane fonty. <\/p>\n<p>Tego typu funkcjonalno\u015b\u0107 oferuje zdecydowana wi\u0119kszo\u015b\u0107 dost\u0119pnych bibliotek graficznych dla system\u00f3w embedded, takich jak AdafruitGFX, TFT library czy MBED. Nierzadko implementowane s\u0105 r\u00f3wnie\u017c bardziej zaawansowane, wysokopoziomowe elementy GUI jak przyciski, checkboxy, listy, pola tekstowe, etc.<br \/>\nJednak mimo tak szerokiego wachlarza dost\u0119pnych bibliotek, postanowi\u0142em stworzy\u0107 od zera w\u0142asn\u0105.<\/p>\n<blockquote><p>Dlaczego? Jaki sens ma wynajdywanie ko\u0142a na nowo?<\/p><\/blockquote>\n<p>Na poz\u00f3r gotowa biblioteka wydaje si\u0119 by\u0107 idealnym rozwi\u0105zaniem. Nie wymaga inwestycji cennego czasu, zapewnia kompletn\u0105 funkcjonalno\u015b\u0107, jest dobrze przetestowana &#8211; same superlatywy.<br \/>\nJe\u015bli jednak przyjrze\u0107 si\u0119 bli\u017cej, zaczniemy dostrzega\u0107 pewne niedogodno\u015bci. Przede wszystkim ka\u017cda z w\/w bibliotek jest w pewnym stopniu uzale\u017cniona od hardware&#8217;u, na kt\u00f3ry pierwotnie zosta\u0142a napisana. Dodatkowo biblioteki te dostarczaj\u0105 kod zoptymalizowany pod k\u0105tem danego wy\u015bwietlacza, kt\u00f3ry &#8222;sprytnie&#8221; korzysta z dost\u0119pnego interfejsu sprz\u0119towego czy mo\u017cliwo\u015bci sterownika LCD.<br \/>\nInnymi s\u0142owy &#8211; stanowi\u0105 one po\u0142\u0105czenie biblioteki graficznej, drivera sprz\u0119towego i warstwy abstrakcji. Tego typu mieszanka ma dwie, ogromne wady &#8211; ca\u0142kowity brak przeno\u015bno\u015bci mi\u0119dzy platformami i uzale\u017cnienie od jednego, konkretnego modelu wy\u015bwietlacza LCD.<\/p>\n<blockquote><p>Jaka powinna wi\u0119c by\u0107 &#8222;idealna&#8221; biblioteka?<\/p><\/blockquote>\n<p>Kr\u00f3tko? Co\u015b takiego po prostu nie istnieje \ud83d\ude42 Dobrym pocz\u0105tkiem, by\u0142aby pr\u00f3ba rozdzielenia biblioteki oraz drivera samego wy\u015bwietlacza. W\u00f3wczas logiczna struktura prezentowa\u0142aby si\u0119 nast\u0119puj\u0105co:<\/p>\n<p><a href=\"http:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6.png\" alt=\"\" width=\"825\" height=\"611\" class=\"aligncenter size-full wp-image-525\" srcset=\"https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6.png 825w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6-600x444.png 600w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6-300x222.png 300w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/03\/lcd_6-768x569.png 768w\" sizes=\"auto, (max-width: 825px) 100vw, 825px\" \/><\/a><\/p>\n<p>Oczywi\u015bcie wiele os\u00f3b s\u0142usznie zarzuci mi w tym momencie, i\u017c takie rozwi\u0105zanie jest mocno nieoptymalne. Ma jednak dwie, ogromne zalety &#8211; elastyczno\u015b\u0107 i prostot\u0119, wynikaj\u0105ce z ca\u0142kowitego odseparowania warstwy czysto software&#8217;owej (biblioteki graficznej) od warstwy steruj\u0105cej sprz\u0119tem (driver). Wszelkie interakcje mi\u0119dzy nimi prowadzone s\u0105 tylko i wy\u0142\u0105cznie za pomocn\u0105 zdefiniowanego interfejsu. I to on stanowi kluczow\u0105 cz\u0119\u015b\u0107&#8230;<\/p>\n<blockquote><p>Ok, wi\u0119c jaki powinien by\u0107 &#8222;idealny&#8221; interfejs?<\/p><\/blockquote>\n<p>Tu akurat mo\u017cna udzieli\u0107 precyzyjnej odpowiedzi. Zazwyczaj za dobrze skonstruowany interfejs, uwa\u017ca si\u0119 taki, kt\u00f3ry przy najmniejszej liczbie funkcji zapewnia kompletno\u015b\u0107 oraz jest pozbawiony jawnych b\u0105d\u017a ukrytych zale\u017cno\u015bci do zewn\u0119trznych komponent\u00f3w. W przypadku grafiki trudno wyobrazi\u0107 sobie interfejs bardziej minimalistyczny i abstrakcyjny ni\u017c po prostu &#8222;ustaw piksel&#8221; \ud83d\ude42<\/p>\n<blockquote><p>Co zyskujemy?<\/p><\/blockquote>\n<p>Za\u0142\u00f3\u017cmy, i\u017c zmieniamy spos\u00f3b sterowania wy\u015bwietlaczem na port szeregowy SPI. Ca\u0142y driver oraz warstwa abstrakcji sprz\u0119tu ulega zmianie. W przypadku, w kt\u00f3rym by\u0142yby one cz\u0119\u015bci\u0105 sk\u0142adow\u0105 samej biblioteki, musieliby\u015bmy przepisa\u0107 tak\u017ce cz\u0119\u015bci jej funkcji. W zaproponowanym rozwi\u0105zaniu wszelkie zmiany ko\u0144cz\u0105 si\u0119 na poziomie wspomnianego interfejsu.<\/p>\n<h5>Podsumowanie<\/h5>\n<p>Na tak b\u0142ahym i trywialnym w gruncie rzeczy przyk\u0142adzie jak rysowanie k\u00f3\u0142ek i linii widzimy, i\u017c tworzenie oprogramowania jest zawsze sztuk\u0105 kompromis\u00f3w. W tym konkretnym przypadku musieli\u015bmy wybra\u0107 mi\u0119dzy rozwi\u0105zaniem zoptymalizowanym &#8211; pozornie lepszym, a opcj\u0105 wolniejsz\u0105, kt\u00f3ra jednak zapewnia o wiele wi\u0119ksz\u0105 elastyczno\u015b\u0107. Bior\u0105c pod uwag\u0119, i\u017c projekt wci\u0105\u017c si\u0119 rozwija i zmienia, bardziej perspektywiczne jest wi\u0119c u\u017cycie tej drugiej. Mimo wszystkich swych wad jest podatna na zmiany i \u0142atwa do zaadaptowania. <\/p>\n<p>Poszukiwanie ju\u017c na pocz\u0105tkowym etapie mocno zoptymalizowanych rozwi\u0105za\u0144, skutecznie ogranicza mo\u017cliwo\u015bci rozbudowy oprogramowania i zamyka przed nami wiele dr\u00f3g rozwoju. Takie post\u0119powanie nazywane jest przedwczesn\u0105 optymalizacj\u0105 (ang. premature optimization) i jest cz\u0119sto pope\u0142nianym b\u0142\u0119dem, zw\u0142aszcza w\u015br\u00f3d pocz\u0105tkuj\u0105cych developer\u00f3w. Wynika ono z prze\u015bwiadczenia, i\u017c dany komponent uzyska\u0142 ju\u017c swoj\u0105 ostateczn\u0105 form\u0119 i nale\u017cy skupi\u0107 si\u0119 na aspektach zwi\u0105zanych z wydajno\u015bci\u0105. <\/p>\n<p>Drugim b\u0142\u0119dem, kt\u00f3ry jako developerzy cz\u0119sto pope\u0142niamy jest mieszanie ze sob\u0105 &#8222;warstw&#8221; oprogramowania. Prowadzi to do powstawania niesp\u00f3jnych interfejs\u00f3w oraz ukrytych zale\u017cno\u015bci. Temat ten porusza\u0142em ju\u017c wcze\u015bniej, w rozwa\u017caniach na temat <a href=\"http:\/\/hayperek.pl\/en\/2018\/03\/24\/miedzy-niebem-a-ziemia-czyli-sterowniki-peryferiow\/\">warstwy abstrakcji sprz\u0119tu<\/a>. Dzi\u015b pojawi\u0142 si\u0119 on ponownie, tym razem w \u015bwiecie grafiki i zapewne pojawi si\u0119 jeszcze nie raz. \u015awiadczy to tylko o tym, jak istotn\u0105 kwesti\u0105 jest poprawne zaplanowanie struktury oprogramowania.<br \/>\nDlatego te\u017c w niedalekiej przysz\u0142o\u015bci chcia\u0142bym poruszy\u0107 oba tematy ponownie, jednak w odr\u0119bnym artykule &#8211; zdecydowanie na to zas\u0142uguj\u0105 \ud83d\ude42<\/p>\n<p>Na dzi\u015b tyle..<\/p>\n<blockquote><p>Hola hola, a gdzie jakie\u015b kolorki? Hmm?<\/p><\/blockquote>\n<p>Ano tak &#8211; by\u0142bym zapomnia\u0142. Z racji i\u017c mamy \u015awi\u0119ta Wielkanocne b\u0119dzie co\u015b w klimacie \ud83d\ude42 <\/p>\n<p><a href=\"http:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7-768x1024.jpg\" alt=\"\" width=\"720\" height=\"960\" class=\"aligncenter size-large wp-image-539\" srcset=\"https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7-768x1024.jpg 768w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7-600x800.jpg 600w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7-225x300.jpg 225w, https:\/\/hayperek.pl\/wp-content\/uploads\/2018\/04\/lcd_7.jpg 900w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Biblioteka graficzna Istotnym elementem systemu posiadaj\u0105cego GUI jest biblioteka graficzna. Nie spos\u00f3b bowiem wymaga\u0107 od ka\u017cdej aplikacji, ka\u017cdego komponentu aby samodzielnie &#8222;si\u0119ga\u0142&#8221; do wy\u015bwietlacza i mozolnie rysowa\u0142 na nim piksel po pikselu. Absolutnie podstawow\u0105 funkcjonalno\u015b\u0107 stanowi\u0105 tzw. prymitywy graficzne &#8211; punkty, linie czy okr\u0119gi. Kolejnym krokiem s\u0105 figury sk\u0142adaj\u0105ce si\u0119 z linii: prostok\u0105ty, tr\u00f3jk\u0105ty &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":542,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-523","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-stodni","9":"post-with-thumbnail","10":"post-with-thumbnail-large"},"_links":{"self":[{"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":10,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/posts\/523\/revisions\/544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/media\/542"}],"wp:attachment":[{"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hayperek.pl\/en\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}