{"id":448,"date":"2018-06-19T10:08:30","date_gmt":"2018-06-19T10:08:30","guid":{"rendered":"https:\/\/www.wpvs.de\/iot-2018\/?p=448"},"modified":"2021-05-14T10:07:04","modified_gmt":"2021-05-14T08:07:04","slug":"raspberrybuy-6-benutzeroberflaeche-des-raspberry-pis","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2018\/projekt-raspberrybuy\/raspberrybuy-6-benutzeroberflaeche-des-raspberry-pis\/","title":{"rendered":"RaspberryBuy (6) – Benutzeroberfl\u00e4che des Raspberry PI\u00b4s"},"content":{"rendered":"

Woran haben wir diese Woche gearbeitet<\/strong><\/p>\n

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.<\/p>\n

Eine kurze Erl\u00e4uterung wie die Tests zur Daten\u00fcbertragung im Vorfeld durchgef\u00fchrt wurden: Anfangs wurden der Server und eine MongoDB Instant lokal auf den Rechner der Entwickler ausgef\u00fchrt, um die Kommunikation zu testen. Mithilfe des graphischen MongoDB-Clients Robo3T konnten manuell Daten hinzugef\u00fcgt werden beziehungsweise gepr\u00fcft werden, ob eine Schreib- oder Update-Funktion erfolgreich ausgef\u00fchrt wurde.<\/p>\n

Mittlerweile ist diese Vorgehensweise nicht mehr notwendig, da die APIs des Servers weitestgehend stabil sind. Des Weiteren werden f\u00fcr 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\u00e4utert, nutzen wir dazu die Axios Bibliothekt, was zu einer erheblichen Erleichterung der Kommunikation f\u00fchrt.<\/p>\n

Im folgendem wird kurz der logische Ablauf des RaspberryBuy erl\u00e4utert:<\/u><\/strong><\/p>\n

Zun\u00e4chst wird bet\u00e4tigt der Nutzer den Entry_Button was dazu f\u00fchrt, dass ein Bild geschossen wird:<\/p>\n

async function <\/strong>entryButton () {
\n\/\/ Hier schon zwischenmaske f\u00fcr die Kamera bauen
\nconst <\/strong>selectedDivs = $(`.${imgActive}`);<\/p>\n

if <\/strong>(selectedDivs.length === 0) {
\nwindow.alert(„Kein Profil ausgew\u00e4hlt“);<\/p>\n

} else if <\/strong>(selectedDivs.length === 1) {
\nconst <\/strong>id = selectedDivs[0].getAttribute(„serverId“);
\nconst <\/strong>product = await <\/strong>startCameraAndTakePhoto();<\/p>\n

switchToStock(product, id);<\/p>\n

} else <\/strong>{
\nconst <\/strong>id = true<\/strong>;
\nconst <\/strong>product = await <\/strong>startCameraAndTakePhoto();<\/p>\n

switchToStock(product, id);
\n}
\n}<\/p>\n

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\u00fcr die n\u00e4chste HTML-Seite hinzugef\u00fcgt.<\/p>\n

function <\/strong>switchToStock (product, id) {
\nconst <\/strong>parsedId = String(id);<\/p>\n

window.location.href = `.\/recipe.html?product=${product._id}&id=${parsedId}`;
\n}<\/p>\n

Urspr\u00fcnglich existierte die Problematik, dass die Inhalte der Produkt-Variablen nur als Objekt weitergeleitet wurden. Dies f\u00fchrte zu Problemen, da die Produkt-ID nicht mehr korrekt ausgelesen werden konnte. Wie jedoch in der function „switchToStock“\u00a0<\/em>erkennbar, wurde das Problem bereits behoben. Die unten dargestellte Abbildung stellt die Maske zur Aktualisierung der Menge dar. Sollte die Menge ebenfalls erfolgreich ver\u00e4ndert werden, wird dem User ein alert angezeigt, der die aktuelle Menge des Produkte beinhaltet. Aufgrund des kleinen Touchscreens des Raspberry Pi\u00b4s erschien dies als die angenehmste L\u00f6sung f\u00fcr den Nutzer.\u00a0Auch kann der Nutzer innerhalb dieser Maske keine negativen Werte hinzuf\u00fcgen und muss diese separat in der Remove-Maske hinterlegen.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Dar\u00fcber hinaus wurde die Startseite f\u00fcr den Nutzer komplett \u00fcberarbeitet und um eine moderne Animationen erg\u00e4nzt (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\u00e4tzlich erhielt jede Maske der Benutzeroberfl\u00e4che einen neuen Hintergrund, um die Erscheinung generell etwas moderner wirken zu lassen. Auch wurden die Icons zum Teil neu gestaltet, da die Aufl\u00f6sung zu gering war.<\/p>\n

\"\"<\/p>\n

Was gilt es noch zu tun:<\/strong><\/p>\n

Mittlerweile ist es m\u00f6glich Produkte anzulegen und eine entsprechende Menge hinzuzuf\u00fcgen. 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\u00fcgen. 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\u00f6glich sein, dass der Nutzer jede Maske wieder verlassen kann oder zumindest den Prozess abbrechen kann.<\/p>\n

Wo gibt es noch Probleme:<\/strong><\/p>\n

Zum jetzigem Zeitpunkt bereitet uns der Touchscreen erhebliche Schwierigkeiten, da dieser sich nicht ansprechen l\u00e4sst. Somit gilt es dieses Problem schnellstm\u00f6glich zu beseitigen.<\/p>\n

Wie weit ist unser Projekt insgesamt?<\/strong><\/p>\n

Eine Vielzahl an Elementen ist schon zum Teil fertig. Die Masken funktionieren zu gro\u00dfen Teilen bereits, der Server ist fertig erstellt und bearbeitet die Anfragen erfolgreich und die API f\u00fcr unseren Barcode-Scanner ist in der Lage, die erstellten Bilder entsprechend zu bearbeiten. Bis alle Komponenten allerdings erfolgreich getestet und funktionieren dauert es noch.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00e4uterung wie<\/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\/448"}],"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=448"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/448\/revisions"}],"predecessor-version":[{"id":646,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/448\/revisions\/646"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/media?parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/categories?post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/tags?post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}