Разработка WEB-интерфейса для ESP8266. Часть 2: HTML-кнопка, синхронные запросы для управления реле.

Во второй части видеокурса создаём простую HTML-кнопку для управления реле, подключенного к ESP8266, по WiFi. А также знакомимся с языками HTML, CSS, JavaScript и пробуем синхронные запросы для переключения реле.
Присоединяйтесь ВКонтакте: im_pub
HTML-файл из видео: iomoio.ru/stati...
Первая часть: • Разработка WEB-интерфе...
WinSCP (FTP-клиент): winscp.net/eng...
NotePad++ (редактор HTML, CSS, JS): notepad-plus-p...
Необходимое на AliExpress:
NodeMCU: ali.pub/3icprs
ESP-12F: ali.pub/3icprs
Реле 4 pin 16A 250В (маленькое, нормально открытое): ali.pub/3icoel
Реле 5 pin 10A 250В: ali.pub/3icpb2
Транзисторы NPN SS8050: ali.pub/3icqx0
Диоды 1N4007 (1A 1000В): ali.pub/3icr1v
Резисторы: ali.pub/399hw1
Блок питания 220 в 5В Hi Link: ali.pub/3icqog
LM1117 3.3В: ali.pub/3hs3q1
#esp8266 #IoT #html #css #javascript #уроки #ардуино #arduino #реле #esp32 #esp12f #esp12 #esp #вебинтерфейс #интерфейс

[@АнатолийБалыков]

Заходил на канал с пол года назад. С целью, освоить беспроводное взаимодействие с контроллером. Тогда контент мне показался сложным для освоения. Потом изрядно походил по граблям, нахватался разрозненной информации и что-то начало получаться. Теперь, когда снова наткнулся на ваши уроки, очень удивился. Все стало очень доступным и понятным. Вы упорядочили и разложили все по полочкам. Очень подробно и доступно! Огромное вам спасибо за ваш полезнейший труд! 🤝

[@YevhenZhuchenko]

Тот момент когда ты вебразработчик и в качестве хобби интересуешься самоделками и умным домой) Может, кто-нибуль на Вашем канале ради интереса выучит html/css/js и тоже станет разработчиком))

[@balexfox]

автору однозначно лайк за простое объяснение того что нужно чтобы реализовать проект. рекомендую новичкам именно союз телефон и ESP8266. не нужно куча кнопок дисплеев модулей когда есть телефон и wifi. начните именно с этого программирование. и также рекомендую научиться правильно задавать вопросу chat gpt и получать готовый код в начале это очень будет хорошей помощью.

[@vahajan]

Именно так и делаю уже пару недель, начал задавать ему вопросы с 0 знанием программирования, и смогу сказать одно, без базовых знаний ты неделю будешь сидеть и офигевать от его ответов, он при одних и тех же запросах отвечает по-разному, часто делает ошибки в коде, которые сам потом решить не может и т.д, но спустя 10 дней я уже приблизительно понимаю код, хоть сам его написать не смогу, но и смысла в этом нет, когда за тебя всё пишет машина 😁

[@pvlnsk1]

Очень классная подача материала, всё доходчиво и понятно, спасибо за Ваш труд!

[@awk432]

Спасибо! Очень полезная информация. Отлично излагаете материал, вас приятно слушать.

[@svbHiTek]

Да, видео отличные, автор молодец, рассказывает подробно, одно плохо, мало таких роликов по ESP у автора, да и в целом таких хороших мало.

[@АлексПовзун-г6у]

Надеюсь видео будет выходить каждую неделю ✔️

[@iomoio3897]

Я тоже на это надеюсь. ) Хотелось бы и чаще конечно, но быт...

[@serggorod1423]

Смотрел 10ки часов уроков по вёрстке, этот самый простой, понятный,короткий! Короткое резюме горки знаний... КАРКАС... далее работать со стилями по желанию!

[@DM1956x]

Замечательная подача материала. Автору глубочайший респект, лайки и подписка.

[@Электроникавдеталях-з7д]

Логично, понятно, бел лишних лирических отступлений! Жалко что проект закрыт...

[@MaPeHuH]

Спасибо за прекрасное видео!!! Очень доступно. С нетерпением жду последующих видео!!! Еще раз спасибо!!!!!!!

[@oleksandrilyinykh7859]

Спасибо

[@docer_man]

охриненно понятно ++++++++++++++++++++++++++++++++++++

[@АлексПовзун-г6у]

Спасибо!

[@Paramore1999]

вот CSS для начала совсем не обязательно, это для удобства в больших проектах. Для понимания без него легко обойтись. А в целом - молодец!

[@sergeyst5414]

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

[@sergeyst5414]

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

[@pegamer3051]

Годно, спасибо!

[@photocanonn]

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

[@kuzmit]

Красава 👍

[@akmercator]

какой охуенный контент!!даже не подозревал, что внутри модуля для ардуинки можно запустить веб сервер, фтп и грузить туда файлы, прям как на хостинг))а базу данных типа mysql может там ещё можно развернуть?))

[@iomoio3897]

kzbin.info/www/bejne/mHytoZqlrNNgpbM

[@akmercator]

@@iomoio3897 охренеть. Заказал у китайцев на 3 рубля всякой всячины, будем пробовать) огромное спасибо за такие видосы!

[@serg7535]

последняя фраза понравилась)

[@Странныймеханик]

Можно обойти момент с загрузкой файла по фтп на есп. А написать данный файл в Ардуино Иде и подключить как библеотеку

[@SergeyBelotserkovskiy]

В этом примере думаю можно удалить строку var relay = document.getElemenById("relay_button"); Можно сразу писать relay_button.addEventListener('click', relay_inverse);

[@iomoio3897]

Этот скрипт будет дорабатываться в следующих скринкастах. Указанная строка будет нужна. ;)

[@SergeyBelotserkovskiy]

@@iomoio3897Просто написал что есть и такой вариант) Я обычно пишу все в одном файле и картинки и css и js, чтобы не делать множество get запросов

[@leliklelikovich4442]

Теперь нужно асинхронно выводить на страницу состояние реле

[@iomoio3897]

Асинхронные запросы будем разбирать в 4-й части. Но если Вас устроит решение без объяснений, т.е. просто хотите знать как асинхронно получить ответ от сервера, то напишите в группе ВК, я скину пример функции с таким запросом.

[@leliklelikovich4442]

@@iomoio3897 примеров найти пачку несоставляет труда, буду ждать обьяснение. Ооочень хорошие уроки, нет воды, все посути!

[@serggorod1423]

И обозначение те места кода , которые встречаете,! с декларацией и/ или созданием класса , шаблона, интерфейса мы не маги...мы только учемся!

[@МаркЪЪЪ]

Подскажите, пожалуйста, как можно решить проблему. На этапе переноса файла index.html в esp выдает ошибку "Копирование файлов на сервер не удалось. Can't open/create index.html" и затем "Не могу получить содержимое каталога No data connection MLSD". Все делал по инструкции вроде.

[@МаркЪЪЪ]

На этот свой вопрос отвечу сам. Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить. Однако ни в одном из браузеров кнопка после этого не появилась, так и остался в углу 0 либо 1 и все. Модуль перезагружал, толку нет

[@nrg7722]

@@МаркЪЪЪ Да, точно ты говоришь! Это влияет на загрузку по FTP, а то что у тебя не появилась кнопка это из-за того, что неправильно указал ссылку - т.е нужно убрать relay_switcher в конце!

[@АлексейБотов-ц9з]

Жаль нельзя поставить тыщу лайков. Материал БОМБА!

[@wolf-lu5gb]

А можна роздати точку доступу з телефона і управляти так

[@ДашаСумина-л1т]

здорово, продолжение курса будет(5,6..)?

[@vitalij_ukr]

Ошибка: Невозможно подключиться к серверу Как решить эту проблему?

[@iomoio3897]

Проверьте подключение к wifi-сети модуля, проверьте прокотол (должен быть FTP, а не SFTP или что-то еще), проверьте порт (должен быть 21), проверьте логин и пароль для доступа к FTP. Проверьте IP-модуля (выводится в серийный порт). Всё проверьте!)

[@vitalij_ukr]

@@iomoio3897 Статус: Соединяюсь с 192.168.4.1:21... Статус: Соединение установлено, ожидание приглашения... Ответ: 220--- Welcome to FTP for ESP8266/ESP32 --- Ответ: 220--- By David Paiva --- Ответ: 220 -- Version FTP-2017-10-18 -- Команда: AUTH TLS Ответ: 500 Syntax error Команда: AUTH SSL Ответ: 530 user not found Статус: Небезопасный сервер, не поддерживает FTP через TLS. Команда: USER relay Ответ: 221 Goodbye Команда: SYST Ошибка: Невозможно подключиться к серверу Все проверял по несколько раз, все хорошо.

[@nrg7722]

​@@vitalij_ukr Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.

[@nrg7722]

Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.

[@ЕвгенийРодюков-х9ь]

Здравствуйте ..а подскажите как реализовать несколько кнопок на разные пины???

[@skne]

Так и не понял, зачем ради слайда кнопки использовать JS, когда можно просто сделать кнопку "submit", и использовать метод "POST", лишний гемор, это же простой пример, пускай таким и остается.

[@Трансаэронавсегда]

Что делать,если при копировании файлов на сервер выбивает ошибку: Не могу получить содержимое каталога No data connection MLSD ????????

[@iomoio3897]

При работе с контроллером стоит избегать работы с папками в файловой системе. Используйте файлы только в корневом каталоге.

[@nrg7722]

Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.

[@fliblomlaslojor]

Извините за резкость. Но не пихайте js туда где и без него все могло работать. Вообщет-то является частью И может отправить данные без участия js. Js в большинстве случаев впринципе ненужен и много где без него впринципе можно обойтись. Уча человека в самых базовых вещах делать такие косяки, в итоге и выходит что маленький iot бужет хавать оперативку браузера и порождать гигабайты трафика впустую.

[@user-room]

Здравствуйте! Возможен ли ввод пароля и названия сети не через скетч, а через HTML (как в приложении для андроид)?

[@ilyamas4052]

спасибо за уроки ! проблема : с телефона запросы из первого урока отправляются , с компа через браузер так-же все соединяется , а вот через WinSCP ни как не подключиться ((( в чем может быть проблема ? спасибо .

[@Ardbot-fp8oq]

аналогично. адрес открывается, а вот FTP не подключается. Буду пробовать другую прогу

[@Ardbot-fp8oq]

Все получилось. Исправил 2 момента в IDE "Инструменты -> Erase flash -> All flesh contents" и выбрал настройки памяти esp 8266 "512 kB (64 SPIFFS)" (старый модуль, думаю можно больше места дать)

[@Юныеэнергетики-х7у]

Спасибо... Как из редактора Notepad++ запускать код и видеть кнопку. Как в уроке ?

[@-Alexey-]

Для такого лучше поставить редактор Brackets от Adobe

[@ДмитрийСеров-ц8з]

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

[@МаксимОбезинский]

Сделал всё как в видео выходит "Not Found" во всех браузерах. Что не так???

[@iomoio3897]

Адрес, который набираете в браузере, не соответствует прописанному в скетче. Как вариант.

[@Ardbot-fp8oq]

@@iomoio3897 Должен соответствовать. Иначе выдаст другую ошибку. Это пустая директория. как вариант -файл через FTP не загружен

[@СергейКлимович-р8е]

Спасибо. У Вас будет урок как зайти на ESP из интернета через роутер ?

[@iomoio3897]

Это уже есть на канале: kzbin.info/www/bejne/m2PNaaR8hLKSos0

[@СергейКлимович-р8е]

Хочу сделать удаленное управление и контроль аквариума. У Вас будет возможность смены сетевых настроек WI-FI при старте ESP, с возможностью сохранения их в EEPROM ?

[@iomoio3897]

@@СергейКлимович-р8е касаемо этого проекта, я пока не решил как лучше организовать или распределить хранение конфигурационных файлов (eeprom, flash). Хочу сделать поддержку нескольких точек доступа и нескольких программируемых таймеров. Плюс кое-какие настройки для доступа из интернет. Боюсь не уложиться в 4Кб. Посмотрим.

[@silentage6310]

зря вы вообще им показали возможность синхронных запросов. они и так уже в браузере deprecated, и скоро в новых работать не будут. кто позже будет пробовать может и не заработать. у меня дев хром, в консоли выводится "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check xhr.spec.whatwg.org/."

[@silentage6310]

надо было сразу fetch показывать и не путать народ 2мя разными способами

[@iomoio3897]

Синхонные запросы будут всегда, потому что есть задачи, для которых они подходят больше. А то что у Вас пишет браузер, так это предупреждение, а не ошибка. Там же написано, что "плохо влияет на опыт пользователя", но это не ошибка. Браузер заточен под веб-сайты, а не под то что мы делаем в этом проекте. В 4-й части я объясню, почему использовал синхронные запросы именно в этом случае. ;) Поверьте, здесь это более удачное решение!

[@silentage6310]

@@iomoio3897 наверное потому что если нажать второй раз не дождав первого ответа будет что-то плохое?

[@iomoio3897]

@@silentage6310 примерно так и есть )

[@user-xj7db6ww5e]

Як налаштувати програму, як запустити? нічого не сказано!

[@iomoio3897]

Посмотрите предыдущую часть. Это продолжение.

[@user-xj7db6ww5e]

@@iomoio3897 я не про ide

[@user-xj7db6ww5e]

@@iomoio3897 у мене весь сервер розміщений на esp, а тут я зрозумів на комп'ютері/смартфоні?!

[@SeregaTikhonov]

Отличный материал! Подскажите, как можно реализовать через браузер управление роботом. Необходимо чтобы при нажатии и удерживании кнопки модель двигалась, когда отпускаем кнопку, сигнал на движение прекращался. Это нужно сделать именно через браузер, кроссплатформенно, чтобы управлять с любого устройства без предустановки специального ПО. Такое возможно?

[@iomoio3897]

Да, возможно. Но будет небольшая задержка. В доли секунды. С помощью JS можно отслеживать такие события как начало и окончание нажатия на элемент.

[@MrFugion]

Проблемная плата в плане того что вайфай отваливается

[@RomanTkachenkoU]

JavaScript - не является полноценным языком программирования.

[@TerrockFull]

брєд ні слова що на пк має бути віфі, похвастав що вміє програмувати... відео для тих хто і без нього знає як це зробити....

[@CharleyDonar]

Спасибо!

[@andreylezhenikov7855]

Спасибо! Как раз искал эту информацию! Если будет возможность раскажите , как это работает через связку Ардуино + sim800l.

[@dyadya5746]

А если забыл, сколько откусил под фтп, как посмотреть обьем? И можно ли его менять в последующем?

[@moykumir]

желательно тип скрипта обозначать, так как в html может быть не только javascript

[@АртемГладышев-е8ю]

Спасибо

[@АлександрГерц-д6й]

Быстро же вы штопаете видосы...

[@ТимСлим]

Спасибо за полезное видео!

[@TheRecordinginfo]

спасибо за уроки, очень доходчиво.

[@abnatop]

Волшебно! Лайк.

[@rupishev1985]

Полезные уроки, спасибо! У вас есть в планах урок управление esp через телеграмм бот?

[@iomoio3897]

Да, еще и поинтереснее в планах есть. ;)

[@-Alexey-]

@@iomoio3897 Это офигенно!

[@lobanovvasili]

Спасибо за видео!