INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
ESP32 Daten aus HTML
13.04.2021, 13:28 (Dieser Beitrag wurde zuletzt bearbeitet: 13.04.2021 15:34 von Roger100499.)
Beitrag #1
ESP32 Daten aus HTML
Hey zusammen,
ich hab ein Problem.
Ich hab mir nach Vorlage von:
https://github.com/bobboteck/JoyStick

Ich hab die HTML so bearbeitet das nur noch einen JoyStick übrig geblieben ist.
Jetzt brauche ich ja aber die Werte vom JoyStick. Da ich blutiger Anfänger in Sachen HTML bin erweist sich das als ziemlich schwierig. Gibt es da eine Funktion die ich in die HTML schreiben kann und im ESP abfragen kann?
Den Umweg über die URL oder der Ausgabe in eine Datei würde ich gerne umgehen, wenn denn möglich.
Später soll mit dem Programm ein Gefährt gesteuert werden. In einem AP den der ESP aufspannt.

Sollte ich irgendwas an notwendeigen Punkten vergessen haben meldet euch bitte kurz.

Vielleicht hat ja jemand ein Link zu einem Programm oder etwas selbstgeschriebenes.
Vielen Dank!

P.S. bei der .js müsstet ihr einmal das .txt die selbe gibt es aber in dem git hub link auch.

P.P.S.

Mein Code:
Arduino
Code:
#include <WiFi.h>
//#include <WebServer.h>
#include <WiFiAP.h>
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"


// Set these to your desired credentials.
const char *ssid = "BerndAP";
const char* www_username = "admin";
const char* www_password = "esp32";


AsyncWebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)


void setup() {

  Serial.begin(115200);
  Serial.println();
  Serial.println("Configuring access point...");

  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // You can remove the password parameter if you want the AP to be open.
  WiFi.softAP(ssid);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  /* server.on("/", []() {
     if (!server.authenticate(www_username, www_password)) {
       return server.requestAuthentication();
     }
              );
  */

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    request->send(SPIFFS, "/joy_1.html", "text/html");
  });

  server.on("/joy.js", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/joy.js", "text/javascript");
  });

  server.begin();
  Serial.println("HTTP server started");
  delay(100);

}

void loop() {

  //server.handleClient();
}


HTML


Code:
<!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>

Java Script
Code:
/*
* Name          : joy.js
* @author       : Roberto D'Amico (Bobboteck)
* Last modified : 09.06.2020
* Revision      : 1.1.6
*
* Modification History:
* Date         Version     Modified By        Description
* 2020-06-09    1.1.6        Roberto D'Amico    Fixed Issue #10 and #11
* 2020-04-20    1.1.5        Roberto D'Amico    Correct: Two sticks in a row, thanks to @liamw9534 for the suggestion
* 2020-04-03               Roberto D'Amico Correct: InternalRadius when change the size of canvas, thanks to @vanslipon for the suggestion
* 2020-01-07    1.1.4        Roberto D'Amico Close #6 by implementing a new parameter to set the functionality of auto-return to 0 position
* 2019-11-18    1.1.3        Roberto D'Amico    Close #5 correct indication of East direction
* 2019-11-12   1.1.2       Roberto D'Amico Removed Fix #4 incorrectly introduced and restored operation with touch devices
* 2019-11-12   1.1.1       Roberto D'Amico Fixed Issue #4 - Now JoyStick work in any position in the page, not only at 0,0
*
* The MIT License (MIT)
*
*  This file is part of the JoyStick Project (https://github.com/bobboteck/JoyStick).
*    Copyright (c) 2015 Roberto D'Amico (Bobboteck).
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

/**
* @desc Principal object that draw a joystick, you only need to initialize the object and suggest the HTML container
* @costructor
* @param container {String} - HTML object that contains the Joystick
* @param parameters (optional) - object with following keys:
*    title {String} (optional) - The ID of canvas (Default value is 'joystick')
*     width {Int} (optional) - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object)
*     height {Int} (optional) - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object)
*     internalFillColor {String} (optional) - Internal color of Stick (Default value is '#00AA00')
*     internalLineWidth {Int} (optional) - Border width of Stick (Default value is 2)
*     internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300')
*     externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2)
*     externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000')
*     autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero)
*/
var JoyStick = (function(container, parameters)
{
    parameters = parameters || {};
    var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title),
        width = (typeof parameters.width === "undefined" ? 0 : parameters.width),
        height = (typeof parameters.height === "undefined" ? 0 : parameters.height),
        internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#00AA00" : parameters.internalFillColor),
        internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth),
        internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#003300" : parameters.internalStrokeColor),
        externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 2 : parameters.externalLineWidth),
        externalStrokeColor = (typeof parameters.externalStrokeColor ===  "undefined" ? "#008000" : parameters.externalStrokeColor),
        autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter);
    
    // Create Canvas element and add it in the Container object
    var objContainer = document.getElementById(container);
    var canvas = document.createElement("canvas");
    canvas.id = title;
    if(width === 0) { width = objContainer.clientWidth; }
    if(height === 0) { height = objContainer.clientHeight; }
    canvas.width = width;
    canvas.height = height;
    objContainer.appendChild(canvas);
    var context=canvas.getContext("2d");
    
    var pressed = 0; // Bool - 1=Yes - 0=No
    var circumference = 2 * Math.PI;
    var internalRadius = (canvas.width-((canvas.width/2)+10))/2;
    var maxMoveStick = internalRadius + 5;
    var externalRadius = internalRadius + 30;
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var directionHorizontalLimitPos = canvas.width / 10;
    var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1;
    var directionVerticalLimitPos = canvas.height / 10;
    var directionVerticalLimitNeg = directionVerticalLimitPos * -1;
    // Used to save current position of stick
    var movedX=centerX;
    var movedY=centerY;
        
    // Check if the device support the touch or not
    if("ontouchstart" in document.documentElement)
    {
        canvas.addEventListener("touchstart", onTouchStart, false);
        canvas.addEventListener("touchmove", onTouchMove, false);
        canvas.addEventListener("touchend", onTouchEnd, false);
    }
    else
    {
        canvas.addEventListener("mousedown", onMouseDown, false);
        canvas.addEventListener("mousemove", onMouseMove, false);
        canvas.addEventListener("mouseup", onMouseUp, false);
    }
    // Draw the object
    drawExternal();
    drawInternal();

    /******************************************************
     * Private methods
     *****************************************************/

    /**
     * @desc Draw the external circle used as reference position
     */
    function drawExternal()
    {
        context.beginPath();
        context.arc(centerX, centerY, externalRadius, 0, circumference, false);
        context.lineWidth = externalLineWidth;
        context.strokeStyle = externalStrokeColor;
        context.stroke();
    }

    /**
     * @desc Draw the internal stick in the current position the user have moved it
     */
    function drawInternal()
    {
        context.beginPath();
        if(movedX<internalRadius) { movedX=maxMoveStick; }
        if((movedX+internalRadius) > canvas.width) { movedX = canvas.width-(maxMoveStick); }
        if(movedY<internalRadius) { movedY=maxMoveStick; }
        if((movedY+internalRadius) > canvas.height) { movedY = canvas.height-(maxMoveStick); }
        context.arc(movedX, movedY, internalRadius, 0, circumference, false);
        // create radial gradient
        var grd = context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200);
        // Light color
        grd.addColorStop(0, internalFillColor);
        // Dark color
        grd.addColorStop(1, internalStrokeColor);
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = internalLineWidth;
        context.strokeStyle = internalStrokeColor;
        context.stroke();
    }
    
    /**
     * @desc Events for manage touch
     */
    function onTouchStart(event)
    {
        pressed = 1;
    }

    function onTouchMove(event)
    {
        // Prevent the browser from doing its default thing (scroll, zoom)
        event.preventDefault();
        if(pressed === 1 && event.targetTouches[0].target === canvas)
        {
            movedX = event.targetTouches[0].pageX;
            movedY = event.targetTouches[0].pageY;
            // Manage offset
            if(canvas.offsetParent.tagName.toUpperCase() === "BODY")
            {
                movedX -= canvas.offsetLeft;
                movedY -= canvas.offsetTop;
            }
            else
            {
                movedX -= canvas.offsetParent.offsetLeft;
                movedY -= canvas.offsetParent.offsetTop;
            }
            // Delete canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            // Redraw object
            drawExternal();
            drawInternal();
        }
    }

    function onTouchEnd(event)
    {
        pressed = 0;
        // If required reset position store variable
        if(autoReturnToCenter)
        {
            movedX = centerX;
            movedY = centerY;
        }
        // Delete canvas
        context.clearRect(0, 0, canvas.width, canvas.height);
        // Redraw object
        drawExternal();
        drawInternal();
        //canvas.unbind('touchmove');
    }

    /**
     * @desc Events for manage mouse
     */
    function onMouseDown(event)
    {
        pressed = 1;
    }

    function onMouseMove(event)
    {
        if(pressed === 1)
        {
            movedX = event.pageX;
            movedY = event.pageY;
            // Manage offset
            if(canvas.offsetParent.tagName.toUpperCase() === "BODY")
            {
                movedX -= canvas.offsetLeft;
                movedY -= canvas.offsetTop;
            }
            else
            {
                movedX -= canvas.offsetParent.offsetLeft;
                movedY -= canvas.offsetParent.offsetTop;
            }
            // Delete canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            // Redraw object
            drawExternal();
            drawInternal();
        }
    }

    function onMouseUp(event)
    {
        pressed = 0;
        // If required reset position store variable
        if(autoReturnToCenter)
        {
            movedX = centerX;
            movedY = centerY;
        }
        // Delete canvas
        context.clearRect(0, 0, canvas.width, canvas.height);
        // Redraw object
        drawExternal();
        drawInternal();
        //canvas.unbind('mousemove');
    }

    /******************************************************
     * Public methods
     *****************************************************/
    
    /**
     * @desc The width of canvas
     * @return Number of pixel width
     */
    this.GetWidth = function ()
    {
        return canvas.width;
    };
    
    /**
     * @desc The height of canvas
     * @return Number of pixel height
     */
    this.GetHeight = function ()
    {
        return canvas.height;
    };
    
    /**
     * @desc The X position of the cursor relative to the canvas that contains it and to its dimensions
     * @return Number that indicate relative position
     */
    this.GetPosX = function ()
    {
        return movedX;
    };
    
    /**
     * @desc The Y position of the cursor relative to the canvas that contains it and to its dimensions
     * @return Number that indicate relative position
     */
    this.GetPosY = function ()
    {
        return movedY;
    };
    
    /**
     * @desc Normalizzed value of X move of stick
     * @return Integer from -100 to +100
     */
    this.GetX = function ()
    {
        return (100*((movedX - centerX)/maxMoveStick)).toFixed();
    };

    /**
     * @desc Normalizzed value of Y move of stick
     * @return Integer from -100 to +100
     */
    this.GetY = function ()
    {
        return ((100*((movedY - centerY)/maxMoveStick))*-1).toFixed();
    };
    
    /**
     * @desc Get the direction of the cursor as a string that indicates the cardinal points where this is oriented
     * @return String of cardinal point N, NE, E, SE, S, SW, W, NW and C when it is placed in the center
     */
    this.GetDir = function()
    {
        var result = "";
        var orizontal = movedX - centerX;
        var vertical = movedY - centerY;
        
        if(vertical >= directionVerticalLimitNeg && vertical <= directionVerticalLimitPos)
        {
            result = "C";
        }
        if(vertical < directionVerticalLimitNeg)
        {
            result = "N";
        }
        if(vertical > directionVerticalLimitPos)
        {
            result = "S";
        }
        
        if(orizontal < directionHorizontalLimitNeg)
        {
            if(result === "C")
            {
                result = "W";
            }
            else
            {
                result += "W";
            }
        }
        if(orizontal > directionHorizontalLimitPos)
        {
            if(result === "C")
            {
                result = "E";
            }
            else
            {
                result += "E";
            }
        }
        
        return result;
    };
});


Angehängte Datei(en)
.ino  WiFiAccessPoint_Websever.ino (Größe: 1,77 KB / Downloads: 19)
.html  joy_1.html (Größe: 1,84 KB / Downloads: 13)
.txt  joy.js.txt (Größe: 11,43 KB / Downloads: 17)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 13:53 (Dieser Beitrag wurde zuletzt bearbeitet: 13.04.2021 13:53 von Tommy56.)
Beitrag #2
RE: ESP32 Daten aus HTML
Ohne die Nutzung von HTTP Get oder Post wirst Du keine Daten zum Server auf dem ESP bekommen. Du kannst Dir auch die Fetch-API anschauen.

Setze Deinen Code bitte in Codetags direkt ins Forum.
Wie das geht, steht hier.
Das kannst Du auch noch nachträglich ändern.

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 16:19
Beitrag #3
RE: ESP32 Daten aus HTML
(13.04.2021 13:53)Tommy56 schrieb:  Ohne die Nutzung von HTTP Get oder Post wirst Du keine Daten zum Server auf dem ESP bekommen. Du kannst Dir auch die Fetch-API anschauen.

Vielen Dank schonmal Ursprungsbeitrag habe ich angepasst.

https://techtutorialsx.com/2017/05/19/es...-requests/

Ich hab mir jetzt mal diesen Artikel durchgelesen.
Wenn ich das jetzt Richtig verstehe ... Wie gesagt blutiger Anfänger..... Muss ich ja jetzt meine Werte auf eine eigene Seite schreiben, Richtig?
Die kann ich dann ja auslesen und mir die Daten raus filtern.

Gibt es dafür einen Ausdruck anhand dessen ich mich informieren kann um so eine Seite zu erstellen.
Problem was ich sehe der Code von techtutorials arbeitet mit Http und ich bis jetzt mit html ist das ein Problem?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 16:41
Beitrag #4
RE: ESP32 Daten aus HTML
Http ist das Protokoll und html die Auszeichnungssprache.
Schau Dir die Beispiele zum Webserver in Deinen ESP32-Libs an.
Weitere Quellen Selfhtml und w3schools

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 18:05
Beitrag #5
RE: ESP32 Daten aus HTML
(13.04.2021 16:41)Tommy56 schrieb:  Http ist das Protokoll und html die Auszeichnungssprache.

Das hatte ich mir schon gedacht.
Also wie die Funktionen Get und Post Funktionen ist mir jetzt klar. Uach wie ich das ganze mit dem ESP umsetze.

Was mir aber immernoch nicht klar ist wie übergebe ich diese Daten mit meiner HTML Datei. Dafür müsste ich ja irgendwie bei Get den Link zusammen bauen richtig?

Bei Post könnte ich das ja über ein Formular mit absende Knopf machen so einen habe ich ja aber nicht wie geht das dann? dazu habe ich leider nichts gefunden.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 18:24
Beitrag #6
RE: ESP32 Daten aus HTML
(13.04.2021 18:05)Roger100499 schrieb:  Bei Post könnte ich das ja über ein Formular mit absende Knopf machen so einen habe ich ja aber nicht wie geht das dann? dazu habe ich leider nichts gefunden.
Dann hast Du nicht richtig gesucht. Schau Dir nochmal das Form-Tag an.
Wo hängt denn eigentlich der Joystick dran? Am PC oder am ESP?

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 18:57
Beitrag #7
RE: ESP32 Daten aus HTML
(13.04.2021 18:24)Tommy56 schrieb:  Wo hängt denn eigentlich der Joystick dran? Am PC oder am ESP?

Der ist auf dem ESP
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
13.04.2021, 19:06
Beitrag #8
RE: ESP32 Daten aus HTML
Warum machst Du dann den ganzen Kram mit dem Javascript? Wenn ich das richtig verstehe müsste dann der ESP das JS interpretieren. Das kann er nicht.

Irgendwie ist das Ganze in meinen Augen nicht durchdacht oder ich verstehe es nicht.

Gruß Tommy

"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  Wemos d1 Ph Sonde - Hilfe bei Daten per MQTT senden SoerenKaiser99 23 663 10.05.2021 21:25
Letzter Beitrag: SoerenKaiser99
  SHT30 an Wemos D1 Mini ESP32 Mirkan 6 248 10.05.2021 09:59
Letzter Beitrag: Mirkan
  ESP32 und sms kpc 25 1.230 10.05.2021 01:51
Letzter Beitrag: kpc
  ESP32 access point: Browser Variablen einlesen FoxFactoy 1 198 03.05.2021 11:44
Letzter Beitrag: Tommy56
  ESP32 in Verbindung mit MCP23017 Kymmenen 17 732 02.05.2021 19:34
Letzter Beitrag: Tommy56
  ESP32 Flash Mode setzen Itsme 10 545 01.05.2021 20:04
Letzter Beitrag: Itsme
  Client(ESP8266) und Webserver(ESP32) Dahabcon 14 1.063 25.04.2021 20:32
Letzter Beitrag: Tommy56
  Einen HTML Befehl an meine CCU senden Microsuck 1 343 20.04.2021 15:19
Letzter Beitrag: Tommy56
  TTGO ESP32 SIM800L Pinout Stromversorgung pcfritz 1 398 18.04.2021 14:40
Letzter Beitrag: hotsystems
  Problem Upload einer html Datei per littleFS mat-sche 8 934 18.04.2021 14:12
Letzter Beitrag: mat-sche

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste