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

  • Michael Fisher
  • 0
  • 3022
  • 103
Реклама

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

Требования:

  • Arduino
  • Подсветка для управления соответствующей цепью на Arduino; см. мое учебное пособие по фоновой подсветке Создайте свое собственное динамическое окружающее освещение для медиацентра Создайте свое собственное динамическое окружающее освещение для медиацентра Если вы смотрите много фильмов на своем ПК или в медиацентре, я уверен, что вы столкнулись с дилеммой освещения ; Вы полностью выключили все огни? Вы держите их на полную мощность? Или ... с прошлой недели для принципиальной схемы и поломки компонентов.
  • Обработка программного обеспечения на вашем ПК или Mac
  • Хостинг веб-сайтов Разъяснение различных форм хостинга веб-сайтов [Объяснение технологии] Разъяснение различных форм хостинга веб-сайтов [объяснение технологий]
  • Базовые навыки программирования на JavaScript и PHP, хотя я предоставлю полный код, который вы можете настроить.

Настройка Arduino

Прежде всего, вернитесь к учебнику прошлых недель, чтобы узнать, что такое Arduino. Создайте свое собственное динамическое окружающее освещение для медиацентра. Создайте свое собственное динамическое окружающее освещение для медиацентра. Если вы смотрите много фильмов на своем компьютере или в медиацентре, я я уверен, что вы столкнулись с дилеммой освещения; Вы полностью выключили все огни? Вы держите их на полную мощность? Или же… ; код, который мы будем использовать, идентичен, так как я использую ту же схему управления светодиодными лентами RGB, поэтому я не буду повторять это здесь. Подводя итог, Arduino будет считывать значения RGB из последовательного USB-подключения к компьютеру..

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

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

Arduino Web Control

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

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

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

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

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




О современных технологиях, просто и доступно.
Ваш гид в мире современных технологий. Узнайте как использовать технологии и гаджеты, которые нас окружают каждый день и научитесь открывать интересные вещи в Интернете.