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

[Craft]

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

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

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

[Brand2]

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

[Phazz]

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

[Craft]

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

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

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

[Phazz]

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

[Craft]

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

Посмотрю что там есть, надо время разобраться. Спасибо за ссылки.

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

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

[DrScorpion86]

[ref]Craft[/ref],
Нус, начнемс...

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

Есть булевая переменная, которая что-то запускает
[spoiler]

001.png

[/spoiler]
настраиваем вэб интерфейс:
[spoiler]

002.png

[/spoiler]
1.добавляем виджет - имя любое, код такой - <div></div>
[spoiler]

003.png

[/spoiler]
2. выбираем тут нашу переменную(которой хотим управлять)
задаём ей уникальный(!) ID
пример: korm
[spoiler]

004.png

[/spoiler]
Далее сюда жмём
[spoiler]

005.png

[/spoiler]
В "спец. адреса" снимаем галочку "динамической адрес" в поле отправки новых данных
адрес можно оставить, какой получится или свой придумать
пример: 57fa0f22-b574-4bb6-9659-d651fb181d1a
[spoiler]

006.png

[/spoiler]

На страницу сайта добавляем кнопку,
даём ей 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]

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

[DrScorpion86]

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

[Craft]

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

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

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

Может какое то решение есть и более простое например через UDP/TCP сервера...?

[artemka19]

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

это необязательно - можно прямо с веб страницы отправлять сообщения в mqtt-топик, а уже еспшка будет в свою очередь будет мониторить этот самый топик и когда придет нужное сообщение - то выполнит соответствующую команду

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

[Craft]

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

это необязательно - можно прямо с веб страницы отправлять сообщения в mqtt-топик, а уже еспшка будет в свою очередь будет мониторить этот самый топик и когда придет нужное сообщение - то выполнит соответствующую команду

Есть примеры как это делать - прямо с веб страницы отправлять сообщения в mqtt-топик?

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

[artemka19]

Есть примеры как это делать - прямо с веб страницы отправлять сообщения в mqtt-топик

попозже сделаю

По идее мы можем ЕСПишке в интернете сделать доменное имя

для ddns нужен или белый или серый, но статический апишник - а это не всегда возможно

[Phazz]

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

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

[artemka19]

белый айпишник

ну да, неправильно выразился )))

Отправлено спустя 4 минуты 20 секунд:

Можно разместить на своем хостинге

это ж хостинг еще надо искать))
со странички проще же

[Craft]

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

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

[artemka19]

оказывается есть библиотеки на JS для работы с MQTT

все верно - именно на ней и делается MQTT с веб-страницы

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

-распаковываем и открываем файл "MQTT c web-страницы.html"

[spoiler]

1.png

[/spoiler]

-вводим юзернэйм, пароль, порт, сервер, ssl и нажимаем "Подключиться":
[spoiler]

2.png

[/spoiler]

-подписываемся на топик "рыба":
[spoiler]

3.png

[/spoiler]

-шлем команды "lamp_ON, lamp_OFF и т.д.":
[spoiler]

4.png

[/spoiler]

-видим что все команды успешно приходят на брокер/еспшку:
[spoiler]

видим что сообщения приходят в брокер.png

[/spoiler]

-попробуем из брокера послать сообщение на веб-страницу:
[spoiler]

шлем сообщение из брокера на веб страницу.png

[/spoiler]

-видим на веб-странице что сообщения успешно получены из брокера:
[spoiler]

видим что из брокера сообщение тоже приходит на веб страницу.png

[/spoiler]

-ну и если отрубить интернет, то увидим, что, примерно через 60-80 секунд, нам будет указано об отсутствии соеденения с брокером:
[spoiler]

пропадет коннект.png

[/spoiler]


файл примера веб-страницы с MQTT:

MQTT с веб-страницы.zip

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


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

Отправлено спустя 2 минуты 12 секунд:

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

да

[Craft]

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

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

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

[artemka19]

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

[Craft]

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

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

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

Нужно для общедоступности, но в тоже время с защитой от всяких...