ESP32: runder slider über websocket

dieterr · December 16, 2023, 2:37pm

Hallo zusammen,

ich habe einen ESP32 laufen, der per PWM eine Leuchte dimmt. Die Bedienung läuft über eine HTML auf dem ESP-Webserver über websocket, per linearem slider. Dieser HTML code funktioniert auch seit längerem.

<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Lichtsteuerung</title>
<style>
.slidecontainer {
    width: 100%;
}

    .slider {
        -webkit-appearance: none;
        width: 80%;
        height: 5px;
        border-radius: 5px;
        background: #8080F0;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    @media only screen and (orientation: portrait) {
       .slider {
        position: absolute;
        top: 55%;
        left: -20%;
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        width: 80%; }
     }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #FFFFFF;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #FFFFFF;
        cursor: pointer;
    }

</style>
<script>
var websock;
function start() {
  websock = new WebSocket('ws://' + window.location.hostname + ':81/');
  websock.onopen = function(evt) { console.log('websock open'); };
  websock.onclose = function(evt) { console.log('websock close'); };
  websock.onerror = function(evt) { console.log(evt); };
  websock.onmessage = function(evt) {
    //console.log(evt);
    var res = evt.data.split("=");
    if (res.length == 2) {
		console.log(res[0]);
		console.log(res[1]);
        var output = document.getElementById("demo");
		var sli = document.getElementById('myRange');
		if (res[0] == 'dimm') {
		  sli.value = Number(res[1]);
		  output.innerHTML = res[1];
		}
    }
    else {
      console.log('unknown event');
    }
  };
}

function sliderchange(e1) {
//  var output = document.getElementById("demo");
  var str1 = "dimm=" + e1.value;
  websock.send(str1);
//  output.innerHTML = str1;
}
</script>

</head>
<body onload="javascript:start();">
<h1>Lichtsteuerung</h1>

<div class="""slidecontainer">
  <input type="range" min="0" max="1000" value="50" class="slider" id="myRange" oninput="sliderchange(this);">
  <p>Value: <span id="demo"></span></p>
</div>

</body>
</html>

Jetzt möchte ich aber den linearen Slider durch einen kreisförmigen, round slider ersetzen. Dazu habe ich mir per jsfiddle folgendes generiert was auch grundsätzlich funktioniert, die speziellen Javascipt und CSS sind separat.
Ich bräuchte jetzt aber einen Tipp, wie ich den websocket Teil einfüge, und wie man die Übergabe der Daten als Variable zurück an den ESP macht. Meine Kenntnisse in HTML und script-Programmierung sind dafür leider nicht gut genug.

<!DOCTYPE html>
<html class=" waloraln idc0_349"><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>round slider - a demo for arc slider</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="data/jquery-1.11.0.js"></script>
  <link rel="stylesheet" type="text/css" href="data/result-light.css">
  <link rel="stylesheet" type="text/css" href="data/roundslider.min.css">
  <script type="text/javascript" src="data/roundslider.min.js"></script>

  <style id="compiled-css" type="text/css">
    #arc-slider {
  height: 300px !important;
  width: 300px !important;
  border: 0px dashed;
  overflow: hidden;
  padding: 15px;
}

#arc-slider .rs-container {
  margin-left: -150px;
  /* here 300 is the radius value */
  left: 50%;
}

#arc-slider .rs-tooltip {
  top: 60px;
}

#arc-slider .rs-tooltip-text {
  font-size: 25px;
}

#arc-slider .rs-border {
  border-width: 0px;
}

/* Appearance related changes */
.rs-control .rs-range-color {
  background-color: #54BBE0;
}

.rs-control .rs-path-color {
  background-color: #5f5f5f;
}

.rs-control .rs-handle {
  background-color: #51c5cf;
}
    /* EOS */
  </style>

  <script id="insert"></script>

</head>

<body>
    <h2>Lichtsteuerung</h2>

<div id="arc-slider" class="rslider rs-control rs-animation" style="height: 300px; width: 300px;"><div class="rs-container full pie" style="height: 300px; width: 300px;"><div class="rs-inner-container"><div class="rs-block rs-outer rs-border rs-split"><div class="rs-path rs-transition rs-range-color" style="transform: rotate(315deg);"></div><div class="rs-path rs-transition rs-range-color" style="opacity: 0; transform: rotate(153.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; transform: rotate(333.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; z-index: 1; transform: rotate(135deg);"></div><span class="rs-block" style="padding: 6px;"><div class="rs-inner rs-bg-color rs-border"></div></span></div></div><div class="rs-bar rs-transition rs-first" style="z-index: 4; transform: rotate(333.9deg);"><div class="rs-handle rs-move" index="2" tabindex="0" role="slider" aria-label="arc-slider_handle" style="height: 38px; width: 38px; margin: -19px 0px 0px -16px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="1000"></div></div><span class="rs-bar rs-transition rs-start" style="transform: rotate(315deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><span class="rs-bar rs-transition rs-end" style="transform: rotate(585deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><div class="rs-overlay rs-transition rs-bg-color" style="transform: rotate(585deg);"></div><span class="rs-tooltip rs-tooltip-text edit" style="margin-top: -21px; margin-left: -25px;">70 </span></div><input type="hidden" name="arc-slider" value="70"></div>

<script type="text/javascript">//<![CDATA[
  $("#arc-slider").roundSlider({
  sliderType: "min-range",
  circleShape: "pie",
  value: 70,
  startAngle: -45,
  max: "1000",
  editableTooltip: true,
  radius: 150,
  width: 6,
  handleSize: "+32",
  tooltipFormat: function(args) {
    return args.value + " ";
  }
  });
  //]]>
</script>

</body></html>

Gruß,
Dieter

PS: die Docu zum round slider hier habe ich gelesen, leider komme ich damit auch nicht weiter

bojan_jurca · December 17, 2023, 8:54pm

Javascript Websocket example: http://jurca.dyn.ts.si/example10.html

dieterr · December 18, 2023, 4:06pm

Tut mir leid, aber was soll ich mit der Info anfangen?
Auf meiner exisitierenden Seite habe ich ja schon websocket laufen, ich bekomme es aber in den round slider nicht übertragen

bojan_jurca · December 18, 2023, 5:05pm

Es tut mir leid, dass ich es nicht sorgfältig gelesen habe.

ec2021 · December 19, 2023, 3:34pm

Wenn ich es recht verstanden habe, ist das obere HTML in Post #1 der funktionierende Code und das untere der neue "runde" Slider, korrekt?

Der webSocket-Anteil ist dann im ersten Code zwischen zwei tags eingeschlossen vor dem Body des HTML zusammengefasst. Wenn ich das richtig verstehe, wird die dort definierte Funktion sliderchange(e1) anscheinend etwas später in

<div class="""slidecontainer">
  <input type="range" min="0" max="1000" value="50" class="slider" id="myRange" oninput="sliderchange(this);">
  <p>Value: <span id="demo"></span></p>
</div>

mit dem oninput-Event von "slidecontainer" verbunden. Ich habe den webSocket-Anteil mal vor
< body > in den zweiten HTML-Code eingefügt und (mangels besseren Wissens) das "oninput" ans Ende der arc-slider Definition eingefügt ... Vielleicht mal hiermit versuchen:

<!DOCTYPE html>
<html class=" waloraln idc0_349"><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>round slider - a demo for arc slider</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="data/jquery-1.11.0.js"></script>
  <link rel="stylesheet" type="text/css" href="data/result-light.css">
  <link rel="stylesheet" type="text/css" href="data/roundslider.min.css">
  <script type="text/javascript" src="data/roundslider.min.js"></script>

  <style id="compiled-css" type="text/css">
    #arc-slider {
  height: 300px !important;
  width: 300px !important;
  border: 0px dashed;
  overflow: hidden;
  padding: 15px;
}

#arc-slider .rs-container {
  margin-left: -150px;
  /* here 300 is the radius value */
  left: 50%;
}

#arc-slider .rs-tooltip {
  top: 60px;
}

#arc-slider .rs-tooltip-text {
  font-size: 25px;
}

#arc-slider .rs-border {
  border-width: 0px;
}

/* Appearance related changes */
.rs-control .rs-range-color {
  background-color: #54BBE0;
}

.rs-control .rs-path-color {
  background-color: #5f5f5f;
}

.rs-control .rs-handle {
  background-color: #51c5cf;
}
    /* EOS */
  </style>

  <script id="insert"></script>

</head>
<script>
var websock;
function start() {
  websock = new WebSocket('ws://' + window.location.hostname + ':81/');
  websock.onopen = function(evt) { console.log('websock open'); };
  websock.onclose = function(evt) { console.log('websock close'); };
  websock.onerror = function(evt) { console.log(evt); };
  websock.onmessage = function(evt) {
    //console.log(evt);
    var res = evt.data.split("=");
    if (res.length == 2) {
		console.log(res[0]);
		console.log(res[1]);
        var output = document.getElementById("demo");
		var sli = document.getElementById('myRange');
		if (res[0] == 'dimm') {
		  sli.value = Number(res[1]);
		  output.innerHTML = res[1];
		}
    }
    else {
      console.log('unknown event');
    }
  };
}

function sliderchange(e1) {
//  var output = document.getElementById("demo");
  var str1 = "dimm=" + e1.value;
  websock.send(str1);
//  output.innerHTML = str1;
}
</script>
<body  onload="javascript:start();">
    <h2>Lichtsteuerung</h2>

<div id="arc-slider" class="rslider rs-control rs-animation" style="height: 300px; width: 300px;"><div class="rs-container full pie" style="height: 300px; width: 300px;"><div class="rs-inner-container"><div class="rs-block rs-outer rs-border rs-split"><div class="rs-path rs-transition rs-range-color" style="transform: rotate(315deg);"></div><div class="rs-path rs-transition rs-range-color" style="opacity: 0; transform: rotate(153.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; transform: rotate(333.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; z-index: 1; transform: rotate(135deg);"></div><span class="rs-block" style="padding: 6px;"><div class="rs-inner rs-bg-color rs-border"></div></span></div></div><div class="rs-bar rs-transition rs-first" style="z-index: 4; transform: rotate(333.9deg);"><div class="rs-handle rs-move" index="2" tabindex="0" role="slider" aria-label="arc-slider_handle" style="height: 38px; width: 38px; margin: -19px 0px 0px -16px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="1000"></div></div><span class="rs-bar rs-transition rs-start" style="transform: rotate(315deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><span class="rs-bar rs-transition rs-end" style="transform: rotate(585deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><div class="rs-overlay rs-transition rs-bg-color" style="transform: rotate(585deg);"></div><span class="rs-tooltip rs-tooltip-text edit" style="margin-top: -21px; margin-left: -25px;">70 </span></div><input type="hidden" name="arc-slider" value="70" oninput="sliderchange(this);"></div>

<script type="text/javascript">//<![CDATA[
  $("#arc-slider").roundSlider({
  sliderType: "min-range",
  circleShape: "pie",
  value: 70,
  startAngle: -45,
  max: "1000",
  editableTooltip: true,
  radius: 150,
  width: 6,
  handleSize: "+32",
  tooltipFormat: function(args) {
    return args.value + " ";
  }
  });
  //]]>
</script>


</body></html>

Ob das so geht ...? Keine Garantie fürs Funktionieren ...

Vielleicht kommt aber ja auch noch jemand um die Ecke, der sich besser mit JavaScript auskennt.

dieterr · December 20, 2023, 7:12am

Danke dir, das war genau der Denkanstoß der mich weitergebracht hat. Direkt funktioniert hatte es zwar nicht (wie von dir vorhergesehen), aber nachdem ich "oninput" durch den richtigen eventtrigger von roundslider ersetzt habe, spielt es zusammen. Nachdem das jetzt so funktioniert, kann es ans ausfeilen gehen. Hier noch der funktionierende code:

<!DOCTYPE html>
<html class=" waloraln idc0_349"><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>round slider - a demo for arc slider</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="data/jquery-1.11.0.js"></script>
  <link rel="stylesheet" type="text/css" href="data/result-light.css">
  <link rel="stylesheet" type="text/css" href="data/roundslider.min.css">
  <script type="text/javascript" src="data/roundslider.min.js"></script>

  <style id="compiled-css" type="text/css">
    #arc-slider {
  height: 300px !important;
  width: 300px !important;
  border: 0px dashed;
  overflow: hidden;
  padding: 15px;
}

#arc-slider .rs-container {
  margin-left: -150px;
  /* here 300 is the radius value */
  left: 50%;
}

#arc-slider .rs-tooltip {
  top: 60px;
}

#arc-slider .rs-tooltip-text {
  font-size: 25px;
}

#arc-slider .rs-border {
  border-width: 0px;
}

/* Appearance related changes */
.rs-control .rs-range-color {
  background-color: #54BBE0;
}

.rs-control .rs-path-color {
  background-color: #5f5f5f;
}

.rs-control .rs-handle {
  background-color: #51c5cf;
}
    /* EOS */
  </style>

<script id="insert"></script>

</head>

<script>
var websock;
function start() {
  websock = new WebSocket('ws://' + window.location.hostname + ':81/');
  websock.onopen = function(evt) { console.log('websock open'); };
  websock.onclose = function(evt) { console.log('websock close'); };
  websock.onerror = function(evt) { console.log(evt); };
  websock.onmessage = function(evt) {
    //console.log(evt);
    var res = evt.data.split("=");
    if (res.length == 2) {
		console.log(res[0]);
		console.log(res[1]);
        var output = document.getElementById("demo");
		var sli = document.getElementById('myRange');
		if (res[0] == 'dimm') {
		  sli.value = Number(res[1]);
		  output.innerHTML = res[1];
		}
    }
    else {
      console.log('unknown event');
    }
  };
}
</script>

<body  onload="javascript:start();">
 <h2>Lichtsteuerung</h2>

<div id="arc-slider" class="rslider rs-control rs-animation" style="height: 300px; width: 300px;"><div class="rs-container full pie" style="height: 300px; width: 300px;"><div class="rs-inner-container"><div class="rs-block rs-outer rs-border rs-split"><div class="rs-path rs-transition rs-range-color" style="transform: rotate(315deg);"></div><div class="rs-path rs-transition rs-range-color" style="opacity: 0; transform: rotate(153.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; transform: rotate(333.9deg);"></div><div class="rs-path rs-transition rs-path-color" style="opacity: 1; z-index: 1; transform: rotate(135deg);"></div><span class="rs-block" style="padding: 6px;"><div class="rs-inner rs-bg-color rs-border"></div></span></div></div><div class="rs-bar rs-transition rs-first" style="z-index: 4; transform: rotate(333.9deg);"><div class="rs-handle rs-move" index="2" tabindex="0" role="slider" aria-label="arc-slider_handle" style="height: 38px; width: 38px; margin: -19px 0px 0px -16px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="1000"></div></div><span class="rs-bar rs-transition rs-start" style="transform: rotate(315deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><span class="rs-bar rs-transition rs-end" style="transform: rotate(585deg);"><span class="rs-seperator" style="width: 6px; margin-left: 0px;"></span></span><div class="rs-overlay rs-transition rs-bg-color" style="transform: rotate(585deg);"></div><span class="rs-tooltip rs-tooltip-text edit" style="margin-top: -21px; margin-left: -25px;">70 </span></div><input type="hidden" name="arc-slider" value="70" change="traceEvent(this);" ></div>

<script type="text/javascript">//<![CDATA[
  $("#arc-slider").roundSlider({
  sliderType: "min-range",
  circleShape: "pie",
  value: 70,
  startAngle: -45,
  max: "1000",
  editableTooltip: true,
  radius: 150,
  width: 6,
  handleSize: "+32",
  change: "traceEvent",
  tooltipFormat: function(args) {
    return args.value + " ";
  }
  });
  //]]>

function traceEvent(e) {
  var str1 = "dimm=" + e.value;
  websock.send(str1);
}

</script>


</body></html>

ec2021 · December 20, 2023, 8:44pm

Freut mich, dass mein empirisch zusammengestockelter Beitrag Dir helfen konnte

Nur aus Wissensdurst: Wie hast Du den korrekten Funktionsaufruf gefunden?

dieterr · December 21, 2023, 8:28am

Aus der Doku der Funktion (selber gelesen ).
Daher wusste ich, welche events es gibt, "oninput" gehört nicht dazu, sondern "change". Aber zum dass und wie das einzusetzen ist, hast du mir den richtigen Hinweis gegeben.

system · June 18, 2024, 8:29am

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
ESP32 ASyncWebServer Problem mit Sliderwert Darstellung bei Pagerefresh Deutsch	15	2007	May 6, 2021
ESP8266-Webserver_Canvas Slider_PWM Deutsch	7	311	June 21, 2024
ESP8266 Slider Deutsch	9	1110	May 6, 2021
Esp32 en serveur Web Français	3	334	October 29, 2023
Anleitung: ESP32 schickt Daten zum Browser mittels Websocket Deutsch	2	3203	June 5, 2023

ESP32: runder slider über websocket

Related Topics