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

CraCk · #1

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

СпойлерПоказать

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

СпойлерПоказать

: primer2.jpg (25.65 КБ) 650 просмотров

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

CraCk · #2

Здравствуйте, практически получилось скрестить картинку из камеры и кнопок управления в одном окне. Спасибо aidar_i, за блоки. Взял за пример 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: (3.18 МБ) 20 скачиваний

Понимаю что проблема
в коде инициализации сервера

СпойлерПоказать

httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = index_handler,
.user_ctx = NULL
};

+ функция

СпойлерПоказать

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));

+ то что попадает в масив

СпойлерПоказать

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";

В примере кода IDE в массиве находиться весь HTML код страницы,что в нашем случае не нужно так как будет своя HTML страница с кнопками.
Подскажите как доработать, а то уже мозги кипят

#3

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

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

CraCk · #4

aidar_i писал(а): ↑
23.01.2024{, 10:03}
В GyverPortal есть камера, не пробовали на нем?

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

#5

CraCk писал(а): ↑
23.01.2024{, 12:41}

aidar_i писал(а): ↑
23.01.2024{, 10:03}
В GyverPortal есть камера, не пробовали на нем?
GyverPortal не брал во внимание, так как там нет функции кнопка с удержанием что нужно для управления.

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

Камера кнопки.flp: (1.18 МБ) 22 скачивания

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

CraCk · #6

aidar_i писал(а): ↑
23.01.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 ? В проекте материться что нет библиотеки.

#7

CraCk писал(а): ↑
23.01.2024{, 14:09}

aidar_i писал(а): ↑
23.01.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 · #8

aidar_i, Спасибо получилось работает хорошо. :smile152:

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

#9

CraCk писал(а): ↑
23.01.2024{, 15:09}
aidar_i, Спасибо получилось работает хорошо. Но на телефоне есть проблема, залипает на кнопке когда долго держать. Можно как то это исправить?

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

CraCk · #10

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

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

: Снимок экрана 2024-01-23 155803.png (87.43 КБ) 415 просмотров

#11

CraCk писал(а): ↑
23.01.2024{, 16:58}

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

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

#12

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

СпойлерПоказать

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

GyverPortalизм.rar: (316.16 КБ) 10 скачиваний

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

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

СпойлерПоказать

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

Кнопки камера.flp: (1.1 МБ) 9 скачиваний

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

data.rar: (1.99 КБ) 10 скачиваний

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

tools.rar: (13.73 КБ) 7 скачиваний

СпойлерПоказать

: FS.png (8.16 КБ) 310 просмотров

CraCk · #13

aidar_i,
Получилось запустить, работает неплохо.

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

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

СпойлерПоказать

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

СпойлерПоказать

Video_2024-01-30_122501.wmv: (1.45 МБ) 21 скачивание

#14

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

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