Страница 3 из 4

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

Добавлено: 04 май 2022, 21:24
artemka19
[ref=#ff8000]aidar_i[/ref],
как с версией #2 библиотеки обстоят дела со морганием статуса?

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

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

Добавлено: 05 май 2022, 16:34
aidar_i
artemka19 писал(а): 04 май 2022, 21:24 [ref=#ff8000]aidar_i[/ref],
как с версией #2 библиотеки обстоят дела со морганием статуса?

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

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

Добавлено: 05 май 2022, 19:58
Psix_anp
А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало

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

Добавлено: 05 май 2022, 21:58
aidar_i
Psix_anp писал(а): 05 май 2022, 19:58 А скажите пожалуйста, авторизация на странице есть в блоках? Чтоб не лез туда, кто попало
Нет, нужно добавить.

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

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

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

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

без обид)))

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

Добавлено: 06 май 2022, 05:33
aidar_i
[ref]artemka19[/ref], я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.

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

Добавлено: 06 май 2022, 22:28
Psix_anp
aidar_i писал(а): 06 май 2022, 05:33 [ref]artemka19[/ref], я думаю, можно авторизацию добавить и позиционирование и нормально. Это же простой конструктор.
И эти наработки можно применять в штатном веб интерфейс.
Осталось, чтоб Сергей реализовал?

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

Добавлено: 06 май 2022, 23:03
aidar_i
Psix_anp писал(а): 06 май 2022, 22:28 Осталось, чтоб Сергей реализовал?
Нет, самим пользователем.

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

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

Добавлено: 07 май 2022, 01:21
artemka19
aidar_i писал(а): 06 май 2022, 23:03 Кнопку прицепить к led , вот вам и обратная связь
уже увидел))
добавить еще ajax_update при сборке странице не забыть)

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

Добавлено: 07 май 2022, 11:13
artemka19
Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения

[spoiler]
1.png
2.png
3.png
4.png
демо проект:
GyverPortal Кнопки_3_форум.flp
Библиотека:
GyverPortal_izm3.7z
[/spoiler]

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

Добавлено: 07 май 2022, 11:46
aidar_i
Сделал привязку кнопок по краям.
[spoiler]
IMG-20220506-WA0010.jpg
[/spoiler]

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

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

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

Добавлено: 08 май 2022, 18:10
artemka19
aidar_i писал(а): 08 май 2022, 15:53 меня так и моргает
скрин консоли браузера нужен

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

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

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

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

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

Добавлено: 11 май 2022, 20:29
chmak2007
Как можно перемещать выключатели, LED и тд. по координатами?

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

Добавлено: 11 май 2022, 23:17
artemka19
блоками break и space, хотя это не совсем по координатам)

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

Добавлено: 11 май 2022, 23:45
aidar_i
artemka19 писал(а): 08 май 2022, 22:55
aidar_i писал(а): 08 май 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 май 2022, 20:29 Как можно перемещать выключатели, LED и тд. по координатами?
Для кнопок сделал справа и слева, по координатам можно, но сложновато для меня.

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

Добавлено: 12 май 2022, 00:15
artemka19
aidar_i писал(а): 11 май 2022, 23:45 Вот скопировал с консоли
вот, возможно, и ответ на моргание)))
это скрипт из старой библиотеки.

в последней мною выложенной (_izm3) он выглядит так:
[spoiler]
"<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"
);
}


[/spoiler]

И именно там имеются такие, например, строки как "console.log(\"xhr01.status != 200\");\n", позволяющие дебажить работу скрипта)

Отправлено спустя 8 минут 26 секунд:
Чтобы посмотреть отладочные сообщения консоли в браузере Хром например, нужно: правой клавишей мыши -> просмотреть код -> Console (сверху надпись).
Там будут появляться надписи. (если конечно библиотека версии _izm3 установлена была)
вот этот скрин и нужен)