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

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

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

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

#61

Сообщение aidar_i » 12.05.2022{, 10:26}

artemka19 писал(а): ↑
12.05.2022{, 00:15}
 вот, возможно, и ответ на моргание)))
СпойлерПоказать

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

<!DOCTYPE HTML><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><script type="text/javascript" src="/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=fqZD0_12JmLu7y9FEgsU9GewzwcKGEiavDv4LQMegkwTTcYYumSREZV9OEHzhv9w" charset="UTF-8"></script></head><body>
<script>function GP_click(arg){var xhttp=new XMLHttpRequest();var v;
if(arg.type=="checkbox")v=arg.checked?'1':'0';
else v=arg.value;
if(v.charAt(0)=='#')v=v.substring(1);
xhttp.open("POST","GP_click?"+arg.name+"="+v,true);xhttp.send();}
function GP_clickid(btn,tar){var xhttp=new XMLHttpRequest();
xhttp.open("POST","GP_click?"+btn+"="+document.getElementById(tar).value,true);xhttp.send();
}</script>
<p id="statusconnect" style="margin-left:-8px; margin-right:-8px; text-align:center; color:black; font-weight:700; line-height:1.3; background-color:#999;">Нет связи!</p>
<script>
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() {
clearTimeout(timerId01);
if (xhr01.readyState == 4 && xhr01.status == 200) {
console.log("xhr01.status = 200");
document.getElementById("statusconnect").innerHTML = "Подключено";
status01 = document.getElementById("statusconnect");
status01.style.background = "lime";
}
if (xhr01.status != 200) {
console.log("xhr01.status != 200");
document.getElementById("statusconnect").innerHTML = "Нет связи";
status01 = document.getElementById("statusconnect");
status01.style.background = "red";
}
timerId01 = setTimeout(get01, 2000);
}
xhr01.ontimeout = function() {
clearTimeout(timerId01);
console.log("timeout")
document.getElementById("statusconnect").innerHTML = "Нет связи";
status01 = document.getElementById("statusconnect");
status01.style.background = "red";
timerId01 = setTimeout(get01, 2000);
};
function handleVisibilityChange() {
clearTimeout(timerId01);
console.log("vidimost stranicy izmenilas");
timerId01 = setTimeout(get01, 2000);
}
</script>
<div align="center" style="margin:auto;max-width:1000px;">
<style type="text/css">
#blockBack>input[type="password"]{background:#13161a}
#blockBack>input[type="text"]{background:#13161a}
#blockBack>input[type="date"]{background:#13161a}
#blockBack>input[type="time"]{background:#13161a}
#blockBack>input[type="number"]{background:#13161a}
#blockBack>select{background:#13161a}
body {font-family:sans-serif;background:#13161a;color:#bbb;margin-top:15px;}
hr {width:95%;margin-bottom:10px;border:none;border-top:2px solid #394048;max-width:400px;}
h2 {margin:8px 0;}
span {font-size:20px;}
label {font-size:20px;margin:0 5px;}
.chartBlock {border-radius:15px;margin:10px;width:90%;max-width:1000px;height:500px}
.block {border-radius:10px;border:1px solid #394048;background-color:#2a2d35;padding:0px;margin-top:3px;margin-bottom:15px;width:90%;max-width:400px;}
.blockHeader {font-size:20px;color:#4b4e58;border-radius:10px 10px 0px 0px;border-bottom:1px solid #394048;background-color:#090b0f;padding:4px 0px;margin:0px;margin-bottom:8px;width:100%;}
.sldBlock{width:90%;display:flex;flex-direction:row;justify-content:right;align-items:center}.sldLbl{font-size:15px;}input[type="number"],input[type="text"],input[type="password"],input[type="date"],input[type="time"],input[type="range"],input[type="color"],input[type="checkbox"],select,textarea
{border-radius:8px;max-width:350px;padding:3px 10px;color:#bbb;border:none;background-color:#2a2d35;vertical-align:middle;position:relative;margin:2px 0 7px 0;font-size:20px;height:40px;cursor:pointer;}
input[type="range"] {width:60%;height:30px;padding:0px;}
input[type="date"],input[type="time"] {width:180px;}
input[type="color"] {width:100px;height:40px;}
input[type="checkbox"] {width:27px;height:27px;margin-bottom:10px;}
input[type="number"],input[type="text"],input[type="password"],select,textarea {display:inline-block;border-radius:8px;box-sizing:border-box;cursor:auto;}
input[type="button"] {max-width:350px;height:60px;font-size:28px;width:90%;margin:8px 5px;border:none;border-radius:8px;color:white;cursor:pointer;padding:0px 10px;}
.push_but {box-shadow: 1px 1px 0 #ccc,2px 2px 0 #c9c9c9,3px 4px 0 #bbb, -1px 1px 0 #ccc,-2px 2px 0 #c9c9c9,-3px 4px 0 #bbb!important;}
.green_4CAF50 {background-color:#4CAF50!important;}
.green_4CAF50:hover {background-color:#45a049 !important;}
.blue_264280 {background-color:#264280 !important;}
.blue_264280:hover {background-color:#1d315f !important;}
.cyan_16747a {background-color:#16747a !important;}
.cyan_16747a:hover {background-color:#115b60 !important;}
.yellow_c79536 {background-color:#c79536 !important;}
.yellow_c79536:hover {background-color:#a97f2e !important;}
.grey_777777 {background-color:#777777 !important;}
.grey_777777:hover {background-color:#606060 !important;}
.red_a5381b {background-color:#a5381b !important;}
.red_a5381b:hover {background-color:#8b2f17 !important;}
.purpe_5c3580 {background-color:#5c3580 !important;}
.purpe_5c3580:hover {background-color:#452760 !important;}
.red_gradient {background:linear-gradient(top,#f58f99,#bf1e2e)!important;background:-webkit-linear-gradient(top,#f58f99,#bf1e2e)!important; /* для Chrome и Safari */background:-o-linear-gradient(top,#f58f99,#bf1e2e)!important; /* для Opera */background:-moz-linear-gradient(top,#f58f99,#bf1e2e)!important; /* для Firefox */background:-ms-linear-gradient(top,#f58f99,#bf1e2e)!important; /* для IE10+ */color: #000!important;text-decoration: none!important;}
.red_gradient:hover{ background:linear-gradient(bottom,#f58f99,#bf1e2e)!important; background:-webkit-linear-gradient(bottom, #f58f99 5%,#bf1e2e)!important; /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#f58f99,#bf1e2e)!important;/* для Opera */ background:-moz-linear-gradient(bottom,#f58f99,#bf1e2e)!important; /* для Firefox */ background:-ms-linear-gradient(bottom,#f58f99,#bf1e2e)!important; /* для IE10+ */ text-decoration: none!important;}
.green_gradient {background:linear-gradient(top,#9ACD32,#228B22)!important;background:-webkit-linear-gradient(top,#9ACD32,#228B22)!important;/* для Chrome и Safari */ background:-o-linear-gradient(top,#f4da71,#cca509)!important; /* для Opera */ background:-moz-linear-gradient(top,#f4da71,#cca509)!important; /* для Firefox */ background:-ms-linear-gradient(top,#f4da71,#cca509)!important; /* для IE10+ */color: #fff!important;text-decoration: none!important; }
.green_gradient:hover {background:linear-gradient(bottom,#9ACD32,#228B22)!important;background:linear-gradient(bottom,#9ACD32,#228B22)!important;  background:-webkit-linear-gradient(bottom, #9ACD32 5%,#228B22)!important;/* для Chrome и Safari */ background:-o-linear-gradient(bottom,#9ACD32,#228B22)!important; /* для Opera */ background:-moz-linear-gradient(bottom,#9ACD32,#228B22)!important; /* для Firefox */ background:-ms-linear-gradient(bottom,#9ACD32,#228B22)!important; /* для IE10+ */text-decoration: none!important;}
.yellow {background:linear-gradient(top,#f4da71,#cca509)!important; background:-webkit-linear-gradient(top,#f4da71,#cca509)!important; /* для Chrome и Safari */ background:-o-linear-gradient(top,#f4da71,#cca509)!important; /* для Opera */ background:-moz-linear-gradient(top,#f4da71,#cca509)!important; /* для Firefox */ background:-ms-linear-gradient(top,#f4da71,#cca509)!important; /* для IE10+ */ color: #fff!important; text-decoration: none!important;}
.yellow_gradient {background:linear-gradient(top,#f4da71,#cca509)!important; background:-webkit-linear-gradient(top,#f4da71,#cca509)!important; /* для Chrome и Safari */ background:-o-linear-gradient(top,#f4da71,#cca509)!important; /* для Opera */ background:-moz-linear-gradient(top,#f4da71,#cca509)!important; /* для Firefox */ background:-ms-linear-gradient(top,#f4da71,#cca509)!important; /* для IE10+ */ color: #fff!important; text-decoration: none!important;}
.yellow_gradient:hover { background:linear-gradient(bottom,#f4da71,#cca509)!important;background:-webkit-linear-gradient(bottom, #f4da71 5%,#cca509)!important; /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#f4da71,#cca509)!important; /* для Opera */ background:-moz-linear-gradient(bottom,#f4da71,#cca509)!important; /* для Firefox */ background:-ms-linear-gradient(bottom,#f4da71,#cca509)!important; /* для IE10+ */ text-decoration: none!important;}
.push_but:hover {text-decoration: none!important;color: #fff!important!important;} 
.push_but:active {box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)inset!important;box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)inset!important; -moz-transform: translatey(3px)!important; /* Для Firefox */ -ms-transform: translatey(3px)!important; /* Для IE */ -webkit-transform: translatey(3px)!important; /* Для Safari, Chrome, iOS */ -o-transform:translatey(3px)!important; /* Для Opera */transform: translatey(3px)!important;}
.push_butmini {height:40px !important;font-size:20px!important;width:auto!important;box-shadow: 1px 1px 0 #ccc,2px 2px 0 #c9c9c9,3px 4px 0 #bbb, -1px 1px 0 #ccc,-2px 2px 0 #c9c9c9,-3px 4px 0 #bbb!important;}
.push_butmini:hover {text-decoration: none!important;color: #fff!important!important;} 
.push_butmini:active {box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)inset!important;box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1)inset!important; -moz-transform: translatey(3px)!important; /* Для Firefox */ -ms-transform: translatey(3px)!important; /* Для IE */ -webkit-transform: translatey(3px)!important; /* Для Safari, Chrome, iOS */ -o-transform:translatey(3px)!important; /* Для Opera */transform: translatey(3px)!important;}
input:focus,select,textarea:focus{outline:none;}textarea {width: 100%;}.led {margin:20px 18px;}
.led:after {width:25px;height:25px;border-radius:25px;top:-10px;left:-9px;position:relative;content:'';display:inline-block;border:2px solid;border-color:#858585;background-color:#121212}
.led:checked:after {box-shadow:0px 0px 10px 4px;}
.led.red:checked:after {border-color:red !important;color:red !important;background-color:red !important;}
.led.green:checked:after {border-color:lime !important;color:lime !important;background-color:lime !important;}
.switch{margin:10px 0 5px;position:relative;display:inline-block;width:60px;height:34px}
.switch input{opacity:0;width:0;height:0}
.slider{border-radius:34px;position:absolute;cursor:pointer;top:-5px;left:0;right:0;bottom:5px;background-color:#54545485;-webkit-transition:.1s;transition:.1s}
.slider:before{border-radius:50%;position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.1s;transition:.1s}
input:checked+.slider{background-color:#2196f3}
input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}
.sldLblValue{font-size:20px;padding:8px;border-radius:10px;background-color:#13161a;}
input[type="number"],input[type="text"],input[type="password"],select,textarea {-webkit-appearance:none;-moz-appearance:none;appearance:none;}
select {background:#bfb6a5 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENBQkRDMEJDMjlDMTFFQzg2OURGQTlDNjQ3RDQyM0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENBQkRDMENDMjlDMTFFQzg2OURGQTlDNjQ3RDQyM0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0FCREMwOUMyOUMxMUVDODY5REZBOUM2NDdENDIzRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0FCREMwQUMyOUMxMUVDODY5REZBOUM2NDdENDIzRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqJUiOEAAACLSURBVHja7NcrEoAwDEVR+oalYLCsCoPFAhaLYblsgE9p3kzNrey0yYEkoqnrh7WpuNRUXgAAAAAAAACA9m7zPPbFnWic5i37Dzwddid/LYEL8RVHkcvR5FlNWIrIvSdnsJLzcgf9i5Xzy0rKJVdtS3tFjgaLTIuiIxYd1cTTDAAAAAAAAKgNuAQYADtsKkMjKaCDAAAAAElFTkSuQmCC') no-repeat right center;-webkit-background-size: 32px 42px; padding-right: 42px;}
</style>
<input class="push_butmini red_gradient" type="button" value="КНОПКА d4 gpio2" name="btn_mini-001" onclick="GP_click(this)">
<input class="push_butmini cyan_16747a" type="button" value="Ребут ESP" name="btn_mini-002" onclick="GP_click(this)">
<br>
<br>
<br>
</div></body></html>
Проверял на 2х разных ЕСП, моргает.
Вернуться к началу
artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

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

#62

Сообщение artemka19 » 12.05.2022{, 10:36}

aidar_i, так а где скрин консоли с отладочными сообщениями?)
Вернуться к началу
aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:
Контактная информация пользователя aidar_i

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

#63

Сообщение aidar_i » 12.05.2022{, 11:16}

artemka19 писал(а): ↑
12.05.2022{, 10:36}
 aidar_i, так а где скрин консоли с отладочными сообщениями?)
СпойлерПоказать
IMG_20220512_131509.jpg
Вернуться к началу
artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

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

#64

Сообщение artemka19 » 12.05.2022{, 14:03}

aidar_i,
судя по скрину, из четырех запросов к серверу есп, сервер только один раз отвечает с кодом 200.

чем то занят значит сервер во время запроса.
проект нужен. можно сюда или в лс.

еще там на скрине ошибки от скрипта "disk-button.min.js" - это скрипт яндекс диска. Вот только что он делает на странице еспшки)
Последний раз редактировалось artemka19 12.05.2022{, 14:18}, всего редактировалось 1 раз.
Вернуться к началу
artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

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

#65

Сообщение artemka19 » 12.05.2022{, 14:16}

должно быть так в консоли:
СпойлерПоказать
16523541001303058541444121153807.jpg
Вернуться к началу
aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:
Контактная информация пользователя aidar_i

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

#66

Сообщение aidar_i » 12.05.2022{, 17:39}

aidar_i писал(а): ↑
12.05.2022{, 11:16}
проект нужен.
Проект Ваш загрузил.
На счёт ошибки, не знаю.
Вернуться к началу
aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:
Контактная информация пользователя aidar_i

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

#67

Сообщение aidar_i » 13.05.2022{, 21:14}

Выложил отдельной темой последние наработки здесь.
Скачанные библиотеки и блоки с этой темы удалите для использования новых.
Вернуться к началу
Ответить

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