Servos über ESP8266 Webserver steuern

gb262624 · February 8, 2017, 7:32pm

Hallo zusammen,

momentan versuche ich gerade einen ESP8266 so zu programmieren, dass er sich als AccessPoint über eine html-Seite steuern lässt.
Jedoch finde ich einfach keine Lösung wie ich die Daten der html-Seite an meinen ESP zurücksenden und auswerten kann. Konkret geht es darum, dass ich "Range Slider" nutzen möchte um die Positionen der Servos anzusteuern. Am besten wäre es sogar, wenn sich die Servos bewegen würde, solange man den Slider bewegt.

Kann mir bitte jemand mit dem Auswerten der Serverdaten helfen?
Danke!

Gruß
Gunnar

Tommy56 · February 8, 2017, 8:57pm

Ich glaube da wirfst Du was durcheinander. Als AccessPoint bietet er WLAN-Zugang für andere an.
Um eine HTML-Seite bereit zu stellen, muss er (zusätzlich) ein HTTP-Server sein.

Gruß Tommy

gb262624 · February 8, 2017, 10:10pm

Hallo Tommy,

mit den Fachbegriffen kenne ich mich leider gar nicht aus, deswegen habe ich da vermutlich verwirrendes Zeug geschrieben.
Grundsätzlich funktioniert meine Anwendung mittlerweile. Ich habe es geschafft, dass der Servomotor auf die Befehle des Sliders reagiert.
Auf den Submit-Button konnte ich auch verzichten, nur würde ich gerne noch erreichen, dass der Slider die Daten übermittelt während er bewegt wird.

Tommy56 · February 9, 2017, 1:30pm

Schön, dass es funktioniert. Eine Übertragung während der Bewegung würde ich bei einem Motor nicht realisieren, das könnte zu Instabilitäten führen, da der Wert dabei in bede Richtungen pendeln kann.

Ansonsten stelle bitte Deine Dateien hier ein (bitte Codetags verwenden).

Gruß Tommy

gb262624 · February 10, 2017, 10:21pm

Hallo Tommy,

vielleicht kannst du mir ja bitte nochmal helfen.
Wie bereits geschrieben, lässt sich das Servo direkt über den Befehl oninput='this.form.submit()' ansteuern.
Jedoch bewegt sich dadurch der Schieberegler des Sliders nicht mehr sondern verharrt in der Mittelstellung.
Außerdem würde ich gerne den Wert des Servos auf den Ausgangswert zurücksetzen sobald man den Slider loslässt. Leider habe ich mit den Befehlen "mousedown" und "mouseup" keine Erfolge erzielt.

Ist es zwingend notwendig mit jQuery zu arbeiten?

#include <SPI.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <Servo.h> 

Servo servo1;  
Servo servo2;

const char* ssid = "ESP170115";

WiFiServer server(80);

String readString=String(100); 
int r1 = 0;
int r2 = 0;
String redString = String(3);
int RedVal = 0;
//////////////////////

void setup(){

  Serial.begin(115200);
  delay(10);
  servo1.attach(5);  
  servo2.attach(4);
  servo1.write(87);
  servo2.write(87);

  Serial.println("Connected...");
  WiFi.softAP(ssid);

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.begin();
  Serial.println("HTTP server started");

  readString="0";
  redString="0";
}

void loop()
{

  WiFiClient client = server.available();

  if (client) {
    Serial.println("new client");
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if(readString.length()<100){
        
        readString = readString + c;
        }
          
          Serial.println(c);
          if(c == '\n'){
            if(readString.indexOf("color")>-1){
              r1 = readString.indexOf('=');
              r2 = readString.indexOf('&');
              redString = readString.substring(r1+1, r2);
            }
          
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<meta charset='UTF-8'>");
          client.println("<meta name='viewport' content='width=device-width:2, initial-scale=1'>");
          client.println("<TITLE>Slider Webserver</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Slider Webserver</H1>");
        
          client.println("<form action='color' method='get'>");
          client.println("<tr>");
          client.println("<td>");
          client.println("<input type='range' name='red' id='r' min='25' max='150' value='RedVal' oninput='this.form.submit()' step='1'></td></tr>");
          //client.println("<input type='range' name='red' id='r' min='25' max='150' value='87' onmousedown='mouseDown()' onmouseup='mouseUp()' step='1'></td></tr>");
          //client.println("<script type='text/javascript'>\r\nfunction mouseDown() {document.getElementById('r').submit();}\r\nfunction mouseUp() {document.getElementById('r').submit('value');}</script></script>\r\n");
          //client.println("<script>\r\n document.getElementById('r').onmousedown = function() {mouseDown()};\r\n document.getElementById('r').onmouseup = function() {mouseUp()};\r\n function mouseDown() {\r\n document.getElementById('r').submit();}\r\n function mouseUp() {\r\n document.getElementById('r').submit('value');}</script></script>\r\n");
          client.println("<tr>");
          client.println("<td>");
          client.println("</form>");
          //client.println("<script type=!text/javascript!></script\r\n>");
          
          client.println("<tr><td colspan=4>

<span style='font-size:8px;'>Freier RAM:&nbsp;");
          client.println("freeMemory()");
          client.println("Byte</span></td></tr>");
          client.println("<tr><td colspan=4><span style='font-size:8px;'>Arduino Laufzeit:&nbsp;");
          client.println(millis()/1000/60);
          client.println("Minuten</span></td></tr>");
          client.println("</tr>");
          
          client.println("</BODY>");
          client.println("</HTML>");
          Serial.println(readString);

          char valueArray[redString.length() + 1];
          redString.toCharArray(valueArray, sizeof(valueArray));
          int RedVal=atoi(valueArray);
          Serial.println("Rot:");
          Serial.println(redString);
          Serial.println("valueArray:");
          Serial.println(valueArray);
          Serial.println("RedVal:");
          Serial.println(RedVal);

          //analogWrite(Rled, RedVal);
          servo1.write(RedVal);

          readString="";
          redString="";
          r1=0;
          r2=0;

          delay(10);

          client.stop();  
          }


      }
    }
  }
}

Gruß
Gunnar

Tommy56 · February 10, 2017, 10:41pm

Da fehlt noch der HTML/JS-Code. der steuert den Slider auf swe Weboberfläche.

Gruß Tommy

gb262624 · February 10, 2017, 11:46pm

Mir ist leider nicht ganz klar was du meinst.
Wenn du meinst, dass ich folgenden Code einfügen soll, dann sehe ich meinen Slider nicht mehr.

client.println("<script type='text/javascript'>");
          client.println("<input type='range' name='red' id='r' min='25' max='150' value='RedVal' oninput='this.form.submit()' step='1'></td></tr>");
          client.println("</script>");

Tommy56 · February 11, 2017, 9:25am

Den Slider kannst Du natürlich nicht als Script eingeben. Da Du mehrere Varianten auskommentiert hast, weiß ich nicht, welche funktioniert hat.
Stelle doch mal den funktionierenden Sketch rein und schreibe dann, was Du ändern willst.

Gruß Tommy

gb262624 · February 11, 2017, 9:42am

Die auskommentierten Sachen hatte ich nur stehen lassen, damit man sieht was ich schon getestet hatte. Ansonsten ist das schon der funktionierende Sketch.

#include <SPI.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <Servo.h> 

Servo servo1;  

const char* ssid = "ESP170115";

WiFiServer server(80);

String readString=String(100); 
int r1 = 0;
int r2 = 0;
String redString = String(3);
int RedVal = 0;
//////////////////////

void setup(){

  Serial.begin(115200);
  delay(10);
  servo1.attach(5);  
  servo1.write(87);

  Serial.println("Connected...");
  WiFi.softAP(ssid);

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.begin();
  Serial.println("HTTP server started");

  readString="0";
  redString="0";
}

void loop()
{

  WiFiClient client = server.available();

  if (client) {
    Serial.println("new client");
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if(readString.length()<100){
        
        readString = readString + c;
        }
          
          Serial.println(c);
          if(c == '\n'){
            if(readString.indexOf("color")>-1){
              r1 = readString.indexOf('=');
              r2 = readString.indexOf('&');
              redString = readString.substring(r1+1, r2);
            }
          
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<meta charset='UTF-8'>");
          client.println("<meta name='viewport' content='width=device-width:2, initial-scale=1'>");
          client.println("<TITLE>Slider Webserver</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>Slider Webserver</H1>");
        
          client.println("<form action='color' method='get'>");
          client.println("<tr>");
          client.println("<td>");
          client.println("<input type='range' name='red' id='r' min='25' max='150' value='RedVal' oninput='this.form.submit()' step='1'></td></tr>");
          client.println("<tr>");
          client.println("<td>");
          client.println("</form>");
          
          client.println("<tr><td colspan=4>

<span style='font-size:8px;'>Freier RAM:&nbsp;");
          client.println("freeMemory()");
          client.println("Byte</span></td></tr>");
          client.println("<tr><td colspan=4><span style='font-size:8px;'>Arduino Laufzeit:&nbsp;");
          client.println(millis()/1000/60);
          client.println("Minuten</span></td></tr>");
          client.println("</tr>");
          
          client.println("</BODY>");
          client.println("</HTML>");
          Serial.println(readString);

          char valueArray[redString.length() + 1];
          redString.toCharArray(valueArray, sizeof(valueArray));
          int RedVal=atoi(valueArray);
          Serial.println("Rot:");
          Serial.println(redString);
          Serial.println("valueArray:");
          Serial.println(valueArray);
          Serial.println("RedVal:");
          Serial.println(RedVal);

          servo1.write(RedVal);

          readString="";
          redString="";
          r1=0;
          r2=0;

          delay(10);

          client.stop();  
          }


      }
    }
  }
}

Verändert hätte ich noch gerne, dass sich, wie gesagt, der "Knopf" des Sliders bewegt, wenn man diesen verschiebt und zudem würde ich das gerne über die Funktionen onmousedown und onmouseup realisieren.
Die Funktionen werden momentan aber einfach nicht erkannt.

Tommy56 · February 11, 2017, 10:48am

Da sind an einigen Stellen im HTML-Quelltext ', die " sein müssen. Zum Beispiel:

client.println("<form action='color' method='get'>");

muss heißen

client.println("<form action=\"color\" method=\"get\" id=\"myForm\">");

Da sind noch einige andere Zeilen, in denen das auch falsch ist.

Submit hat nur die Form, nicht der Slider. Die onmouseup/down Funktionen sind ja im Quelltext nicht drin, also können sie auch nicht aufgerufen werden.
Für HTML und Javascript Grundlagen empfehle ich SelfHTML und w3schools.

Gruß Tommy

michael_x · February 11, 2017, 7:38pm

Da sind an einigen Stellen im HTML-Quelltext ', die " sein müssen.

Ach ja? Wer hat damit Probleme? Mein Browser jedenfalls nicht.
Ich kenne das als praktische Möglichkeit, komplizierte Escape-Konstrukte zu umgehen...

Tommy56 · February 11, 2017, 8:08pm

Kann sein, dass die Browser das ignorieren, der Standard für HTML sagt ".
Wenn man Fehler finden will, sollte man zuerst den Standard einhalten oder man sucht auf verlorenem Posten.

Gruß Tommy

michael_x · February 12, 2017, 4:36pm

The HTML specification says: Attributes are placed inside the start tag, and consist of a name and a value, separated by an = character. The attribute value can remain unquoted if it doesn't contain spaces or any of " ' ` = < or > . Otherwise, it has to be quoted using either single or double quotes.

https://html.spec.whatwg.org/multipage/syntax.html#unquoted

Tommy56 · February 12, 2017, 4:48pm

Ok, dann hast Du wohl recht. Ich hatte das anders in Erinnerung.
Da ich aber schon Probleme ohne " hatte, werde ich die wohl weiter verwenden.

Gruß Tommy

michael_x · February 13, 2017, 3:38pm

Da ich aber schon Probleme ohne " hatte, werde ich die wohl weiter verwenden.

Da hast du recht. Wann man die " " ( oder auch die ' ' ) ganz weglassen kann ist so kompliziert, dass man die Tüdelchen besser einfach setzt.

Topic		Replies	Views
Steuerung langsamer Servo und Ultrasonic Deutsch	22	1069	August 26, 2023
ESP8266 per externe HTML Website steuern Deutsch	21	3353	June 17, 2022
Arduino Servo Austausch Deutsch	11	295	October 5, 2023
Mobatools Web Servo & Stepper Deutsch	29	1166	April 8, 2023
Servosteurungs-Probleme mit einem AtMega328p Deutsch	11	1488	May 6, 2021

Servos über ESP8266 Webserver steuern

Related topics