Forum: PC-Programmierung jpeg mit html und buttons

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?

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.

sowas?
https://www.w3docs.com/snippets/html/how-to-redirect-a-web-page-in-html.html

Ε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.

Das funktioniert !
httpd_resp_set_status(req, HTTPD_204);

👍👍👍

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>";

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.

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

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?

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

mit einer technologie, die dafür gemacht wurde?

Ein echtes Auto lenkt man auch nicht mit den Cursortasten.

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.

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.

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.

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 😊

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.

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

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?

Ε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.

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.