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

Делимся шаблонами для веб интерфейса.

Аватара пользователя
cmept-27
Сержант
Сообщения: 240
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 61

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

#81

Сообщение cmept-27 » 13.02.2022{, 17:02}

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

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#82

Сообщение DrScorpion86 » 13.02.2022{, 21:45}

cmept-27 писал(а):
13.02.2022{, 17:02}
DrScorpion86, Нужна помощь . Как передать время и дату с веб в контроллер. C <input type="date"> и <input type="time">
Завтра на работу приду и покажу как :smile38:

artemka19
Сержант
Сообщения: 159
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 62
Откуда: Питер
Имя: Артем

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

#83

Сообщение artemka19 » 13.02.2022{, 21:46}

cmept-27,
вот так:
bandicam-2022-02-13-21-31-07-326.gif
останется только в ФЛПрог разобрать строку по ":" и по "-" , перевести в число и закинуть на входы штатного блока установки времени.
для 7.4.4
СпойлерПоказать
установка время-дата из веб.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>
Для скачивания вложений Вы должны быть зарегистрированы.

DrScorpion86
Рядовой
Сообщения: 53
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 29
Имя: Евгений

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

#84

Сообщение DrScorpion86 » 14.02.2022{, 09:09}

artemka19, cmept-27,
А я познал прелесть "структуры" :)
СпойлерПоказать
Без имени-2.jpg
artemka19, чуть сложнее, чем у вас, но уже не нужно разбирать строчку.
СпойлерПоказать
time__0004_Слой 1.jpg
time__0003_Слой 2.jpg
time__0002_Слой 3.jpg
time__0001_Слой 4.jpg
time__0000_Слой 5.jpg
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
Сержант
Сообщения: 159
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 62
Откуда: Питер
Имя: Артем

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

#85

Сообщение artemka19 » 27.02.2022{, 23:18}

1.jpg
СпойлерПоказать
bandicam-2022-02-27-23-03-02-763.gif
2.jpg
7.4.6-несколько-переключателей-чист.flp
т.к. скрипты оптимизированы ( https://closure-compiler.appspot.com/home ), то код скрипта с комментами:
СпойлерПоказать

////////////////////////////////////////////////основная секция скриптов:////////////////////////////////////
/*------эти переменные нужны чтобы стили переключателей не переключались при каждом получении новых данных из контроллера------*/
/* для того чтоб стили не переключались при каждом получении переменной "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;
}
Для скачивания вложений Вы должны быть зарегистрированы.

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#86

Сообщение karen » 28.02.2022{, 01:53}

karen писал(а):
03.02.2022{, 17:33}


:smile9: 28.02.2022
css optimized -https://css.github.io/csso/csso.html
script optimized -https://closure-compiler.appspot.com/home
Для скачивания вложений Вы должны быть зарегистрированы.
karens4

Аватара пользователя
cmept-27
Сержант
Сообщения: 240
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 61

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

#87

Сообщение cmept-27 » 28.02.2022{, 16:30}

Может кому пригодиться
01.png
02.png
03.png
1.flp
Для скачивания вложений Вы должны быть зарегистрированы.
OK

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#88

Сообщение karen » 28.02.2022{, 16:35}

cmept-27 писал(а):
28.02.2022{, 16:30}
Может кому пригодиться
01.png
02.png
03.png
1.flp
Воо, то что нужно. Как раз искал как можно ws2812 градиент сделать. Спасибо 👍
karens4

JonyBest
Сержант
Сообщения: 117
Зарегистрирован: 18.11.2015{, 22:42}
Репутация: 2
Откуда: Близко к Ставрополю
Имя: Евгений

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

#89

Сообщение JonyBest » 28.02.2022{, 17:43}

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

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#90

Сообщение karen » 28.02.2022{, 23:14}

JonyBest писал(а):
28.02.2022{, 17:43}
Вот не плохой дизайн кнопок, только не разберусь как их ряд по горизонтали несколько штук поставить...
Снимок.JPG
https://codepen.io/jony26/pen/vYWpxMa?editors=0011
С помощью flex - contener
Тут где-то в проектах в начале посмотрите примеры. :smile9:
karens4

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#91

Сообщение karen » 01.03.2022{, 16:43}

:smile469: все мы любим наш Webupdats :yes: так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------
Для скачивания вложений Вы должны быть зарегистрированы.
karens4

artemka19
Сержант
Сообщения: 159
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 62
Откуда: Питер
Имя: Артем

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

#92

Сообщение artemka19 » 05.03.2022{, 22:18}

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

GIFка
bandicam-2022-03-05-22-06-31-958.gif
СпойлерПоказать
filesystem-форум.flp
data.rar
иконки.rar
tool.rar
инструкция:
ЭТО НУЖНО СДЕЛАТЬ ОДИН РАЗ:
на примере флпрог-портабл:
-идем по пути \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"
-происходит загрузка файлов в файловую систему
------------------------------------------------------------------------
-теперь можно загрузить сам проект в еспшку.
Для скачивания вложений Вы должны быть зарегистрированы.
Последний раз редактировалось artemka19 06.03.2022{, 00:17}, всего редактировалось 5 раз.

petroua
Рядовой
Сообщения: 43
Зарегистрирован: 07.12.2021{, 17:17}
Репутация: 30
Имя: Петр

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

#93

Сообщение petroua » 05.03.2022{, 23:05}

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

sergserg
Сержант
Сообщения: 202
Зарегистрирован: 25.02.2021{, 14:26}
Репутация: -16
Имя: Сергей

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

#94

Сообщение sergserg » 05.03.2022{, 23:08}

petroua писал(а):
05.03.2022{, 23:05}
давно хотел такую возможность иметь
да это еще мягко говоря!!!

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#95

Сообщение karen » 07.03.2022{, 00:08}

cmept-27 писал(а):
28.02.2022{, 16:30}
Может кому пригодиться
01.png
02.png
03.png
1.flp
День добрый, слайдер и color box в отладке работают в реале на 8266 не работают, то-есть анимация отрабатывает но с них выхода нет.
karens4

Аватара пользователя
cmept-27
Сержант
Сообщения: 240
Зарегистрирован: 08.12.2016{, 15:51}
Репутация: 61

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

#96

Сообщение cmept-27 » 07.03.2022{, 06:02}

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

GPL
Рядовой
Сообщения: 3
Зарегистрирован: 07.03.2022{, 03:17}
Репутация: 0
Имя: Arsen

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

#97

Сообщение GPL » 07.03.2022{, 17:55}

karen писал(а):
01.03.2022{, 16:43}
:smile469: все мы любим наш Webupdats :yes: так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------

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

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#98

Сообщение karen » 07.03.2022{, 18:07}

GPL писал(а):
07.03.2022{, 17:55}
karen писал(а):
01.03.2022{, 16:43}
:smile469: все мы любим наш Webupdats :yes: так вот, решил сделать ещё приятней)
------просто-заменить-------
Идём по
ide\portable\packages\esp8266\hardware\esp8266\3.0.2\libraries\ESP8266HTTPUpdateServer\src
------------------------------------------

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

GPL
Рядовой
Сообщения: 3
Зарегистрирован: 07.03.2022{, 03:17}
Репутация: 0
Имя: Arsen

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

#99

Сообщение GPL » 07.03.2022{, 18:14}

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

Аватара пользователя
karen
Рядовой
Сообщения: 45
Зарегистрирован: 15.01.2016{, 22:45}
Репутация: 26
Откуда: MooN
Имя: Karen
Контактная информация:

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

#100

Сообщение karen » 08.03.2022{, 01:48}

GPL писал(а):
07.03.2022{, 18:14}
Я на веб отладчике это пробую без железа
Этот сервер поднимается для обновления с помощью bin. Чтобы поднять его нужен "ПБ" есть на форуме.
karens4

Ответить

Вернуться в «WEB интерфейс»