Контролируем лампочку через интернет и Ардуино

Простой урок по изучению управления устройством через веб-браузер и интернет с использованием плат Ардуино.

Комплектующие

Компоненты оборудования, которые нам понадобятся для контроля лампы через интернет приведены ниже:

• 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;
      }
    }
  }
}

Итоговый результат

После того, как вы создадите данный проект у вас должно получиться вот так:

Контроль устройств через Интернет становится нормой в наши дни. В этом простом уроке мы покажем как создать приложение, которое управляет лампочкой через Интернет.

Конечно, это не что-то совершенно новое, но вы сможете увидеть и понять, что для реализации подобных проектов самостоятельно нужно сделать всего несколько шагов. Любой, кто обладает знаниями в области веб-программирования, может создавать приложения для управления / мониторинга устройств.

На этом всё. Таким образом вы можете расширить проект и начать контролировать другие модули и устройства, например, шаговые двигатели.