Woran haben wir diese Woche gearbeitet?

Ein Schwerpunkt der Projektarbeit innerhalb der letzten Woche war die weitere Gestaltung der Oberflächen für Raspberry PI und Client-Geräte.

Die Weboberfläche für Client-Geräte sieht nach aktuellem Status wie folgt aus:

Sie basiert auf der Verwendung vorgefertigter CSS-Klassen des Bootstrap-Framework. Die User werden analog zur RaspberryPi-Oberfläche vorab zu Testzwecken noch aus einer JSON-Datei und nicht vom Server geladen.

Die Oberfläche für den Raspberry PI wurde wie auf der unten dargestellten Abbildung um einige Punkte ergänzt. So wurde die ursprüngliche Aufteilung der zwei Mockups miteinander vereint, um die Usability der Anwendung zu erhöhen. Ursprünglich wurden die Elemente entsprechend ein- und ausgeblendet, was jedoch zu einer unübersichtlichen Navigation geführt hat. Darüber hinaus ist es möglich die vorhandenen User auszuwählen, welche daraufhin markiert werden.

Der aktuelle JavaScript-Code:

Der unten aufgeführte Code lädt zunächst das vorhandene Json-Dokument und erzeugt für jedes einzelne User-Objekt eine entsprechend verschachteltes Div-Element. Diesen werden diverse Klassen zugeordnet, um die Elemente mithilfe von CSS entsprechend zu positionieren. Jeder User besitzt eine eigene Icon-Bezeichnung im Json, die im Verlauf ausgelesen wird. Die so ermittelte Information wird dann dazu verwendet ein Bild innerhalb eines Verzeichnisses zu laden und darzustellen.

// Load json file
$.getJSON(„users.json“, (data) => {

// Schleife durch alles
data.forEach((element) => {

const addID = document.createAttribute(„id“),
attr = document.createAttribute(„src“),
cardBody = document.createElement(„div“),
formerBody = document.getElementById(„wrapper-container“),
image = document.createElement(„img“),
item = document.createElement(„div“),
pElement = document.createElement(„p“);

item.classList.add(„card“);
item.classList.add(„box-shadow“);
item.classList.add(„profile“);
cardBody.classList.add(„card-body“);
image.classList.add(„img-thumbnail“);
image.classList.add(„img-thumbnail-active“);
attr.value = `${„../images/“}${element.image}`;
image.setAttributeNode(attr);
item.append(image);
addID.value = element.id;
item.setAttributeNode(addID);
pElement.classList.add(„card-text“);
pElement.classList.add(„text-center“);

pElement.append(element.name);
cardBody.append(pElement);
item.append(cardBody);
formerBody.appendChild(item);
}

Welche Fortschritte konnten dabei erzielt werden?

Ein Fortschritt im Hinblick auf die Gestaltung der Weboberfläche war die erfolgreiche Einbindung des Bootstrap-Framework (Version 4.1) und Nutzung dessen. Dieses Framework nutzt ein 12-spaltiges Grid System zum Aufbau responsiver Websiten. Im Grid Layout ist sämtlicher Inhalt innerhalb dieser Spalten zu platzieren. Durch die Angabe einer Spaltenklasse wird festgelegt wieviel der 12 Spalten durch den Inhalt ausgefüllt werden sollen. Wird für die Spalte keine Klasse angegeben, werden diese gleichmäßig auf der Oberfläche verteilt dargestellt. Der nachfolgende Quellcode zeigt die Implementierung des Ladens der Benutzer aus der JSON-Datei. Dieser ist ähnlich zu dem für den RaspberryPi und es wird für jeden User ein neues DIV-Element, welches keiner festen Spaltenklasse („col-md-*“) zugeordnet wird, erzeugt. Somit werden die Benutzerprofile gleichmäßig über die Oberfläche verteilt dargestellt.

$.getJSON(„../usersfunction (data) {
for(var in data) {
console.log(k,data[k]);

var neuesElement = document.createElement(„div“);
neuesElement.innerHTML += „<img class=‘images‚ src=\“../img/“ + data[k].image \“>“;
neuesElement.innerHTML += „“ + data[k].name „“;
neuesElement.classList.add(iconbox);
neuesElement.classList.add(col-md-*“);
element.appendChild(neuesElement);
}
}

Soll beispielsweise ein div-Element automatisch die gesamte Oberflächenbreite ausfüllen, kann hierfür die vordefinierte CSS-Klasse „container-fluid“ genutzt werden.

Welche Probleme mussten wir lösen oder haben derzeit noch? 

In der Raspberry Pi Oberfläche ist es zum jetzigem Zeitpunkt nicht möglich die einzelnen User einzeln auszuwählen oder auszugrenzen. Für die Weboberfläche verbleibt als Aufgabe die durchgängige Erzielung eines responsiven Webdesigns, da die durch Bootstrap angebotenen Möglichkeiten bisher nur teilweise genutzt werden.

Die optische Gestaltung der beiden Oberflächen ist noch zu harmonisieren. Darüber hinaus muss für beide Oberflächen die Anbindung zum Server erstellt werden. Diese stellt ein umfangreiches Arbeitspaket dar. Ein zu lösendes Problem ist hierbei die Hinterlegung und Übertragung von Ressourcen, wie beispielsweise Bildern. Der JavaScript-Code soll ebenfalls weiter optimiert werden.

Wie weit ist unser Projekt insgesamt?

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ür alle zu programmierenden Komponenten (Weboberfläche, RaspberryPI-Oberfläche und Server) ein Code-Grundgerüst, jedoch erfolgt noch keine Kommunikation zwischen den jeweiligen Komponenten.

Woran wollen wir als nächstes arbeiten?

Der Fokus der nächsten Woche wird vor allem die Client-Server Kommunikation bilden. Hierfür sind genau die Schnittstellen und Übergabeparameter zu definieren. Außerdem wird eine Lösung für die Bild-Speicherung und -Übertragung erarbeitet werden.

RaspberryBuy (3): Gestaltung der Oberflächen