Домашняя автоматизация с использованием Captive Portal: 9 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

Здесь мы собираемся создать очень интересный проект домашней автоматизации на основе Captive Portal с использованием nodeMCU с нуля … Итак, приступим …

Шаг 1: Начальные объявления

Объявите контакты ввода-вывода nodeMCU для выполнения действий, файлов заголовков и кода для создания DNS-сервера.. как показано на изображении..

Шаг 2: HTML-код для Front End I.e. Страница авторизации

Как показано на рисунке, объявите HTML-код в строковой переменной, которую мы отправляем конечному пользователю для проверки кода доступа.

* Чтобы уловить данные, введенные пользователем, здесь мы используем панель привязки и тег href

* Обычно тег привязки используется для добавления другой веб-страницы на веб-страницу, а тег href определяет место назначения ссылки.

* Но здесь мы получаем данные, введенные пользователем в поле кода доступа через панель привязки и тег href…

как, я упомяну о двух методах перехвата ввода из веб-интерфейса в наши средства программистов..

Шаг 3. Использование методов WebServer.arg () и WebServer.on ()

Как я упоминал в предыдущем шаге, я расскажу вам два разных метода..

1) Используя метод webServer.arg ():

Здесь мы указываем атрибут автофокуса вместе с элементом, как показано на рисунке, Что делает автофокус, так это то, что это логический атрибут, когда он истинен, означает, что он гарантирует, что элемент ввода будет сфокусирован при загрузке страницы.

а затем мы вызываем метод args () для объекта сервера. Этот метод вернет количество параметров запроса, которые были переданы по HTTP, и применит условные операторы для выполнения соответствующих действий.

2) Используя атрибут и href:

Здесь мы указываем наши элементы управления (например, кнопки) внутри и назначаем строку, char, ссылку, которую вы хотите проверить с помощью условных операторов, а затем вызываем webServer.on (), чтобы получить ввод для проверки.

Как показано..

Шаг 4. Если пользователь вводит неправильные учетные данные

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

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

Как показано..

Шаг 5: Как добавить изображение на вашу веб-страницу

Это очень просто, потому что здесь мы не сохраняем наши изображения в физическом хранилище, поэтому мы предоставляем путь для получения этого изображения, что мы обычно делаем в случае html-страницы.

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

Шаг 6: Какие компоненты нам нужны

1) - nodeMCU

2) - Arduino IDE для прошивки nodeMCU

3) -провода перемычки (F-2-F)

4) -Релейный модуль

5) -Смартфон или ноутбук с поддержкой Wi-Fi для тестирования

Шаг 7: Подключения

Добавьте модуль реле к заявленным контактам ввода-вывода в коде.

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

Шаг 8: Теперь протестируйте и наслаждайтесь

Шаг 9. Код здесь

Напишите, пожалуйста, ценные комментарии..