Как настроить веб-управление Arduino без щита Ethernet

веб-контроль ArduinoВ течение последних нескольких недель я передавал управление освещением настроения в своей студии зрителям во время прямой трансляции подкаста Technophilia — результаты этого можно увидеть в записанном эпизоде ​​здесь. Сегодня я подумал, что точно объясню, как мне это удалось, используя немного JavaScript, Processing и Arduino. Метод, который я опишу, не требует щита Ethernet для вашего Arduino, и я также предоставлю вам полные примеры кода для использования.

Требования:

  • Arduino
  • Подсветка для управления соответствующей цепью на Arduino; см. мой учебник по окружающей подсветке

    с прошлой недели для принципиальной схемы и поломки компонентов.

  • Обработка программного обеспечения на вашем ПК или Mac
  • Хостинг сайтов
  • Базовые навыки программирования на JavaScript и PHP, хотя я предоставлю полный код, который вы можете настроить.

Настройка Arduino

Прежде всего, вернитесь к учебнику прошлых недель, чтобы узнать об Arduino.

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

Приложение обработки

Приложение обработки, которое мы будем использовать, очень простое (PASTEBIN); он использует основной loadStrings () функция для чтения текстового файла, хранящегося на удаленном веб-адресе — в этом случае я использовал http://jamesbruce.me/lights/LED.txt. Создайте пример текстового файла на своем веб-хосте, чтобы проверить это, и скорректируйте его соответствующим образом. Текстовый файл должен содержать всего 3 строки значений для R, G и B. веб-проекты Arduino Вам также необходимо изменить последовательный порт на тот, к которому подключен ваш USB. Как и прежде, первое, что сделает приложение, это выведет список последовательных портов на консоль — проверьте, какой из них правильный, затем снова запустите. Ваша светодиодная лента Arduino должна загореться любыми случайными значениями, которые вы добавили в текстовый файл.

Arduino Web Control

На веб-странице управления я выбрал простой плагин выбора цвета jQuery под названием Spectrum; Есть и другие, но я чувствовал, что это было так просто, как нужно, а также работает с сенсорным на мобильном телефоне, в то время как другие, которые я пробовал, не будут. Поместите spectrum.js а также spectrum.css файлы в том же каталоге, что и все остальное (я создал подкаталог / lights на моем сервере, чтобы сохранить вещи в чистоте). веб-проекты Arduino Мы будем использовать PHP как для отображения веб-элемента управления, так и для обработки LED.txt запись в файл, если переменные заданы в запросе POST. Когда пользователь заходит на эту страницу и выбирает цвет, он отправляет запрос AJAX с переменными цвета обратно к себе. Это сохраняет все, что содержится в одном файле. Полный PHP / HTML может быть найден в этой папке (сохраните его как index.php в подкаталоге вместе с другими файлами), но позвольте мне дать краткое описание кода.

  1. PHP: Определить, есть ли переменная записи под названием «colors». Если это так, откройте файл LED.txt для записи и перезапишите переменные post.веб-проекты Arduino
  2. HTML: Импортировать JQuery, Spectrum.js, а также Spectrum.css
  3. JavaScriptФункция: getRGB возвращает массив значений RGB, разделенных запятыми, для различных цветовых форматов CSS, таких как #aaaaa. Как настроить веб-управление Arduino без Ethernet Shield web contrl get rgb
  4. JavaScript: создайте элемент управления Spectrum и прикрепите вызов AJAX к событию, выбранному измененным цветом. AJAX вызывает этот файл обработчика со значениями RGB, заданными элементом управления.веб-контроль Arduino

Наконец, убедитесь, что ваш LED.txt файл доступен для записи на сервере. 655 или же 777 разрешение должно сделать это. Запустите файл и попробуйте; Приложение обработки должно быть запущено и будет обновлять файл каждую секунду. Если палитра цветов даже не отображается на странице, проверьте консоль JavaScript на наличие ошибок.

Подводные камни и дальнейшая работа

Как я уже упоминал, этот метод не использовал Ethernet-щит специально, поэтому любой, у кого есть базовый хостинг веб-сайтов, мог настроить его очень быстро и недорого. Однако это означает, что нам нужно использовать приложение Processing, чтобы действовать в качестве шлюза для извлечения данных; без запуска ПК он просто не будет работать. С добавлением щита Ethernet или WiFi мы можем перемещать Arduino куда угодно, не привязываясь к ПК, и либо извлекать команды удаленно, либо передавать их прямо в Arduino с небольшой переадресацией портов. Я займусь этим в другой день. Существует также проблема параллелизма — способ, которым мы его настроили, заключается в том, что файл будет просто перезаписываться каждый раз, когда кто-то выбирает новый цвет, а задержка между сменами цветов определяется в коде обработки. Если вы хотите, чтобы множество пользователей постоянно настраивали цвет, система с базой данных в очереди может быть более подходящей; использование плоского файла для хранения значений может привести к тому, что некоторые изменения будут игнорироваться, если обновления происходят чаще, чем мы обновляем файл. Тогда, конечно, у вас нет возможности узнать, сработало ли это тогда, если вы не смотрели нашу прямую трансляцию. В идеале, на странице управления должна быть установлена ​​и встроена веб-камера. Хотя, как технологическая демонстрация, я думаю, что это довольно круто; Я надеюсь, что вы можете увидеть потенциал для дистанционного управления практически всем через Интернет через Arduino. Джастин предложил нам передать контроль над моей духовкой; Я отказался. У вас есть интересные проекты, которые, по вашему мнению, могут помочь?

Ссылка на основную публикацию
Adblock
detector