Forum: PC-Programmierung jpeg mit html und buttons


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Hadmut F. (hadmut)


Lesenswert?

Ich hab folgendes was mit "http://192.168.178.41/"; auch schön läuft:
1
<html>
2
    <head>
3
        <title>JPEG Capture</title>
4
    </head>
5
    <body>
6
        <!-- Request JPEG -->
7
        <img src="http://192.168.178.41/capture" />
8
    </body>
9
</html>

Nun möchte ich auf dieser seite einen button der eine andere url aufruft
"http://192.168.178.41/control?z=";
"http://192.168.178.41/control?t=";

und zwar:
- mit einem page reload von "http://192.168.178.41/";
- ohne page reload und ohne wechsel auf "http://192.168.178.41/control";

Bring das nicht hin. Server läuft auf esp32, sollte also kurz sein.

: Bearbeitet durch User
von Irgend W. (Firma: egal) (irgendwer)


Lesenswert?

Hadmut F. schrieb:
> Nun möchte ich auf dieser seite einen button der eine andere url aufruft

Meinst du sowas damit?
- https://wiki.selfhtml.org/wiki/HTML/Elemente/button

Hadmut F. schrieb:
> und zwar:
> - mit einem page reload von "http://192.168.178.41/";;
> - ohne page reload und ohne wechsel auf "http://192.168.178.41/control";;

So ganz werde ich daraus nicht schlau.
Bei dem ersten musst du halt auch das so angeben wie du es erwartest und 
nicht noch Zeugs hintendran.
Und der zweite Button soll sowas wie ein Fake-Button sein der nichts 
macht?

von Εrnst B. (ernst)


Lesenswert?

Kannst du per Javascript machen, oder du passt z.B. den Webserver an, 
dass der bei
"http://192.168.178.41/control"; zwar seine Aktion durchführt, aber ein 
"204 no content" zurückmeldet, dann bleibt der Browser auf der aktuellen 
Seite.

von A. S. (rava)


Lesenswert?


von Hadmut F. (hadmut)


Lesenswert?

Εrnst B. schrieb:
> Kdu passt z.B. den Webserver an,
> dass der bei
> "http://192.168.178.41/control"; zwar seine Aktion durchführt, aber ein
> "204 no content" zurückmeldet, dann bleibt der Browser auf der aktuellen
> Seite.

TY werde ich versuchen.

von Hadmut F. (hadmut)


Angehängte Dateien:

Lesenswert?

Das funktioniert !
httpd_resp_set_status(req, HTTPD_204);

👍👍👍

: Bearbeitet durch User
von Hadmut F. (hadmut)


Lesenswert?

Jemand ahnung wie man das :81 in kurzform ohne IP macht?
1
  if (dostream)
2
    out += "<img src=\"http://192.168.178.41:81/stream\" />\n"; 
3
  else 
4
    out += "<img src=\"/capture\" />\n";  
5
  out += "<br><br>";

von Harald K. (kirnbichler)


Lesenswert?

Was meinst Du mit "Kurzform"?

Wenn die Seite vom gleichen Server ausgeliefert wird, reicht "/stream".

Wenn die Seite von einem Server mit der gleichen IP-Adresse, aber einer 
anderen Portnummer ausgeliefert werden soll, dann ist das nicht der 
gleiche Server, und dann ist eine vollständige URL incl. Servername bzw. 
IP-Adresse nötig.

von Hadmut F. (hadmut)


Lesenswert?

Das sind portnummer 80 für http und 81 für stream. Warum? K.A.
Also muss ich den string mit sprintf(ip) basteln-

von Hadmut F. (hadmut)


Angehängte Dateien:

Lesenswert?

Habe das so gemacht:
1
String act_ip;
2
3
// in setup
4
act_ip = WiFi.localIP().toString().c_str();
5
6
// commandhandler
7
out += "<img src=\"http://" + act_ip + ":81/stream\">\n";

Ich hab ein gefährt dass sich über http steuern lässt.

Für vorwärts / stop geht das mit knöpfen gut, für links / rechts ist das 
aber zu grob quantisiert.

Wie könnte man das sonst noch auf einfache art flüssig steuern?
- Tastaturabfrage über browser?
- Mousepointer abfrage im browser?
- Slider?

: Bearbeitet durch User
von Daniel F. (df311)


Lesenswert?

Hadmut F. schrieb:
> Wie könnte man das sonst noch auf einfache art flüssig steuern?

mit einer technologie, die dafür gemacht wurde?

von Steve van de Grens (roehrmond)


Lesenswert?

Ein echtes Auto lenkt man auch nicht mit den Cursortasten.

von A. S. (rava)


Lesenswert?

Dr google sagt, dass das über http schon gehen kann,
hier z.B. https://learn.sparkfun.com/tutorials/wifi-controlled-robot/all
oder hier 
https://www.electronicshub.org/wifi-controlled-robot-esp8266-arduino/

vielleicht ist dein Problem ja nur, dass der Mechanismus, den du mit dem 
forwarding gebaut hast, etwas langsam ist.
Kannst du eine website bauen, die nicht komplett neu geladen wird, 
sondern nur Teile aktualisiert, z.B. mittels javascript oder altmodisch 
mit iframes?

Dann kannst du alles mit höherer Wiederholrate ansteuern. Natürlich nur 
unter der Annahme, dass deine Robotersoftware effizient genug designt 
ist.

: Bearbeitet durch User
von Hadmut F. (hadmut)


Lesenswert?

A. S. schrieb:
> Kannst du eine website bauen, die nicht komplett neu geladen wird

Das ist mit dem "HTTPD_204" von Ernst B. bereits realisiert und 
funktioniert prächtig.

Wie das mit den slider geht weiss ich inzwischen auch.
Läuft dank 204 auch ruckelfrei mit 15 fps bei 480x320.

>  https://learn.sparkfun.com/tutorials/wifi-controlled-robot/all

Ty. Das keyboard einfangen werde ich probieren.

: Bearbeitet durch User
von Hadmut F. (hadmut)


Lesenswert?

Das läuft!
1
<script type="text/javascript">
2
document.addEventListener("keydown", function (evt) {
3
  if (evt.keyCode == "12") fetch("http://192.168.178.36/?S=");
4
});
5
</script>

Könnte man mit ajax eleganter machen aber das versteh ich nicht.

: Bearbeitet durch User
von Hadmut F. (hadmut)


Angehängte Dateien:

Lesenswert?

Die keyboard variante funktioniert ausserordentlich gut.
Das lässt sich flüssig steuern, viel besser als die button variante.

Hab so gemacht dass er mit "up arrow" taste forwärts geht bis man die 
taste wieder loslässt. Mit "left arrow" dreht er auf platz links bis man 
loslässt. Und mit "up arrow" und "left arrow" gleichzeitig mach er eine 
linkskurve.

Bei "up arrow" und gleichzeitig "down arrow" bekommt er kognitive 
dissonanz und reagiert agressiv.

Das im bild ist mein 15kwh akku 😊

: Bearbeitet durch User
von Steve van de Grens (roehrmond)


Lesenswert?

Hadmut F. schrieb:
> Könnte man mit ajax eleganter machen aber das versteh ich nicht.

Ajax ist halt nicht mehr in Mode.

Ich weiß schon, warum ich mich aus der Entwicklung von Web Frontends 
zurück gezogen habe. Ich arbeite lieber hinter der Bühne, da gibt es 
solche Eitelkeiten nicht.

von Εrnst B. (ernst)


Lesenswert?

Hadmut F. schrieb:
> Könnte man mit ajax eleganter machen aber das versteh ich nicht.

AJAX, also das Rumgehampel mit XMLHttpRequest und co, ist seit ca. 2016 
nicht mehr Mittel der Wahl. Ab da haben alle Browser "fetch()" 
unterstützt, was wesentlich eleganter ist.

Wenn du irgendwo Tutorials & Beispielcode findest, der XMLHttpRequest 
verwendet, würde ich nach was Aktuellerem weitersuchen.

Ansonsten gäbe es die Option, die Inputs per Websocket zu übertragen, 
wäre nochmal eine Ecke schneller, weil jeweils der Verbindungsaufbau & 
HTTP-Header entfällt.

Übrigens: fetch nimmt auch relative URLs, fetch("/?S=") spart dir das 
Einsetzen der IP-Adresse im HTML.

> Bei "up arrow" und gleichzeitig "down arrow" bekommt er kognitive
> dissonanz und reagiert agressiv.

Dein Keyboard-Handler schickt alle Tastendrücke raus, ohne zu warten bis 
die beim ESP angekommen & verarbeitet worden sind (d.H. es können viele 
HTTP-Requests gleichzeitig laufen)

Mach einfach mal nebenbei die Browser-Entwicklertoos auf, und schau in 
das Netzwerk-Tab

: Bearbeitet durch User
von J. S. (jojos)


Lesenswert?

um die lokale IP zu benutzen habe ich so ein Snippet:
1
var ip = location.host;
2
var ws_Url = "ws://" + ip + "/ws/";

Da muss ja noch das Protokoll vorne dran, oder geht das auch einfacher?

von Hadmut F. (hadmut)


Angehängte Dateien:

Lesenswert?

Εrnst B. schrieb:
> AJAX, also das Rumgehampel mit XMLHttpRequest und co, ist seit ca. 2016
> nicht mehr Mittel der Wahl. Ab da haben alle Browser "fetch()"

TY

> Übrigens: fetch nimmt auch relative URLs, fetch("/?S=") spart dir das
> Einsetzen der IP-Adresse im HTML.

TY

> Dein Keyboard-Handler schickt alle Tastendrücke raus,

Ich hab (keydown && !repeat) und keyup drin. Der traffic ist minim.
1
  out += "document.addEventListener(\"keydown\", function (evt) {\n";
2
  out += "  if (evt.keyCode >= \"37\" && evt.keyCode <= \"40\" && !evt.repeat)"; 
3
  out += "    fetch(\"http://"+act_ip+"/?D=\"+evt.keyCode);\n";
ja, das mit fetch("/?S=") hab ich gesehen.

Hab das gesamte .zip angehängt.

: Bearbeitet durch User
von Hadmut F. (hadmut)


Lesenswert?

J. S. schrieb:
> um die lokale IP zu benutzen habe ich so ein Snippet:
1
var ip = location.host;

Ich hab
1
  String act_ip;
2
  act_ip = WiFi.localIP().toString().c_str();
3
  Serial.println(act_ip);
deins ist einfacher, TY.

: Bearbeitet durch User
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.