Страница 3 из 4
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 04.05.2022{, 21:24}
artemka19
aidar_i,
как с версией #2 библиотеки обстоят дела со морганием статуса?
*просьба скачавшим версию #2 библиотеки - отпишитесь как у вас с морганием статуса дела обстоят?
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 05.05.2022{, 16:34}
aidar_i
artemka19 писал(а): ↑04.05.2022{, 21:24}
aidar_i,
как с версией #2 библиотеки обстоят дела со морганием статуса?
*просьба скачавшим версию #2 библиотеки - отпишитесь как у вас с морганием статуса дела обстоят?
Пока, стабильно, моргает!
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 05.05.2022{, 19:58}
Psix_anp
А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 05.05.2022{, 21:58}
aidar_i
Psix_anp писал(а): ↑05.05.2022{, 19:58}
А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало
Нет, нужно добавить.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 05.05.2022{, 23:58}
artemka19
aidar_i писал(а): ↑05.05.2022{, 21:58}
Нет, нужно добавить
на мой конечно взгляд, нужно добавить обратную связь с МК.
Иначе какой смысл жать кнопку, не зная прошла ли команда на МК.
Насколько я понял, в Гайвер.Портале нет реализации этого
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 06.05.2022{, 00:05}
artemka19
artemka19 писал(а): ↑04.05.2022{, 00:37}
, нужно добавить обратную связь с МК
и в конце концов, добавляя различные плюшки, мы получим ровно то же самое, что и в штатном веб интерфейсе, но в гораздо более урезанном варианте.
Причем без возможности отладки/предпросмотра страницы.
Другими словами - это тупиковый путь. имхо.
без обид)))
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 06.05.2022{, 05:33}
aidar_i
artemka19, я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 06.05.2022{, 22:28}
Psix_anp
aidar_i писал(а): ↑06.05.2022{, 05:33}
artemka19, я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.
Осталось, чтоб Сергей реализовал?
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 06.05.2022{, 23:01}
aidar_i
Psix_anp писал(а): ↑06.05.2022{, 22:28}
Осталось, чтоб Сергей реализовал?
Нет, самим пользователем.
Отправлено спустя 1 минуту 44 секунды:
aidar_i писал(а): ↑06.05.2022{, 23:01}
на мой конечно взгляд, нужно добавить обратную связь с МК.
Кнопку прицепить к led , вот вам и обратная связь!
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 07.05.2022{, 01:21}
artemka19
aidar_i писал(а): ↑06.05.2022{, 23:03}
Кнопку прицепить к led , вот вам и обратная связь
уже увидел))
добавить еще ajax_update при сборке странице не забыть)
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 07.05.2022{, 11:13}
artemka19
Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения
- 1.png (8.92 КБ) 1026 просмотров
демо проект:
Библиотека:
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 07.05.2022{, 11:46}
aidar_i
Сделал привязку кнопок по краям.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 08.05.2022{, 15:53}
aidar_i
artemka19 писал(а): ↑04.05.2022{, 00:37}
Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения
Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.
У меня так и моргает.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 08.05.2022{, 18:10}
artemka19
aidar_i писал(а): ↑08.05.2022{, 15:53}
меня так и моргает
скрин консоли браузера нужен
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 08.05.2022{, 22:50}
artemka19
aidar_i писал(а): ↑08.05.2022{, 15:53}
Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.
не понимаю.
как можно добавить скрипт штатными средствами в блоки led red и led green?
в эти боки передаются значения из МК.
в статус-коннекте же опрашивается сервер в МК ИЗ БРАУЗЕРА, и к переменным в МК нет доступа.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 08.05.2022{, 22:55}
artemka19
aidar_i писал(а): ↑08.05.2022{, 15:53}
У меня так и моргает.
без скрина консоли в браузере проблематично разобраться: там должны быть определенные сообщения, которые я оставил в скрипте для дебага.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 11.05.2022{, 20:29}
chmak2007
Как можно перемещать выключатели, LED и тд. по координатами?
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 11.05.2022{, 23:17}
artemka19
блоками break и space, хотя это не совсем по координатам)
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 11.05.2022{, 23:43}
aidar_i
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 и тд. по координатами?
Для кнопок сделал справа и слева, по координатам можно, но сложновато для меня.
Простой конструктор веб интерфейса для esp8266 и ESP32
Добавлено: 12.05.2022{, 00:06}
artemka19
aidar_i писал(а): ↑11.05.2022{, 23:45}
Вот скопировал с консоли
вот, возможно, и ответ на моргание)))
это скрипт из старой библиотеки.
в последней мною выложенной (_izm3) он выглядит так:
"<script>\n"
"var xhr01 = 0;\n"
"var timerId01 = 0;\n"
"var status01=0;\n"
"get01();\n"
"function get01() {\n"
"clearTimeout(timerId01);\n"
"xhr01 = new XMLHttpRequest();\n"
"xhr01.open(\"GET\", \"\", true);\n"
"xhr01.timeout = 2000;\n"
"xhr01.send();\n"
"xhr01.addEventListener(\"readystatechange\", processRequest, true);\n"
"}\n"
"document.addEventListener(\"visibilitychange\", handleVisibilityChange, false);\n"
"function processRequest() {\n"
"clearTimeout(timerId01);\n"
"if (xhr01.readyState == 4 && xhr01.status == 200) {\n"
"console.log(\"xhr01.status = 200\");\n"
"document.getElementById(\"statusconnect\").innerHTML = \"\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e\";\n"
"status01 = document.getElementById(\"statusconnect\");\n"
"status01.style.background = \"lime\";\n"
"}\n"
"if (xhr01.status != 200) {\n"
"console.log(\"xhr01.status != 200\");\n"
"document.getElementById(\"statusconnect\").innerHTML = \"\u041d\u0435\u0442 \u0441\u0432\u044f\u0437\u0438\";\n"
"status01 = document.getElementById(\"statusconnect\");\n"
"status01.style.background = \"red\";\n"
"}\n"
"timerId01 = setTimeout(get01, 2000);\n"
"}\n"
"xhr01.ontimeout = function() {\n"
"clearTimeout(timerId01);\n"
"console.log(\"timeout\")\n"
"document.getElementById(\"statusconnect\").innerHTML = \"\u041d\u0435\u0442 \u0441\u0432\u044f\u0437\u0438\";\n"
"status01 = document.getElementById(\"statusconnect\");\n"
"status01.style.background = \"red\";\n"
"timerId01 = setTimeout(get01, 2000);\n"
"};\n"
"function handleVisibilityChange() {\n"
"clearTimeout(timerId01);\n"
"console.log(\"vidimost stranicy izmenilas\");\n"
"timerId01 = setTimeout(get01, 2000);\n"
"}\n"
"</script>\n"
);
}
И именно там имеются такие, например, строки как "console.log(\"xhr01.status != 200\");\n", позволяющие дебажить работу скрипта)
Отправлено спустя 8 минут 26 секунд:
Чтобы посмотреть отладочные сообщения консоли в браузере Хром например, нужно: правой клавишей мыши -> просмотреть код -> Console (сверху надпись).
Там будут появляться надписи. (если конечно библиотека версии _izm3 установлена была)
вот этот скрин и нужен)