Closed dontsovcmc closed 10 months ago
view-source:https://waterius.ru/esp/config.html function anim(i) - это эмуляция ответов ESP в t - json. пусть лог будет в поле "log" многострочный. разделитель '\n'
По нажатию на слово "консоль" на веб странице, появится что-то куда пишутся строчки лога. Каждый запрос к железке - новые строчки добавляются вниз, перемотка.
Консоль у взрослых дядек https://github.com/jeelabs/esp-link/blob/master/serial/console.c
Большое спасибо Владимиру за помощь. Код консоли. Теперь мне надо сделать поддержку в ESP.
<!DOCTYPE html>
<!-- saved from url=(0027)http://192.168.4.1/wifisave -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Попытка подключения</title>
<script>
function g(e) {
return document.getElementById(e);
};
function anim(i) {
var p = setInterval(function () {
var t = '{"state0good": "", "state0bad": "Не подключен", "state1good": "", "state1bad": "Не подключен", "log" : "01-01-2020 trd 123 123 123 sdad dsdsdsd d " }';
if (++i / 5 % 2 > 0) {
t = '{"state0good": "Подключен", "state0bad": "", "state1good": "Подключен", "state1bad": "" , "log" : "01-01-2020 HELLO qwerty qwertyu qwertyy"}';
}
var data = JSON.parse(t);
Object.keys(data).forEach(function (key) {
if(key === 'log'){
//console.log(key, data[key]);
g(key).innerHTML +="\n" +data[key];
}
})
}, 1000);
};
function sTimer(t, elem) {
var timer = t;
var i = setInterval(function () {
elem.textContent = timer;
if (--timer < 0) {
clearInterval(i);
alert('Ватериус выключился. Начните настройку заново, зажав кнопку на 5-10 секунд.');
}
}, 1000);
};
window.onload = function () {
var t = 300;
var i = 0;
elem = document.querySelector('#timerId');
//sTimer(t, elem);
anim(i);
tlog();
};
function showMe() {
var chbox = g('chbox');
var vis = 'none';
if (chbox.checked) {
vis = 'block';
}
g('advanced').style.display = vis;
};
function c(l) {
g('s').value = l.innerText||l.textContent;
g('p').focus();
};
function tlog(){
lc.hidden=!slog.checked
}
function download(filename) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(g('log').innerText));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
<style>
body {
text-align: center;
font-family: Verdana, sans-serif;
width: 304px;
padding: 0 8px;
margin: 0 auto;
}
div {
padding: 5px 0 5px 0
}
.wrap {
text-align: left;
display: inline-block;
min-width: 260px;
max-width: 500px
}
.logo-cont {
display: flex
}
.logo-text {
display: inline;
font-weight: 700;
color: #1655f5;
font-size: 30px;
line-height: 30px;
padding-left: 15px;
margin: 0
}
h1 {
font-size: 50px;
line-height: 50px;
margin-top: 30px;
margin-bottom: 15px;
color: #1655f5
}
h3 {
font: normal 24px/24px Helvetica;
margin: 32px 0 16px;
}
.button-second {
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
text-align: center;
white-space: nowrap;
font-size: 20px;
line-height: 26px;
text-decoration: none;
cursor: pointer;
transition: .5s;
border-radius: 24px;
margin: 20px 0;
padding: 12px 32px;
width: 253px;
color: #1655f5;
background-color: #fff;
border: 1px solid #1655f5;
}
.button-second:hover {
color: #93aef3;
border: 1px solid #93aef3
}
.button-second:active {
color: #0b45d8;
border: 1px solid #0b45d8
}
pre {
border: 1px #93aef3 solid;
overflow: scroll;
max-height: 300px;
width: 100%;
}
pre code {
position: sticky;
bottom: 0;
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
color: #1655f5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body class="dummy1">
<div class="wrap">
<div class="logo-cont">
<div class="logo-img">
<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"
alt="логотип Ватериус">
<rect width="34" height="34" rx="5" transform="matrix(1 0 0 -1 0 34)" fill="black"></rect>
<circle r="6.32686" transform="matrix(1 0 0 -1 9.07588 16.9998)" fill="#1655F5"></circle>
<circle r="6.32686" transform="matrix(1 0 0 -1 24.9226 16.9998)" fill="#F53410"></circle>
</svg>
</div>
<p class="logo-text">Ватериус</p>
</div>
<h1>Настройка</h1>
<h3>Подключение к Wi-Fi</h3>
<p>При успешном подключении через 5–10 секунд погаснет светодиод.</p>
<p>Нажмите коротко на кнопку, чтобы Ватериус отправил показания на сайт.</p>
<p>Если не удалось подключиться, начните с начала.</p>
<form action="/esp/config.html" method="get">
<button class="button-second">Начать с начала</button>
<label class="container" onclick="tlog()">Лог
<input type="checkbox" id="slog" >
<span class="checkmark" ></span>
</label>
</form>
</div>
<div id="lc">
<pre>
<code id="log"></code>
</pre>
<button class="button-second" onclick="download('logfile.txt')">Скачать</button>
</div>
</body>
</html>
Нужно написать код на JS, который выводил бы в окошко лог подключения. Это нужно, когда по каким-то причинам Ватериус не подключается к роутеру.
UPD: Это решение тоже может помочь: https://github.com/dontsovcmc/waterius/issues/203 (192.168.4.1/tracelog.txt скачивает файл лога)