![\"\"](\"http:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/05\/Unbenannt-1024x475.jpg\")
<\/p>\nWoran haben wir diese Woche gearbeitet?<\/b><\/p>\n
Ein Schwerpunkt der Projektarbeit innerhalb der letzten Woche war die weitere Gestaltung der Oberfl\u00e4chen f\u00fcr Raspberry PI und Client-Ger\u00e4te.<\/p>\n
Die Weboberfl\u00e4che f\u00fcr Client-Ger\u00e4te sieht nach aktuellem Status wie folgt aus:<\/p>\n
<\/p>\n
Sie basiert auf der Verwendung vorgefertigter CSS-Klassen des Bootstrap-Framework. Die User werden analog zur\u00a0RaspberryPi-Oberfl\u00e4che vorab zu Testzwecken noch aus einer JSON-Datei und nicht vom Server geladen.<\/p>\n
Die Oberfl\u00e4che f\u00fcr den Raspberry\u00a0PI\u00a0wurde\u00a0wie auf der unten dargestellten Abbildung um einige Punkte erg\u00e4nzt. So wurde die urspr\u00fcngliche Aufteilung der zwei Mockups miteinander vereint, um die Usability der Anwendung zu erh\u00f6hen.\u00a0Urspr\u00fcnglich wurden die Elemente entsprechend ein- und ausgeblendet, was jedoch zu einer un\u00fcbersichtlichen\u00a0Navigation gef\u00fchrt hat. Dar\u00fcber hinaus ist es m\u00f6glich die\u00a0vorhandenen User auszuw\u00e4hlen, welche daraufhin markiert werden.<\/p>\n
![\"\"](\"http:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/05\/Auswahl-Aktuelle-Umsetzung-Mockups-1024x626.png\")
<\/p>\n
![\"\"](\"http:\/\/www.iot-embedded.de\/iot-2018\/wp-content\/uploads\/sites\/3\/2018\/05\/Aktuelle-Umsetzung-Mockups-1024x606.png\")
<\/p>\n
Der aktuelle JavaScript-Code:<\/p>\n
Der unten aufgef\u00fchrte Code l\u00e4dt zun\u00e4chst das vorhandene\u00a0Json-Dokument und erzeugt f\u00fcr jedes einzelne User-Objekt eine entsprechend verschachteltes\u00a0Div-Element. Diesen werden diverse Klassen zugeordnet, um die Elemente mithilfe von CSS entsprechend zu positionieren.\u00a0Jeder User besitzt eine eigene Icon-Bezeichnung im\u00a0Json, die im Verlauf ausgelesen wird. Die so ermittelte Information wird dann dazu verwendet ein Bild innerhalb eines Verzeichnisses zu laden und darzustellen.<\/p>\n
\/\/ Load\u00a0json\u00a0file
\n$.getJSON(„users.json“,\u00a0(data) => {<\/p>\n
\/\/ Schleife durch alles
\ndata.forEach((element) => {<\/p>\n
const<\/b>\u00a0<\/b>addID\u00a0=\u00a0document.createAttribute(„id“),
\nattr\u00a0=\u00a0document.createAttribute(„src“),
\ncardBody\u00a0=\u00a0document.createElement(„div“),
\nformerBody\u00a0=\u00a0document.getElementById(„wrapper-container“),
\nimage\u00a0=\u00a0document.createElement(„img“),
\nitem =\u00a0document.createElement(„div“),
\npElement\u00a0=\u00a0document.createElement(„p“);<\/p>\n
item.classList.add(„card“);
\nitem.classList.add(„box-shadow“);
\nitem.classList.add(„profile“);
\ncardBody.classList.add(„card-body“);
\nimage.classList.add(„img-thumbnail“);
\nimage.classList.add(„img-thumbnail-active“);
\nattr.value\u00a0=\u00a0`${„..\/images\/“}${element.image}`;
\nimage.setAttributeNode(attr);
\nitem.append(image);
\naddID.value\u00a0= element.id;
\nitem.setAttributeNode(addID);
\npElement.classList.add(„card-text“);
\npElement.classList.add(„text-center“);<\/p>\n
pElement.append(element.name);
\ncardBody.append(pElement);
\nitem.append(cardBody);
\nformerBody.appendChild(item);
\n}<\/p>\n
Welche Fortschritte konnten dabei erzielt werden?<\/b><\/p>\n
Ein Fortschritt im Hinblick auf die Gestaltung der Weboberfl\u00e4che war die erfolgreiche Einbindung des Bootstrap-Framework (Version 4.1) und Nutzung dessen.\u00a0Dieses Framework nutzt ein 12-spaltiges Grid System zum Aufbau responsiver\u00a0Websiten.\u00a0Im Grid Layout ist s\u00e4mtlicher Inhalt innerhalb dieser Spalten zu platzieren.\u00a0Durch die Angabe einer Spaltenklasse wird festgelegt wieviel der 12 Spalten durch den Inhalt ausgef\u00fcllt werden sollen. Wird f\u00fcr die Spalte keine Klasse angegeben, werden diese gleichm\u00e4\u00dfig auf der Oberfl\u00e4che verteilt dargestellt. Der nachfolgende Quellcode zeigt die Implementierung des Ladens der Benutzer aus der JSON-Datei. Dieser ist \u00e4hnlich zu dem f\u00fcr den\u00a0RaspberryPi\u00a0und es wird f\u00fcr jeden User ein neues DIV-Element, welches keiner festen Spaltenklasse (\u201ecol-md-*\u201c) zugeordnet wird, erzeugt.\u00a0Somit werden die Benutzerprofile gleichm\u00e4\u00dfig \u00fcber die\u00a0Oberfl\u00e4che verteilt dargestellt.<\/p>\n
$<\/b>.getJSON(„..\/<\/b>users<\/b>„<\/b>,\u00a0function<\/b>\u00a0<\/b>(data) {
\nfor<\/b>(var<\/b>\u00a0<\/b>k\u00a0in\u00a0<\/b>data) {
\nconsole<\/i><\/b>.log(k,data[k]);<\/p>\n
var<\/b>\u00a0<\/b>neuesElement\u00a0=\u00a0document<\/i><\/b>.createElement(„div“<\/b>);
\nneuesElement.innerHTML\u00a0+=\u00a0„<<\/b>img<\/b>\u00a0class=‘<\/b>images<\/b>‚\u00a0<\/b>src<\/b>=<\/b>\\“<\/b>..\/<\/b>img<\/b>\/“\u00a0<\/b>+ data[k].image<\/b>\u00a0<\/b>+\u00a0„<\/b>\\“<\/b>>“<\/b>;
\nneuesElement.innerHTML\u00a0+=\u00a0„“\u00a0<\/b>+ data[k].name<\/b>\u00a0<\/b>+\u00a0„“<\/b>;
\nneuesElement.classList.add(„<\/b>iconbox<\/b>„<\/b>);
\nneuesElement.classList.add(„<\/b>col<\/b>-md-*“<\/b>);
\nelement.appendChild(neuesElement);
\n}
\n}<\/p>\n
Soll beispielsweise ein div-Element\u00a0automatisch die gesamte\u00a0Oberfl\u00e4chenbreite ausf\u00fcllen, kann hierf\u00fcr die vordefinierte CSS-Klasse\u00a0\u201econtainer-fluid\u201c genutzt werden.<\/p>\n
Welche Probleme mussten wir l\u00f6sen oder haben derzeit noch?\u202f<\/b><\/p>\n
In der Raspberry Pi Oberfl\u00e4che ist es zum jetzigem Zeitpunkt\u00a0nicht m\u00f6glich die einzelnen User einzeln auszuw\u00e4hlen oder auszugrenzen.\u00a0F\u00fcr die Weboberfl\u00e4che verbleibt als Aufgabe die durchg\u00e4ngige Erzielung eines responsiven Webdesigns, da die durch Bootstrap angebotenen M\u00f6glichkeiten bisher nur teilweise genutzt werden.<\/p>\n
Die optische Gestaltung der beiden Oberfl\u00e4chen ist noch zu harmonisieren.\u00a0Dar\u00fcber hinaus\u00a0muss\u00a0f\u00fcr beide Oberfl\u00e4chen\u00a0die\u00a0Anbindung zum Server erstellt werden. Diese\u00a0stellt ein umfangreiches Arbeitspaket dar.\u00a0Ein zu l\u00f6sendes Problem ist hierbei\u00a0die Hinterlegung und \u00dcbertragung von\u00a0Ressourcen,\u00a0wie beispielsweise Bildern.\u00a0Der\u00a0JavaScript-Code\u00a0soll ebenfalls weiter optimiert werden.<\/p>\n
Wie weit ist unser Projekt insgesamt?<\/b><\/p>\n
In den letzten Wochen konnte eine gute Trennung der Projektaufgaben erzielt werden und alle beteiligten Personen haben sich in ihre Arbeitsbereiche erfolgreiche eingearbeitet. Es existiert nun f\u00fcr alle zu programmierenden Komponenten (Weboberfl\u00e4che,\u00a0RaspberryPI-Oberfl\u00e4che und Server) ein Code-Grundger\u00fcst, jedoch erfolgt noch keine Kommunikation zwischen den jeweiligen Komponenten.<\/p>\n
Woran wollen wir als n\u00e4chstes arbeiten?<\/b><\/p>\n
Der Fokus der n\u00e4chsten Woche wird vor allem die Client-Server Kommunikation bilden. Hierf\u00fcr sind genau die Schnittstellen und \u00dcbergabeparameter zu definieren. Au\u00dferdem wird eine L\u00f6sung f\u00fcr die Bild-Speicherung und -\u00dcbertragung erarbeitet werden.<\/p>\n","protected":false},"excerpt":{"rendered":"
Woran haben wir diese Woche gearbeitet? Ein Schwerpunkt der Projektarbeit innerhalb der letzten Woche war die weitere Gestaltung der Oberfl\u00e4chen f\u00fcr Raspberry PI und Client-Ger\u00e4te. Die Weboberfl\u00e4che f\u00fcr Client-Ger\u00e4te sieht nach aktuellem Status wie folgt aus: Sie basiert auf der<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/318"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/318\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}