Шаблоны Оформления для Веб-Интерфейса

[cmept-27]

[ref]DrScorpion86[/ref], Нужна помощь . Как передать время и дату с веб в контроллер. C <input type="date"> и <input type="time">

[DrScorpion86]

[ref]DrScorpion86[/ref], Нужна помощь . Как передать время и дату с веб в контроллер. C <input type="date"> и <input type="time">

Завтра на работу приду и покажу как

[artemka19]

[ref]cmept-27[/ref],
вот так:

bandicam-2022-02-13-21-31-07-326.gif

останется только в ФЛПрог разобрать строку по ":" и по "-" , перевести в число и закинуть на входы штатного блока установки времени.
для 7.4.4
[spoiler]

установка время-дата из веб.flp

код:
<input type="time" id="time">

<script>
/*при изменении значения времени на веб-странице - шлем это значение в ЕСП*/
/*ВНИМАНИЕ - эта переменная "v" нужна только до выхода обновления 7.4.4, т.к. сейчас 13-02-2022 веб не работает со стринг*/
var v="---";
document.getElementById("time").onchange = function(){
/*ВНИМАНИЕ - эта переменная "v" нужна только до выхода обновления 7.4.4, т.к. сейчас 13-02-2022 веб не работате со стринг*/
v=time.value;
sUH("S1",v);
console.log(time.value);
}
</script>
[/spoiler]

[DrScorpion86]

[ref]artemka19[/ref], [ref]cmept-27[/ref],
А я познал прелесть "структуры"
[spoiler]

Без имени-2.jpg

[/spoiler]

[ref]artemka19[/ref], чуть сложнее, чем у вас, но уже не нужно разбирать строчку.
[spoiler]

time__0004_Слой 1.jpg

time__0003_Слой 2.jpg

time__0002_Слой 3.jpg

time__0001_Слой 4.jpg

time__0000_Слой 5.jpg

[/spoiler]

HTML

Код: Выделить всё

<input type="datetime-local" id="dt">

JS

Код: Выделить всё

let daTi = document.querySelector('#dt');
daTi.addEventListener('change', dataTime);
function dataTime(){
    const v = {};
    let x = new Date(daTi.value);
    v.H = x.getHours().toString();
    v.M = x.getMinutes().toString();
    v.y = x.getFullYear().toString();
    v.m = (x.getMonth() + 1).toString();
    v.d = x.getDate().toString();
    sUH("dt",v);
    console.log(v);
};

///////////Обновил. Добавил, что бы при изменение в контроллере данные передавались в вэб.////////

Test_7_4_4_получение датыВремя.flp

[artemka19]

1.jpg

[spoiler]

bandicam-2022-02-27-23-03-02-763.gif

2.jpg

7.4.6-несколько-переключателей-чист.flp

[/spoiler]

т.к. скрипты оптимизированы ( https://closure-compiler.appspot.com/home ), то код скрипта с комментами:
[spoiler]

////////////////////////////////////////////////основная секция скриптов:////////////////////////////////////
/*------эти переменные нужны чтобы стили переключателей не переключались при каждом получении новых данных из контроллера------*/
/* для того чтоб стили не переключались при каждом получении переменной "v", вводим переменную "Rtrigger", */
/*которую объявляем в разделе "основной скрипт на странице (объявляем ее там для того чтобы она была доступна Глобально, */
/*(т.е. там она объявляется как ГЛОБАЛЬНАЯ переменная) в разделе "основной скрипт на странице" */
var Rtrigger=0;
var Rtrigger2=0;
var Rtrigger3=0;
var Rtrigger4=0;
var Rtrigger5=0;

/////////////////////////////////////////////////скрипты переключателей/////////////////////////
<!--html код переключателя -->
<div class="switch-btn" id="off"></div>

<script>
/*когда нажали на переключатель*/
document.getElementById("off").onclick = function(){
/*присваиваем переменной off значения элемента с ID=off*/
var off = document.getElementById("off");
/*если имя стиля элемента с ID=off равно "switch-btn", то посылаем в МК false*/
if(off.className=="switch-btn"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем true в ESP из веб");
sUH("S1",true);
}
/*иначе если имя стиля элемента с ID=off равно "switch-btn switch-on", то посылаем в МК true*/
else if (off.className=="switch-btn switch-on"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем false в ESP из веб");
sUH("S1",false);
}
}
</script>



/* для того чтоб стили не переключались при каждом получении переменной "v", вводим переменную "Rtrigger", */
/*которую объявляем (объявляем ее там для того чтобы она была доступна здесь, */
/*т.е. там она объявляется как ГЛОБАЛЬНАЯ переменная) в разделе "основной скрипт на странице" */
/*когда из ESP приходит переменная v и ее значение 1*/
if (v==1 && Rtrigger==0){
/*то присваиваем переключателю с ID=off класс с именем switch-btn switch-on */
document.getElementById("off").className="switch-btn switch-on";
Rtrigger=1;
}
/*когда из ESP приходит переменная v и ее значение 0*/
else if (v==0 && Rtrigger==1){
/*то присваиваем переключателю с ID=off класс с именем switch-btn */
document.getElementById("off").className="switch-btn";
Rtrigger=0;
}

//////////////////////////////
<!--html код переключателя -->
<div class="switch-btn2" id="off2"></div>

<script>
/*когда нажали на переключатель*/
document.getElementById("off2").onclick = function(){
/*присваиваем переменной off2 значения элемента с ID=off2*/
var off2 = document.getElementById("off2");
/*если имя стиля элемента с ID=off2 равно "switch-btn2", то посылаем в МК false*/
if(off2.className=="switch-btn2"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем true в ESP из веб");
sUH("S2",true);
}
/*иначе если имя стиля элемента с ID=off равно "switch-btn2 switch-on2", то посылаем в МК true*/
else if (off2.className=="switch-btn2 switch-on2"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем false в ESP из веб");
sUH("S2",false);
}
}
</script>

/*когда из ESP приходит переменная v и ее значение 1*/
if (v==1 && Rtrigger2==0){
/*то присваиваем переключателю с ID=off2 класс с именем switch-btn2 switch-on2*/
document.getElementById("off2").className="switch-btn2 switch-on2";
Rtrigger2=1;
}
/*когда из ESP приходит переменная v и ее значение 0*/
else if (v==0 && Rtrigger2==1){
/*то присваиваем переключателю с ID=off2 класс с именем switch-btn2*/
document.getElementById("off2").className="switch-btn2";
Rtrigger2=0;
}
/////////////////////////////
<!--html код переключателя -->
<div class="switch-btn3" id="off3"></div>

<script>
/*когда нажали на переключатель*/
document.getElementById("off3").onclick = function(){
/*присваиваем переменной off3 значения элемента с ID=off3*/
var off3 = document.getElementById("off3");
/*если имя стиля элемента с ID=off3 равно "switch-btn3", то посылаем в МК false*/
if(off3.className=="switch-btn3"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем true в ESP из веб");
sUH("S3",true);
}
/*иначе если имя стиля элемента с ID=off3 равно "switch-btn3 switch-on3", то посылаем в МК true*/
else if (off3.className=="switch-btn3 switch-on3"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем false в ESP из веб");
sUH("S3",false);
}
}
</script>



/*когда из ESP приходит переменная v и ее значение 1*/
if (v==1 && Rtrigger3==0){
/*то присваиваем переключателю с ID=off3 класс с именем switch-btn3 switch-on3*/
document.getElementById("off3").className="switch-btn3 switch-on3";
Rtrigger3=1;
}
/*когда из ESP приходит переменная v и ее значение 0*/
else if (v==0 && Rtrigger3==1){
/*то присваиваем переключателю с ID=off3 класс с именем switch-btn3*/
document.getElementById("off3").className="switch-btn3";
Rtrigger3=0;
}
///////////////////////////////
<!--html код переключателя -->
<div class="switch-btn4" id="off4"></div>

<script>
/*когда нажали на переключатель*/
document.getElementById("off4").onclick = function(){
/*присваиваем переменной off4 значения элемента с ID=off4*/
var off4 = document.getElementById("off4");
/*если имя стиля элемента с ID=off4 равно "switch-btn4", то посылаем в МК false*/
if(off4.className=="switch-btn4"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем true в ESP из веб");
sUH("S4",true);
}
/*иначе если имя стиля элемента с ID=off4 равно "switch-btn4 switch-on4", то посылаем в МК true*/
else if (off4.className=="switch-btn4 switch-on4"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем false в ESP из веб");
sUH("S4",false);
}
}
</script>



/*когда из ESP приходит переменная v и ее значение 1*/
if (v==1 && Rtrigger4==0){
/*то присваиваем переключателю с ID=off4 класс с именем switch-btn4 switch-on4*/
document.getElementById("off4").className="switch-btn4 switch-on4";
Rtrigger4=1;
}
/*когда из ESP приходит переменная v и ее значение 0*/
else if (v==0 && Rtrigger4==1){
/*то присваиваем переключателю с ID=off4 класс с именем switch-btn4*/
document.getElementById("off4").className="switch-btn4";
Rtrigger4=0;
}
////////////////////////////////
<!--html код переключателя -->
<div class="switch-btn5" id="off5"></div>

<script>
/*когда нажали на переключатель*/
document.getElementById("off5").onclick = function(){
/*присваиваем переменной off значения элемента с ID=off5*/
var off5 = document.getElementById("off5");
/*если имя стиля элемента с ID=off5 равно "switch-btn5", то посылаем в МК false*/
if(off5.className=="switch-btn5"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем true в ESP из веб");
sUH("S5",true);
}
/*иначе если имя стиля элемента с ID=off5 равно "switch-btn5 switch-on5", то посылаем в МК true*/
else if (off5.className=="switch-btn5 switch-on5"){
/*вывод в консоль браузера для отладки*/
console.log("-отправляем false в ESP из веб");
sUH("S5",false);
}
}
</script>


/*когда из ESP приходит переменная v и ее значение 1*/
if (v==1 && Rtrigger5==0){
/*то присваиваем переключателю с ID=off5 класс с именем switch-btn5 switch-on5*/
document.getElementById("off5").className="switch-btn5 switch-on5";
Rtrigger5=1;
}
/*когда из ESP приходит переменная v и ее значение 0*/
else if (v==0 && Rtrigger5==1){
/*то присваиваем переключателю с ID=off5 класс с именем switch-btn5*/
document.getElementById("off5").className="switch-btn5";
Rtrigger5=0;
}
[/spoiler]

[karen]

28.02.2022
css optimized -https://css.github.io/csso/csso.html
script optimized -https://closure-compiler.appspot.com/home

[cmept-27]

Может кому пригодиться

01.png

02.png

03.png

1.flp

[karen]

Может кому пригодиться
01.png
02.png
03.png
1.flp

Воо, то что нужно. Как раз искал как можно ws2812 градиент сделать. Спасибо

[JonyBest]

Вот не плохой дизайн кнопок, только не разберусь как их ряд по горизонтали несколько штук поставить...

Снимок.JPG

https://codepen.io/jony26/pen/vYWpxMa?editors=0011

[karen]

Вот не плохой дизайн кнопок, только не разберусь как их ряд по горизонтали несколько штук поставить...
Снимок.JPG
https://codepen.io/jony26/pen/vYWpxMa?editors=0011

С помощью flex - contener
Тут где-то в проектах в начале посмотрите примеры.

[karen]

все мы любим наш Webupdats так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------

[artemka19]

Доступ к файловой системе еспшки из веб-интерфейса (на стоковом сервере):

GIFка

bandicam-2022-03-05-22-06-31-958.gif

[spoiler]

filesystem-форум.flp

data.rar

иконки.rar

tool.rar

[/spoiler]

инструкция:
ЭТО НУЖНО СДЕЛАТЬ ОДИН РАЗ:
на примере флпрог-портабл:
-идем по пути \PortableFLProg_7-4-6_Win64\ideV8\tools
-здесь создаем папки ESP32FS и ESP8266FS
-в каждой из этих папок создаем папку tool
-кладем esp8266fs.jar и esp32fs.jar в соответствующие папки
-теперь после запуска/перезапуска Ардуино ИДЕ, в разделе "инструменты"
у нас должны появится пункты "ESP32 Sketch Data Upload" и "ESP8266 Sketch Data Upload"
-Теперь после компиляции в флпрог и загрузки Ардуино ИДЕ из флпрог, выбираем "скетч"->"показать папку скетча"
-в открывшееся окно папки копируем папку "data" из вложения.
-выбираем в меню "инструменты" пункт "Flash Size 1 MB"
-нажимаем на "ESP8266 Sketch Data Upload"
-происходит загрузка файлов в файловую систему
------------------------------------------------------------------------
-теперь можно загрузить сам проект в еспшку.

[petroua]

давно хотел такую возможность иметь
а вы сделали это еще и из стокового вебинтерфейса
спс+

[sergserg]

давно хотел такую возможность иметь

да это еще мягко говоря!!!

[karen]

Может кому пригодиться
01.png
02.png
03.png
1.flp

День добрый, слайдер и color box в отладке работают в реале на 8266 не работают, то-есть анимация отрабатывает но с них выхода нет.

[cmept-27]

[ref]karen[/ref], На 8266 не испытывал. А на ESP32 работало.

[GPL]

все мы любим наш Webupdats так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------

Помоги пожалуйста понять как этим пользоваться
Пробовал создать проект для 8266
Создал точку и запустил ВЕБ и включил прошивку по wifi
далее запустил сервер и вывел на браузер
но там стандартный интерфейс программы

[karen]

все мы любим наш Webupdats так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------

Помоги пожалуйста понять как этим пользоваться
Пробовал создать проект для 8266
Создал точку и запустил ВЕБ и включил прошивку по wifi
далее запустил сервер и вывел на браузер
но там стандартный интерфейс программы

Значит ide либу берет с другого места.
Включаем в ide отображения всего и компилим в конце видно все что по два и где расположены.

[GPL]

Я на веб отладчике это пробую без железа

[karen]

Я на веб отладчике это пробую без железа

Этот сервер поднимается для обновления с помощью bin. Чтобы поднять его нужен "ПБ" есть на форуме.