Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Lösungsweg gesucht: Webseite <> Processing Datenaustausch [erledigt]

Thu Mar 29, 2018 7:09 pm

Hallo
Bin neu mit Raspberry Pi 3 und habe ein paar grundsätzliche Fragen bzw suche einen Lösungsansatz.
Ich kann Arduino programmieren; löten; Robotik; Elektronik; Processing und ein wenig html bzw einen Editor dafür nutzen.
PHP ist wohl irgendwas mit Skripten und dynamischem Webseiten und mir (noch) fremd...

Problemstellung:
Ich will einen kleinen Roboter online bringen. Auf einer Website (gehostet auf dem Raspby?) sollen ein Videostream (Raspy Webcam; wohl noch im Schiffscontainer), etwas Text und ca. 10-15 Buttons erscheinen. Der Besucher klickt eine der Schaltflächen: Das Licht geht an und der Roboter bzw. Processing startet entsprechend der Auswahl des Besuchers sein Programm. Der Videostream zeigt was da passiert.
Den Roboter gibts schon länger: https://www.youtube.com/watch?v=ZmK1j-XQyCw

Was ich habe:
Auf dem RaspberryPi (früher Laptop) läuft schon mal Processing und steuert via USB <> Arduino meinen Roboter. https://processing.org
Mit den GPIO Pins des Rasp werde ich das Licht und die Stromversorgung des Roboters schalten.
Meine Internetanbindung sind knapp40Mbit/s in beide Richtungen. Soweit so gut...

Was ich nicht... :
WebServer usw...
?Wie kriege ich Daten/Befehle von der Website zu Processing? Bidirektional wäre Luxus!

Mein Idee dazu (und da brauch ich Hilfe bzw wen der mich auf den richtigen Weg führt):
a)
- Statische IP im LAN für den RaspberryPi
- Webserver installieren und konfigurieren
- Website erstellen mit Buttons und VideoStream
- DynDNS oder so einen Service um die Website von Aussen auch zu finden
- PHP ?
- Da läuft da irgendwie-irgendwo ein Skript welches diese Buttons bereitstellt, bzw. abfragt?
- Dieses Skript kann entweder Daten mit Processing austauschen?, oder es beschreibt ein TextFile
Processing bekommt so Befehle direkt oder liest alle paar Sekunden ein File aus? Könnt ich mit leben, da der Roboter eh sehr langsam ist.

b)
Extern gehostete Webseite und der Raspby liefert nur den Videostream und nimmt irgendwie die Befehle entgegen
Trotzdem: - Da läuft da irgendwie-irgendwo ein Skript welches diese Buttons bereitstellt, bzw. abfragt?
- Dieses Skript kann entweder Daten mit Processing austauschen?, oder es beschreibt ein TextFile
Processing bekommt so Befehle direkt oder liest alle paar Sekunden ein File aus? Könnt ich mit leben, da der Roboter eh sehr langsam ist.

Wie bitte kommunizieren Webseite und Processing miteinander?

Für Anregungen sehr dankbar
Pinaut
Last edited by Pinaut on Fri May 04, 2018 11:16 am, edited 1 time in total.

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Fri Mar 30, 2018 7:01 am

Hallo Pinaut,

erst mal würde ich alles nur local laufen lassen gleich eine Seite ins Netz das öffnet viele Tore die man erst mal Kontrollieren muss. Wenn alles Läuft dann kann man überlegen wie man ins Netz kommt. Ich würde aus jeden Fall erst mal mit DynDns und einem Proxy Arbeiten also DynDNS auf eine PC der sicher ist und dann von dort die Daten holen. Thema zum Googlen Http Proxy und Firewall mit DMZ.

Ich sehe hier noch ein zweites Thema um was man sich kümmern muss wer hat jetzt die Steuerung ? auf einer Webseite können sich gleich zeitig ganz viele befinden das könnte Caos in der Steuerung auslösen. Ich würde über ein Sperre nach denken.

Ich bin ein Sicherheits Mensch deshalb würde ich nie eine WebServer erlauben auf die Hardware zu zu greifen aber es geht natürlich. Rechte Thema.
Du kannst also eine Apache mit PHP installieren im Netz gibt es 100 von Anleitungen dazu. Auch welche wo man dann zum Beispiel den GPIO Steuern kann. So würde für mich ein halbwegs sicherer schuh draus:
Apache mit PHP muss nicht auf dem PI Laufen
https://stackoverflow.com/questions/140 ... php-script
Dann TCP Connect zu Processing als Server
https://processing.org/reference/librar ... erver.html

Jetzt kannst du jedes mal bei der Aufruf der Seite eine Verbindung zum Server machen und Daten senden und Empfangen. Das Bild kannst wieder Motion Server ein binden siehe Link unten.

Das ist Quasi deine Idee:
http://www.raspberry-pi-geek.de/Magazin ... und-Motion

Cam Bild ins Web https://motion-project.github.io/

Was ich leider nicht weiß ist Packt der PI alles Parallel aber da du den Neuen hast würde ich es Probieren.
Ich weiß ich schreibe mach mal sehr unstrukturiert wenn was nicht klar ist bitte noch mal nach fragen.

Apache stelle php und die Statische webseiten zu verfügung ggf auch eine Anmeldung (passwort schutz).
Der PHP script (noch zu schreiben) baut eine Verbindung zum Processing server auf und sendet steuerbefehle holt die daten.
motion-project stellt den Mpeg stream (bilder schnell hinter einander) von der cam zu Verfügung das kann man dann in der Seite vom Apache einblenden. Einziger hacken bei der Geschichte die IP von muss vom aufrufen Browser erreichbar sein. Hier habe jetzt keine Spontane Idee wir man das halbwegs Sicher macht.
Wie gesagt erstmal alles im Lokalen Netz zum Laufen bringen und dann ins Netz damit.
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Fri Mar 30, 2018 7:48 am

Hey DerkleinePunk
Besten Dank für die ausführlichen Antworten. Ich ahnte, bzw. wusste, dass da Einiges auf mich zukommt. Also mach ich mich mal Punkt für Punkt schlau...

Vielen Dank
Pinaut

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Sat Mar 31, 2018 10:44 am

Datenaustausch im LAN zwischen processing client<> server funktioniert schon mal mit den Beispielen von processing.org. Supersache!

Noch eine Frage:
Von wegen Sicherheit... Die Seite extern hosten (webspace vorhanden) und mit php? dem processing server mitteilen was passieren soll? Wäre das der Weg? Auch müsste processing später der Seite mitteilen wenn bereit für neuen Input...

Ps: Wer darf steuern: Dachte mir die Seite existiert 2mal:
a) Buttons bzw. Steuerung vorhanden wenn der Roboter fertig ist mit zeichnen. Eventuell anstelle des Videostreams ein bild.jpg
b) Ohne Buttons mit entsprechendem Hinweis wenn der Robi beschäftigt. Aber nun mit dem Motion-Stream

Pinaut

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Sun Apr 01, 2018 2:27 pm

so...
Alles steht auf gefühlt wackeligen beinen, aber erste erfolge sind da! Hab mir ein wenig php angeeignet und mit codeschnipseln aus beispielen eine Webseite zusammengeschustert welche aus einem dropdown menu das pattern für den Roboter auswählen lassen.

- html mit php script auf der selben seite bei einem externen host sendet die userauswahl zum processing server
- portweiterleitung zu fixer IP des raspberrypi zuhause auf meinem router
- simples server script in mein processing roboterscript eingebaut welches einen Befehl entgegen nehmen kann

kann mir jemand folgende frage beantworten:
- port weiterleiten an raspberry > sicherheit heimnetzwerk?
- mit php nach der eingabe der form und abschicken an server neue Seite (roboter beschäftigt; nur gucken) öffnen?
- wie der 2ten website beibringen auf ein 'done' zu warten um dann wieder die erste zu laden
- eventuell nur eine Seite und den Inhalt (buttons ja/nein; text) mit php dynamisch erzeugen?

frohe ostern!

smartifahrer
Posts: 955
Joined: Sat Feb 13, 2016 8:10 am

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Sun Apr 01, 2018 5:59 pm

Mit der Port Weiterleitung öffnest du Angreifern auf jeden Fall eine Tür in dein Netz. Wenn du für den Webserver den Port 80 öffnest kann der Angreifer über diesen versuche deinen Webserver auf den Pi zu übernehmen. Dabei ist natürlich nicht die Port Weiterleitung das Risiko sondern dein Webserver und die Scripte die darüber aufrufbar sind. Es liegt also bei dir an dieser Stelle für Sicherheit zu sorgen.

Die anderen Punke gehen. Das warten ist dabei aber der schwierige Teil da dafür das Web eigentlich nicht gemacht ist und es passieren kann das du dir den Webserver lanmlegst da zu viele Script auf den Pi warten.

Du kannst ader auch einen anderen Ansatz verfolgen. Hierbei sendet die Webseite nicht an den Pi sondern speichert die eingabe auf dem öffentlichen Webserver zwischen. In regelmäsigen Abständen greift nun der Pi auf ein Script des Servers zu und holt sich die Daten. Dabei kann er auch gleich seinen Status als URL Parameter übermitteln das der Server nun wiederung solange speichert bis er neue Informationen erhält.
Den Austausch zwischen Server und Browser kann z.B. per AJAX Request gelöst werden.
Der Vorteil hierbei ist, du benötigst keine Port Weiterleitung (Sicherheit), keine feste IP oder Domain per DDNS. Nachteil die Reaktionszeit ist Größer und hängt von Pi ab wie oft er Daten vom Server abrufen kann.

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Tue Apr 03, 2018 12:33 pm

https://www.codeproject.com/Articles/12 ... ased-robot

Sorry das ich jetzt erst sehe das du fleißig warst hatte einen Hacken vergessen. Obigen Link habe ich heute gefunden wenn du mal sehen willst wie es andere Leute machen.

Um das Pollen auf die Daten änderungen per Web (öffentlicher Server) reaktions Freudiger zu machen könnte man auch mit Longpolling arbeiten. Das wir aber schnell Komplex. Und sorry wenn du da nicht sicher bist wird es schnell Hyper Kompelx.

Also:
Auf dem Öffentlichen Server wird mit PHP was gespeichert was den Neue Befehl beinhaltet zum Beipiel eine Datei. (Html Seite Senden Button)
Der PI von zu hause geht auf eine andere URL auf dem selben Webserver zum Beispiel www.roboter.de/nextcommand.php
Da hinter ist nichts anderen als code der warte bis die nächste Kommand Datei auf dem Server liegt. Wenn eine Neue da ist wird sie zurück geben und und der PI kann sie ausführen. Wer jetzt schluss endlich das Comand File auf dem Netz holt ist ja egal das Könnte auch ein PC zu hause machen.
Stichwörter zum suchen: Longpolling, FileExits

https://stackoverflow.com/questions/333 ... ng-polling
https://www.php-kurs.com/session-anwenden.htm

PHP kennt session Id's für Foren und so damit kann man sich merken wer jetzt gerade die Steuerung des Bot hat.
Ganz ehrlich mach erst mal alles für Zuhause fertig und Probiere auch das Thema sperren aus. Wenn das sicher läuft dann finden weg wie das ins Netz kommt.
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

smartifahrer
Posts: 955
Joined: Sat Feb 13, 2016 8:10 am

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Tue Apr 03, 2018 1:13 pm

In der Session kann nicht gespeichert werden wer die Steuerung des Bot hat. In der Session kann nur gespeichert werden ob der Benutzer die Steuerung des Bot hat.
Ein kleiner aber feiner Unterschied, da Daten nicht zwischen den einzelnen Session ausgetauscht werden können und somit nicht ermittelt werden kann welcher Benutzer die Kontrolle hat.

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Tue Apr 03, 2018 1:35 pm

Ok dann speicher ich in eine DB die Session Id und den Namen dann kann ich das Anzeigen wer die Steuerung hat. So was in der Art braucht man eh damit man Prüfen kann hat eine Andere Session schon die Steuerung oder nicht.

Generell zum Thema Sicherheit und Zugriffe auf so Dinger
Das Problem habe mehr oder weniger all IOT Devices das man Ungerne Möchte das man direkt auf sie Zugreift aber man möchte daten in schicken können. Da gibt es ganz Viel im Netz und einfach ist es nicht das sicher zu bekommen...
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Tue Apr 03, 2018 9:38 pm

Ihr seid klasse mit Euren Inputs! Zum allgemeinen Verständnis: Ich bin ein Toningenieur der in der Freizeit ein wenig mir Arduino und Processing rumspielt. Das WebDings jetzt ist für mich schon höhere Schule. Informatik hab ich nie studiert.. ;-)

@derkleinepunk: Kuhles Beispiel der Link zum Roboter. Scheint mir für mich aber mächtig zu kompliziert.. Aber Polling und Session werd ich nachher gleich lesen...

Was ich in der Zwischenzeit gemacht habe:
- Etwas php gelernt und ne Webseite die aus einer Form mit Pulldown-Menü und Sendenbutton meinem Processing-mini-server einen Befehl schicken konnte. War schon ziemlich sexy, als nach einem Druck auf einen Button der Roboter losrennt!!! ;-)
- Die idee, das der Raspby von aussen erreichbar ist dann aber nach dem Post von Smartifahrer schnell wieder verworfen worden.

- Gestern PlanB:
Beim Aufruf der start.html fragt ein phpScript ein status.txt ab in welchem entweder 'idle' oder 'running' steht. Das Textfile wurde vom Raspy auf den Server geschrieben. So wird entschieden welche Folgeseite geladen wird: Entweder eine Seite mit Auswahl, oder eben nur der Videostream (Den gibt es noch nicht)
Im Falle von 'idle': Der User kann wählen und die Seite schreibt in ein pattern.txt welches auf dem Server liegt die Auswahl des Benutzers. (Es geht NUR um eine Auswahl von einem aus maximal. 10-15 möglichen Pattern die der Roboter dann zeichnet) Danach wird die 'beschäftigt'-Seite aufgerufen mit dem Videostream.
- Der Raspberry fragt alle (ähm.. ist 10 Sekunden viel Traffic und sogar unanständig?) das pattern.txt vom Server ab. Natürlich nur wenn der Roboter nicht beschäftigt.
(Das folgende Beispiel für Kommunikation hat zwar funktioniert, aber ich schaffe nicht anstelle " World" mein $data zurückzubekommen. Geschweige einen mitgegeben Status irgendwie auf der Website zu speichern. https://forum.processing.org/two/discus ... e-with-php)

Die (10s) Verzögerung zum Start des Roboters könnte ich hinnehmen. Was mir im Moment Kopfzerbrechen macht: Wie weiss die 'beschäftigt'-Seite mit dem Stream wann fertig und wieder das start.html aufgerufen werden soll? Wie kann eine Webseite bzw deren phpScript periodisch mein status.txt auslesen? html-Refresh?Eventuell nur ein 'unsichtbares' Frame welches sich neu lädt?

ps: php kann ich nur auf dem Server probieren... Geht aber in Ordnung. Bin mit dem Host befreundet.

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Wed Apr 04, 2018 6:39 am

Hallo Pinout,

bitte mach dir mal gedanken ob du vielleicht den Code auf Githup oder bitbucket legst dann könnte man da rein sehen.

Refresh seite wenn der Status sich ändert da wird es am Einfachesten sein das du in deine Seite noch Jquery ein baust das ist eine lib für html / javascript. Ich weiß ist nicht ganz richtig ausgedrückt aber ich denke so ist es leichter zu verstehen.

https://www.yannickherzog.de/blog/long- ... query.html da steht wie es geht du muss "nur" if(newMeetingItems()) durch die abfrage ersetzen die sagt das das Command abgeartet ist. Also in der status.txt wieder idle steht. refresh(); lädt dann die Seite neu.

Und fast genau so kannst du das 10 sek Problem um gehen: du machst von PI Aus eine Reqeust auf jetzt xxx.de/php/nextcommad.php.
und dort wartest du bis deine pattern.txt geschrieben worden ist. bei zurück kommen bringt du den Inhalt mit. So hast du wenig Verzögerung und wenig Belastung.

Ist echt schwer zu sagen wo das Problem liegt wenn man den Code nicht kennt. Ein einfaches Problem könnte sein das das PHP keine Dateien schreiben darf auf dem Server. Dateien auf ein Webserver schreiben kann gefährlich sein. Vielleicht doch über legen es über eine Datenbank zu machen. Red mal mit deinem Hoster. Datenbank hört sich jetzt hoch trabend an kann man auch erst ganz einfach machen und dann ist es fast wie Dateien. Ich denke du kommst mit einer Tabelle aus im Moment.

Tabelle RobotCommunikation Spalten KEY string Value string

select value from RobotCommunikation where key = 'Status';
in Value ist dann IDLE oder RUNNING

select value from RobotCommunikation where key = 'Command';
value ist dann nichts oder der Name des commands

wird ein Command gesendet via php Seite:
update RobotCommunikation set value='DRIVEFORWARD' where key = 'Command';

Auch muss man bei Parameter in der Url String new=loadStrings("http://"+"mywebsite.com/index.php?value="+s); aufpassen da sind nicht alle Zeichen erlaubt !

Ich hoffe das ich dich jetzt nicht überfordere.

Wenn du Toningenieur bist kann du mir vielleicht helfen ich suche für meine Projekt eine Start Ton / Melodie so was wie von der Telekom oder TomTom kurz und eindeutig.

Mein Projekt http://www.carnine.de

PS: Ich habe noch nie eine Uni von innen gesehen. Außer im Fernsehen.

https://www.php-kurs.com/mysql-datenbank-auslesen.htm
https://www.php-kurs.com/mysql-querys-s ... reiben.htm -> Brauchst du nur einmal den deine Tabelle braucht ja nur 2 Zeilen.
https://www.php-kurs.com/db-sql-query-u ... it-php.htm

So jetzt Arbeiten und dann wieder mein Projekt muss da mal weiter kommen.
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch

Fri May 04, 2018 11:16 am

Konnte die Sache elegant lösen: Youtube Stream befreit von offenen Ports usw.
War Wochenlang mit Debian, Linux, html, php, IPTables, Streaming Formaten am probieren bis ich dann gestern Nacht doch mal den Beschrieb für Youtube Streams gelesen. 30 Minuten später war alles am laufen!
Viel gelernt in den letzten Wochen und sehr zufrieden für den Moment.

Danke für alle Inputs!
P.

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch [erledigt]

Fri May 04, 2018 3:25 pm

Wie jetzt Youtube Stream das Problem löst ist mir nicht ganz klar. Hast du eine Kurze Beschreibung ? das man so den Video Stream raus bekommt ist klar aber wie die steuer befehle rein ?
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch [erledigt]

Fri May 04, 2018 10:53 pm

DerKleinePunk wrote:
Fri May 04, 2018 3:25 pm
Wie jetzt Youtube Stream das Problem löst ist mir nicht ganz klar. Hast du eine Kurze Beschreibung ? das man so den Video Stream raus bekommt ist klar aber wie die steuer befehle rein ?
ops. sorry. ja gerne
Es gibt status.txt, pattern.txt & time.txt auf dem server. Raspy schreibt seinen Status dort rein und liest alle 10s (if robo idle) das pattern.txt aus.
Wenn Pattern geändert dann time.txt mit Endzeit beschreiben und Roboter starten.
start.php ist eine Weiche für jeden Status: idle, run, offline.
Der Raspberry hat also spätestens nach 10s seinen Befehl von idle.php und kann die Endzeit in time.txt schreiben. Darum der 10s counter vor dem laden von run.php. Ansonsten hat die Seite eventuell keine aktuelle Endzeit für den Counter. Auch eine Baustelle. Aber keine offenen Ports und Unsicherheiten Zuhause.
https://github.com/Pinaut/ZENrobot-online

User avatar
DerKleinePunk
Posts: 73
Joined: Thu Feb 23, 2017 9:18 am
Location: Germany
Contact: Website

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch [erledigt]

Sat May 05, 2018 3:44 am

Danke und gleich ein git mit Code so ist das Cool.

Eines Fehlt mir noch wie Hast du jetzt die Cam mit dem Youtube stream verbunden läuft das auch auf dem PI oder ist das ein Anderer Rechner ?
PI 2 und PI 3 1GB Raspbian Strech
Der Wandel von Atom zum Bit ist unwiderruflich und nicht mehr aufzuhalten.
Nicholas Negroponte

Pinaut
Posts: 14
Joined: Thu Mar 29, 2018 5:38 pm

Re: Lösungsweg gesucht: Webseite <> Processing Datenaustausch [erledigt]

Sat May 05, 2018 6:04 am

DerKleinePunk wrote:
Sat May 05, 2018 3:44 am
Danke und gleich ein git mit Code so ist das Cool.

Eines Fehlt mir noch wie Hast du jetzt die Cam mit dem Youtube stream verbunden läuft das auch auf dem PI oder ist das ein Anderer Rechner ?
Der Raspberry sendet sein Cam an youtube : https://www.makeuseof.com/tag/live-stre ... pberry-pi/

Return to “Deutsch”