{"id":747,"date":"2023-06-09T20:23:59","date_gmt":"2023-06-09T18:23:59","guid":{"rendered":"https:\/\/www.iot-embedded.de\/iot-2023\/?p=747"},"modified":"2023-06-06T17:25:29","modified_gmt":"2023-06-06T15:25:29","slug":"der-heizung-beim-arbeiten-zuschauen-das-frontend","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2023\/2023\/06\/09\/der-heizung-beim-arbeiten-zuschauen-das-frontend\/","title":{"rendered":"Der Heizung beim Arbeiten zuschauen: Das Frontend"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Hintergrund<\/h2>\n\n\n\n<p>Nach dem Umstieg der Architektur (und damit auch des Frontends) auf Node-Red, haben wir das Design noch einmal \u00fcberarbeitet. Der Vorteil von Node-Red ist, dass nach einem Baukastenprinzip gearbeitet werden und so viel Funktionalit\u00e4t wiederverwendet werden kann. Au\u00dferdem ist der Aufbau und der Datenfluss leicht erkennbar, was auch im folgenden Beispiel erkennbar ist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"137\" src=\"https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-1-1024x137.png\" alt=\"\" class=\"wp-image-748\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-1-1024x137.png 1024w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-1-300x40.png 300w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-1-768x103.png 768w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-1.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">UI<\/h2>\n\n\n\n<p>Das UI orientiert sich gr\u00f6\u00dftenteils am Material Design, einer sehr schlichten und minimalistischen Designsprache. Dabei verzichten wir allerdings auf die Schatten der Objekte. Als Hauptfarbe haben wir ein sanftes blau gew\u00e4hlt, welches sich vom &#8222;dark-theme&#8220; abhebt und erwirken damit sowohl ein modernes, als auch vertrauenserweckendes Auftreten. Im UI k\u00f6nnen die unterschiedlichen R\u00e4ume \u00fcber das &#8222;Hamburger Men\u00fc&#8220; ausgew\u00e4hlt werden. So werden dem Nutzer nur die f\u00fcr Ihn relevanten Daten angezeigt. Weil die Raum\u00fcberschrift oben rechts nicht direkt im Fokus beim Lesen der Daten ist, wird der Raumname in Detailansicht wiederholt und wegen der Relevanz farblich abgehoben. Da am relevantesten befindet sich am Anfang zuerst die aktuelle Raumtemperatur. Daraufhin folgt die gew\u00fcnschte Raumtemperatur, die \u00fcber einen Schieber leicht einstellbar ist. Danach kann der Nutzer die letzten Messpunkte sehen und starke Schwankungen erkennen. Zum Ende befindet sich ein Textfeld, welches die n\u00e4chste im Raum stattfindende Veranstaltung anzeigt und ein Knopf f\u00fcr das Aktivieren der manuellen Heizungssteuerung.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"544\" src=\"https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-1024x544.png\" alt=\"\" class=\"wp-image-752\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-1024x544.png 1024w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-300x159.png 300w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-768x408.png 768w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-1536x816.png 1536w, https:\/\/www.iot-embedded.de\/iot-2023\/wp-content\/uploads\/sites\/6\/2023\/06\/image-4-2048x1088.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Der aktuelle Entwurf stellt zwar noch nicht die finale Version des UIs dar, wir sind mit dem aktuellen Stand aber schon sehr zufrieden und erwarten eher kleinere Anpassungen (z.B. das Hinzuf\u00fcgen der Luftfeuchtigkeit).<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hintergrund Nach dem Umstieg der Architektur (und damit auch des Frontends) auf Node-Red, haben wir das Design noch einmal \u00fcberarbeitet. Der Vorteil von Node-Red ist, dass nach einem Baukastenprinzip gearbeitet werden und so viel Funktionalit\u00e4t wiederverwendet werden kann. Au\u00dferdem ist<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[18,13,19],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/747"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/comments?post=747"}],"version-history":[{"count":6,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/747\/revisions"}],"predecessor-version":[{"id":763,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/747\/revisions\/763"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/media?parent=747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/categories?post=747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/tags?post=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}