RaspberryBuy (6) – Benutzeroberfläche des Raspberry PI´s

Woran haben wir diese Woche gearbeitet

In dieser Woche lag der Fokus auf der Weiterentwicklung des Nutzerinterfaces von RaspberryBuy. So wurden einige Masken neu erstellt oder zumindest angepasst und die Kommunikation zum Server zum Teil fertiggestellt.

Eine kurze Erläuterung wie die Tests zur Datenübertragung im Vorfeld durchgeführt wurden: Anfangs wurden der Server und eine MongoDB Instant lokal auf den Rechner der Entwickler ausgeführt, um die Kommunikation zu testen. Mithilfe des graphischen MongoDB-Clients Robo3T konnten manuell Daten hinzugefügt werden beziehungsweise geprüft werden, ob eine Schreib- oder Update-Funktion erfolgreich ausgeführt wurde.

Mittlerweile ist diese Vorgehensweise nicht mehr notwendig, da die APIs des Servers weitestgehend stabil sind. Des Weiteren werden für die Bilderkennung Python-Programme genutzt, die aktuell nur auf dem Cloud-Server installiert sind. Somit findet die Kommunikation nun direkt mit dem Cloud-Server statt. Wie bereits im letzten Blogeintrag erläutert, nutzen wir dazu die Axios Bibliothekt, was zu einer erheblichen Erleichterung der Kommunikation führt.

Im folgendem wird kurz der logische Ablauf des RaspberryBuy erläutert:

Zunächst wird betätigt der Nutzer den Entry_Button was dazu führt, dass ein Bild geschossen wird:

async function entryButton () {
// Hier schon zwischenmaske für die Kamera bauen
const selectedDivs = $(`.${imgActive}`);

if (selectedDivs.length === 0) {
window.alert(„Kein Profil ausgewählt“);

} else if (selectedDivs.length === 1) {
const id = selectedDivs[0].getAttribute(„serverId“);
const product = await startCameraAndTakePhoto();

switchToStock(product, id);

} else {
const id = true;
const product = await startCameraAndTakePhoto();

switchToStock(product, id);
}
}

Das entnommene Bild wird an den Server weitergeleitet, der dieses dann verarbeitet. Zum jetzigem Zeitpunkt ist das Bild zu Entwicklungszwecken als Base64-String hinterlegt. Dies wird jedoch im weiteren Verlauf entfernt werden und die Kamera des Pi benutzt, um ein Bild zu machen. Wird das Bild erfolgreich erkannt, werden die erforderlichen Daten aus dem empfangenem JSON entnommen und als Variablen in die URL für die nächste HTML-Seite hinzugefügt.

function switchToStock (product, id) {
const parsedId = String(id);

window.location.href = `./recipe.html?product=${product._id}&id=${parsedId}`;
}

Ursprünglich existierte die Problematik, dass die Inhalte der Produkt-Variablen nur als Objekt weitergeleitet wurden. Dies führte zu Problemen, da die Produkt-ID nicht mehr korrekt ausgelesen werden konnte. Wie jedoch in der function „switchToStock“ erkennbar, wurde das Problem bereits behoben. Die unten dargestellte Abbildung stellt die Maske zur Aktualisierung der Menge dar. Sollte die Menge ebenfalls erfolgreich verändert werden, wird dem User ein alert angezeigt, der die aktuelle Menge des Produkte beinhaltet. Aufgrund des kleinen Touchscreens des Raspberry Pi´s erschien dies als die angenehmste Lösung für den Nutzer. Auch kann der Nutzer innerhalb dieser Maske keine negativen Werte hinzufügen und muss diese separat in der Remove-Maske hinterlegen.

Darüber hinaus wurde die Startseite für den Nutzer komplett überarbeitet und um eine moderne Animationen ergänzt (siehe unten dargestellte Abbildung). Sollte der Nutzer diesen Button nun anklicken, dreht sich der Button und wechselt kurz die Farbe, bevor die neue HTML-Seite geladen wird. Zusätzlich erhielt jede Maske der Benutzeroberfläche einen neuen Hintergrund, um die Erscheinung generell etwas moderner wirken zu lassen. Auch wurden die Icons zum Teil neu gestaltet, da die Auflösung zu gering war.

Was gilt es noch zu tun:

Mittlerweile ist es möglich Produkte anzulegen und eine entsprechende Menge hinzuzufügen. Nun gilt es noch die Produkte bzw. die Menge entsprechend zu reduzieren und diesen Teil der Kommunikation ebenfalls fertigzustellen. Auch ist es notwendig einige Hilfsmasken hinzuzufügen. Diese Hilfsmasken weisen den Nutzer beispielsweise darauf hin, dass dieser das Produkt vor die Kamera halten muss oder dass der Barcode nicht erkannt wurde. Auch muss es möglich sein, dass der Nutzer jede Maske wieder verlassen kann oder zumindest den Prozess abbrechen kann.

Wo gibt es noch Probleme:

Zum jetzigem Zeitpunkt bereitet uns der Touchscreen erhebliche Schwierigkeiten, da dieser sich nicht ansprechen lässt. Somit gilt es dieses Problem schnellstmöglich zu beseitigen.

Wie weit ist unser Projekt insgesamt?

Eine Vielzahl an Elementen ist schon zum Teil fertig. Die Masken funktionieren zu großen Teilen bereits, der Server ist fertig erstellt und bearbeitet die Anfragen erfolgreich und die API für unseren Barcode-Scanner ist in der Lage, die erstellten Bilder entsprechend zu bearbeiten. Bis alle Komponenten allerdings erfolgreich getestet und funktionieren dauert es noch.