ArduinoでWeb制御電球：ステップバイステップガイド

必要な部品と材料

部品	数量
Arduino UNO	1
PHPoC Shield 2 for Arduino	1
PHPoC 4ポートリレーボード	1
電球	1

プロジェクト概要

Web経由での制御は最近では当たり前になりました。このシンプルなプロジェクトでは、Web経由で電球を制御するアプリケーションの作り方を紹介します。

決して新しいことではありませんが、Webベースの制御がわずかなステップで自分で実現できることがお分かりいただけるでしょう。Webプログラミングの知識があれば、デバイスを制御・監視するWebベースのアプリケーションを誰でも作れます。

デモはこちらで見られます。

ハードウェア構成

まずハードウェアをセットアップします。ここではArduino Unoボード、PHPoC WiFiシールド、PHPoC Arduinoリレーボードを使用します。

仕組み

次に「Webベース」の部分です。PHPoCシールドと組み合わせることで、ArduinoボードがWebサーバー/WebSocketサーバーになります。基本的に必要なのは：

+ クライアントサイドコード：電球を制御するWebベースのユーザーインターフェースを提供。ユーザーが制御コマンドをWebサーバー（Arduinoボード）に送信できるようにするUI。また、サーバーからのレスポンスで送られてくる電球のステータスを表示。このWebページのソースコードをシールドにアップロードする必要があります。Webブラウザ（Webクライアント）からHTTPリクエストを受信すると、シールド（Webサーバー）が解釈済みのWebファイルをブラウザに送信します。

+ サーバーサイドコード：Webブラウザから送信されたデータに基づいて電球を制御。コードはArduinoボード上で実行され、ループしながらWebクライアントからのリクエストがあるかチェックし、リレーを設定して電球のオン/オフを制御し、電球のステータスをWebブラウザに送信します。

このプロジェクトでは、電球を表示するSVG要素と、Webから制御コマンドを送信するボタンを作成しました。WebブラウザとWebサーバーはWebSocketで通信します。WebSocket接続はリアルタイムアプリケーションに適しています。

UI作成に労力をかければ見栄えは良くなりますが、心配いりません。インターネット上には共有リソースが大量にあるので、自分ですべてプログラミングする代わりに、UI用のクールな無料ソースコードを見つけられるかもしれません。

お読みいただきありがとうございました :D.

リレーについて詳しくはこのチュートリアルをご覧ください。

コード

remote_led.php 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" xmlns:xlink="https://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 = ""; 
    if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) { 
      // ネットワークリソース識別子をUNCパス名に変換
      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; 
  // 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>

remoteLed.ino Arduino

Webブラウザから送信されたWebSocketデータに基づいてI/O制御を処理するサーバーサイドコード

#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 [WiFi] Shieldの初期化:
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); 
  //Phpoc.begin(); 
  // WebSocketサーバー開始
  server.beginWebSocket("remote_led"); 
  // PHPoC [WiFi] ShieldのIPアドレスをシリアルモニタに出力:
  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; 
      } 
    } 
  } 
}