Разработка WEB-интерфейса для ESP8266. Часть 2: HTML-кнопка, синхронные запросы для управления реле.
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2019
- Во второй части видеокурса создаём простую HTML-кнопку для управления реле, подключенного к ESP8266, по WiFi. А также знакомимся с языками HTML, CSS, JavaScript и пробуем синхронные запросы для переключения реле.
Присоединяйтесь ВКонтакте: im_pub
HTML-файл из видео: iomoio.ru/static/lesson2.zip
Первая часть: • Разработка WEB-интерфе...
WinSCP (FTP-клиент): winscp.net/eng/download.php
NotePad++ (редактор HTML, CSS, JS): notepad-plus-plus.org/download/
Необходимое на 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 #вебинтерфейс #интерфейс - วิทยาศาสตร์และเทคโนโลยี
Заходил на канал с пол года назад. С целью, освоить беспроводное взаимодействие с контроллером. Тогда контент мне показался сложным для освоения. Потом изрядно походил по граблям, нахватался разрозненной информации и что-то начало получаться. Теперь, когда снова наткнулся на ваши уроки, очень удивился. Все стало очень доступным и понятным. Вы упорядочили и разложили все по полочкам. Очень подробно и доступно! Огромное вам спасибо за ваш полезнейший труд! 🤝
Тот момент когда ты вебразработчик и в качестве хобби интересуешься самоделками и умным домой)
Может, кто-нибуль на Вашем канале ради интереса выучит html/css/js и тоже станет разработчиком))
Очень классная подача материала, всё доходчиво и понятно, спасибо за Ваш труд!
Спасибо! Очень полезная информация. Отлично излагаете материал, вас приятно слушать.
Замечательная подача материала. Автору глубочайший респект, лайки и подписка.
Спасибо за прекрасное видео!!! Очень доступно. С нетерпением жду последующих видео!!! Еще раз спасибо!!!!!!!
спасибо за уроки, очень доходчиво.
Да, видео отличные, автор молодец, рассказывает подробно, одно плохо, мало таких роликов по ESP у автора, да и в целом таких хороших мало.
автору однозначно лайк за простое объяснение того что нужно чтобы реализовать проект. рекомендую новичкам именно союз телефон и ESP8266. не нужно куча кнопок дисплеев модулей когда есть телефон и wifi. начните именно с этого программирование. и также рекомендую научиться правильно задавать вопросу chat gpt и получать готовый код в начале это очень будет хорошей помощью.
Именно так и делаю уже пару недель, начал задавать ему вопросы с 0 знанием программирования, и смогу сказать одно, без базовых знаний ты неделю будешь сидеть и офигевать от его ответов, он при одних и тех же запросах отвечает по-разному, часто делает ошибки в коде, которые сам потом решить не может и т.д, но спустя 10 дней я уже приблизительно понимаю код, хоть сам его написать не смогу, но и смысла в этом нет, когда за тебя всё пишет машина 😁
Волшебно! Лайк.
Логично, понятно, бел лишних лирических отступлений! Жалко что проект закрыт...
Спасибо за полезное видео!
Надеюсь видео будет выходить каждую неделю ✔️
Я тоже на это надеюсь. ) Хотелось бы и чаще конечно, но быт...
Спасибо за видео!
Жаль нельзя поставить тыщу лайков. Материал БОМБА!
Годно, спасибо!
Спасибо!
Смотрел 10ки часов уроков по вёрстке, этот самый простой, понятный,короткий!
Короткое резюме горки знаний... КАРКАС... далее работать со стилями по желанию!
Красава 👍
молодец! Продолжай в том же духе, сейчас планирую писать код под крутой проект - надо обучаться, в нтмл проще всего интерфейс сделать. прокинуть линк до роутера останется и вуаля. делаю умный дом под управление светом и климатом. с построением графиков, если не сложно нужно направление - можно и на иностранные источники. блинк не предлагать там как оказалось та еще куча багов.
Спасибо! Как раз искал эту информацию! Если будет возможность раскажите , как это работает через связку Ардуино + sim800l.
Спасибо
последняя фраза понравилась)
здорово, продолжение курса будет(5,6..)?
Можно обойти момент с загрузкой файла по фтп на есп.
А написать данный файл в Ардуино Иде и подключить как библеотеку
Здравствуйте! Возможен ли ввод пароля и названия сети не через скетч, а через HTML (как в приложении для андроид)?
охриненно понятно ++++++++++++++++++++++++++++++++++++
вот CSS для начала совсем не обязательно, это для удобства в больших проектах. Для понимания без него легко обойтись. А в целом - молодец!
Здравствуйте ..а подскажите как реализовать несколько кнопок на разные пины???
какой охуенный контент!!даже не подозревал, что внутри модуля для ардуинки можно запустить веб сервер, фтп и грузить туда файлы, прям как на хостинг))а базу данных типа mysql может там ещё можно развернуть?))
th-cam.com/video/bKJpgown-oQ/w-d-xo.html
@@iomoio3897 охренеть. Заказал у китайцев на 3 рубля всякой всячины, будем пробовать) огромное спасибо за такие видосы!
желательно тип скрипта обозначать, так как в html может быть не только javascript
Полезные уроки, спасибо!
У вас есть в планах урок управление esp через телеграмм бот?
Да, еще и поинтереснее в планах есть. ;)
@@iomoio3897 Это офигенно!
реально чтобы это хорошо понять нужно базовый курс пройти html, css, js - вот тогда поймешь что к чему
пересмотрел это видео спустя 2 месяца, уже совсем по другому смотрится, когда понимаешь о чем речь идет! так что всем рекомендую, на яндексе стати есть бесплатная часть базового курса по этому направлению, поищите ... ну и так еще полно в ютубе
А если забыл, сколько откусил под фтп, как посмотреть обьем? И можно ли его менять в последующем?
В этом примере думаю можно удалить строку var relay = document.getElemenById("relay_button");
Можно сразу писать relay_button.addEventListener('click', relay_inverse);
Этот скрипт будет дорабатываться в следующих скринкастах. Указанная строка будет нужна. ;)
@@iomoio3897Просто написал что есть и такой вариант) Я обычно пишу все в одном файле и картинки и css и js, чтобы не делать множество get запросов
Спасибо... Как из редактора Notepad++ запускать код и видеть кнопку. Как в уроке ?
Для такого лучше поставить редактор Brackets от Adobe
Подскажите, пожалуйста, как можно решить проблему. На этапе переноса файла 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 и все. Модуль перезагружал, толку нет
@@user-rn9is7hy1q Да, точно ты говоришь! Это влияет на загрузку по FTP, а то что у тебя не появилась кнопка это из-за того, что неправильно указал ссылку - т.е нужно убрать relay_switcher в конце!
Спасибо. У Вас будет урок как зайти на ESP из интернета через роутер ?
Это уже есть на канале: th-cam.com/video/e2j8qFOM_lk/w-d-xo.html
Хочу сделать удаленное управление и контроль аквариума. У Вас будет возможность смены сетевых настроек WI-FI при старте ESP, с возможностью сохранения их в EEPROM ?
@@user-sz3dx9ee1u касаемо этого проекта, я пока не решил как лучше организовать или распределить хранение конфигурационных файлов (eeprom, flash). Хочу сделать поддержку нескольких точек доступа и нескольких программируемых таймеров. Плюс кое-какие настройки для доступа из интернет. Боюсь не уложиться в 4Кб. Посмотрим.
А можна роздати точку доступу з телефона і управляти так
Теперь нужно асинхронно выводить на страницу состояние реле
Асинхронные запросы будем разбирать в 4-й части. Но если Вас устроит решение без объяснений, т.е. просто хотите знать как асинхронно получить ответ от сервера, то напишите в группе ВК, я скину пример функции с таким запросом.
@@iomoio3897 примеров найти пачку несоставляет труда, буду ждать обьяснение. Ооочень хорошие уроки, нет воды, все посути!
спасибо за уроки ! проблема : с телефона запросы из первого урока отправляются , с компа через браузер так-же все соединяется , а вот через WinSCP ни как не подключиться ((( в чем может быть проблема ? спасибо .
аналогично. адрес открывается, а вот FTP не подключается. Буду пробовать другую прогу
Все получилось. Исправил 2 момента в IDE "Инструменты -> Erase flash -> All flesh contents" и выбрал настройки памяти esp 8266 "512 kB (64 SPIFFS)" (старый модуль, думаю можно больше места дать)
И обозначение те места кода , которые встречаете,! с декларацией и/ или созданием класса , шаблона, интерфейса мы не маги...мы только учемся!
Что делать,если при копировании файлов на сервер выбивает ошибку:
Не могу получить содержимое каталога
No data connection MLSD
????????
При работе с контроллером стоит избегать работы с папками в файловой системе. Используйте файлы только в корневом каталоге.
Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.
Отличный материал! Подскажите, как можно реализовать через браузер управление роботом. Необходимо чтобы при нажатии и удерживании кнопки модель двигалась, когда отпускаем кнопку, сигнал на движение прекращался. Это нужно сделать именно через браузер, кроссплатформенно, чтобы управлять с любого устройства без предустановки специального ПО. Такое возможно?
Да, возможно. Но будет небольшая задержка. В доли секунды. С помощью JS можно отслеживать такие события как начало и окончание нажатия на элемент.
Ошибка: Невозможно подключиться к серверу
Как решить эту проблему?
Проверьте подключение к wifi-сети модуля, проверьте прокотол (должен быть FTP, а не SFTP или что-то еще), проверьте порт (должен быть 21), проверьте логин и пароль для доступа к FTP. Проверьте IP-модуля (выводится в серийный порт). Всё проверьте!)
@@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
Ошибка: Невозможно подключиться к серверу
Все проверял по несколько раз, все хорошо.
@@vitalij_ukr Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.
Я поменял в настойках ардуиновской среды параметры в Erase flash на all flesh contents и поставил размер памяти 1 Мб, FS 512, OTA 256, после этого файл index.html удалось переместить.
Сделал всё как в видео выходит "Not Found" во всех браузерах. Что не так???
Адрес, который набираете в браузере, не соответствует прописанному в скетче. Как вариант.
@@iomoio3897 Должен соответствовать. Иначе выдаст другую ошибку. Это пустая директория. как вариант -файл через FTP не загружен
Блин уже пару часов сижу и думаю как файл на ESP передать. С телефона ftp не передается, уже кучу клиентов перепробовал. С компа этот адрес не виден, т.к. у меня дома естественно другая подсеть. Пытался найти как в свою домашнюю подсеть ввести ESP, но пока мозгов не хватает.
Извините за резкость. Но не пихайте js туда где и без него все могло работать. Вообщет-то является частью И может отправить данные без участия js. Js в большинстве случаев впринципе ненужен и много где без него впринципе можно обойтись. Уча человека в самых базовых вещах делать такие косяки, в итоге и выходит что маленький iot бужет хавать оперативку браузера и порождать гигабайты трафика впустую.
Як налаштувати програму, як запустити? нічого не сказано!
Посмотрите предыдущую часть. Это продолжение.
@@iomoio3897 я не про ide
@@iomoio3897 у мене весь сервер розміщений на esp, а тут я зрозумів на комп'ютері/смартфоні?!
Так и не понял, зачем ради слайда кнопки использовать JS, когда можно просто сделать кнопку "submit", и использовать метод "POST", лишний гемор, это же простой пример, пускай таким и остается.
зря вы вообще им показали возможность синхронных запросов. они и так уже в браузере 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/."
надо было сразу fetch показывать и не путать народ 2мя разными способами
Синхонные запросы будут всегда, потому что есть задачи, для которых они подходят больше. А то что у Вас пишет браузер, так это предупреждение, а не ошибка. Там же написано, что "плохо влияет на опыт пользователя", но это не ошибка. Браузер заточен под веб-сайты, а не под то что мы делаем в этом проекте. В 4-й части я объясню, почему использовал синхронные запросы именно в этом случае. ;) Поверьте, здесь это более удачное решение!
@@iomoio3897 наверное потому что если нажать второй раз не дождав первого ответа будет что-то плохое?
@@silentage6310 примерно так и есть )
Проблемная плата в плане того что вайфай отваливается
Быстро же вы штопаете видосы...
JavaScript - не является полноценным языком программирования.
брєд ні слова що на пк має бути віфі, похвастав що вміє програмувати... відео для тих хто і без нього знає як це зробити....
Спасибо!
Спасибо