Пришло время для проекта на выходные и снова поиграть с 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
И последнее, но не менее важное: скачайте полные коды этого проекта здесь. Спасибо.