Не могу разобраться слайдерами html javascript ESP8266

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021
<!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>



        
    

 

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021

Добрый день не могу привязать слайдеры  к каждому цвету пикселей  ws2812

b707
Онлайн
Зарегистрирован: 26.05.2017

И где в вашем коде Си?
Вы форумом ошиблись, вам на форум вебпрограммеров

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021

#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);    // задержка 
}

 

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021
//
// палитра 
//
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>";

 

b707
Онлайн
Зарегистрирован: 26.05.2017

Ну а дальше то что? Вопрос все равно по хтмл и яве, а не по ардуино. Идите на соответствующий форум, не засоряйте нам тут

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021

Ну спасибо

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

b707 пишет:
Вопрос все равно по хтмл и яве
Где Вы вообще увидели вопрос?

Я видел только утверждение: "не могу разобраться".

Принял к сведению, что ТС не может разобраться, а отвечать-то не на что, т.к. вопроса задано не было.

BOOM
BOOM аватар
Offline
Зарегистрирован: 14.11.2018

Давно ли ws2812 стали относиться к web-программингу? Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1

 

rkit
Offline
Зарегистрирован: 23.11.2016

IgnatikovAM пишет:


"document.body.appendChild(form);"
"form.submit();   "

Фееричненько

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

BOOM пишет:

Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1

Вот это

IgnatikovAM пишет:

Добрый день не могу привязать слайдеры  к каждому цвету пикселей  ws2812

Вы называете "чётко заданным вопросом"?

Ну, тогда отвечайте :-)

b707
Онлайн
Зарегистрирован: 26.05.2017

BOOM пишет:

Давно ли ws2812 стали относиться к web-программингу? Никто тут просто и не пытался понять вопрос ТС, который четко был задан в #1

зря ты - я внимательно и текст "вопроса" ТС прочитал, и все его листинги. К ws2812 проблема ТС не имеет , как мне кажется. ровно никакого отношения.

автор запутался в HTML-формах, которые он своей программе генерит 3 или 4 раза. Сначала просто в ХТМЛ, потом во вложенном в страничку JS, а потом еще и обрабатывает. Нафига он это делает - я не понял, я в вебпрограмминге не спец. Но похоже проблема где-то тут.

Во всяком случае в его ардуино-коде я проблем не вижу.

IgnatikovAM
Offline
Зарегистрирован: 03.09.2021

Всем ,огромное спасибо !!!!
Может удалять тему ;)
Сам все решил

b707
Онлайн
Зарегистрирован: 26.05.2017

IgnatikovAM пишет:
Сам все решил

молодец.
Я угадал, накосячил в формах?

rkit
Offline
Зарегистрирован: 23.11.2016

В кавычках он накосячил, по подсветке же видно. А вообще весь код - один сплошной косяк.