Простой конструктор веб интерфейса для esp8266 и ESP32

От Алекс Гайвер. https://github.com/GyverLibs/GyverPortal/tree/7ba61a44fbf1224095980736638c6c551f9837b2

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#41

Сообщение artemka19 » 04.05.2022{, 00:37}

подправил скрипт Статуса соединения с есп (переименовал переменные чтоб не пересекались с Гайверовскими и пр.)

демо-видео:
https://disk.yandex.ru/i/BSJGJsJTUC0nAg

Библиотека и демо-проект из видео:
СпойлерПоказать
GyverPortal_izm2.7z
bandicam 2022-05-04 00-30-28-973.mp4
Для скачивания вложений Вы должны быть зарегистрированы.
Последний раз редактировалось artemka19 07.05.2022{, 11:35}, всего редактировалось 1 раз.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#42

Сообщение artemka19 » 04.05.2022{, 21:24}

aidar_i,
как с версией #2 библиотеки обстоят дела со морганием статуса?

*просьба скачавшим версию #2 библиотеки - отпишитесь как у вас с морганием статуса дела обстоят?

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#43

Сообщение aidar_i » 05.05.2022{, 16:34}

artemka19 писал(а):
04.05.2022{, 21:24}
aidar_i,
как с версией #2 библиотеки обстоят дела со морганием статуса?

*просьба скачавшим версию #2 библиотеки - отпишитесь как у вас с морганием статуса дела обстоят?
Пока, стабильно, моргает!

Аватара пользователя
Psix_anp
Рядовой
Сообщения: 46
Зарегистрирован: 03.11.2017{, 17:56}
Репутация: 2
Откуда: Анапа
Имя: Сергей

Простой конструктор веб интерфейса для esp8266 и ESP32

#44

Сообщение Psix_anp » 05.05.2022{, 19:58}

А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#45

Сообщение aidar_i » 05.05.2022{, 21:58}

Psix_anp писал(а):
05.05.2022{, 19:58}
А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало
Нет, нужно добавить.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#46

Сообщение artemka19 » 05.05.2022{, 23:58}

aidar_i писал(а):
05.05.2022{, 21:58}
Нет, нужно добавить
на мой конечно взгляд, нужно добавить обратную связь с МК.
Иначе какой смысл жать кнопку, не зная прошла ли команда на МК.
Насколько я понял, в Гайвер.Портале нет реализации этого

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#47

Сообщение artemka19 » 06.05.2022{, 00:05}

artemka19 писал(а):
04.05.2022{, 00:37}
, нужно добавить обратную связь с МК
и в конце концов, добавляя различные плюшки, мы получим ровно то же самое, что и в штатном веб интерфейсе, но в гораздо более урезанном варианте.
Причем без возможности отладки/предпросмотра страницы.
Другими словами - это тупиковый путь. имхо.

без обид)))

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#48

Сообщение aidar_i » 06.05.2022{, 05:33}

artemka19, я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.

Аватара пользователя
Psix_anp
Рядовой
Сообщения: 46
Зарегистрирован: 03.11.2017{, 17:56}
Репутация: 2
Откуда: Анапа
Имя: Сергей

Простой конструктор веб интерфейса для esp8266 и ESP32

#49

Сообщение Psix_anp » 06.05.2022{, 22:28}

aidar_i писал(а):
06.05.2022{, 05:33}
artemka19, я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.
Осталось, чтоб Сергей реализовал?

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#50

Сообщение aidar_i » 06.05.2022{, 23:01}

Psix_anp писал(а):
06.05.2022{, 22:28}
Осталось, чтоб Сергей реализовал?
Нет, самим пользователем.

Отправлено спустя 1 минуту 44 секунды:
aidar_i писал(а):
06.05.2022{, 23:01}
на мой конечно взгляд, нужно добавить обратную связь с МК.
Кнопку прицепить к led , вот вам и обратная связь!

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#51

Сообщение artemka19 » 07.05.2022{, 01:21}

aidar_i писал(а):
06.05.2022{, 23:03}
Кнопку прицепить к led , вот вам и обратная связь
уже увидел))
добавить еще ajax_update при сборке странице не забыть)

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#52

Сообщение artemka19 » 07.05.2022{, 11:13}

Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения
СпойлерПоказать
1.png
2.png
3.png
4.png
демо проект:
GyverPortal Кнопки_3_форум.flp
Библиотека:
GyverPortal_izm3.7z
Для скачивания вложений Вы должны быть зарегистрированы.

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#53

Сообщение aidar_i » 07.05.2022{, 11:46}

Сделал привязку кнопок по краям.
СпойлерПоказать
IMG-20220506-WA0010.jpg
Для скачивания вложений Вы должны быть зарегистрированы.

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#54

Сообщение aidar_i » 08.05.2022{, 15:53}

artemka19 писал(а):
04.05.2022{, 00:37}
Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения
Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.
У меня так и моргает.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#55

Сообщение artemka19 » 08.05.2022{, 18:10}

aidar_i писал(а):
08.05.2022{, 15:53}
меня так и моргает
скрин консоли браузера нужен

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#56

Сообщение artemka19 » 08.05.2022{, 22:50}

aidar_i писал(а):
08.05.2022{, 15:53}
Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.
не понимаю.
как можно добавить скрипт штатными средствами в блоки led red и led green?
в эти боки передаются значения из МК.
в статус-коннекте же опрашивается сервер в МК ИЗ БРАУЗЕРА, и к переменным в МК нет доступа.
Последний раз редактировалось artemka19 08.05.2022{, 22:57}, всего редактировалось 2 раза.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#57

Сообщение artemka19 » 08.05.2022{, 22:55}

aidar_i писал(а):
08.05.2022{, 15:53}
У меня так и моргает.
без скрина консоли в браузере проблематично разобраться: там должны быть определенные сообщения, которые я оставил в скрипте для дебага.

chmak2007
Сержант
Сообщения: 114
Зарегистрирован: 06.09.2015{, 13:28}
Репутация: -1
Откуда: Саров

Простой конструктор веб интерфейса для esp8266 и ESP32

#58

Сообщение chmak2007 » 11.05.2022{, 20:29}

Как можно перемещать выключатели, LED и тд. по координатами?

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#59

Сообщение artemka19 » 11.05.2022{, 23:17}

блоками break и space, хотя это не совсем по координатам)

aidar_i
Полковник
Сообщения: 2424
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 387
Откуда: Уфа
Имя: Айдар
Контактная информация:

Простой конструктор веб интерфейса для esp8266 и ESP32

#60

Сообщение aidar_i » 11.05.2022{, 23:43}

artemka19 писал(а):
08.05.2022{, 22:55}
aidar_i писал(а):
08.05.2022{, 15:53}
У меня так и моргает.
без скрина консоли в браузере проблематично разобраться: там должны быть определенные сообщения, которые я оставил в скрипте для дебага.
Вот скопировал с консоли

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

var xhr01 = 0;
var timerId01 = 0;
var status01=0;
get01();
function get01() {
clearTimeout(timerId01);
xhr01 = new XMLHttpRequest();
xhr01.open("GET", "", true);
xhr01.timeout = 2000;
xhr01.send();
xhr01.addEventListener("readystatechange", processRequest, true);
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
function processRequest() {
if (xhr01.status == 200) {
document.getElementById("statusconnect").innerHTML = "Подключено";
status01 = document.getElementById("statusconnect");
status01.style.background = "lime";
}
if (xhr01.status != 200) {
document.getElementById("statusconnect").innerHTML = "Нет связи";
status01 = document.getElementById("statusconnect");
status01.style.background = "red";
}
clearTimeout(timerId01);
timerId01 = setTimeout(get01, 2000);
}
xhr01.ontimeout = function() {
document.getElementById("statusconnect").innerHTML = "Нет связи";
status01 = document.getElementById("statusconnect");
status01.style.background = "red";
};
function handleVisibilityChange() {
clearTimeout(timerId01);
timerId01 = setTimeout(get01, 2000);
}
Отправлено спустя 2 минуты 7 секунд:
chmak2007 писал(а):
11.05.2022{, 20:29}
Как можно перемещать выключатели, LED и тд. по координатами?
Для кнопок сделал справа и слева, по координатам можно, но сложновато для меня.

Ответить

Вернуться в «Полезные ссылки»