아두이노 웹 제어 전구 - 단계별 구축 가이드

부품 및 소모품

프로젝트 개요

웹을 통한 제어는 이제 표준이 되었습니다. 이 프로젝트에서는 웹 브라우저에서 전구를 제어하는 애플리케이션을 만드는 방법을 보여줍니다.

특별한 기술은 아니지만, 웹 기반 제어 시스템을 단 몇 단계로 직접 구현할 수 있음을 보여줍니다. 웹 프로그래밍 기초 지식이 있다면 누구나 디바이스 제어/모니터링 웹 앱을 만들 수 있습니다.

하드웨어 구성

아두이노 우노, PHPoC WiFi 실드, PHPoC 아두이노 릴레이 보드를 사용합니다.

작동 원리

PHPoC 실드와 결합하면 아두이노가 웹 서버/웹소켓 서버 역할을 합니다. 크게 두 부분으로 나뉩니다:

클라이언트 측 코드 (웹 UI)

• 전구 제어용 웹 인터페이스 제공
• 사용자 명령을 웹 서버(아두이노)로 전송
• 서버로부터 전구 상태를 받아 화면에 표시
• 웹 페이지 소스는 실드에 업로드되며, 브라우저의 HTTP 요청에 응답해 파일을 전송

서버 측 코드 (아두이노)

• 브라우저가 보낸 데이터에 따라 릴레이 제어 → 전구 ON/OFF
• 아두이노에서 루프 실행하며 웹 클라이언트 요청 확인
• 전구 상태를 브라우저로 전송

이 프로젝트에서는 SVG로 전구 그래픽을 그리고 버튼으로 제어 명령을 보냅니다. 브라우저와 서버는 웹소켓으로 통신하며, 실시간 제어에 적합합니다.

UI 디자인에 공을 들일수록 보기 좋아지지만, 인터넷에 무료 리소스가 많으니 직접 다 만들 필요는 없습니다.

코드

remote_led.php (클라이언트 측 - PHPoC 실드에 업로드)

<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="https://www.w3.org/2000/svg" viewBox="0 0 275.3 413.3">
        <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.8c7.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.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="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16v-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-19h41.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.4c0,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.5c-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.4c-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, 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 = "";
      if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
        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 = "Can not connect to Arduino Board. 
 Please check again and reload this page!";
    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;
    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>

remoteLed.ino (서버 측 - 아두이노에 업로드)

#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);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_led");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
  Expansion.begin();
  Serial.println(relay.getName());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    if (client.available() > 0) {
      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;
      }
    }
  }
}