В течение последних нескольких недель я передавал управление освещением настроения в своей студии зрителям во время прямой трансляции подкаста Technophilia — результаты этого можно увидеть в записанном эпизоде здесь . Сегодня я подумал, что объясню, как именно я это сделал, используя немного JavaScript , Processing и 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 в подкаталоге вместе с другими файлами) , но позвольте мне дать краткое описание кода.
- PHP : определить, есть ли переменная записи, называемая ‘colors’. Если это так, откройте файл LED.txt для записи и перезапишите переменные post.
- HTML : импорт jQuery , Spectrum.js и Spectrum.css
- JavaScript : функция getRGB возвращает массив значений RGB, разделенных запятыми, для различных цветовых форматов CSS, таких как #aaaaa.
- JavaScript : создайте элемент управления Spectrum и прикрепите AJAX-вызов к измененному цвету выбранного события. AJAX вызывает этот файл обработчика со значениями RGB, заданными элементом управления.
Наконец, убедитесь, что ваш файл LED.txt доступен для записи на сервере. Разрешение 655 или 777 должно сделать это. Запустите файл и попробуйте; Приложение обработки должно быть запущено и будет обновлять файл каждую секунду. Если палитра цветов даже не отображается на странице, проверьте консоль JavaScript на наличие ошибок.
Подводные камни и дальнейшая работа
Как я уже упоминал, этот метод не использовал Ethernet-щит специально, поэтому любой, у кого есть базовый хостинг, может настроить его очень быстро и недорого. Однако это означает, что нам нужно использовать приложение Processing, чтобы действовать в качестве шлюза для извлечения данных; без запуска ПК он просто не будет работать. С добавлением щита Ethernet или WiFi мы можем перемещать Arduino куда угодно, не привязываясь к ПК, и либо извлекать команды удаленно, либо передавать их прямо в Arduino с небольшой переадресацией портов. Я займусь этим в другой день. Есть также проблема параллелизма — способ, которым мы настроили это, состоит в том, что файл будет просто перезаписываться каждый раз, когда кто-то выбирает новый цвет, и задержка между изменениями цвета определяется в коде обработки. Если вы хотите, чтобы множество пользователей постоянно настраивали цвет, система с базой данных в очереди может быть более подходящей; использование плоского файла для хранения значений может привести к игнорированию некоторых изменений, если обновления происходят чаще, чем мы обновляем файл. Тогда, конечно, у вас нет возможности узнать, сработало ли это тогда, если вы не смотрели нашу прямую трансляцию. В идеале, на странице управления должна быть установлена и встроена веб-камера. Хотя, как технологическая демонстрация, я думаю, что это довольно круто; Я надеюсь, что вы можете увидеть потенциал для дистанционного управления практически всем через Интернет через Arduino. Джастин предложил нам передать контроль над моей духовкой ; Я отказался. У вас есть интересные проекты, которые, по вашему мнению, могут помочь?