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

[artemka19]

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

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

[aidar_i]

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

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

Пока, стабильно, моргает!

[Psix_anp]

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

[aidar_i]

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

Нет, нужно добавить.

[artemka19]

Нет, нужно добавить

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

[artemka19]

, нужно добавить обратную связь с МК

и в конце концов, добавляя различные плюшки, мы получим ровно то же самое, что и в штатном веб интерфейсе, но в гораздо более урезанном варианте.
Причем без возможности отладки/предпросмотра страницы.
Другими словами - это тупиковый путь. имхо.

без обид)))

[aidar_i]

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

[Psix_anp]

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

Осталось, чтоб Сергей реализовал?

[aidar_i]

Осталось, чтоб Сергей реализовал?

Нет, самим пользователем.

Отправлено спустя 1 минуту 44 секунды:

на мой конечно взгляд, нужно добавить обратную связь с МК.

Кнопку прицепить к led , вот вам и обратная связь!

[artemka19]

Кнопку прицепить к led , вот вам и обратная связь

уже увидел))
добавить еще ajax_update при сборке странице не забыть)

[artemka19]

Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения

СпойлерПоказать

1.png (8.92 КБ) 1020 просмотров

демо проект:

GyverPortal Кнопки_3_форум.flp

(1.02 МБ) 38 скачиваний

Библиотека:

GyverPortal_izm3.7z

(482.29 КБ) 39 скачиваний

[aidar_i]

Сделал привязку кнопок по краям.

СпойлерПоказать

[aidar_i]

Добавлен вход в блок START, по которому можно включать/выключать отображение статуса соединения

Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.
У меня так и моргает.

[artemka19]

меня так и моргает

скрин консоли браузера нужен

[artemka19]

Почему не сделать это штатными средствами? Есть же системные блоки и блоки led red и led green. Или взять стили с Вашего блока.

не понимаю.
как можно добавить скрипт штатными средствами в блоки led red и led green?
в эти боки передаются значения из МК.
в статус-коннекте же опрашивается сервер в МК ИЗ БРАУЗЕРА, и к переменным в МК нет доступа.

[artemka19]

У меня так и моргает.

без скрина консоли в браузере проблематично разобраться: там должны быть определенные сообщения, которые я оставил в скрипте для дебага.

[chmak2007]

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

[artemka19]

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

[aidar_i]

У меня так и моргает.

без скрина консоли в браузере проблематично разобраться: там должны быть определенные сообщения, которые я оставил в скрипте для дебага.

Вот скопировал с консоли

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

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 секунд:

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

Для кнопок сделал справа и слева, по координатам можно, но сложновато для меня.

[artemka19]

Вот скопировал с консоли

вот, возможно, и ответ на моргание)))
это скрипт из старой библиотеки.

в последней мною выложенной (_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 установлена была)
вот этот скрин и нужен)