Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

webIoPiでRasPiのIOにブラウザから簡易的にアクセスする その3:ArduinoとSerial経由で接続する

多少凝ったセンサーやインターフェイスを用意したい場合
Arduinoの力を借りるケースありますよね。
ボタンたくさんつけたりとか。

付属のwebiopi.jsとシリアルをつかうと、シリアル経由でArduinoと通信できます。

実際のところ

Arduinoは公式サンプルについてくるスクリプトを流用

#include <Wire.h>

char input;

void setup() {
  // open the serial port at 9600 bps:
  Serial.begin(9600);
  pinMode(2, INPUT);
}

void loop() {
  if (Serial.available() > 0) {
    input = Serial.read();
    switch (input) {

      // "t" command: returns time in millis since reset/powerup
      case 't':
        Serial.println(millis());
        break;

      // "a" command: read and returns analog channel 0
      case 'a':
        Serial.println(analogRead(0));
        break;

      // "d" command: read and returns digital channel 2
      case 'd':
        Serial.println(digitalRead(2));
        break;

      default:
        break;
    }
  }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebIOPi | Arduino UI</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    // Javascript code will go here

    </script>

    <style type="text/css">
    #time, #analog, #digital {
                margin: 5px 5px 5px 5px;
                width: 160px;
                height: 45px;
                font-size: 24pt;
                font-weight: bold;
                color: white;
        text-align: center;
        background-color: Blue;
    }

    </style>
</head>
<body>
<div align="center">
    <div id="time"></div>
    <div id="analog"></div>
    <div id="digital"></div>
</div>
</body>
</html>
    // declare variable for Serial object
    var serial;

    webiopi().ready(init);

    // defines function passed to webiopi().ready()
    function init() {
        // define Serial object, must be configured in /etc/webiopi/config
        serial = new Serial("uno");

        // automatically refresh UI each 5 seconds
        setInterval(updateUI, 1000);

        // update UI now
        updateUI();
    }

    // function called through setInterval
    function updateUI() {
        // retrieve Time
        getTime();
    }

    // function to use "t" command
    function getTime() {
        serial.write("t");
        serial.read(timeCallback);
    }

    // function that will process received data from getTime function
    function timeCallback(data) {
        // rounds milliseconds to seconds
        millis = parseInt(data);
        seconds = parseInt(millis/1000);

        // use jQuery to display seconds elapsed since Arduino reset
        $("#time").text(seconds+"s");
        getAnalog();
    }

    // function to use "a" command
    function getAnalog() {
        serial.write("a");
        serial.read(analogCallback);
    }

    // function that will process received data from getAnalog function
    function analogCallback(data) {
        // scales analog value to percent and to 0-255 range
        value = parseInt(data);
        percent = parseInt(value/1024 * 100);
        red = parseInt(value/1024 * 255);

        // use jQuery to display percent value
        $("#analog").text(percent+"%");

        // use jQuery to change color from black to red
        $("#analog").css("background-color", "rgb(" + red + ", 0, 0)");
        getDigital();
    }

    // function to use "d" command
    function getDigital() {
        serial.write("d");
        serial.read(digitalCallback);
    }

    // function that will process received data from getDigital function
    function digitalCallback(data) {
        value = parseInt(data);

        // set appropriate color and text depending on value
        if (value == 1) {
            $("#digital").css("background-color", "Red");
            $("#digital").text("ON");
        }
        else if (value == 0) {
            $("#digital").css("background-color", "Black");
            $("#digital").text("OFF");
        }
    }

参考もと

webiopi.trouch.com