Roger10499: Variable aus HTML an neue Seite

Hey zusammen, Zwar steht HTML zwar auf meiner ToDo Liste mit Dingen die ich noch lernen will leider bleibt mir für dieses Projekt dafür aber nicht die Zeit. Mit einem ESP 32 möchte / muss ich für ein Projekt die Steuerung eines Gefährtes übernehmen. Dafür wollte ich diesen JoyStick verwenden:

https://github.com/bobboteck/JoyStick

das an sich klappt auch den Code habe ich so angepasst das nur noch ein JoyStick übrig geblieben ist. Die X und Y Werte muss ich jetzt "nur" noch irgendwie auf meinen ESP bekommen.

Ich habe schon mehrere Stunden recherchiert und den ESP auch zumindest soweit bekommen das er den Wert einer Seite auslesen und verarbeiten kann. Jetzt würde ich gerne entweder in der HTML oder im JavaScript die X und Y Daten entweder jeweils auf eine Seite oder zusammen auf eine Seite zu schreiben. Aber es gibt ein so riesiges Angebot von Tutorials die ich alle nicht so recht verstanden habe. Leider fehlt mir die Zeit um mich noch nicht wochenlang da durch zulesen

Nochmal zusammengefasst:

Ich brauche einen Code entweder im JavaScript oder HTML der mir nur den Wert auf die Seite schreibt.

Vielleicht hat ja jemand da einen Link um meine Suche etwas zu vereinfachen oder würde sich selber die Mühe machen da etwas zusammen zu schreiben.

Natürlich ginge auch jede andere Möglichkeit um die Daten auf meinen ESP zu bekommen.


<!DOCTYPE HTML>

<html>
	<head>
		<title>Joy</title>
		<meta charset="utf-8">
		<meta name="description" content="Example page of use pure Javascript JoyStick">
		<meta name="author" content="Roberto D'Amico">
		<link rel="shortcut icon" type="image/png" href="http://bobboteck.github.io/img/roberto-damico-bobboteck.png">
		<style>
*
{
	box-sizing: border-box;
}
body
{
	margin: 0px;
	padding: 0px;
	font-family: monospace;
}
.row
{
	display: inline-flex;
	clear: both;
}
.columnLateral
{
  float: left;
  width: 15%;
  min-width: 300px;
}


#joystick
{
	border: 1px solid #FF0000;
}

		</style>
		<script src="joy.js"></script>
	</head>
	<body>
		
		<!-- Example of two JoyStick integrated in the page structure -->
		<div class="row">
			<div class="columnLateral">
				<div id="joy1Div" style="width:200px;height:200px;margin:50px"></div>
				Posizione X:<input id="joy1PosizioneX" type="text" /><br />
				Posizione Y:<input id="joy1PosizioneY" type="text" /><br />
				Direzione:<input id="joy1Direzione" type="text" /><br />
				X :<input id="joy1X" type="text" /></br>
				Y :<input id="joy1Y" type="text" />
			</div>
	
		</div>
		<script type="text/javascript">
// Create JoyStick object into the DIV 'joy1Div'
var Joy1 = new JoyStick('joy1Div');

var joy1IinputPosX = document.getElementById("joy1PosizioneX");
var joy1InputPosY = document.getElementById("joy1PosizioneY");
var joy1Direzione = document.getElementById("joy1Direzione");
var joy1X = document.getElementById("joy1X");
var joy1Y = document.getElementById("joy1Y");

setInterval(function(){ joy1IinputPosX.value=Joy1.GetPosX(); }, 50);
setInterval(function(){ joy1InputPosY.value=Joy1.GetPosY(); }, 50);
setInterval(function(){ joy1Direzione.value=Joy1.GetDir(); }, 50);
setInterval(function(){ joy1X.value=Joy1.GetX(); }, 50);
setInterval(function(){ joy1Y.value=Joy1.GetY(); }, 50);


		</script>
	</body>
</html>`

P.S. der JavaScript code ist zu lang und die Option zum Anhängen ha ich gefunden. Demn müsstet ihr euch unter dem Link oben holen.

Schöne Grüße Roger

  1. Hallo,

    zwei Fragen:

    • Was ist ein ESP 32?
    • Wie kann so ein Ding eine Seite auslesen?

    Gruß
    Jürgen

    1. Hallo,

      zwei Fragen:

      • Was ist ein ESP 32?
      • Wie kann so ein Ding eine Seite auslesen?

      Gruß
      Jürgen

      Ein ESP 32 ist ein WLAN fähiger Controller der sein eigenes WLAN aufmacht und auf einer bestimmten Seite die im Controller hochgeladenen ist bereitstellt. Die Seite befindet sich auf dem ESP.

      Im Prinzip kann sich das ganze in Html oder JavaScript abspielen. Der Esp spielt da keine Rolle.

      1. Hallo

        also läuft das Joystick-Script auf den ESP?

        Gruß
        Jürgen

        1. Ja genau

          Gruß Roger

          1. Hallo,

            du solltest jetzt mal genauer beschreiben, welche Geräte beteiligt sind, und welche Softwre auf den beteiligten Geräten läuft.

            Für mich sieht das im Moment so aus, als ob der User den ESP 32 in der Hand hält, und über diesen per Funk oder Kabel ein Fahrzeug steuert.

            Gruß
            Jürgen

            1. Moin,

              du solltest jetzt mal genauer beschreiben, welche Geräte beteiligt sind, und welche Softwre auf den beteiligten Geräten läuft.

              ja, das wäre sicher hilfreich.

              Für mich sieht das im Moment so aus, als ob der User den ESP 32 in der Hand hält, und über diesen per Funk oder Kabel ein Fahrzeug steuert.

              Für mich sieht es eher so aus, als ob der ESP32 in einem Fahrzeug steckt, auf dem Controller läuft ein kleiner Webserver, und Roger will die Daten, die der Controller anzeigt, mit einer neu zu erstellenden Webanwendung abgreifen.

              Live long and pros healthy,
               Martin

              --
              Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
              1. Hallo,

                auf dem Controller läuft ein kleiner Webserver,

                Das wäre mal eine Aussage, die bestätigt werden müsste. Ich habe bei Heise einen Vorstellartikel zum ESP32 gefunden, und die haben nur mit C ein kleines Hello World Programm geschrieben - das dann auf dem ESP lief.

                Roger will die Daten, die der Controller anzeigt, mit einer neu zu erstellenden Webanwendung abgreifen.

                Will er das? Aus meiner sicht will er die Karre fernsteuern:

                Mit einem ESP 32 möchte / muss ich für ein Projekt die Steuerung eines Gefährtes übernehmen.

                Aber ihr habt recht, es muss nicht sein, dass der ESP im Auto ist. Der ESP könnte auch Kern einer selbstgebauten Fernsteuerung sein.

                Aber er kriegt ja die Finger nicht mehr auf die Tasten. Warten wir mal ab, bis er wieder Zeit hat. Und dann hoffentlich mal eine sinnvolle Beschreibung dessen liefert, was er eigentlich tut. Bisher waren es nur vage Andeutungen. Aber wir kennen das Projekt und das Setup nicht. Damit wird das nichts.

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
                2. Hatte ich schon in einem anderen Reiter hier genauer beschrieben

                  Der ESP sitzt auf dem Gefährt und spannt sein eigenes WLAN auf in dem WLAn log ich mich mit dem Handy ein und steuer über diesen dann das Gefährt. Die ganzen Dateien liegen ähnlich wie bei einem Server auf dem ESP.

                  Die Auswertung im ESP steht schon. Ich muss nur noch irgendwie an die XY Daten kommen

  2. Hallo Roger,

    der JavaScript Code von joy.js ist wohl auch nicht so relevant. Das ist eine Library und die soll und muss als Black Box funktionieren.

    Um für dein Projekt irgendwas sagen zu können, müsste man mehr über das Projekt wissen. Du willst "X und Y auf die Seite schreiben" - aha.

    Die ganz naive Sicht ist: Das passiert doch schon. Deine gezeigte Seite (also die, die Du vom Autor der Lib übernommen hast) liest x und y aus dem Joy1 Objekt aus und schreibt sie in die input-Felder joy1PosizioneX und joy1PosizioneY. Also auf die aktuelle Seite. Thema erledigt.

    Das willst Du nicht? Ja, was denn? Beschreibe deinen Systemaufbau, die beteiligten Geräte, was soll auf welchem Gerät passieren? Ich musste gerade erstmal ESP googeln und habe dann mit etwas Glück ESP32 gefunden. Okay. Ein SoC. Ich habe aber keine Ahnung was der alles kann und wie man mit ihm kommuniziert.

    Meine schwache Vorstellung ist, dass Du ein Auto hast, das vom ESP32 gesteuert wird, und ein Handy, auf dem die HTML Seite mit einem Joystick-Control angezeigt wird. Das Handy soll so als Fernsteuerung für das ESP-Auto dienen.

    Das ist aber nur eine vage Idee, und dein Plan kann anders sein. Erzähl also mehr von deinem Plan. Und vor allem: auf welche Seite willst Du X und Y schreiben? Sicherlich nicht auf die Seite, auf der das Joystick-Control läuft. Und ich mutmaße, dass Du die Daten live an eine gleichzeitig laufende Seiten übertragen willst. Laufen die beiden Seiten wenigstens auf dem gleichen Gerät und im gleichen Browser?

    All dass müsstest Du näher ausführen. Denn HTML Seiten werden vom Browser von ihrer Umwelt abgeschirmt. Um pösen Purschen das Handwerk zu legen. Es gibt definierte Wege, um dennoch kommunizieren zu können. Aber ich oder andere können nicht im Dunklen einen Weg auf eine fremde Landkarte zeichnen. Mach Licht!

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Rolf, Vielen Dank für die Rückmeldung. Es ist genauso wie du gesagt hast. der ESP soll seinen eigenen AP auf machen dort wähle ich mich mit dem Handy ein. Und kann dann über den JoyStick mein ESP Auto steuern.

      Alles an Code läuft auf dem ESP wie auf einem Server.

      Wäre super wenn es eine neue Seite gibt z.B. \X-Wert und \Y-Wert die kann ich dann mit meinem ESP auslesen und die Daten weiter verarbeiten.

      Ich denke der Get Befehl wäre dafür Perfekt. Allerdings gibt es bei allen Beispielen immer einen Senden Knopf. Der wäre bei mir unpraktisch da ich die Daten Kontinuierlich z.B. alle 100ms übergeben will und nicht auf Knop Druck

      Die Empfänger Seite traue ich mir zu. Ich bräuchte nur Unterstützung bei dem Code der wie gesagt z.B. alle 100ms den Code per übergibt.

      Habe ich alle offenen Fragen erwischt?

      1. Hallo Roger,

        die kann ich dann mit meinem ESP auslesen und die Daten weiter verarbeiten.

        Nein. Das kannst Du nicht. Der ESP liest nichts aus dem Browser. Der Browser muss es senden.

        Und der Browser sendet es an den Webserver, der auf dem ESP32 läuft. Du brauchst serverseitiges Script, das diese Sendungen annimmt und damit die Aktuatoren beeinflusst. Keine Ahnung wie man das macht.

        Ich denke der Get Befehl wäre dafür Perfekt.

        Welches Get meinst Du? Die HTTP Methode GET? Damit liest ein Browser eine Seite vom Server.

        Allerdings gibt es bei allen Beispielen immer einen Senden Knopf.

        Was für Beispiele sind das? Deins ist es nicht, das ist ja nur der Joystick. Bitte beachte, dass wir hier HTML und CSS und JavaScript sprechen, aber der ESP32 für uns komplett fremd ist.

        Der grundsätzliche Ansatz, die Joystick-Daten per setInterval Handler auszulesen, wird schon richtig sein. Ich hoffe nur, dass das auf deinem Handy besser läuft als in meinem Browser; ich fand das sehr hakelig.

        Und im setInterval Handler würde man die ausgelesene Joystick-Position per XMLHttpRequest (AJAX-Technik, wenn Du davon schon gehört hast) an den Webserver schicken, der im ESP läuft. Dafür braucht man Infos, wie die HTTP Schnittstelle aussieht, die man dafür bedienen muss, so dass im ESP die Steuerung der Aktuatoren erfolgt. Das muss irgendwo dokumentiert sein, bzw. man muss die buttonbehafteten Beispielseiten, die Du hast, analysieren.

        Du musst aber auch damit rechnen, dass die Steuerung träge wird. Bis deine Joystick-Bewegung vom Touchscreen im ESP angekommen ist, vergeht Zeit. Die Joystick-Lib muss die Bewegung erfasst haben. Die Funktion, die mit setInterval alle 50ms startet, muss gelaufen sein. Sie muss es an den ESP gesendet haben. Da kann durchaus ein Lag von 50ms-150ms zusammen kommen, und das kann merklich sein. Eine HTML Seite mit JavaScript ist nicht optimal geeignet für eine Realtime-Steuerung.

        Programmierst Du da selber soch was auf dem ESP, um die Zahlenwerte für X und Y auf die Aktuatoren zu übertragen? Oder ist das alles schon fertiger Systemcode?

        Ich persönlich würde übrigens zwei Kontrollelemente verwenden. Eins zum Lenken und eins zum Gasgeben. Ob diese Joystick-Lib, die Du da hast, das hergibt, weiß ich nicht. Und ob das deine Vorstellung von Autosteuerung ist, weiß ich natürlich auch nicht 😀

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf,

          Bitte beachte, dass wir hier HTML und CSS und JavaScript sprechen, aber der ESP32 für uns komplett fremd ist.

          nicht komplett, und nicht für uns alle. 😉
          Ich kenne den ESP8266, habe damit schon ein bisschen gespielt. Der ESP32 ist der große Bruder mit 32bit-Core. Die Dinger sind typische Experimentier- und Bastelplattformen und werden üblicherweise in Lua oder Python programmiert.
          Man kann aber auch, ähnlich wie beim Arduino, "Bare Metal" programmieren.

          Und im setInterval Handler würde man die ausgelesene Joystick-Position per XMLHttpRequest (AJAX-Technik, wenn Du davon schon gehört hast) an den Webserver schicken, der im ESP läuft. Dafür braucht man Infos, wie die HTTP Schnittstelle aussieht, die man dafür bedienen muss, so dass im ESP die Steuerung der Aktuatoren erfolgt.

          Diese HTTP-Schnittstelle wird Roger selbst implementieren müssen. Es gibt dazu reichlich Beispiele im Netz, aber "machen" muss man es dann doch selbst.

          Programmierst Du da selber soch was auf dem ESP, um die Zahlenwerte für X und Y auf die Aktuatoren zu übertragen?

          Das wird er wohl müssen.

          Oder ist das alles schon fertiger Systemcode?

          Höchstens, wenn das ganze Fahrzeug mit dem ESP-Controller ein fertiger Experimentier-Kit ist. Will ich nicht ausschließen, ist mir aber nicht bekannt.

          Live long and pros healthy,
           Martin

          --
          Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
          1. nicht komplett, und nicht für uns alle. 😉
            Ich kenne den ESP8266, habe damit schon ein bisschen gespielt. Der ESP32 ist der große Bruder mit 32bit-Core. Die Dinger sind typische Experimentier- und Bastelplattformen und werden üblicherweise in Lua oder Python programmiert.

            Ich programmiere über die Arduino IDE

            Und im setInterval Handler würde man die ausgelesene Joystick-Position per XMLHttpRequest (AJAX-Technik, wenn Du davon schon gehört hast) an den Webserver schicken, der im ESP läuft. Dafür braucht man Infos, wie die HTTP Schnittstelle aussieht, die man dafür bedienen muss, so dass im ESP die Steuerung der Aktuatoren erfolgt.

            Diese HTTP-Schnittstelle wird Roger selbst implementieren müssen. Es gibt dazu reichlich Beispiele im Netz, aber "machen" muss man es dann doch selbst.

            Wonach muss ich den Suchen um so eienm Beispiel zu finden?

            Programmierst Du da selber soch was auf dem ESP, um die Zahlenwerte für X und Y auf die Aktuatoren zu übertragen?

            Das wird er wohl müssen.

            Oder ist das alles schon fertiger Systemcode?

            Höchstens, wenn das ganze Fahrzeug mit dem ESP-Controller ein fertiger Experimentier-Kit ist. Will ich nicht ausschließen, ist mir aber nicht bekannt.

            Nein das Programmier ich alles selber. Ist auch schon mit einem Hardware JoyStick getestet.

            1. Hallo,

              nicht komplett, und nicht für uns alle. 😉
              Ich kenne den ESP8266, habe damit schon ein bisschen gespielt. Der ESP32 ist der große Bruder mit 32bit-Core. Die Dinger sind typische Experimentier- und Bastelplattformen und werden üblicherweise in Lua oder Python programmiert.

              Ich programmiere über die Arduino IDE

              und dann vermutlich in C?

              Diese HTTP-Schnittstelle wird Roger selbst implementieren müssen. Es gibt dazu reichlich Beispiele im Netz, aber "machen" muss man es dann doch selbst.

              Wonach muss ich den Suchen um so eienm Beispiel zu finden?

              Ich hab mal nur drei Stichworte bei Google eingeworfen und kriege eine ganze Menge Treffer; gleich die ersten drei klingen schon mal interessant. Was für dich wirklich geeignet ist, müsstest du selbst beurteilen.

              Live long and pros healthy,
               Martin

              --
              Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
              1. Hallo,

                nicht komplett, und nicht für uns alle. 😉
                Ich kenne den ESP8266, habe damit schon ein bisschen gespielt. Der ESP32 ist der große Bruder mit 32bit-Core. Die Dinger sind typische Experimentier- und Bastelplattformen und werden üblicherweise in Lua oder Python programmiert.

                Ich programmiere über die Arduino IDE

                und dann vermutlich in C?

                Ja genau, ist ja kein reines C aber das kommt dem am nächsten

                Diese HTTP-Schnittstelle wird Roger selbst implementieren müssen. Es gibt dazu reichlich Beispiele im Netz, aber "machen" muss man es dann doch selbst.

                Wonach muss ich den Suchen um so eienm Beispiel zu finden?

                Ich hab mal nur drei Stichworte bei Google eingeworfen und kriege eine ganze Menge Treffer; gleich die ersten drei klingen schon mal interessant. Was für dich wirklich geeignet ist, müsstest du selbst beurteilen.

                2 der Links kannte ich schon und was darin erklärt ist habe ich auch schon umgesetzt. Mein Problem ist ja an die Daten zu kommen.

                Ich hab mit meinem ESP mal die Joy_1.Html mal ausgelesen anhand diesen Tutorials: https://techtutorialsx.com/2017/05/19/esp32-http-get-requests/

                und mein Controller gibt folgendes aus:

                <!DOCTYPE HTML>
                
                <html>
                	<head>
                		<title>Joy</title>
                		<meta charset="utf-8">
                		<meta name="description" content="Example page of use pure Javascript JoyStick">
                		<meta name="author" content="Roberto D'Amico">
                		<link rel="shortcut icon" type="image/png" href="http://bobboteck.github.io/img/roberto-damico-bobboteck.png">
                		<style>
                *
                {
                	box-sizing: border-box;
                }
                body
                {
                	margin: 0px;
                	padding: 0px;
                	font-family: monospace;
                }
                .row
                {
                	display: inline-flex;
                	clear: both;
                }
                .columnLateral
                {
                  float: left;
                  width: 15%;
                  min-width: 300px;
                }
                
                
                #joystick
                {
                	border: 1px solid #FF0000;
                }
                
                		</style>
                		<script src="joy.js"></script>
                	</head>
                	<body>
                		
                		<!-- Example of two JoyStick integrated in the page structure -->
                		<div class="row">
                			<div class="columnLateral">
                				<div id="joy1Div" style="width:200px;height:200px;margin:50px"></div>
                				Posizione X:<input id="joy1PosizioneX" type="text" /><br />
                				Posizione Y:<input id="joy1PosizioneY" type="text" /><br />
                				Direzione:<input id="joy1Direzione" type="text" /><br />
                				X :<input id="joy1X" type="text" /></br>
                				Y :<input id="joy1Y" type="text" />
                			</div>
                	
                		</div>
                		<script type="text/javascript">
                // Create JoyStick object into the DIV 'joy1Div'
                var Joy1 = new JoyStick('joy1Div');
                
                var joy1IinputPosX = document.getElementById("joy1PosizioneX");
                var joy1InputPosY = document.getElementById("joy1PosizioneY");
                var joy1Direzione = document.getElementById("joy1Direzione");
                var joy1X = document.getElementById("joy1X");
                var joy1Y = document.getElementById("joy1Y");
                
                setInterval(function(){ joy1IinputPosX.value=Joy1.GetPosX(); }, 50);
                setInterval(function(){ joy1InputPosY.value=Joy1.GetPosY(); }, 50);
                setInterval(function(){ joy1Direzione.value=Joy1.GetDir(); }, 50);
                setInterval(function(){ joy1X.value=Joy1.GetX(); }, 50);
                setInterval(function(){ joy1Y.value=Joy1.GetY(); }, 50);
                
                
                		</script>
                	</body>
                </html>
                

                würde es also eine Seite geben z.B. /X-Wert könnte ich mit diesem weiterarbeiten können wenn der X-wert dort drin steht aber nicht in einer Variable sondern als richtiger text.

                Versteht ihr was ich meine?

                1. Hallo Roger10499,

                  Versteht ihr was ich meine?

                  Ja, jetzt weiß ich, worum deine Gedanken kreisen, aber das wird so nichts.

                  Was Du da liest, ist der HTML Quelltext, der per HTTP an den Brower übermittelt wird. Diese Datei bleibt unverändert; da schreibt der Browser nichts hinein. Das kann er nicht, das soll er nicht, das darf er nicht. Solche Dateien sind für den Browser nur lesbar.

                  Man könnte den Server so konfigurieren (wenn man denn wüsste, welcher Server im ESP32 läuft - NGINX? Apache? Irgendwas anderes?), dass er PUT Requests annimmt und als Datei speichert. Diese Datei könnte dein Controllerprogramm auslesen. Aber das muss erstmal überhaupt möglich sein, und dann löst das die ganze Hölle an parallelen Dateizugriffen aus. Nein, das willst Du nicht, glaub mir 😉

                  Was Du - wie ich meine - wirklich brauchst, ist ein Socket-Listener. Den musst Du in dein C Programm einbauen. Sprich: einen IP-Socket auf der öffentlichen IP des ESP32 öffnen und auf einen Port lauschen. Der Standardport 80 ist vermutlich schon vom ESP32-Webserver belegt, nimm die 8080; das ist der übliche Alternativport. Oder irgendwas hohes zwischen 32000 und 48000.

                  Mit diesem Socket musst Du nun Datenpakete austauschen. Weil Dein Client ein Browser ist, bist Du auf das HTTP Protokoll limitiert. Das musst Du also in deinem Programm im ESP implementieren. Die Idee wäre, dass dein HTTP Listener an Hand der vom Browser gesendeten Datenpakete die neue Stellung des "Joysticks" in dein Autocontroller-Programm überträgt. Wie Du das machst - keine Ahnung. Das ist so trivial nicht. Aber vielleicht gibt's ja schon eine fertige Lib für einen einfachen HTTP Server.

                  Auf HTTP Ebene werden vom Client Kommandos verschickt. Die heißen GET, POST, PUT oder ähnlich.

                  Zum Beispiel, wenn Du die URL http://www.example.org/test/index.html abrufst, kontaktiert dein Browser die IP, die für www.example.org registriert ist, und schickt ihr einen HTTP Befehl:

                  GET /test/index.html HTTP/1.1
                  Host: www.example.org
                  

                  Der Server erkennt das GET Verb, er erkennt den Ressourcennamen, er erkennt die Protokollversion (HTTP 1.1). Die zweite Zeile ist ein sogenannter Header, das sind Name-Wert Paare mit Zusatzinformationen. Das Host-Attribut kommt immer mit, denn viele Server implementieren viele Webs und brauchen den Hostnamen, um die Anfrage zum richtigen Web zu schicken (was für deinen ESP irrelevant ist).

                  Der Server antwortet dann beispielsweise mit

                  HTTP/1.1 200 OK
                  Content-Type: text/html
                  
                  <!doctype html>
                  ...
                  

                  Die erste Zeile liefert den HTTP Erfolgsstatus (200=OK), dann können Antwort-Header folgen, dann kommt eine Leerzeile und dann der Inhalt der Antwort. Der Content-Type ist wichtig, damit der Browser weiß, dass es eine HTML Seite ist.

                  Das XMLHttpRequest Objekt in Javascript (bzw. das Fetch API) wertet den Content-Type der Antwort aus, um das Ergebnis im richtigen Format aufzubereiten. Das kann Text sein, ein Binärdatenstrom, oder ein in JSON codiertes Objekt.

                  Du kannst das aber auch mit dem Inhalt bleiben lassen und die Antwort in einem Custom-Header verstecken; die kannst Du im JavaScript ebenfalls auslesen. Custom-Header haben ein X- Präfix. Dein Server könnte antworten:

                  HTTP/1.1 200 OK
                  X-Speed: 200
                  
                  

                  Oder gar keinen Antwortheader liefern, nur OK.

                  Deine Joystick-App könnte die gewünschten Parameter in der URL verstecken ein eigenes HTTP Verb verwenden (das kann man bei fetch einstellen) und Anfragen dieser Art senden:

                  CAR /X=100/Y=75 HTTP/1.1
                  
                  

                  Schluss aus. Mehr nicht. Dein HTTP Listener muss solche Datenpakete natürlich empfangen und verstehen können, die OK Antwort schicken und die Werte intern weiterleiten.

                  Beachte dabei auch, dass jede Kommunikation vom Browser ausgehen muss. Dein HTTP Listener darf nur auf HTTP Anfragen antworten. Schickt er unerwartet etwas, wird das ignoriert. Es gibt zwar eine HTTP Erweiterung - das WebSocket Protokoll - die das ermöglicht, aber das willst Du im ersten Schritt nicht implementieren.

                  So; nun hast Du Recherchefutter. Wie Du das alles im Detail machst, kann ich Dir nicht sagen. Wie Du fetch benutzt, schon, aber ich kann Dir nicht remote die Joystick-Seite für's Handy programmieren. Das wirst Du schon tun müssen. Und es ist eben mehr als "einen Wert in eine Seite schreiben".

                  Alternative: Suche nach fertigen remote control Apps für ESP32.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
      2. Hallo Roger10499,

        by the way ist dieses joy.js grottenschlecht.

        • Wenn man den Touchpin nicht genau in der Mitte erwischt, springt er - die Lib merkt sich die Berührposition nicht.
        • Wenn man die Maus / den Finger aus dem Controlbereich hinauszieht, bleibt der Touch-Gnubbel hängen
        • ob die Umsetzung mit Canvas statt SVG (oder einfach HTML Elementen) für den Browser performance-optimal ist, kann ich nicht beurteilen, das müsste man testen.
        • idealerweise würde die Lib ein EventTarget darstellen, so dass man nicht auf setInterval angewiesen ist sondern Positionsänderungen als Event bekommt. Das existiert nicht.

        Sowas geht signifikant besser zu lösen!

        Rolf

        --
        sumpsi - posui - obstruxi
        1. ja das der nicht wirklich ausgereift ist musste ich auch schon feststellen aber wenn man nach einem JoyStick sucht landet man immer bei diesen. Hättest du da was besseres sonst muss? ich bei diesem bleiben.

          1. Hallo Roger10499,

            ich könnte was besseres schreiben, aber da hab ich keine Zeit für. Vor allem müsste ich es dann auch supporten... 😲

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Das brauchst du natürlich nicht. Wobei ich finde am Handy läuft es besser vor allem bleibt der Joystick nicht am Rand stehen