Добавить просмотр лога в вебинтерфейсе

dontsovcmc commented 4 years ago

Нужно написать код на JS, который выводил бы в окошко лог подключения. Это нужно, когда по каким-то причинам Ватериус не подключается к роутеру.

UPD: Это решение тоже может помочь: https://github.com/dontsovcmc/waterius/issues/203 (192.168.4.1/tracelog.txt скачивает файл лога)

dontsovcmc commented 4 years ago

view-source:https://waterius.ru/esp/config.html function anim(i) - это эмуляция ответов ESP в t - json. пусть лог будет в поле "log" многострочный. разделитель '\n'

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

dontsovcmc commented 4 years ago

Консоль у взрослых дядек https://github.com/jeelabs/esp-link/blob/master/serial/console.c

dontsovcmc commented 4 years ago

Большое спасибо Владимиру за помощь. Код консоли. Теперь мне надо сделать поддержку в 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&ndash;10&nbsp;секунд погаснет светодиод.</p>
        <p>Нажмите коротко на&nbsp;кнопку, чтобы Ватериус отправил показания на&nbsp;сайт.</p>
        <p>Если не&nbsp;удалось подключиться, начните с&nbsp;начала.</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>

dontsovcmc / waterius

Добавить просмотр лога в вебинтерфейсе #130