espvban/ESPIDFNEW/html/volume.html.h
2024-08-29 21:38:48 +02:00

43 lines
1.5 KiB
C

#pragma once
char volume_HTML_String[] =
"<div class=\"VolumeSlider\">\n"
" <input type=\"range\" min=\"0\" max=\"255\" class=\"slider\" id=\"channel1\" >\n"
" </div>\n"
" <div class=\"VolumeSlider\">\n"
" <input type=\"range\" min=\"0\" max=\"255\" class=\"slider\" id=\"channel2\" >\n"
" </div>\n"
"\n"
" <p>channel 1: <span id=\"channel1val\"></span></p>\n"
" <p>channel 2: <span id=\"channel2val\"></span></p>\n"
"\n"
" <script>\n"
" var ch1 = document.getElementById(\"channel1\");\n"
" var ch2 = document.getElementById(\"channel2\");\n"
" var ch1val = document.getElementById(\"channel1val\");\n"
" var ch2val = document.getElementById(\"channel2val\");\n"
" ch1val.innerHTML = ch1.value;\n"
" ch2val.innerHTML = ch2.value;\n"
"\n"
" window.onload = async function() {\n"
" const response = await fetch(\"volume\");\n"
" channels = await response.json();\n"
" console.log(channels);\n"
" ch1.value = channels[\"channel1\"];\n"
" ch2.value = channels[\"channel2\"];\n"
" }\n"
" \n"
" \n"
" ch1.oninput = function() {\n"
" ch1val.innerHTML = this.value;\n"
" var newUrl = \"volume\?channel=1&value=\"+this.value.toString();\n"
" fetch(newUrl);\n"
" }\n"
" ch2.oninput = function() {\n"
" ch2val.innerHTML = this.value;\n"
" var newUrl = \"volume\?channel=2&value=\"+this.value.toString();\n"
" fetch(newUrl);\n"
" }\n"
" </script>\n"
" \n"
;