Compare commits
4 Commits
501c6f5b95
...
web
| Author | SHA1 | Date | |
|---|---|---|---|
| 629ab310b6 | |||
| 4b5db1d472 | |||
| 4c313d7e9a | |||
| 1a24f57025 |
Submodule components/zh_pcf8574 updated: b1c38b4a96...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"
|
||||
|
||||
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 _led_handle = {0};
|
||||
@@ -12,11 +12,12 @@ static bool _is_ret_enabled = false;
|
||||
static bool _is_ext_enabled = false;
|
||||
|
||||
static void _zh_wifi_softap_init(void);
|
||||
static void _zh_webserver_init(void);
|
||||
static void _zh_gpio_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);
|
||||
|
||||
extern void _zh_webserver_init(void);
|
||||
|
||||
void app_main(void)
|
||||
{
|
||||
nvs_flash_init();
|
||||
@@ -41,7 +42,7 @@ static void _zh_wifi_softap_init(void)
|
||||
.ap = {
|
||||
.ssid = WIFI_SSID,
|
||||
.password = WIFI_PASS,
|
||||
.max_connection = 4,
|
||||
.max_connection = MAX_STA_CONNECTION,
|
||||
.authmode = WIFI_AUTH_WPA2_PSK,
|
||||
},
|
||||
};
|
||||
@@ -50,12 +51,12 @@ static void _zh_wifi_softap_init(void)
|
||||
esp_wifi_start();
|
||||
}
|
||||
|
||||
static void _zh_webserver_init(void)
|
||||
{
|
||||
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
||||
httpd_start(&_webserver_handle, &config);
|
||||
zh_ota_server_init(_webserver_handle);
|
||||
}
|
||||
// static void _zh_webserver_init(void)
|
||||
// {
|
||||
// httpd_config_t config = HTTPD_DEFAULT_CONFIG();
|
||||
// httpd_start(&_webserver_handle, &config);
|
||||
// zh_ota_server_init(_webserver_handle);
|
||||
// }
|
||||
|
||||
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