Forum: Mikrocontroller und Digitale Elektronik Grafische GUI für Gerät via Wifi und raspberry pi 3


von Christian K. (Gast)


Lesenswert?

Hallo,

ich möchte ein selbstgebautes Gerät via WiFi (Smartphone/Laptop/Tablet) 
bedienen. Dazu möchte ich keine App schreiben, sondern den Internet 
Browser benutzen.

Ich würde dazu einen raspberry pi einbauen. Der soll einen WiFi Access 
bereitstellen mit dem man sich dann mit dem Gerät verbindet.

Wenn die Verbindung hergestellt ist, soll der raspberry pi eine 
interaktive Webseite ausliefern die die GUI für die Gerätebedienung 
bereitstellt.

Auf dem rapi muss also ein Web Server laufen und das Wifi als access 
point konfiguriert sein.

Kennt jemand ein Beispiel wo sowas schon gemacht wurde.

Über google habe ich natürlich die Konfiguration als access point 
gefunden aber noch nicht wie man diese auf den Web-Server umleitet usw.

von Wolfgang (Gast)


Lesenswert?

Christian K. schrieb:
> ich möchte ein selbstgebautes Gerät via WiFi (Smartphone/Laptop/Tablet)
> bedienen.

Dann verrate doch mal, was du an dem Gerät bedienen möchtest.

Bei ein paar GPIOs und Sensoren, kannst du mit WebIOPi einiges 
anstellen.

von Christian K. (Gast)


Lesenswert?

Danke, dass ist ja schon mal eine interessante Antwort.

Ich möchte Einstellungen vornehmen können, wie Uhrzeit/Datum setzen.

Es handelt sich um ein Display auf das man Grafiken schicken können 
soll. Animierte Grafiken, Texte usw. Auf dem Web IF soll man diese 
Grafiken erstellen könnrn.

Der Wifi Access soll öffentlich (nicht geschützt) sein so dass jeder mit 
seinem Handy der in der Nähe ist sich connecten kann und was hinschicken 
kann. Natürlich sollen mehrere Benutzer zur gleichen Zeit unterstützt 
werden.

Ich dachte das Interface in jquerymobile zu programmieren.

Dazu sollen die Nutzereingaben nach Schimpfworten usw. gefilter werden.

von Christian K. (Gast)


Lesenswert?

Also ich brauche einen Webserver wie z.B. Apache der die Seiten 
ausliefert (auch an mehrere User) und einen WiFi Access zu dem Server.

von Johnny B. (johnnyb)


Lesenswert?

Christian K. schrieb:
> Ich dachte das Interface in jquerymobile zu programmieren.

Falls es ein komplett neues Projekt ist, würde ich es nicht mehr mit 
jQuery-Mobile machen. Vor zwei Jahren hatte ich damit Apps gemacht, aber 
seither ist es projektmässig nur noch am absärbeln und in der aktuellen 
Version auch nicht mehr vollständig mit dem neusten jQuery kompatibel. 
Seit über einem Jahr ist zwar ein grosses Update angekündigt, scheint 
aber immer noch in weiter Ferne zu sein.

Daher besser Bootstrap oder vielleicht Ionic/AngularJS oder sonst was 
aktuelles nehmen.

: Bearbeitet durch User
von Christian K. (Gast)


Lesenswert?

Danke für den Hinweis, ja ist ein neues Projekt und für mich ist das 
javascript Tool auch neu.

Dann schaue ich mir mal Bootstrap näher an, sieht auf den ersten Blick 
ja vielversprechend aus.

von Pandur S. (jetztnicht)


Lesenswert?

Webserver mit dynamischen Seiten macht man sonst auch mit php.

von Christopher J. (christopher_j23)


Lesenswert?

Christian K. schrieb:
> Also ich brauche einen Webserver wie z.B. Apache der die Seiten
> ausliefert (auch an mehrere User) und einen WiFi Access zu dem Server.

Das kannst du alles mit Python machen. Google einfach mal nach "Flask" 
oder "Werkzeug"

Hier hast du ein Schritt-für-Schritt Tutorial:
http://randomnerdtutorials.com/raspberry-pi-web-server-using-flask-to-control-gpios/

von Christian K. (Gast)


Lesenswert?

So der raspberry läuft jetzt, ich habe apache installiert und einen wifi 
hotspot eingerichtet.

Wenn ich mich mit einem phone anmelde kann ich auch die apache 
Startseite sehen wenn ich die raspberry IP addresse im Browser eingebe.

Soweit so gut, ich möchte aber das die apache Seite automatisch nach dem 
Anmelden über wifi aufgeht. So wie z.B. wenn man sich in Hotels in das 
WLAN Netz anmeldet die Welcome Seite automatisch erscheint.

Weiss jemand wie man das konfiguriert?

Ich benutze hostapd für den hotspot...

von Christian K. (Gast)


Lesenswert?

Danke Christopher für den Vorschlag. Ich hatte mir auch erst python 
angeschaut, aber mein web programming erfahren Kollege hat mich 
überzeugt doch besser java-script zu nehmen, insbesondere weil der 
raspberry ja kein Performance Wunder ist. Da ist es dann von Vorteil 
wenn die GUI auf dem/die Clients läuft.

Natürlich ist apache vmtl. auch overkill und es gibt schlankere 
Web-Server. Aber der Web-Server an sich ist ja nicht das Problem und 
kann auch später noch ausgetauscht werden.

von Christian K. (Gast)


Lesenswert?

Sollte später jemand nochmal über diesen Thread stolpern:

Das Stichwort nach dem man googeln muss ist: Captive Portal

von Johnny B. (johnnyb)


Lesenswert?

Christian K. schrieb:
> Das Stichwort nach dem man googeln muss ist: Captive Portal

Ah interessant, danke Dir.

von Christopher J. (christopher_j23)


Lesenswert?

Christian K. schrieb:
> Danke Christopher für den Vorschlag. Ich hatte mir auch erst python
> angeschaut, aber mein web programming erfahren Kollege hat mich
> überzeugt doch besser java-script zu nehmen, insbesondere weil der
> raspberry ja kein Performance Wunder ist. Da ist es dann von Vorteil
> wenn die GUI auf dem/die Clients läuft.

Ja, die GUI sollte auf jeden Fall in Javascript gehalten werden aber du 
willst ja in irgendeiner Form ein "selbstgebautes Gerät bedienen", also 
in irgendeiner Form mit der Hardware interagieren. Dafür brauchst du ja 
irgendetwas das auf Seite des Servers mit der Hardware interagiert und 
dafür würde ich eben Python nehmen. Go wäre hier meiner Meinung nach 
auch eine sehr gute Wahl aber du kannst natürlich auch NodeJS oder 
Apache mit PHP nehmen.

Der springende Punkt ist, das Apache an sich erstmal nur statische 
Webseiten ausliefert und du dann noch eine serverseitige Scriptsprache 
wie PHP brauchst um mit irgendetwas auf dem Server (dem RPi) zu 
interagieren. Das wird dann schnell kompliziert und vor allem frisst es 
sehr viele Ressourcen.

Ich habe selber vor kurzem einen kleinen Webserver in Go geschrieben, 
über den ich ein per USB angeschlossenes Gerät (zur Steuerung von 
Funksteckdosen) per REST-API ansteuern kann. Der Server läuft auf meinem 
RPi3 im Idle mit einem Speicherverbrauch von unter 1MB und unter 1% CPU 
Auslastung. Dafür zuckt eine Apache/PHP Kombination nicht mal mit dem 
kleinen Finger. Das beste daran ist allerdings, dass der ganze Server in 
etwa 100 Zeilen Code implementiert ist. In Python wäre das vermutlich 
genauso einfach gewesen, wenn auch mit etwas mehr Ressourcenverbrauch 
aber mit Apache und PHP...

Da bei dir aber das Hauptaugenmerk auf der GUI liegt ist das am Ende 
wahrscheinlich sowieso das was am meisten Zeit in der Implementierung 
kostet. Ich würde die GUI jedoch trotzdem um eine saubere REST-API 
herumbauen. Was du dann als Backend nimmst ist komplett egal und leicht 
austauschbar.

von de1m (Gast)


Lesenswert?

Ich finde auch, dass Apache oder Nginx oder httpd etwas 
überdimensioniert ist.
Ich selbst würde sowas mit Nodejs realisieren, es gibt ja auf npmjs.com 
bereits module für RP GPIO und ein Haufen von anderen Sachen dazu, aber 
du kannst natürlich das auch über Python oder GO machen.

von Max M. (Firma: Herr) (maxtox)


Lesenswert?

Ich finde du sollst iobroker (http://iobroker.net) benutzen!

Mit VIS Adapter im iobroker kannst du fast ALLES Steuern und die 
anbindung der Geräte geht über "andere" adapter...

Und du kannst alles über einen Browser Steuern, Einrichten und Ablesen.

ES IST KOSTENLOS!!! ind hat über 2000 Nutzer!

: Bearbeitet durch User
von Bernd (Gast)


Lesenswert?

Du kannst es auch zum Anlass nehmen Dich mit der Sprache Go zu 
beschäftigen, das ist gut geeignet für Webservices mit minimalem 
Ressourcenhunger auf unterdimensionierten Servern.

von Sheeva P. (sheevaplug)


Lesenswert?

Christian K. schrieb:
> Danke Christopher für den Vorschlag. Ich hatte mir auch erst python
> angeschaut, aber mein web programming erfahren Kollege hat mich
> überzeugt doch besser java-script zu nehmen, insbesondere weil der
> raspberry ja kein Performance Wunder ist. Da ist es dann von Vorteil
> wenn die GUI auf dem/die Clients läuft.

Das Eine schließt das Andere nicht aus.

Natürlich ist es eine sehr gute Idee, möglichst viel Arbeit auf den 
Client zu verlagern -- so eine Art "poor man's distributed computing" -- 
, aber irgendwie müssen die Webseiten und der dort enthaltene (oder 
referenzierte) JavaScript-Code an die Clients ausgeliefert werden.

Außerdem müssen die vom Client eingegebenen Daten auf den Server 
gelangen, zum Beispiel via AJAX und JSON, und dann auf dem Server 
verarbeitet werden, zum Beispiel mit Python oä.

Infolgedessen ist Christophers Tipp mit Python's Flask sehr gut: das 
bringt bereits alles mit, was Du serverseitig brauchst, um erstens 
HTML-Seiten und JavaScript-Dateien an die Clients zu liefern, und 
zweitens die Eingaben der Clients entgegenzunehmen und zu verarbeiten.

von Strubi (Gast)


Lesenswert?

Moin,

spannendes Thema, ich habe dafür auch noch nicht wirklich eine fertige 
Lösung gefunden.
Im Prinzip möchte ich in Richtung Prozesskontrolle und Konfiguration, 
sieht aber so aus, als ob man sich da viel selber zusammensuchen muss.

Hat wer mit PyScada zufällig gute Ergebnisse erreicht?
Ich will ansich alles schwergewichtige Zeug vermeiden und bin mir nicht 
sicher, ob das Django-Framework bisschen viel Ballast für ein Embedded 
System mitbringt..

von Christopher J. (christopher_j23)


Lesenswert?

Strubi schrieb:
> Hat wer mit PyScada zufällig gute Ergebnisse erreicht?

Kannte ich noch nicht aber habe es mir gerade mal kurz angeschaut. Die 
Dokumentation dazu sah mir aber ein bisschen dünn aus.

Strubi schrieb:
> Ich will ansich alles schwergewichtige Zeug vermeiden und bin mir nicht
> sicher, ob das Django-Framework bisschen viel Ballast für ein Embedded
> System mitbringt..

Python an sich ist schon ein "Schwergewicht". Mit kompilierten Sprachen 
wie Go, Java oder C# bist du häufig einen Faktor 10 schneller unterwegs. 
Kommt natürlich drauf an was du machst und wenn du nur daheim drei 
Temperatursensoren und fünf Schalter in dein System einbindest kratzt 
das den RPi wahrscheinlich nicht im geringsten, egal ob Django, Getty, 
Rails oder was weiß ich.

von Martin S. (strubi)


Lesenswert?

Christopher J. schrieb:
> Python an sich ist schon ein "Schwergewicht". Mit kompilierten Sprachen
> wie Go, Java oder C# bist du häufig einen Faktor 10 schneller unterwegs.
> Kommt natürlich drauf an was du machst und wenn du nur daheim drei
> Temperatursensoren und fünf Schalter in dein System einbindest kratzt
> das den RPi wahrscheinlich nicht im geringsten, egal ob Django, Getty,
> Rails oder was weiß ich.

Naja, Python im Vergleich zu Java als Schwergewicht zu bezeichnen, ist 
jetzt schon etwas gewagt (~80kB zusammengestrippter Python-Interpreter 
versus Java VM oder andere Frameworks). Mir geht's v.a. um den 
Speicherbedarf, die Performance ist nicht so das Thema, es müssen also 
nicht 20 Clients gleichzeitig bedient werden. Aber es sind eine Menge 
Sensoren, allerdings brauchen diese nur gruppenweise angezeigt werden, 
d.h. laufendes Update (1-5 Hz) nur für die sichtbaren Elemente.
Da habe ich bisher noch kein kostenloses Frontend in Javascript 
gefunden, was das von haus aus a la "SCADA" macht.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.