Analogen Drehregler im Webserver erstellen ohne Poti only Online on HTML

Guten Tag,

ich bin auf der suche nach einem Drehregler mit ca. 61 Werten der aber online erstellt ist und nicht von außen an den Arduino angeschlossen ist.
Auf dem Arduino (Mega) habe ich einen Webserver laufen und ich möchte einen Digitalen HTML (CSS,JAVA) Drehregler haben der dem Arduino einen Wert zwischen 0 und 1023 oder 0-63 oder sonst etwas schickt. Kann mir da jmdn. helfen oder ist das unmöglich?

Ich habe gute Beispiele gefunden wie man eine Anzeige erstellt die aber nur Werte anzeigt und nicht vorgibt.

Mit freundlichen Grüßen
KsY

Vorsicht: range funktioniert nicht auf IE9 und älter.

Gruß Tommy

Edit: Ansonsten schaue Dir mal jQuery-knob an. Das ist allerdings etwas groß für Arduino.

Ich will keine Kompatibilität zu IE irgendwas, weil ich den sowieso nicht benutze.
Da ich aber nicht weiß, womit der TO arbeitet, habe ich diese Info gegeben, damit er sich im Zweifel nicht dumm und dämlich sucht, warum es nicht geht.

Gruß Tommy

grob ca so

<input class='col3 ran3' type='range' step='1' min='0' max='255' value='0' id='8' onChange='fire(this.id, this.value)'/>

Vielen dank für die schnelle und gute Antwort. Aber ich weiss leider immernoch nicht weiter.

Ok, jetzt habe ich einen einfachen Schieberegler. Ich kann den Regler bewegen aber mir werden keine Werte daneben angezeigt oder sonst etwas. Aber was muss ich damit machen damit ich mir die Werte auch im Arduino anzeigen lassen kann bzw. damit ich sie weiterverwehrten kann.

[/quote]

Du musst ihn entweder in eine Form einbauen, um den Wert zum Webserver schicken zu können oder per Javascript die Werte im change-Event auslesen und weiter verarbeiten.

Gruß Tommy

hallo,
ich kapere mal den thread, die problematik trifft ziemlich genau mein problem:

ich habe eine modellbau-lok umgebaut, es ist ein esp32-pico drin, ein accu, ein arduino-tt-motor. Ich habe bisher diesen code:
/

/https://lastminuteengineers.com/creating-esp32-web-server-arduino-ide/

#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "xxxxxxx";  // Enter SSID here
const char* password = "yyyyyyyy";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192, 168, 1, 101);
IPAddress gateway(192, 168, 1, 101);
IPAddress subnet(255, 255, 255, 0);

WebServer server(80);

uint8_t LED1pin = 9;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

uint8_t LED3pin = 10;
bool LED3status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  pinMode(LED3pin, OUTPUT);

  //  WiFi.softAP(ssid, password);
  //  WiFi.softAPConfig(local_ip, gateway, subnet);

  WiFi.begin(ssid, password);

  delay(100);

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.on("/led3on", handle_led3on);
  server.on("/led3off", handle_led3off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if (LED1status)
  {
    digitalWrite(LED1pin, HIGH);
  }
  else
  {
    digitalWrite(LED1pin, LOW);
  }

  if (LED2status)
  {
    digitalWrite(LED2pin, HIGH);
  }
  else
  {
    digitalWrite(LED2pin, LOW);
  }

    if (LED3status)
  {
    digitalWrite(LED3pin, HIGH);
  }
  else
  {
    digitalWrite(LED3pin, LOW);
  }
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  LED3status = LOW;
  
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF | GPIO10 = OFF");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led3on() {
  LED3status = HIGH;
  Serial.println("GPI10 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_led3off() {
  LED3status = LOW;
  Serial.println("GPI10 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status, LED2status, LED3status));
}

void handle_NotFound() {
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat, uint8_t led2stat, uint8_t led3stat) {
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr += "<title>LED Control</title>\n";
  ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr += ".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr += ".button-on {background-color: #3498db;}\n";
  ptr += ".button-on:active {background-color: #2980b9;}\n";
  ptr += ".button-off {background-color: #34495e;}\n";
  ptr += ".button-off:active {background-color: #2c3e50;}\n";
  ptr += "p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr += "</style>\n";
  ptr += "</head>\n";
  ptr += "<body>\n";
  ptr += "<h1>ESP32 Web Server</h1>\n";
  ptr += "<h3>Using Access Point(AP) Mode</h3>\n";

  if (led1stat)
  {
    ptr += "<p>LED1 Status: AN</p><a class=\"button button-off\" href=\"/led1off\">AUS</a>\n";
  }
  else
  {
    ptr += "<p>LED1 Status: AUS</p><a class=\"button button-on\" href=\"/led1on\">AN</a>\n";
  }

  if (led2stat)
  {
    ptr += "<p>LED2 Status: AN</p><a class=\"button button-off\" href=\"/led2off\">AUS</a>\n";
  }
  else
  {
    ptr += "<p>LED2 Status: AUS</p><a class=\"button button-on\" href=\"/led2on\">AN</a>\n";
  }

    if (led3stat)
  {
    ptr += "<p>LED3 Status: AN</p><a class=\"button button-off\" href=\"/led3off\">AUS</a>\n";
  }
  else
  {
    ptr += "<p>LED3 Status: AUS</p><a class=\"button button-on\" href=\"/led3on\">AN</a>\n";
  }

  ptr += "</body>\n";
  ptr += "</html>\n";[
  return ptr;
}

der code ist noch lange nicht fertig, die handles sind da noch als LED’s bezeichnet, ich kann aber mit einem der buttons den motor starten und anhalten, mit dem zweiten die drehrichtung ändern. Wie kann ich da jetzt ein “drehregler” statt des dritten buttons zur geschwindigkeits regelung integrieren?

dank und gruss

inka