Простой урок по изучению управления устройством через веб-браузер и интернет с использованием плат Ардуино.
Комплектующие
Компоненты оборудования, которые нам понадобятся для контроля лампы через интернет приведены ниже:
- Arduino UNO
- PHPoC Shield 2 для Arduino × 1
- PHPoC 4-портовая релейная плата × 1
- Лампочка × 1
После того как мы собрали комплектующие - мы должны всё соединить. Говоря грамотно, - настроить аппаратное обеспечение. На фото ниже видно плату Arduino Uno, PHPoC WiFi шилд и PHPoC Arduino реле.
Как это работает
Дальше речь больше пойдет о "веб" части устройства. В сочетании с PHPoC Shield плата Arduino стала веб-сервером / сервером WebSocket. Таким образом, в основном нам нужно следующее:
- Код на стороне клиента: предоставить веб-интерфейс пользователя для управления лампочкой. Пользовательский интерфейс должен позволять пользователям отправлять команды на веб-сервер (плата Arduino). Пользовательский интерфейс также отображает состояние лампочки, отправленной в ответе от сервера. Этот исходный код веб-страницы необходимо загрузить на шилд. После получения HTTP-запроса от веб-браузера (веб-клиента) шилд (веб-сервер) отправляет интерпретированные веб-файлы в веб-браузер.
- Код на стороне сервера: управление лампочкой на основе данных, отправляемых веб-браузером. Код запускается на плате Arduino, и представляет собой не что иное, как цикл, который проверяет, есть ли какой-либо запрос от веб-клиента, чтобы настроить реле на включение / выключение лампочки, а затем отправить состояние лампочки в веб-браузер.
В этом проекте создан графический элемент SVG для отображения лампочки и кнопка для отправки команды управления из Интернета. Веб-браузер и веб-сервер взаимодействуют друг с другом через WebSocket. Соединение WebSocket подходит для приложений реального времени.
Чем больше усилий вы потратите на создание пользовательского интерфейса, тем лучше он будет выглядеть. Но не волнуйтесь, в Интернете существует множество ресурсов для совместного использования, поэтому вы можете найти какой-нибудь классный бесплатный исходный код для пользовательского интерфейса вместо того, чтобы делать всё самостоятельно.
Код проекта
Как мы уже обсудили выше - у нас две отдельные части, поэтому мы должны написать две программы. Обе программы вы можете скопировать ниже или скачать архив с нужными программами.
Код сервера
<html>
<head>
<title>
<? echo system("uname -i") ?>
</title>
<meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport">
<style>
body {
text-align: center;
font-family: verdana, Helvetica, Arial, sans-serif, gulim;
background: #C2CCD0;
}
h2 {
font-size: 16px;
line-height: 25px;
}
body.active {
background: #E2ECF1;
}
#on {
opacity: 0;
}
.active #on {
opacity: 1;
}
.light-bulb {
width: 250px;
height: 400px;
margin-top: 100px
}
.container {
margin: auto;
width: 250px;
}
.switches {
width: 150px;
height: 65px;
background-color: #38434A;
font-size: 24px;
margin: auto;
border-radius: 10px;
color: white;
cursor: pointer;
letter-spacing: 0.2px;
line-height: 65px;
text-align: center;
user-select: none;
transition: none;
}
</style>
</head>
<body>
<div class="container">
<div class="light-bulb">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve">
<g>
<path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />
</g>
<g id="on">
<path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8
c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />
</g>
<g>
<path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16
v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5z" />
<path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19
h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" />
<line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" />
<path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4
c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" />
</g>
<g>
<path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5
c-12.3-16.1-28.4-29.1-46.9-37.8" />
<path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4
c-0.8-2.2-1.8-4.4-2.7-6.5" />
</g>
</svg>
</div>
<div class="switches">
Switch
</div>
</div>
<br>
<h2 id="ws_state"></h2>
</body>
<script>
var is_on;
var ws;
var button = document.querySelector('.switches');
var ws_state = document.getElementById("ws_state");
function init() {
button.addEventListener("click", toogleLed);
connect();
is_on = 0;
}
function connect() {
if (ws == null) {
var ws_host_addr = "<? echo _SERVER("HTTP_HOST") ?>";
if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
// network resource identifier to UNC path name conversion
ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
ws_host_addr = ws_host_addr.replace(/:/g, "-");
ws_host_addr += ".ipv6-literal.net";
}
ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc");
ws_state.innerHTML = "Connecting. Please wait!";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
ws_state.style.display = "none";
display_lightbulb();
}
function ws_onclose() {
button.style.backgroundColor = "#C2C2C2";
ws_state.style.display = "";
ws_state.innerHTML = "<span style='color: gray'>Can not connect to Arduino Board. <br> Please check again and reload this page!</span>";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
is_on = 0;
display_lightbulb();
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
is_on = parseInt(e_msg.data);
display_lightbulb();
}
function toogleLed() {
if (is_on)
ws.send("0");
else
ws.send("1");
}
function display_lightbulb() {
document.body.className = (is_on) ? "active" : "";
}
window.onload = init;
</script>
</html>
Код Ардуино
#include <Phpoc.h>
#include <PhpocExpansion.h>
#define ON '1'
#define OFF '0'
byte expansionId = 1;
ExpansionRelayOutput relay(expansionId, 0);
PhpocServer server(80);
void setup() {
Serial.begin(9600);
while(!Serial)
;
// initialize PHPoC [WiFi] Shield:
Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
//Phpoc.begin();
// start WebSocket server
server.beginWebSocket("remote_led");
// print IP address of PHPoC [WiFi] Shield to serial monitor:
Serial.print("WebSocket server address : ");
Serial.println(Phpoc.localIP());
Expansion.begin();
// get name and print it to serial
Serial.println(relay.getName());
}
void loop() {
// wait for a new client:
PhpocClient client = server.available();
if (client) {
if (client.available() > 0) {
// read a byte incoming from the client:
char thisChar = client.read();
switch(thisChar)
{
case OFF:
Serial.println("Turn LED OFF");
relay.off();
server.write(OFF);
break;
case ON:
Serial.println("Turn LED ON");
relay.on();
server.write(ON);
break;
}
}
}
}
Итоговый результат
После того, как вы создадите данный проект у вас должно получиться вот так:
Контроль устройств через Интернет становится нормой в наши дни. В этом простом уроке мы покажем как создать приложение, которое управляет лампочкой через Интернет.
Конечно, это не что-то совершенно новое, но вы сможете увидеть и понять, что для реализации подобных проектов самостоятельно нужно сделать всего несколько шагов. Любой, кто обладает знаниями в области веб-программирования, может создавать приложения для управления / мониторинга устройств.
На этом всё. Таким образом вы можете расширить проект и начать контролировать другие модули и устройства, например, шаговые двигатели.