{"id":341,"date":"2017-06-16T22:01:46","date_gmt":"2017-06-16T20:01:46","guid":{"rendered":"https:\/\/www.pingu-mobil.de\/iot\/?p=341"},"modified":"2021-05-14T10:07:50","modified_gmt":"2021-05-14T08:07:50","slug":"html-ui-der-durchbruch","status":"publish","type":"post","link":"http:\/\/www.iot-embedded.de\/iot-2017\/technik\/html-ui-der-durchbruch\/","title":{"rendered":"HTML UI: Der Durchbruch!"},"content":{"rendered":"<p><a href=\"http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser4.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-343\" src=\"https:\/\/www.pingu-mobil.de\/iot\/wp-content\/uploads\/2017\/06\/browser4-1024x576.jpg\" alt=\"\" width=\"750\" height=\"422\" srcset=\"http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser4-1024x576.jpg 1024w, http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser4-300x169.jpg 300w, http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser4-768x432.jpg 768w, http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser4.jpg 1056w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<p>Endlich ist es soweit und alle Details zum Start eines &#8222;einfachen&#8220; Browsers mit Buildroot sind gekl\u00e4rt. (Einfach in Anf\u00fchrungszeichen, weil ein vollwertiger Browser heutzutage alles andere als klein und einfach ist.) Dadurch wird es nun m\u00f6glich, das komplette UI eines eingebetteten Systems mit HTML, CSS und JavaScript zu realisieren, ohne sich mit weiteren Techniken auseinander zu setzen. Wer die Konfiguration genau verstehen will, kann die Details in Kapitel 5.3 des heute aktualisierten Skripts nachlesen: <a href=\"http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/Linux-und-Buildroot.pdf\">Linux und Buildroot<\/a><\/p>\n<p>Folgende Schritte sind nun auszuf\u00fchren:<\/p>\n<p>1. <a href=\"https:\/\/www.pingu-mobil.de\/iot\/2017\/06\/12\/buildroot-auf-die-aktuelle-version-2017-05-aktualisieren\/\">Buildroot auf die aktuelle Version 2017.05 aktualisieren<\/a>.<br \/>\n(Dabei unbedingt die aktuelle Version vom custom-Verzeichnis, Stand 16.06.2017 herunterladen).<\/p>\n<p>2. Innerhalb der VM mit folgenden Befehlen alles zur\u00fccksetzen<\/p>\n<pre>$ cd ~\n$ cd make\n$ make clean<\/pre>\n<p>3. Die neue Vorlagekonfiguration dhbw_html_defconfig laden<\/p>\n<pre>$ cd ~\/make\n$ make dhbw_html_defconfig<\/pre>\n<p>4. Im Custom-Verzeichnis die Datei board\/rootfs_overlay\/etc\/inittab bearbeiten, so dass sie am Ende so aussieht:<\/p>\n<pre>#console::respawn:\/sbin\/getty -L console 0 vt100 # SERIAL\n#tty1::respawn:\/sbin\/getty -L tty1 0 vt100 # HDMI\n\n# Browser f\u00fcr HTML-Oberfl\u00e4che (make dhbw_html_defconfig)\ntty1::respawn:-su -l mulder -c \"\/bin\/qt-webkit-kiosk --uri https:\/\/www.pingu-mobil.de\/iot\/\"<\/pre>\n<p>5. Image bauen, dabei seeeeeeeeeeeeeeeeeehr lange warten und anschlie\u00dfend auf den Raspberry Pi ziehen<\/p>\n<pre>$ cd ~\/make\n$ make<\/pre>\n<p>6. Gl\u00fccklich sein! \ud83d\ude42 Jetzt brauchen Sie nur noch einen Webserver auf dem Pi &#8230;<\/p>\n<p><a href=\"http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser3-1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-345\" src=\"https:\/\/www.pingu-mobil.de\/iot\/wp-content\/uploads\/2017\/06\/browser3-1-300x293.jpg\" alt=\"\" width=\"300\" height=\"293\" srcset=\"http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser3-1-300x293.jpg 300w, http:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/06\/browser3-1.jpg 459w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Endlich ist es soweit und alle Details zum Start eines &#8222;einfachen&#8220; Browsers mit Buildroot sind gekl\u00e4rt. (Einfach in Anf\u00fchrungszeichen, weil ein vollwertiger Browser heutzutage alles andere als klein und einfach ist.) Dadurch wird es nun m\u00f6glich, das komplette UI eines<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/341"}],"collection":[{"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":1,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":575,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/341\/revisions\/575"}],"wp:attachment":[{"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}