Кнопка управления ESP на обычном сайте.

Подскажите, есть ли способ управления контроллером с сайта, не с веб интерфейса.

На этом форуме Вы можете задать вопросы знатокам программы и автору.
Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#1

Сообщение Craft » 06.12.2022{, 15:18}

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

Понятно что можно включить веб интерфейс и расшарить его через DDNS и уже сделать ссылки на этот вебсервер, но такой способ не очень подходящий.

Вопрос, можно ли сделать как то кнопку для управления на обычном сайте, чтоб посылал запросы на ESP через какой то сервер типо MQTT может через что то ещё? Чтоб ESP и сайт общались через сервер какой то сторонний?

Brand2
Лейтенант
Сообщения: 414
Зарегистрирован: 26.02.2018{, 21:27}
Репутация: 42
Откуда: Haifa
Имя: Alex

Кнопка управления ESP на обычном сайте.

#2

Сообщение Brand2 » 06.12.2022{, 20:54}

Можно,через RemoteXY или КasCada кормите рыбок и включаете свет .

Аватара пользователя
Phazz
Полковник
Сообщения: 2552
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 367
Откуда: Сургут
Имя: Анатолий

Кнопка управления ESP на обычном сайте.

#3

Сообщение Phazz » 07.12.2022{, 05:01}

Craft, а чем собственно MQTT не подошёл? Используйте https://beebotte.com/ или https://dealgate.ru/ там есть простенький дашборд. В beebotte есть еще апи если нужно куда-то дальше данные отправлять

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#4

Сообщение Craft » 07.12.2022{, 09:19}

Как сделать кнопку на сайте что бы отправляла данные на MQTT?

То что можно управлять из приложений и программ всяких и с веб интерфейса MQTT серверов это понятно.

Мне нужно на обычный сайт с открытым доступом что бы можно было кнопку вставить. Желательно без глубокого знания программирования, может какой то сервис есть который код кнопки или датчика для в ставки на сайт даёт, или какой то кусок кода (HTML, PHP, JS) который отредактировать под себя можно.

Аватара пользователя
Phazz
Полковник
Сообщения: 2552
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 367
Откуда: Сургут
Имя: Анатолий

Кнопка управления ESP на обычном сайте.

#5

Сообщение Phazz » 07.12.2022{, 09:35}

А чем мой вариант не подходит?

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#6

Сообщение Craft » 07.12.2022{, 09:36}

Phazz писал(а):
07.12.2022{, 09:35}
А чем мой вариант не подходит?
Посмотрю что там есть, надо время разобраться. Спасибо за ссылки.

Отправлено спустя 38 минут 58 секунд:
https://beebotte.com посмотрел, нашёл там только поделиться ссылкой на дашборд, но что бы встроить его на сайт, такого вроди бы нет.

Отправлено спустя 47 минут 1 секунду:
по ходу придётся курить подключение к MQTT-серверу с помощью php-mqtt/client...

DrScorpion86
Рядовой
Сообщения: 59
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 30
Имя: Евгений

Кнопка управления ESP на обычном сайте.

#7

Сообщение DrScorpion86 » 07.12.2022{, 13:16}

Craft,
Нус, начнемс... :smile37:

ставим в проект блок "Доступ_к_данным_esp826632_(заголовки_для_CORS)_(Code_-_Professional)" скачать отсюда viewtopic.php?f=202&t=7761&start=120#p115053

Есть булевая переменная, которая что-то запускает
СпойлерПоказать
001.png
настраиваем вэб интерфейс:
СпойлерПоказать
002.png
1.добавляем виджет - имя любое, код такой - <div></div>
СпойлерПоказать
003.png
2. выбираем тут нашу переменную(которой хотим управлять)
задаём ей уникальный(!) ID
пример: korm
СпойлерПоказать
004.png
Далее сюда жмём
СпойлерПоказать
005.png
В "спец. адреса" снимаем галочку "динамической адрес" в поле отправки новых данных
адрес можно оставить, какой получится или свой придумать
пример: 57fa0f22-b574-4bb6-9659-d651fb181d1a
СпойлерПоказать
006.png
На страницу сайта добавляем кнопку,
даём ей ID(пример - btn1)

Код: Выделить всё

<button id="btn1">Покормить</button>
добавляем JS:
const host = сюда вписываем адрес, по которому доступен контроллер (пример - 'http://localhost:8000/')
const adress = сюда адрес отправки переменной (пример - '57fa0f22-b574-4bb6-9659-d651fb181d1a')

const btn1 = document.getElementById('btn1')
btn1 - это ID кнопки со страницы сайта

btn1.addEventListener('click', ()=>pokormit('korm'))
korm - это ID переменной из настройки вэб интерфейса

Код: Выделить всё

function pokormit(id){
    const host = 'http://localhost:8000/'
    const adress = '57fa0f22-b574-4bb6-9659-d651fb181d1a'
    fetch(`${host}${adress}${id}?=1`)
        .then(response => console.log(response))
}

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', ()=>pokormit('korm'))
З.Ы. Чтобы добавить ещё кнопки:
на страницу
<button id="btn2">Покормить</button>

в JS
const btn2 = document.getElementById('btn2')
btn1.addEventListener('click', ()=>pokormit('korm2'))

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#8

Сообщение artemka19 » 07.12.2022{, 14:07}

DrScorpion86,
как я понял ему нужно удаленно управлять

DrScorpion86
Рядовой
Сообщения: 59
Зарегистрирован: 28.04.2021{, 14:45}
Репутация: 30
Имя: Евгений

Кнопка управления ESP на обычном сайте.

#9

Сообщение DrScorpion86 » 07.12.2022{, 14:16}

artemka19,
ну придётся научиться открывать доступ из инэта на хост контроллера:)

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#10

Сообщение Craft » 07.12.2022{, 15:00}

Ну если шарить ESP то очевидно что делать это через DDNS на роутере, но прикол в том что не всегда этот DDNS может работать корректно, по сути DDNS это промежуточный сервер.

DrScorpion86, Спасибо за информацию, как вариант пригодится, особенно если на ESP можно поставить будет DDNS клиент, что бы присвоить домен ESPишке, только сомневаюсь что такое можно в обход роутера сделать. Когда то делал через DDNS на роутере FTP сервер, и помню что у некоторых провайдеров он не работал нормально из за IP серых.

По этому через MQTT сервер более надёжное решение, надо только научиться PHP запросы делать с сайта на MQTT сервера.

Может какое то решение есть и более простое например через UDP/TCP сервера...?
Последний раз редактировалось Craft 07.12.2022{, 15:03}, всего редактировалось 1 раз.

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#11

Сообщение artemka19 » 07.12.2022{, 15:03}

Craft писал(а):
07.12.2022{, 15:00}
ну придётся научиться открывать доступ из инэта на хост контроллера:)
это необязательно - можно прямо с веб страницы отправлять сообщения в mqtt-топик, а уже еспшка будет в свою очередь будет мониторить этот самый топик и когда придет нужное сообщение - то выполнит соответствующую команду

веб страница находится удаленно само собой)

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#12

Сообщение Craft » 07.12.2022{, 15:07}

artemka19 писал(а):
07.12.2022{, 15:03}
Craft писал(а):
07.12.2022{, 15:00}
ну придётся научиться открывать доступ из инэта на хост контроллера:)
это необязательно - можно прямо с веб страницы отправлять сообщения в mqtt-топик, а уже еспшка будет в свою очередь будет мониторить этот самый топик и когда придет нужное сообщение - то выполнит соответствующую команду
Есть примеры как это делать - прямо с веб страницы отправлять сообщения в mqtt-топик?

Отправлено спустя 20 минут 13 секунд:
К стати нашёл библиотеку DDNS для ESP https://github.com/ayushsharma82/EasyDDNS
По идее мы можем ЕСПишке в интернете сделать доменное имя. Надо ковыряться с библиотекой и сделать для FLPROG блоки если она будет работать нормально.

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#13

Сообщение artemka19 » 07.12.2022{, 16:44}

Craft писал(а):
07.12.2022{, 15:28}
Есть примеры как это делать - прямо с веб страницы отправлять сообщения в mqtt-топик
попозже сделаю
Craft писал(а):
07.12.2022{, 15:28}
По идее мы можем ЕСПишке в интернете сделать доменное имя
для ddns нужен или белый или серый, но статический апишник - а это не всегда возможно

Аватара пользователя
Phazz
Полковник
Сообщения: 2552
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 367
Откуда: Сургут
Имя: Анатолий

Кнопка управления ESP на обычном сайте.

#14

Сообщение Phazz » 07.12.2022{, 17:35}

artemka19, немного не так, нужен статический или динамический, но белый айпишник

Отправлено спустя 6 минут 29 секунд:
Есть такой Фреймворк https://github.com/avaksru/Svelte-websocket-dashbord
Можно разместить на своем хостинге

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#15

Сообщение artemka19 » 07.12.2022{, 19:58}

Phazz писал(а):
07.12.2022{, 13:16}
белый айпишник
ну да, неправильно выразился )))

Отправлено спустя 4 минуты 20 секунд:
artemka19 писал(а):
07.12.2022{, 19:58}
Можно разместить на своем хостинге
это ж хостинг еще надо искать))
со странички проще же

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#16

Сообщение Craft » 08.12.2022{, 10:24}

нашёл интересную статейку, оказывается есть библиотеки на JS для работы с MQTT
https://funprojects.blog/2018/11/28/mqt ... avascript/

Но я так понимаю сам MQTT сервер должен поддерживать вебсокет?....

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#17

Сообщение artemka19 » 08.12.2022{, 14:59}

Craft писал(а):
08.12.2022{, 10:24}
оказывается есть библиотеки на JS для работы с MQTT
все верно - именно на ней и делается MQTT с веб-страницы

Вот пример для брокера clusterfly.ru:

-распаковываем и открываем файл "MQTT c web-страницы.html"
СпойлерПоказать
1.png
-вводим юзернэйм, пароль, порт, сервер, ssl и нажимаем "Подключиться":
СпойлерПоказать
2.png
-подписываемся на топик "рыба":
СпойлерПоказать
3.png
-шлем команды "lamp_ON, lamp_OFF и т.д.":
СпойлерПоказать
4.png
-видим что все команды успешно приходят на брокер/еспшку:
СпойлерПоказать
видим что сообщения приходят в брокер.png
-попробуем из брокера послать сообщение на веб-страницу:
СпойлерПоказать
шлем сообщение из брокера на веб страницу.png
-видим на веб-странице что сообщения успешно получены из брокера:
СпойлерПоказать
видим что из брокера сообщение тоже приходит на веб страницу.png
-ну и если отрубить интернет, то увидим, что, примерно через 60-80 секунд, нам будет указано об отсутствии соеденения с брокером:
СпойлерПоказать
пропадет коннект.png

файл примера веб-страницы с MQTT:
MQTT с веб-страницы.zip
(156.53 КБ) 28 скачиваний

не забываем саму еспшку подписать на этот же топик "рыбы" )))


Отправлено спустя 9 минут 36 секунд:
с брокером beebotte.com скорее всего не прокатит: там нужно пароль пустым оставлять, а у нас в .js есть проверка на пустые поля. Хотя эта проверка достаточно легко убирается из .js :D

Отправлено спустя 2 минуты 12 секунд:
Craft писал(а):
07.12.2022{, 20:02}
Но я так понимаю сам MQTT сервер должен поддерживать вебсокет?
да

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#18

Сообщение Craft » 08.12.2022{, 15:27}

Придётся учить JS более углублённо.

Концепт такой - нужно поле с вводом пароля и кнопкой на сайте, которая его через MQTT отправляет на ESP пароль, ESP сравнивает пароль и генерит новый после успешно сравнения, новый пароль отправляется обратно, а лучше на почту после допустим ввода капчи для предотвращения флуда. Конечно такой способ не совсем наверное надёжный, но как защита от дурака вполне сгодится. В любом случае надо ещё как то прятать JS код с настройками подключения.

Ещё нужен индикатор соединения ESP и сайта онлайн.

artemka19
Лейтенант
Сообщения: 540
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 216
Откуда: Питер
Имя: Артем

Кнопка управления ESP на обычном сайте.

#19

Сообщение artemka19 » 08.12.2022{, 15:32}

и для чего это нужно?
достаточно сделать вход на свой сайт по логин-паролю

Craft
Рядовой
Сообщения: 16
Зарегистрирован: 06.04.2021{, 16:53}
Репутация: 0
Имя: Антон

Кнопка управления ESP на обычном сайте.

#20

Сообщение Craft » 08.12.2022{, 15:42}

Если что мой уровень знания JS - скопировал 10 лет назад скрипт отправки формы на почту, отредактировал под необходимые поля и почту, потом боты заспали эту почту через пару лет и я поставил форму с капчей от яндекс формы на сайте и ещё от того же яндекса поиск по сайту вкорячил.))) Ну и ещё может пару скриптов по оформлению на JS & PHP, просто больше надобности не было с этим ковыряться, так сказать не хватало времени и мотивации.

Отправлено спустя 3 минуты 11 секунд:
artemka19 писал(а):
08.12.2022{, 15:32}
и для чего это нужно?
достаточно сделать вход на свой сайт по логин-паролю
Нужно для общедоступности, но в тоже время с защитой от всяких...

Ответить

Вернуться в «Спросить у знатоков»