Zunächst mal danke, dass ihr mich unterstützen wollt.
Mein gesendeter Code ist nur ein Muster zum Testen und soll in ein Projekt integriert werden.
Dieses umfasst inzwischen 20 Tabs mit ca. 12 A-4 Seiten Code inkl. 5 Slider.
Die Diagramme im Projekt sind mit Canvas erstellt und deren Scripts sind optional mit verschiedenen Quellen , a) im www , b) mit meinem Homeserver, c) im Flash des ESP8266 verlinkt.
Die 5 Slider sollen nur sichtbar sein, wenn sie benötigt werden. Doch, wenn ein Slider aus dem DOM verschwindet, macht die restliche Software zicken usw.
Nach vielen Fehlversuchen eine Lösung zu finden, kam ich auf die Idee mal nach anderen Slidern umzuschauen, bei denen das Ausblenden vielleicht unproblematischer ist.
Da ich mit Canvas schon einiges umgesetzt habe versuchte ich es damit.
Den Gedanken, warum diesen Aufwand, ein HTML Slider mit CSS tut es doch genauso, hatte ich auch. Doch je länger ich probierte einen Canvas Slider zu integrieren, umso mehr wollte ich
ihn unbedingt in meinem Projekt haben - das kennt ihr vielleicht auch.
Einen direkten Link zum nötigen Script (canvasslider.js) fand ich im www nicht.
Hier (GitHub - akalverboer/CanvasSlider: Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.) hatte ich das Script heruntergeladen und
Lokal (im Flash) bereit gestellt.
Ich würde nun gern wissen, ob man einen Canvas Slider im Code zur PWM-Steuerung verwenden
kann und wenn ja, wie?
Also, wer Lust hat sich dieser Aufgabe zu stellen, ohne die Notwendigkeit, eine Antwort zu finden, zu hinterfragen, möge diese tun.
Hier der Code für den Canvas Slider:
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include "index.h"
//SSID and Password of your WiFi router
const char* ssid = "yourssid";
const char* password = "XYZ";
ESP8266WebServer server(80);
#define PWM1_pin 2 //D4
void handlePWM() {
analogWriteFreq(500);
String pwm1Value = server.arg("PWM1_val");
int val1 = pwm1Value.toInt();
val1 = constrain(val1, 0, 1023); // PWM-Wert- Bereich festlegen
analogWrite(PWM1_pin, (300-val1)); // Ausgabe des PWM-Signals (invertiert - wegen D4 Logik)
Serial.print("PWM1-Wert: ");
Serial.println(val1);
server.send(200,"text/plain","0"); // handling the webpage update
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println();
Serial.println("_______________________________");
Serial.println(__FILE__); // Dateiname
Serial.println(__DATE__); // Erstellungsdatum
Serial.println(__TIME__); // Erstellungszeitpunkt
Serial.println("_______________________________");
Serial.println("Projekt_XY"); // Projektname
Serial.println("Start: --- ");
Serial.println("_______________________________");
Serial.println("Server listening");
Serial.print(" Freier Speicher: ");
Serial.print(ESP.getFreeHeap());
Serial.println(" Bytes");
Serial.println("_______________________________");
WiFi.begin(ssid, password); //Connect to your WiFi router
Serial.println("");
while (WiFi.status() != WL_CONNECTED) { //Wait for connection
delay(500);
Serial.println("Waiting to connect?");
}
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); // Print the local IP
pinMode(2, OUTPUT);
analogWrite(PWM1_pin,300); // chaning the value on the NodeMCU board
server.on("/", handleRoot); // Associate the handler function to the path
server.on("/setPWM", handlePWM); // handles the PWM values
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient(); // Handling of incoming requests
}
void handleRoot() {
server.send(200, "text/html", html_page);
}
const char html_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>HTML Slider</title>
</head>
<body>
<h3>HTML Slider</h3>
<input type='range' min='0' max='300' value='0' class='slider' id='myCanvas'>
<span id='slider_p'></span>
<script>
var slider = document.getElementById('myCanvas');
var pwmValue = document.getElementById('slider_p'); // Hier wird der PWM-Wert angezeigt
slider.addEventListener('input', function(){
var sliderValue = slider.value; // Wert des Sliders
pwmValue.textContent = 'PWM-Wert: ' + sliderValue; // Anzeige des PWM-Werts im Element 'p1'
var xhttp = new XMLHttpRequest();
xhttp.open('GET', '/setPWM?PWM1_val=' + sliderValue, true); // Sende den PWM-Wert an den Server
xhttp.send();
});
</script>
</body>
</html>
)=====";
