How to make

Node.jsでフルカラーLED遠隔制御

Node.jsでフルカラーLEDを制御して見ます。

参考サイト
  1. https://github.com/kosamari/IoT-Boilerplate
    Boilerplate to create Node.js IoT system with Arduino and Socket.io
  2. https://html5experts.jp/girlie_mac/17684/
    Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう
概念図

IoT-Boilerplateより引用

準備
  1. 配線

    https://html5experts.jp/girlie_mac/17684/から引用

    https://html5experts.jp/girlie_mac/17684/から引用

  2. ソースコードのダウンロードと展開 (Linux, mac OSX)
    1. https://github.com/kimio-kosaka/IoT-FullColor-LED からソースをダウロードし展開します。
    2. 展開後の処理は「Node.jsでIoT(Internet of Things)  Lチカ」と同様です。
  3. Arduino UNOにStandardFirmataの書き込み。
    Node.jsでIoT(Internet of Things)  Lチカ」と同様です。
実行

Node.jsでIoT(Internet of Things)  Lチカ」と同様に実行します。

IoT_full_colorR,G,Bのスライダーを動かせばリアルタイムにフルカラーLEDの発色を変化させることができます。

動作

controller.html
次のhtmlスクリプトによりスライダーが表示されます。

 <form action="javascript">
    R : <input type="range" value="0" max="255" min="0" step="1" oninput=" led_r(this.value) ;" /> <span id="id_range_val_r">0</span>
    <br />
ー略ー
</form>
  1. スライダーの値が変化した時oninputイベントでfunction led_r を起動します
  2. 引数this.valueには現在のスライダー値が入ります。
  3. 注意)Internet Explorer等は oninputに対応していません。そのようなwebブラウザを使うときはoninputをonchangeと書き換える必要があります。

function led_r

 function led_r(data){
        var led = document.getElementById('id_range_val_r');
        led.innerHTML=data;
        r = data;
        send_rgb(); 
     }
  1. this.valueはdataに引き渡されます。
  2. その値はスライダーの右に表示される値となります。
  3. グローバル変数rにdataを保存して
  4. funtion send_rgb を呼び出します

function send_rgb

      function send_rgb(){
          socket.emit('rgb',{r:r, g:g, b:b});
      }

メッセージ’ rgb’ とグローバル変数r,g,bの値をserver.jsに送ります。

server.js

  socket.on('rgb', function(data) {
    socket.broadcast.emit('rgb', data);
  });

rgbメッセージはclient.jsに送られます。

clien.js

  socket.on('rgb', function(data){
      rgb_led.color({red:data.r, green:data.g, blue:data.b });
  });

rgbメッセージを受信すると,フルカラーLED制御ハンドラによr,g,b値がFirmataプロトコルによりArduinoに送信されます。

Arduino
StandardFirmataによってフルカラーLEDのRGBピンがPWM制御されLEDが発色します。

Copyright © kosakalab All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.