Compare commits
6 Commits
effcee1cbb
...
web
| Author | SHA1 | Date | |
|---|---|---|---|
| 629ab310b6 | |||
| 4b5db1d472 | |||
| 4c313d7e9a | |||
| 1a24f57025 | |||
| 501c6f5b95 | |||
| 26bd041b02 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,3 +3,4 @@
|
|||||||
build
|
build
|
||||||
sdkconfig.old
|
sdkconfig.old
|
||||||
desktop.ini
|
desktop.ini
|
||||||
|
.PVS-Studio
|
||||||
@@ -4,6 +4,10 @@
|
|||||||
|
|
||||||
1. [ESP32 ESP-IDF v5.5.1](https://docs.espressif.com/projects/esp-idf/en/v5.5.1/esp32/index.html)
|
1. [ESP32 ESP-IDF v5.5.1](https://docs.espressif.com/projects/esp-idf/en/v5.5.1/esp32/index.html)
|
||||||
|
|
||||||
|
## SAST Tools
|
||||||
|
|
||||||
|
[PVS-Studio](https://pvs-studio.com/pvs-studio/?utm_source=website&utm_medium=github&utm_campaign=open_source) - static analyzer for C, C++, C#, and Java code.
|
||||||
|
|
||||||
## Build and flash
|
## Build and flash
|
||||||
|
|
||||||
Run the following command to firmware build and flash module:
|
Run the following command to firmware build and flash module:
|
||||||
|
|||||||
Submodule components/zh_pcf8574 updated: 1a8f4711e8...de9ece9c0d
BIN
html/favicon.ico
Normal file
BIN
html/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
93
html/index/index.html
Executable file
93
html/index/index.html
Executable file
@@ -0,0 +1,93 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>be1.ru</title>
|
||||||
|
<link rel="stylesheet" href="index_style.css">
|
||||||
|
<link rel="icon" href="favicon.ico" />
|
||||||
|
<script src="index_script.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<input type="checkbox" id="nav-toggle" hidden>
|
||||||
|
<nav class="nav">
|
||||||
|
<label for="nav-toggle" class="nav-toggle" onclick></label>
|
||||||
|
<!-- <h2 class="logo"> -->
|
||||||
|
<p style="text-align:center"> ATE0004
|
||||||
|
<!-- </h2> -->
|
||||||
|
<ul>
|
||||||
|
<li><a href="#1">About</a>
|
||||||
|
<li><a href="#2">Statistics</a>
|
||||||
|
<li><a href="#3">Update</a>
|
||||||
|
<li><a href="#3">Manual</a>
|
||||||
|
<!-- <li><a href="#4">Четыре</a>
|
||||||
|
<li><a href="#5">Пять</a>
|
||||||
|
<li><a href="#6">Шесть</a>
|
||||||
|
<li><a href="#7">Семь</a> -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Маска (затемнение) основного контента при включенной панели
|
||||||
|
по-умолчанию данная фишка не используется, если оно вам надо,
|
||||||
|
просто расккоментируйте div-контейнер ниже -->
|
||||||
|
|
||||||
|
<div class="mask-content"></div>
|
||||||
|
|
||||||
|
<p class="aligncenter"><img alt="logo" src="logo.png" style="height:120px; width:300px" /></p>
|
||||||
|
<p style="text-align:center"><span style="font-size:24px">ATE0004</span></p>
|
||||||
|
<p style="text-align:center">Honeywell Retractable Landing Light CMM 33-42-07 P/N 45-0351-X Motor Test Box by
|
||||||
|
@rick_professor</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="card">
|
||||||
|
<h2>ONBOARD LED GPIO2</h2>
|
||||||
|
<p style="text-align:center" class="no-select"> <button id="button" class="button">Toggle LED</button></p>
|
||||||
|
<p class="state">State: <span id="state">%s</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<main role="main">
|
||||||
|
<div class="content">
|
||||||
|
<div class="card">
|
||||||
|
<!-- <h2>ONBOARD LED GPIO2</h2> -->
|
||||||
|
<p style="text-align:center" class="no-select"> <button id="button" class="button">Thermostat</button>
|
||||||
|
<p style="text-align:center" class="no-select"> <button id="button" class="button">Retract</button>
|
||||||
|
<p style="text-align:center" class="no-select"> <button id="button" class="button">Extend</button>
|
||||||
|
<!-- </p> -->
|
||||||
|
<!-- <p class="state">State: <span id="state">%s</span></p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <article>
|
||||||
|
<header>
|
||||||
|
<h1 class="header__title">Просто Демо:</h1>
|
||||||
|
<h2>Выдвигающееся боковое меню на чистом CSS</h2>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<p style="text-align: center;">
|
||||||
|
<a href="index.html" class="btn btn-primary">Меню Слева</a>
|
||||||
|
<a href="right-slide-panel.html" class="btn btn-secondary">Меню Справа</a>
|
||||||
|
<p>Нажмите на "гамбургер-иконку" в левом или правом верхнем углу, в зависимости от выбранного вами
|
||||||
|
варианта, и вы увидите выдвигающуюся боковую панель в действии. Чаще всего в таких панельках
|
||||||
|
размещают меню навигации по сайту, что собственно мы и сделали. Вы же можете использовать боковую
|
||||||
|
панель, для любого другого элемента, который по вашему разумению, должен быть изначально скрыт,
|
||||||
|
например, форму подписки, блок кнопок социальных сетей, и т.д. и т.п...
|
||||||
|
<p>Работа данного меню построена на чистом CSS, без подключения javascript. Переключение осуществляется
|
||||||
|
с помощью скрытого флажка (checkbox) с использованием псевдокласса :checked из обоймы CSS3</p>
|
||||||
|
<p>С переклюателем панели особо не стал заморачиваться и использовал символ Unicode 'TRIGRAM FOR HEAVEN'
|
||||||
|
(U+2630), с простейшей заменой символа на 'Знак Умножения' (U+2715), когда панель раскрыта. Вам
|
||||||
|
ничего не мешает испльзовать любой другой значок, иконку или просто текст.
|
||||||
|
</section>
|
||||||
|
<hr>
|
||||||
|
<footer>
|
||||||
|
<p><a href="http://dbmast.ru/vydvigayushheesya-bokovoe-menyu-na-chistom-css">← Изучить Детали</a>
|
||||||
|
<p>сделано с любовью - <a href="https://twitter.com/dobrovoi">@dobrovoi</a>
|
||||||
|
</footer>
|
||||||
|
</article> -->
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
40
html/index/index_script.js
Normal file
40
html/index/index_script.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
var gateway = `ws://${window.location.hostname}/ws`;
|
||||||
|
var websocket;
|
||||||
|
window.addEventListener('load', onLoad);
|
||||||
|
function initWebSocket() {
|
||||||
|
console.log('Trying to open a WebSocket connection...');
|
||||||
|
websocket = new WebSocket(gateway);
|
||||||
|
websocket.onopen = onOpen;
|
||||||
|
websocket.onclose = onClose;
|
||||||
|
websocket.onmessage = onMessage; // <-- add this line
|
||||||
|
}
|
||||||
|
function onOpen(event) {
|
||||||
|
console.log('Connection opened');
|
||||||
|
}
|
||||||
|
function onClose(event) {
|
||||||
|
console.log('Connection closed');
|
||||||
|
setTimeout(initWebSocket, 2000);
|
||||||
|
}
|
||||||
|
function onMessage(event) {
|
||||||
|
var state;
|
||||||
|
console.log(event.data);
|
||||||
|
if (event.data == "1") {
|
||||||
|
state = "ON";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
state = "OFF";
|
||||||
|
}
|
||||||
|
document.getElementById('state').innerHTML = state;
|
||||||
|
}
|
||||||
|
function onLoad(event) {
|
||||||
|
initWebSocket();
|
||||||
|
initButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initButton() {
|
||||||
|
document.getElementById('button').addEventListener('click', toggle);
|
||||||
|
}
|
||||||
|
function toggle() {
|
||||||
|
console.log('Click');
|
||||||
|
websocket.send('toggle');
|
||||||
|
}
|
||||||
456
html/index/index_style.css
Normal file
456
html/index/index_style.css
Normal file
@@ -0,0 +1,456 @@
|
|||||||
|
.aligncenter {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* max-width: 320px; */
|
||||||
|
/* background: #bcc5c3; */
|
||||||
|
background: #16a085;
|
||||||
|
/* Максимальная ширина страницы в пикселах */
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 250px;
|
||||||
|
height: 70px;
|
||||||
|
padding: 15px 50px;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
outline: 1px solid #666;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #0ffa6d;
|
||||||
|
border: #0ffa6d;
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-color: #fa0f0f;
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
/* ширна произвольная, не стесняйтесь экспериментировать */
|
||||||
|
width: 320px;
|
||||||
|
min-width: 320px;
|
||||||
|
/* фиксируем и выставляем высоту панели на максимум */
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
/* сдвигаем (прячем) панель относительно левого края страницы */
|
||||||
|
left: -320px;
|
||||||
|
/* внутренние отступы */
|
||||||
|
padding: 15px 20px;
|
||||||
|
/* плавный переход смещения панели */
|
||||||
|
-webkit-transition: left 0.3s;
|
||||||
|
-moz-transition: left 0.3s;
|
||||||
|
transition: left 0.3s;
|
||||||
|
/* определяем цвет фона панели */
|
||||||
|
background: #16a085;
|
||||||
|
/* background: #bcc5c3; */
|
||||||
|
/* поверх других элементов */
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Кнопка переключения панели
|
||||||
|
* тег <label>
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
/* абсолютно позиционируем */
|
||||||
|
position: absolute;
|
||||||
|
/* относительно левого края панели */
|
||||||
|
left: 320px;
|
||||||
|
/* отступ от верхнего края панели */
|
||||||
|
top: 1em;
|
||||||
|
/* внутренние отступы */
|
||||||
|
padding: 0.5em;
|
||||||
|
/* определяем цвет фона переключателя
|
||||||
|
* чаще вчего в соответствии с цветом фона панели
|
||||||
|
*/
|
||||||
|
background: inherit;
|
||||||
|
/* цвет текста */
|
||||||
|
color: #dadada;
|
||||||
|
/* вид курсора */
|
||||||
|
cursor: pointer;
|
||||||
|
/* размер шрифта */
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 1;
|
||||||
|
/* всегда поверх других элементов страницы */
|
||||||
|
z-index: 2001;
|
||||||
|
/* анимируем цвет текста при наведении */
|
||||||
|
-webkit-transition: color .25s ease-in-out;
|
||||||
|
-moz-transition: color .25s ease-in-out;
|
||||||
|
transition: color .25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* определяем текст кнопки
|
||||||
|
* символ Unicode (TRIGRAM FOR HEAVEN)
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav-toggle:after {
|
||||||
|
content: '\2630';
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* цвет текста при наведении */
|
||||||
|
|
||||||
|
.nav-toggle:hover {
|
||||||
|
color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Скрытый чекбокс (флажок)
|
||||||
|
* невидим и недоступен :)
|
||||||
|
* имя селектора атрибут флажка
|
||||||
|
*/
|
||||||
|
|
||||||
|
[id='nav-toggle'] {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* изменение положения переключателя
|
||||||
|
* при просмотре на мобильных устройствах
|
||||||
|
* когда навигация раскрыта, распологаем внутри панели
|
||||||
|
*/
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.nav>.nav-toggle {
|
||||||
|
left: auto;
|
||||||
|
right: 2px;
|
||||||
|
top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Когда флажок установлен, открывается панель
|
||||||
|
* используем псевдокласс:checked
|
||||||
|
*/
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.nav {
|
||||||
|
left: 0;
|
||||||
|
box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
-moz-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
-webkit-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* смещение контента страницы
|
||||||
|
* на размер ширины панели,
|
||||||
|
* фишка необязательная, на любителя
|
||||||
|
*/
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~main>article {
|
||||||
|
-webkit-transform: translateX(320px);
|
||||||
|
-moz-transform: translateX(320px);
|
||||||
|
transform: translateX(320px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* изменение символа переключателя,
|
||||||
|
* привычный крестик (MULTIPLICATION X),
|
||||||
|
* вы можете испльзовать любой другой значок
|
||||||
|
*/
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.nav>.nav-toggle:after {
|
||||||
|
content: '\2715';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* профиксим баг в Android <= 4.1.2
|
||||||
|
* см: http://timpietrusky.com/advanced-checkbox-hack
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* body {
|
||||||
|
-webkit-animation: bugfix infinite 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bugfix {
|
||||||
|
to {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* позаботьтимся о средних и маленьких экранах
|
||||||
|
* мобильных устройств
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media screen and (min-width: 320px) {
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 320px) {
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Формируем стиль заголовка (логотип) панели
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav h2 {
|
||||||
|
width: 90%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.3em;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.1, 0.1);
|
||||||
|
-ms-transform: scale(0.1, 0.1);
|
||||||
|
-moz-transform: scale(0.1, 0.1);
|
||||||
|
-webkit-transform: scale(0.1, 0.1);
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
-ms-transform-origin: 0% 0%;
|
||||||
|
-moz-transform-origin: 0% 0%;
|
||||||
|
-webkit-transform-origin: 0% 0%;
|
||||||
|
transition: opacity 0.8s, transform 0.8s;
|
||||||
|
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
|
||||||
|
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
|
||||||
|
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav h2 a {
|
||||||
|
color: #dadada;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*плавное появление заголовка (логотипа) при раскрытии панели */
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.nav h2 {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
-ms-transform: scale(1, 1);
|
||||||
|
-moz-transform: scale(1, 1);
|
||||||
|
-webkit-transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* формируем непосредственно само меню
|
||||||
|
* используем неупорядоченный список для пунктов меню
|
||||||
|
* прикрутим трансфомации и плавные переходы
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav>ul {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li {
|
||||||
|
line-height: 2.5;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
-ms-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
|
||||||
|
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
|
||||||
|
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
|
||||||
|
transition: opacity .5s .1s, transform .5s .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.nav>ul>li {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
-ms-transform: translateX(0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* определяем интервалы появления пунктов меню */
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(2) {
|
||||||
|
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
|
||||||
|
transition: opacity .5s .2s, transform .5s .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(3) {
|
||||||
|
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
|
||||||
|
transition: opacity .5s .3s, transform .5s .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(4) {
|
||||||
|
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
|
||||||
|
transition: opacity .5s .4s, transform .5s .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(5) {
|
||||||
|
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
|
||||||
|
transition: opacity .5s .5s, transform .5s .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(6) {
|
||||||
|
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
|
||||||
|
transition: opacity .5s .6s, transform .5s .6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li:nth-child(7) {
|
||||||
|
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
|
||||||
|
transition: opacity .5s .7s, transform .5s .7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* оформление ссылок пунктов меню
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav>ul>li>a {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #dadada;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
/* плавный переход */
|
||||||
|
-webkit-transition: color .5s ease, padding .5s ease;
|
||||||
|
-moz-transition: color .5s ease, padding .5s ease;
|
||||||
|
transition: color .5s ease, padding .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* состояние ссылок меню при наведении
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav>ul>li>a:hover,
|
||||||
|
.nav>ul>li>a:focus {
|
||||||
|
color: white;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* линия подчеркивания ссылок меню
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav>ul>li>a:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-transition: width 0s ease;
|
||||||
|
transition: width 0s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li>a:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background: #3bc1a0;
|
||||||
|
-webkit-transition: width .5s ease;
|
||||||
|
transition: width .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* анимируем линию подчеркивания
|
||||||
|
* ссылок при наведении
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav>ul>li>a:hover:before {
|
||||||
|
width: 0%;
|
||||||
|
/* background: #3bc1a0; */
|
||||||
|
-webkit-transition: width .5s ease;
|
||||||
|
transition: width .5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav>ul>li>a:hover:after {
|
||||||
|
width: 0%;
|
||||||
|
background: transparent;
|
||||||
|
-webkit-transition: width 0s ease;
|
||||||
|
transition: width 0s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* фон затемнения на основной контент
|
||||||
|
* при этом элементы блокируютя
|
||||||
|
* спорная такая фича, если оно вам надо
|
||||||
|
* просто раскомментируйте
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
.mask-content {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[id='nav-toggle']:checked~.mask-content {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transition: opacity .5s, visibility .5s;
|
||||||
|
transition: opacity .5s, visibility .5s;
|
||||||
|
}
|
||||||
BIN
html/logo.png
Executable file
BIN
html/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -1 +1,5 @@
|
|||||||
idf_component_register(SRCS "ate0004.c" INCLUDE_DIRS "" REQUIRES zh_pcf8574 esp_wifi nvs_flash zh_ota_server)
|
idf_component_register(SRCS "web_server.c" "ate0004.c" INCLUDE_DIRS "" REQUIRES zh_pcf8574 esp_wifi nvs_flash zh_ota_server EMBED_FILES "../html/index/index.html"
|
||||||
|
"../html/index/index_style.css"
|
||||||
|
"../html/index/index_script.js"
|
||||||
|
"../html/favicon.ico"
|
||||||
|
"../html/logo.png")
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
#include "ate0004.h"
|
#include "ate0004.h"
|
||||||
|
|
||||||
static i2c_master_bus_handle_t _i2c_bus_handle = NULL;
|
static i2c_master_bus_handle_t _i2c_bus_handle = NULL;
|
||||||
static httpd_handle_t _webserver_handle = NULL;
|
// static httpd_handle_t _webserver_handle = NULL;
|
||||||
|
|
||||||
static zh_pcf8574_handle_t _button_handle = {0};
|
static zh_pcf8574_handle_t _button_handle = {0};
|
||||||
static zh_pcf8574_handle_t _led_handle = {0};
|
static zh_pcf8574_handle_t _led_handle = {0};
|
||||||
@@ -12,11 +12,12 @@ static bool _is_ret_enabled = false;
|
|||||||
static bool _is_ext_enabled = false;
|
static bool _is_ext_enabled = false;
|
||||||
|
|
||||||
static void _zh_wifi_softap_init(void);
|
static void _zh_wifi_softap_init(void);
|
||||||
static void _zh_webserver_init(void);
|
|
||||||
static void _zh_gpio_init(void);
|
static void _zh_gpio_init(void);
|
||||||
static void _zh_pcf8574_init(void);
|
static void _zh_pcf8574_init(void);
|
||||||
static void _zh_pcf8574_event_handler(void *arg, esp_event_base_t event_base, int32_t event_id, void *event_data);
|
static void _zh_pcf8574_event_handler(void *arg, esp_event_base_t event_base, int32_t event_id, void *event_data);
|
||||||
|
|
||||||
|
extern void _zh_webserver_init(void);
|
||||||
|
|
||||||
void app_main(void)
|
void app_main(void)
|
||||||
{
|
{
|
||||||
nvs_flash_init();
|
nvs_flash_init();
|
||||||
@@ -41,7 +42,7 @@ static void _zh_wifi_softap_init(void)
|
|||||||
.ap = {
|
.ap = {
|
||||||
.ssid = WIFI_SSID,
|
.ssid = WIFI_SSID,
|
||||||
.password = WIFI_PASS,
|
.password = WIFI_PASS,
|
||||||
.max_connection = 4,
|
.max_connection = MAX_STA_CONNECTION,
|
||||||
.authmode = WIFI_AUTH_WPA2_PSK,
|
.authmode = WIFI_AUTH_WPA2_PSK,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -50,12 +51,12 @@ static void _zh_wifi_softap_init(void)
|
|||||||
esp_wifi_start();
|
esp_wifi_start();
|
||||||
}
|
}
|
||||||
|
|
||||||
static void _zh_webserver_init(void)
|
// static void _zh_webserver_init(void)
|
||||||
{
|
// {
|
||||||
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
// httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
||||||
httpd_start(&_webserver_handle, &config);
|
// httpd_start(&_webserver_handle, &config);
|
||||||
zh_ota_server_init(_webserver_handle);
|
// zh_ota_server_init(_webserver_handle);
|
||||||
}
|
// }
|
||||||
|
|
||||||
static void _zh_gpio_init(void)
|
static void _zh_gpio_init(void)
|
||||||
{
|
{
|
||||||
|
|||||||
202
main/web_server.c
Normal file
202
main/web_server.c
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
#include "esp_wifi.h"
|
||||||
|
#include "esp_http_server.h"
|
||||||
|
|
||||||
|
static httpd_handle_t _webserver_handle = NULL;
|
||||||
|
|
||||||
|
static void _ws_async_send(void *arg);
|
||||||
|
|
||||||
|
static esp_err_t _fav_handler(httpd_req_t *req);
|
||||||
|
static esp_err_t _logo_handler(httpd_req_t *req);
|
||||||
|
|
||||||
|
static esp_err_t _index_page_handler(httpd_req_t *req);
|
||||||
|
static esp_err_t _index_page_css_handler(httpd_req_t *req);
|
||||||
|
static esp_err_t _index_page_js_handler(httpd_req_t *req);
|
||||||
|
static esp_err_t _index_page_ws_handler(httpd_req_t *req);
|
||||||
|
|
||||||
|
// static esp_err_t _ws_send(httpd_handle_t *handle, char *payload);
|
||||||
|
|
||||||
|
static const httpd_uri_t _fav = {
|
||||||
|
.uri = "/favicon.ico",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _fav_handler,
|
||||||
|
.user_ctx = NULL};
|
||||||
|
|
||||||
|
static const httpd_uri_t _logo = {
|
||||||
|
.uri = "/logo.png",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _logo_handler,
|
||||||
|
.user_ctx = NULL};
|
||||||
|
|
||||||
|
static const httpd_uri_t _index_page = {
|
||||||
|
.uri = "/",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _index_page_handler,
|
||||||
|
.user_ctx = NULL};
|
||||||
|
|
||||||
|
static const httpd_uri_t _index_page_css = {
|
||||||
|
.uri = "/index_style.css",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _index_page_css_handler,
|
||||||
|
.user_ctx = NULL};
|
||||||
|
|
||||||
|
static const httpd_uri_t _index_page_js = {
|
||||||
|
.uri = "/index_script.js",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _index_page_js_handler,
|
||||||
|
.user_ctx = NULL};
|
||||||
|
|
||||||
|
static const httpd_uri_t _index_page_ws = {
|
||||||
|
.uri = "/ws",
|
||||||
|
.method = HTTP_GET,
|
||||||
|
.handler = _index_page_ws_handler,
|
||||||
|
.user_ctx = NULL,
|
||||||
|
.is_websocket = true};
|
||||||
|
|
||||||
|
void _zh_webserver_init(void)
|
||||||
|
{
|
||||||
|
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
||||||
|
httpd_start(&_webserver_handle, &config);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_fav);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_logo);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_index_page);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_index_page_css);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_index_page_js);
|
||||||
|
httpd_register_uri_handler(_webserver_handle, &_index_page_ws);
|
||||||
|
// httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
||||||
|
// httpd_start(&_webserver_handle, &config);
|
||||||
|
// zh_ota_server_init(_webserver_handle);
|
||||||
|
}
|
||||||
|
|
||||||
|
void _zh_webserver_send(char *payload)
|
||||||
|
{
|
||||||
|
httpd_queue_work(_webserver_handle, _ws_async_send, payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
static void _ws_async_send(void *arg)
|
||||||
|
{
|
||||||
|
httpd_ws_frame_t ws_package = {0};
|
||||||
|
// struct async_resp_arg *resp_arg = arg;
|
||||||
|
// httpd_handle_t hd = resp_arg->hd;
|
||||||
|
// int fd = resp_arg->fd;
|
||||||
|
|
||||||
|
// led_state = !led_state;
|
||||||
|
// // gpio_set_level(LED_PIN, led_state);
|
||||||
|
|
||||||
|
// char buff[4];
|
||||||
|
// memset(buff, 0, sizeof(buff));
|
||||||
|
// sprintf(buff, "%d", led_state);
|
||||||
|
|
||||||
|
// memset(&ws_package, 0, sizeof(httpd_ws_frame_t));
|
||||||
|
ws_package.payload = (uint8_t *)arg;
|
||||||
|
ws_package.len = strlen(arg);
|
||||||
|
ws_package.type = HTTPD_WS_TYPE_TEXT;
|
||||||
|
|
||||||
|
static size_t max_clients = CONFIG_LWIP_MAX_LISTENING_TCP;
|
||||||
|
size_t fds = max_clients;
|
||||||
|
int client_fds[max_clients];
|
||||||
|
|
||||||
|
esp_err_t ret = httpd_get_client_list(_webserver_handle, &fds, client_fds);
|
||||||
|
|
||||||
|
// if (ret != ESP_OK)
|
||||||
|
// {
|
||||||
|
// return ESP_OK;
|
||||||
|
// }
|
||||||
|
|
||||||
|
for (uint8_t i = 0; i <= fds; ++i)
|
||||||
|
{
|
||||||
|
int client_info = httpd_ws_get_fd_info(_webserver_handle, client_fds[i]);
|
||||||
|
if (client_info == HTTPD_WS_CLIENT_WEBSOCKET)
|
||||||
|
{
|
||||||
|
httpd_ws_send_frame_async(_webserver_handle, client_fds[i], &ws_package);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// free(resp_arg);
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _fav_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
extern const unsigned char favicon_ico_start[] asm("_binary_favicon_ico_start");
|
||||||
|
extern const unsigned char favicon_ico_end[] asm("_binary_favicon_ico_end");
|
||||||
|
const size_t favicon_ico_size = (favicon_ico_end - favicon_ico_start);
|
||||||
|
httpd_resp_set_type(req, "image/x-icon");
|
||||||
|
httpd_resp_send_chunk(req, (const char *)favicon_ico_start, favicon_ico_size);
|
||||||
|
httpd_resp_sendstr_chunk(req, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _logo_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
extern const unsigned char logo_png_start[] asm("_binary_logo_png_start");
|
||||||
|
extern const unsigned char logo_png_end[] asm("_binary_logo_png_end");
|
||||||
|
const size_t logo_png_size = (logo_png_end - logo_png_start);
|
||||||
|
httpd_resp_set_type(req, "image/png");
|
||||||
|
httpd_resp_send_chunk(req, (const char *)logo_png_start, logo_png_size);
|
||||||
|
httpd_resp_sendstr_chunk(req, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _index_page_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
extern const unsigned char index_html_start[] asm("_binary_index_html_start");
|
||||||
|
extern const unsigned char index_html_end[] asm("_binary_index_html_end");
|
||||||
|
const size_t index_html_size = (index_html_end - index_html_start);
|
||||||
|
httpd_resp_set_type(req, "text/html");
|
||||||
|
httpd_resp_send_chunk(req, (const char *)index_html_start, index_html_size);
|
||||||
|
httpd_resp_sendstr_chunk(req, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _index_page_css_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
extern const unsigned char index_style_css_start[] asm("_binary_index_style_css_start");
|
||||||
|
extern const unsigned char index_style_css_end[] asm("_binary_index_style_css_end");
|
||||||
|
const size_t index_style_css_size = (index_style_css_end - index_style_css_start);
|
||||||
|
httpd_resp_set_type(req, "text/css");
|
||||||
|
httpd_resp_send_chunk(req, (const char *)index_style_css_start, index_style_css_size);
|
||||||
|
httpd_resp_sendstr_chunk(req, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _index_page_js_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
extern const unsigned char index_script_js_start[] asm("_binary_index_script_js_start");
|
||||||
|
extern const unsigned char index_script_js_end[] asm("_binary_index_script_js_end");
|
||||||
|
const size_t index_script_js_size = (index_script_js_end - index_script_js_start);
|
||||||
|
httpd_resp_set_type(req, "text/javascript");
|
||||||
|
httpd_resp_send_chunk(req, (const char *)index_script_js_start, index_script_js_size);
|
||||||
|
httpd_resp_sendstr_chunk(req, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
static esp_err_t _index_page_ws_handler(httpd_req_t *req)
|
||||||
|
{
|
||||||
|
if (req->method == HTTP_GET)
|
||||||
|
{
|
||||||
|
// ESP_LOGI(TAG, "Handshake done, the new connection was opened");
|
||||||
|
// httpd_queue_work(_webserver_handle, ws_async_snd, NULL);
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
|
|
||||||
|
httpd_ws_frame_t ws_package = {0};
|
||||||
|
uint8_t *buf = NULL;
|
||||||
|
ws_package.type = HTTPD_WS_TYPE_TEXT;
|
||||||
|
httpd_ws_recv_frame(req, &ws_package, 0);
|
||||||
|
// ZH_ERROR_CHECK(err == ESP_OK, err, NULL, "Main page ws handler error.");
|
||||||
|
if (ws_package.len > 0)
|
||||||
|
{
|
||||||
|
buf = heap_caps_calloc(1, ws_package.len + 1, MALLOC_CAP_8BIT);
|
||||||
|
// ZH_ERROR_CHECK(buf != NULL, ESP_ERR_NO_MEM, NULL, "Main page ws handler error.");
|
||||||
|
ws_package.payload = buf;
|
||||||
|
httpd_ws_recv_frame(req, &ws_package, ws_package.len);
|
||||||
|
// ZH_ERROR_CHECK(buf != NULL, err, heap_caps_free(buf), "Main page ws handler error.");
|
||||||
|
}
|
||||||
|
if (ws_package.type == HTTPD_WS_TYPE_TEXT)
|
||||||
|
{
|
||||||
|
if (strcmp((char *)ws_package.payload, "toggle") == 0)
|
||||||
|
{
|
||||||
|
heap_caps_free(buf);
|
||||||
|
// return trigger_async_send(req->handle, req);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ESP_OK;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user