{"id":2345,"date":"2018-01-31T17:19:35","date_gmt":"2018-01-31T15:19:35","guid":{"rendered":"https:\/\/www.lieblos.de\/?p=2345"},"modified":"2018-01-30T17:19:47","modified_gmt":"2018-01-30T15:19:47","slug":"mukti-one-die-gui","status":"publish","type":"post","link":"https:\/\/www.lieblos.de\/?p=2345","title":{"rendered":"MukTi\/one: Die GUI"},"content":{"rendered":"<p>Die Benutzermaske, das User Interface, dat GUI &#8211; Graphical User Interface. Irgendwie muss es aussehen und irgendwie wuchs sie mit der Produktentwicklung ;-)<\/p>\n<p><a href=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/v2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2347\" src=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/v2-674x900.jpg\" alt=\"\" width=\"344\" height=\"459\" srcset=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/v2-674x900.jpg 674w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/v2-768x1026.jpg 768w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/v2.jpg 786w\" sizes=\"auto, (max-width: 344px) 85vw, 344px\" \/><\/a>Am Anfang dachte ich \u00fcber eine Darstellung der Tide mit LEDs nach, wer schon mal in Leherheide in Bremerhaven weiss, was ich meine: Eina Anzeige bei der mehr LEDs leuchten, wenn mehr Wasser da ist ;-). Zwischenzeitlich (und \u00fcr die Zukunft noch nicht ganz vergessen) war ich auch bei Anzeige mit tats\u00e4chlichem Wasser, dies birgt aber noch ganz andere Herausforderungen und passt auch nicht ganz zu einem Lautsprecher. Schnell landete ich bei einem Display und einem Joystick als Eingabemedium. Die Kauflust neuer Komponenten brachte mich dann zu einem etwas gr\u00f6\u00dferem Touchdisplay und so wurde alles entsprechend migriert, alles GUI gebastelte weggeschmissen und eine Oberfl\u00e4che f\u00fcr das Touchdisplay entwickelt.<\/p>\n<p>Zwischenzeitlich war ich versucht vorgefertigte Libraries einzusetzen, verwarf das Ganze aber schnell wieder, da das Einlesen in die komplexen &#8211; f\u00fcr alle Zwecke vorgesehenen &#8211; Libraries viel l\u00e4nger dauerte als ein kleines Men\u00fc und Eingabemasken selber zu programmieren. Au\u00dferem wollte ich ja spielen und frickeln, also ran und Uhrzeiteinstellungsmen\u00fc &amp; Hochwasseralarm Einstellung inklusive Men\u00fc selbst entwickelt.<\/p>\n<p><a href=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-2368\" src=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265-675x900.jpg\" alt=\"\" width=\"299\" height=\"399\" srcset=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265-675x900.jpg 675w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265-768x1024.jpg 768w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265-900x1200.jpg 900w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1975-e1516814323265-1200x1600.jpg 1200w\" sizes=\"auto, (max-width: 299px) 85vw, 299px\" \/><\/a>Dazu entstanden Textmasken f\u00fcr Fehelermeldungen und ganz besonders die Bildschirme die einfach nur beim ersten Mal einschalten angezeigt werden. Manchmal viel Aufwand die Elemente auf dem Display richtig zu positionieren (denn dazu muss immer wieder die Software kompiliert &amp; auf die Hardware geladen werden) und das f\u00fcr wenige Sekunden Lebenszeit ;-)<\/p>\n<p>Und man bedenke: Es ist nicht so, wie die Meissten vom PC kennen &#8211; ich dr\u00fccke die Backspace Taste und der alte Text verschwindet einfach und ich kann meinen neuen text tippern. Alles muss manuell programmiert werden, von Bildschirmleeeren hin zu jedem Pixel und den Schriftarten. Um das Seemannsbrautlogo anzuzeigen muss man sich mit dem BMP Format besch\u00e4ftigen und auch wenn man vieles zusammensuchen kann &#8211; um Besch\u00e4ftigung mit dem Thema kommt man nicht rum. Zwischendurch grafische Anpassungen der Logos und was sonst alles so anf\u00e4llt.<\/p>\n<p><a href=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2369\" src=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799-675x900.jpg\" alt=\"\" width=\"345\" height=\"460\" srcset=\"https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799-675x900.jpg 675w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799-768x1024.jpg 768w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799-900x1200.jpg 900w, https:\/\/www.lieblos.de\/wp-content\/uploads\/2018\/01\/IMG_1931-e1516814403799-1200x1600.jpg 1200w\" sizes=\"auto, (max-width: 345px) 85vw, 345px\" \/><\/a>Am Ende hab ich eine GUI die mir bis auf das &#8222;Einstigsmen\u00fc&#8220; sehr gef\u00e4llt. Der Hochwasseralarm ist mein &#8222;Stolz&#8220;, der ist echt fein und funktioniert ganz passabel und ist schon durch die ersten Dauertests durch. man mag gar nicht glauben, was beim bedienen f\u00fcr grafische Sinderf\u00e4lle auftreten k\u00f6nnen, die bei einem konzentrierten Einzeltest gar nicht zum Vorschein kommen. Hier noch ein stehenbleibendes Pixel und da noch ein Problem mit der Tastenreaktion.<\/p>\n<p>Viel Aufwand und viel Spass! F\u00fcr Zukunftsexperimente f\u00fchlte ich mich dennoch gen\u00f6tigt mal neue Hardware zu bestellen: Ein Display mit eingebauter GUI, die man \u00fcber eine Software layouten kann &#8211; diese wird dann vom Arduino einfach nur noch aufgerufen und man muss f\u00fcr die GUI nix programmieren. Bestimmt gef\u00e4llt mir die GUI dann nicht und ich bastel doch wieder selber rum &#8230; ;-)<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Benutzermaske, das User Interface, dat GUI &#8211; Graphical User Interface. Irgendwie muss es aussehen und irgendwie wuchs sie mit der Produktentwicklung ;-) Am Anfang dachte ich \u00fcber eine Darstellung der Tide mit LEDs nach, wer schon mal in Leherheide in Bremerhaven weiss, was ich meine: Eina Anzeige bei der mehr LEDs leuchten, wenn mehr &hellip; <a href=\"https:\/\/www.lieblos.de\/?p=2345\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eMukTi\/one: Die GUI\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-2345","post","type-post","status-publish","format-standard","hentry","category-mukti-one"],"_links":{"self":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/2345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2345"}],"version-history":[{"count":3,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions"}],"predecessor-version":[{"id":2370,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions\/2370"}],"wp:attachment":[{"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lieblos.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}