ESP-CAM + встроенный WEB сервер

CraCk · Сообщение **CraCk** » 14 янв 2024, 12:55

Собираю машинку с управлением с веб моды и отображением картинки с камеры.
Должно быть что то подобное:
[spoiler]

primer.jpg

[/spoiler]
Проблема в том что блок esp32-cam поднимает свой вебсервер для трансляции картинки, а веб страница свой.
Помогите объединить блоки в одно целое. Пробовал компилировать проект, но при компиляции менял порт веб сервера камери на 81.
[spoiler]

primer2.jpg

[/spoiler]
В таком случае, получаю две веб страницы, но работает только одна из них, первая просто зависает при запуске второй.

CraCk · Сообщение **CraCk** » 21 янв 2024, 17:35

Здравствуйте, практически получилось скрестить картинку из камеры и кнопок управления в одном окне. Спасибо [ref=#ff8000]aidar_i[/ref], за блоки. Взял за пример viewtopic.php?f=70&t=6677&p=93333&hilit ... era#p93121 и код в IDE https://randomnerdtutorials.com/esp32-c ... eb-server/
Но осталась проблема в браузере есть ошибка GET http://192.168.1.126/3277ca91-0352-46cc ... eb5?page=1 404 что тормозит всю страницу.

Video_2024-01-21_160930.wmv

Понимаю что проблема
в коде инициализации сервера
[spoiler]httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = index_handler,
.user_ctx = NULL
};[/spoiler]
+ функция
[spoiler]static esp_err_t index_handler(httpd_req_t *req){
httpd_resp_set_type(req, "text/html");
return httpd_resp_send(req, (const char *)INDEX_HTML, strlen(INDEX_HTML));[/spoiler]
+ то что попадает в масив
[spoiler]static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<html>
<head>
<title>ESP32-CAM Robot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
table { margin-left: auto; margin-right: auto; }
td { padding: 8 px; }
.button {
background-color: #2f4468;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 6px 3px;
cursor: pointer;
-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);
}
img { width: auto ;
max-width: 100% ;
height: auto ;
}
</style>
</head>
<body>
<h1>ESP32-CAM Robot</h1>
<img src="" id="photo" >
<table>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('forward');" ontouchstart="toggleCheckbox('forward');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Forward</button></td></tr>
<tr><td align="center"><button class="button" onmousedown="toggleCheckbox('left');" ontouchstart="toggleCheckbox('left');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Left</button></td><td align="center"><button class="button" onmousedown="toggleCheckbox('stop');" ontouchstart="toggleCheckbox('stop');">Stop</button></td><td align="center"><button class="button" onmousedown="toggleCheckbox('right');" ontouchstart="toggleCheckbox('right');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Right</button></td></tr>
<tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('backward');" ontouchstart="toggleCheckbox('backward');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Backward</button></td></tr>
</table>
<script>
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/action?go=" + x, true);
xhr.send();
}
window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
</script>
</body>
</html>
)rawliteral";[/spoiler]
В примере кода IDE в массиве находиться весь HTML код страницы,что в нашем случае не нужно так как будет своя HTML страница с кнопками.
Подскажите как доработать, а то уже мозги кипят

Сообщение **aidar_i** » 23 янв 2024, 10:03

CraCk писал(а): 21 янв 2024, 17:35 Здравствуйте, практически получилось скрестить картинку из камеры и кнопок управления в одном окне.

В GyverPortal есть камера, не пробовали на нем?

CraCk · Сообщение **CraCk** » 23 янв 2024, 12:41

aidar_i писал(а): 23 янв 2024, 10:03 В GyverPortal есть камера, не пробовали на нем?

GyverPortal не брал во внимание, так как там нет функции кнопка с удержанием что нужно для управления.

Сообщение **aidar_i** » 23 янв 2024, 13:35

CraCk писал(а): 23 янв 2024, 12:41
aidar_i писал(а): 23 янв 2024, 10:03 В GyverPortal есть камера, не пробовали на нем?
GyverPortal не брал во внимание, так как там нет функции кнопка с удержанием что нужно для управления.

Есть там такие кнопки, вот попробуйте , для теста выложу пример с камерой и кнопками, не упорядочивал их

Камера кнопки.flp

Камера там работает хорошо.

CraCk · Сообщение **CraCk** » 23 янв 2024, 14:09

aidar_i писал(а): 23 янв 2024, 13:35 вот попробуйте

Какую версии библиотеки ставить 3.6.5 https://github.com/GyverLibs/GyverPorta ... /tag/3.6.5 или 3.6.6 https://github.com/GyverLibs/GyverPorta ... /tag/3.6.6 ? В проекте материться что нет библиотеки.

Сообщение **aidar_i** » 23 янв 2024, 14:34

CraCk писал(а): 23 янв 2024, 14:09
aidar_i писал(а): 23 янв 2024, 13:35 вот попробуйте
Какую версии библиотеки ставить 3.6.5 https://github.com/GyverLibs/GyverPorta ... /tag/3.6.5 или 3.6.6 https://github.com/GyverLibs/GyverPorta ... /tag/3.6.6 ? В проекте материться что нет библиотеки.

Последнюю с Гитхаба

CraCk · Сообщение **CraCk** » 23 янв 2024, 15:09

[ref=#ff8000]aidar_i[/ref], Спасибо получилось работает хорошо. :smile152:

Но на телефоне есть проблема, залипает на кнопке когда долго держать. Можно как то это исправить?

Сообщение **aidar_i** » 23 янв 2024, 15:35

CraCk писал(а): 23 янв 2024, 15:09 [ref=#ff8000]aidar_i[/ref], Спасибо получилось работает хорошо. Но на телефоне есть проблема, залипает на кнопке когда долго держать. Можно как то это исправить?

Да есть такое, не знаю есть настройки такие, чтобы выключить выскакивающие меню в браузере.
Это проблема не портала, а смартфона.

CraCk · Сообщение **CraCk** » 23 янв 2024, 16:58

aidar_i писал(а): 23 янв 2024, 15:35 Да есть такое, не знаю есть настройки такие, чтобы выключить выскакивающие меню в браузере.

В браузере телефона при зажатии на кнопке, выделяется как раз текст кнопки, по этому выскакивает меню. Пробовал оставить кнопку без надписи, ставил пробелы, тогда кнопка стает очень узкой.
А как дела обстоят в режиме точки доступа, ничего не изменилось, нужно дальше работать с файловой системой есп?
В проекте Камера кнопки.flp можно брать другие блоки из Вашей темы viewtopic.php?f=71&t=8039&start=320#p125615 ? Или в проекте новая версия блоков?
Такое размещение кнопок с картинкой возможно сделать в GP?

Снимок экрана 2024-01-23 155803.png

Сообщение **aidar_i** » 23 янв 2024, 17:27

CraCk писал(а): 23 янв 2024, 16:58
aidar_i писал(а): 23 янв 2024, 15:35 Да есть такое, не знаю есть настройки такие, чтобы выключить выскакивающие меню в браузере.
В браузере телефона при зажатии на кнопке, выделяется как раз текст кнопки, по этому выскакивает меню. Пробовал оставить кнопку без надписи, ставил пробелы, тогда кнопка стает очень узкой.
А как дела обстоят в режиме точки доступа, ничего не изменилось, нужно дальше работать с файловой системой есп?
В проекте Камера кнопки.flp можно брать другие блоки из Вашей темы viewtopic.php?f=71&t=8039&start=320#p125615 ? Или в проекте новая версия блоков?
Такое размещение кнопок с картинкой возможно сделать в GP?
Снимок экрана 2024-01-23 155803.png

Кнопки в ранних версиях другие, в них удержания нет.
Посмотрю что можно сделать.
Кнопки не мини вроде не сужаются.
Режим ТД проблем не было. Да файловая система нужна.
Такое размещение возможно,
И посмотрю в библиотеке, чтобы видео окно не вставало всегда в отдельной строке.

Сообщение **aidar_i** » 25 янв 2024, 12:01

aidar_i писал(а): 23 янв 2024, 17:27 Такое размещение кнопок с картинкой возможно сделать в GP?

[spoiler]

Screenshot_20240125-020959.png

[/spoiler]
Для того, чтобы можно было изменить размеры кнопки, создал другой блок и внес изменения в библиотеке.
Прежний блок кнопки и блок мини кнопки не будут работать.

GyverPortalизм.rar

Пример скоро будет.
Текст кнопки лучше не писать, чтобы не залипала.
Можно рядом написать.

Отправлено спустя 11 часов 48 минут 44 секунды:
[spoiler]

Screenshot_20240125-135741.png

[/spoiler]
Чтобы в кнопки привязать иконки, нужно использовать файловую систему ЕСП32.

Кнопки камера.flp

Папка data с иконками.

data.rar

На всякий случай приложу папку tools для установки файловой системы в Arduino Ide в папку sketchbook

tools.rar

[spoiler]

FS.png

[/spoiler]

CraCk · Сообщение **CraCk** » 30 янв 2024, 13:27

[ref=#ff8000]aidar_i[/ref],
Получилось запустить, работает неплохо.

aidar_i писал(а): 25 янв 2024, 12:01 Чтобы в кнопки привязать иконки, нужно использовать файловую систему ЕСП32.

Чтоб не использовать файловою систему, можно в адрес кнопки вставить отконвертированную картинку в формате BASE64 https://www.base64-image.de
[spoiler]

2024-01-30.png

[/spoiler]
Получилось запустить камеру на штатном ВЕБ интерфейсе без ошибок по этому примеру: https://stackoverflow.com/questions/649 ... -esp32-cam
[spoiler]

Video_2024-01-30_122501.wmv

[/spoiler]

Сообщение **aidar_i** » 30 янв 2024, 17:02

CraCk писал(а): 30 янв 2024, 13:27 Чтоб не использовать файловою систему, можно в адрес кнопки вставить отконвертированную картинку в формате BASE64 https://www.base64-image.de

Точно я про это уже забыл

FlProg