Не могу разобраться слайдерами html javascript ESP8266
- Войдите на сайт для отправки комментариев
Ср, 15/09/2021 - 11:05
<!DOCTYPE html>
<html>
<head>
<style>
body {overflow: scroll; /*полосы прокрутки */
width: 300px; /* Ширина блока */
height: 800px; /* Высота блока */
/* padding: 5px; Поля вокруг текста */
/* border: solid 1px black; Параметры рамки */
background:white }
</style>
</head>
<body>
<!------'zzzzzz'-->
<fieldset>
<legend>RGBW:</legend>
<table bgcolor='white'>
красный<br>
<input type='range' min='0' max='255' id='r'>
<br>
зеленый<br>
<input type='range' min='0' max='255' id='g'>
<br>
синий<br>
<input type='range' min='0' max='255' id='b'>
<input type="submit" value="Submit">
</form>
"<br> <form action='/out'> R: <input type='text'name='R'> <input type='submit' value='R'> </form>"
"<br> <form action='/out'> G: <input type='text'name='G'> <input type='submit' value='G'> </form>"
"<br> <form action='/out'> B: <input type='text'name='B'> <input type='submit' value='B'> </form>"
<tr><td>красный</td><td>=</td><td id='r'>0</td>
</tr>
<tr><td>зеленый</td><td>=</td><td id='g'>0</td>
</tr>
<tr><td>сининий</td><td>=</td><td id='b'>0</td>
</tr>
</table>
</fieldset>
<!---$$$$$$$$$$$$$$-->
<canvas id='wheelCanvas' onclick='getColor(event)'>
</canvas>
<script type='text/javascript'>
var canvas = document.getElementById('wheelCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.crossOrigin = 'anonymous';
var dimension;
if(window.innerHeight<window.innerWidth){
dimension=window.innerHeight;
} else {
dimension=window.innerWidth;
}
imageObj.onload = function() {
context.drawImage(imageObj,0,0,600,600,0,0,0.98*dimension,0.98*dimension);
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/RGB_color_wheel_360.svg/600px-RGB_color_wheel_360.svg.png';
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;
function getColor(event) {
var canvas = document.getElementById('wheelCanvas');
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
document.getElementById('r').innerHTML = pixelData [0];
document.getElementById('g').innerHTML = pixelData [1];
document.getElementById('b').innerHTML = pixelData [2];
var form = document.createElement('form');
form.action='out';
var nr = document.createElement('input');
nr.name='R';
nr.value=pixelData[0].toString();
form.appendChild(nr);
var ng = document.createElement('input');
ng.name='G';
ng.value=pixelData[1].toString();
form.appendChild(ng);
var nb = document.createElement('input');
nb.name='B';
nb.value=pixelData[2].toString();
form.appendChild(nb);
form.style.display='none';
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html>
Добрый день не могу привязать слайдеры к каждому цвету пикселей ws2812
И где в вашем коде Си?
Вы форумом ошиблись, вам на форум вебпрограммеров
#include "ESP8266WiFi.h" #include <ESP8266WebServer.h> #include "html_header.h" #include <Adafruit_NeoPixel.h> // порт сервера ESP8266WebServer server(80); #define NUM_PIX 32//Количество светодиодов #define PIN 5 //пин esp const char* ssid = "";//имя сети const char* password = "";//пароль unsigned char red,green,blue; String form; //Количество пикселей выаод // NEO_KHZ800, WS2812 // NEO_GRB, WS2812 в порядке GRB Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NUM_PIX, PIN, NEO_GRBW + NEO_KHZ800); // root веб со ссылкой на страницу настроек void handle_root() { server.send(200, "text/html", "<html>WS2812 WiFi <a href='./out'>Control</a></html>"); delay(100); } // root отобразить колесо цвета и выбор цвета void handle_outputs() { // Строки для хранения вывода клиента String RMsg; String GMsg; String BMsg; // Анализировать вывод клиента RMsg=server.arg("R"); GMsg=server.arg("G"); BMsg=server.arg("B"); // Преобразование в число для перехода в библиотеку Neopixel red=RMsg.toInt(); green=GMsg.toInt(); blue=BMsg.toInt(); // Обновление формы и отправка клиенту form = "<html>"; form = form + html_header; form = form + "</html>"; // отправка формы server.send(200, "text/html", form); } // Инициализация Wi-Fi, веб-сервер void setup() { Serial.begin(115200); // подключение wifi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); } // IP-адрес Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); pinMode(PIN, OUTPUT); // Настройка по умолчанию тусклый белый red=255; green=103; blue=23; // дескрипторы к веб-серверу // Базовая страница server.on("/", handle_root); // страница настроек server.on("/out", handle_outputs); // запуск веб сервера server.begin(); // запуск пикселей pixels.begin(); pixels.setBrightness(255); } void loop() { int i; // Обработка запросов клиентов server.handleClient(); // Обновление светодиодной строки for(i=0;i<NUM_PIX;i++){ // RGB pixels.setPixelColor(i, pixels.Color(red,green,blue)); pixels.show(); } delay(500); // задержка }// // палитра // const char* html_header = "<head>" "<style>" "body {overflow:hidden;" "background:black;}" "</style>" "</head>" "<body>" "<canvas id='wheelCanvas' onclick='getColor(event)'>" "</canvas>" "<script type='text/javascript'>" "var canvas = document.getElementById('wheelCanvas');" "var context = canvas.getContext('2d');" "var imageObj = new Image();" "imageObj.crossOrigin = 'anonymous';" "var dimension;" "if(window.innerHeight<window.innerWidth){" "dimension=window.innerHeight;" "} else {" "dimension=window.innerWidth;" "}" "imageObj.onload = function() {" "context.drawImage(imageObj,0,0,600,600,0,0,0.98*dimension,0.98*dimension);" "};" "imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/RGB_color_wheel_360.svg/600px-RGB_color_wheel_360.svg.png';" "canvas.height=window.innerHeight;" "canvas.width=window.innerWidth;" "function getColor(event) {" "var canvas = document.getElementById('wheelCanvas');" "var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;" "var form = document.createElement('form');" "form.action='out';" "var nr = document.createElement('input');" "nr.name='R';" "nr.value=pixelData[0].toString();" "form.appendChild(nr);" "var ng = document.createElement('input');" "ng.name='G';" "ng.value=pixelData[1].toString();" "form.appendChild(ng);" "var nb = document.createElement('input');" "nb.name='B';" "nb.value=pixelData[2].toString(); " "form.appendChild(nb);" "form.style.display='none';" "document.body.appendChild(form);" "form.submit(); " "}" "</script>" "</body>";Ну а дальше то что? Вопрос все равно по хтмл и яве, а не по ардуино. Идите на соответствующий форум, не засоряйте нам тут
Ну спасибо
Я видел только утверждение: "не могу разобраться".
Принял к сведению, что ТС не может разобраться, а отвечать-то не на что, т.к. вопроса задано не было.
Давно ли ws2812 стали относиться к web-программингу? Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1
Фееричненько
Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1
Вот это
Вы называете "чётко заданным вопросом"?
Ну, тогда отвечайте :-)
Давно ли ws2812 стали относиться к web-программингу? Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1
зря ты - я внимательно и текст "вопроса" ТС прочитал, и все его листинги. К ws2812 проблема ТС не имеет , как мне кажется. ровно никакого отношения.
автор запутался в HTML-формах, которые он своей программе генерит 3 или 4 раза. Сначала просто в ХТМЛ, потом во вложенном в страничку JS, а потом еще и обрабатывает. Нафига он это делает - я не понял, я в вебпрограмминге не спец. Но похоже проблема где-то тут.
Во всяком случае в его ардуино-коде я проблем не вижу.
Всем ,огромное спасибо !!!!
Может удалять тему ;)
Сам все решил
молодец.
Я угадал, накосячил в формах?
В кавычках он накосячил, по подсветке же видно. А вообще весь код - один сплошной косяк.