Пришло время для проекта на выходные и снова поиграть с javascript. Проведя несколько экспериментов с использованием javascript на стороне сервера (AKA Node.js), сейчас я попытаюсь создать что-нибудь другое. На этот раз мы создадим настольное приложение, которое взаимодействует с физическим миром. Цель этого проекта - разработать приложение «Лампа», которое управляется датчиком освещенности - лампа в приложении будет светиться, если мы находимся в темноте, и наоборот. Вот так.

Ингредиенты

Программное обеспечение
1. Электрон
3. Джонни Файв
4. Экспресс
5. Socket.io

Аппаратное обеспечение
1. Плата Arduino (я использую Arduino UNO)
2. Макетная плата
3. LDR / светозависимый резистор
4. Резистор 10 кОм
5. Несколько перемычек (на самом деле нам нужно всего три провода)

Electron, изначально созданный ребятами из github, работает в их текстовом редакторе Atom. Используя Electron, мы можем создать собственное настольное приложение для нескольких платформ (macOS, Windows и Linux), используя только веб-технологии - HTML / CSS / Javascript. По сути, это браузер на основе Chromium, и мы пишем на его основе веб-приложение. Electron поставляется с API, чтобы упростить взаимодействие с файловой системой ОС, меню ОС, системой уведомлений, автоматическим обновлением и т. Д., Чтобы он больше походил на собственное настольное приложение. И в качестве бонуса мы можем легко интегрировать модуль Node.js в приложение на основе Electron.

О Arduino, со страницы википедии,

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

Вы можете узнать больше об Arduino на его странице в Википедии или на официальном сайте.

Johnny Five - это модуль Node.js, использующий Firmata для связи с самой Arduino. Используя этот модуль, мы можем легко взаимодействовать с Arduino только с помощью Javascript, нет необходимости писать C / C ++ с помощью Arduino IDE. Пожалуйста, проверьте эту ссылку, чтобы получить более подробную инструкцию, как настроить Arduino для работы с Johnny Five. Что касается программирования, если вы знакомы с API в стиле jQuery, тогда вы готовы опробовать API Johnny Five.

Socket.io - это библиотека javascript для WebSocket, которая обеспечивает обмен данными в реальном времени и на основе событий, в данном случае между значением, обработанным Johnny Five (от датчиков) до пользовательского интерфейса.

Пользовательский интерфейс

Пользовательский интерфейс нашего приложения настолько прост. Мы поместим значок лампочки в центр окна и поместим светящийся кружок под значком. Мы будем контролировать непрозрачность светящегося круга, используя значение, полученное от датчика LDR. Для простоты мы будем использовать Font Awesome - использовать в качестве значка из CDN.

Коды

Напишем коды. Возьмите быстрый запуск электроники, используя следующую команду.

$ git clone https://github.com/electron/electron-quick-start lamp
$ cd lamp
$ npm install

После завершения процесса перейдите к установке других зависимостей.

$ npm install --save johnny-five express socket.io

Мы создадим дополнительный код, чтобы это приложение работало. Сначала мы напишем код для «серверной части» приложения, мы называем его «server.js». После запуска приложения этот код будет запускаться в фоновом процессе приложения, проверять, правильно ли подключена плата Arduino, получать значение от датчика и запускать событие через Socket.io. Вот полный код server.js.

Из приведенного выше кода мы видим, что после инициализации socket.io мы проверяем, подключена ли и готова ли плата (Arduino), и, если она готова, мы продолжаем создавать объект LDR (наш датчик освещенности). LDR будет подключен к выводу «A2» платы Arduino и будет пытаться считывать новое значение каждые 250 мс. Если LDR получает новые данные, мы делаем возвращаемое значение всегда между 0–100 для упрощения вычислений, и Socket.io выдаст новое событие с возвращенными данными.

Затем нам потребуется файл server.js в файле main.js (файл main.js был создан с помощью Electron Quick Start). Вот полный код измененного файла main.js.

Затем мы создадим renderer.js, который будет управлять пользовательским интерфейсом на основе значения, передаваемого Socket.io в фоновом режиме. Мы можем видеть, что если получено событие от Socket.io (событие с именем «ldr»), мы меняем непрозрачность элемента # the-light.

Вот содержание нашего index.html. Мы видим, что renderer.js напрямую выполняется / требуется из index.html.

А вот содержимое style.css

Настройка доски

Доделали коды. Далее мы настроим доску. Вот схема (взята из схемы с демонстрационной страницы сайта Johnny Five).

Теперь вы можете подключить плату Arduino к USB-порту компьютера.

Запуск приложения "Лампа"

Зайдите в терминал и запустите эту команду

$ npm start

Если возникает ошибка «Несоответствие версии модуля», вам необходимо установить дополнительный модуль, используя следующую команду, чтобы исправить эту ошибку.

$ npm install --save-dev electron-rebuild
$ ./node_modules/.bin/electron-rebuild

После завершения процесса повторно запустите команду npm start. Перейдите в темное место, выключите лампу в комнате или накройте LDR рукой. И приложение засветится. Вот рабочий пример:

Вывод

Этот проект выходного дня меня действительно взволновал. Не только интерфейсная часть и серверная часть, теперь можно использовать javascript для подключения к физическому миру благодаря Johnny Five и Arduino. Я надеюсь, что это откроет новые идеи для создания еще одного проекта. Управлять роботом с помощью javascript? Лампа, управляемая твитом? Выбор за вами: D

И последнее, но не менее важное: скачайте полные коды этого проекта здесь. Спасибо.