もしロボットが前進ではなく回転してしまったら、右と左のモーターのどちらかが逆回転しているはずです。両方のモーターの動きを見て、どちらのモーターの回転を逆にすればよいかを確認し、先ほどのプログラムのON/OFF(0と1)の組み合わせを入れ変えて前進するようにしてください。

 ところで、この段階ではまだ「停止」ボタンがないため、モーターが動き出してしまうと、それを止められません。そこで、ターミナルでいったん次のコマンドを実行してWebIOPiを再起動後、これまで通りWebIOPiのGUIを使ってピンの状態を変えてモーターを停止させてください。

$ sudo /etc/init.d/webiopi restart 

 他のボタンも追加しましょう。図58が、全ボタンを含んだ「<body>タグ」のすべてです。

図58●<body>タグの完成版
<body>
    <p>ボタンを押すとRasRoboが動くよ!</p>
    <button type="button" onClick="right_forward()">右前</button>
    <button type="button" onClick="forward()">前進</button>
    <button type="button" onClick="left_forward()">左前</button>
    <button type="button" onClick="stop()">停止</button>
    <button type="button" onClick="right_back() ">右後</button>
    <button type="button" onClick="back()">後進</button>
    <button type="button" onClick="left_back() ">左後</button>

    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
        var webiopi = webiopi();
        webiopi.ready(function() {
           webiopi.refreshGPIO(true);
           webiopi.setFunction(8, "OUT");
           webiopi.setFunction(7, "OUT");
           webiopi.setFunction(23, "OUT");
           webiopi.setFunction(24, "OUT");
        });
        function forward() {
                webiopi.digitalWrite(8, 1);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 1);
                webiopi.digitalWrite(24, 0);
        }
        function back() {
                webiopi.digitalWrite(8, 0);
                webiopi.digitalWrite(7, 1);
                webiopi.digitalWrite(23, 0);
                webiopi.digitalWrite(24, 1);
        }
        function stop() {
                webiopi.digitalWrite(8, 0);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 0);
                webiopi.digitalWrite(24, 0);
        }
        function right_forward() {
                webiopi.digitalWrite(8, 1);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 0);
                webiopi.digitalWrite(24, 0);
        }
        function left_forward() {
                webiopi.digitalWrite(8, 0);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 1);
                webiopi.digitalWrite(24, 0);
        }
        function right_back() {
                webiopi.digitalWrite(8, 0);
                webiopi.digitalWrite(7, 1);
                webiopi.digitalWrite(23, 0);
                webiopi.digitalWrite(24, 0);
        }
        function left_back() {
                webiopi.digitalWrite(8, 0);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 0);
                webiopi.digitalWrite(24, 1);
        }
    </script>
    <style type="text/css">
        button {
            display: inline;
            margin: 5px 5px 5px 5px;
            width: 80px;
            height: 45px;
            border-radius: 10px;
            font-size: 12pt;
            font-weight: bold;
            color: white;
            background-color:#808080
        }
        body {
            background-color:#C0C0C0
        }
    </style>
</body>

RasRoboコントローラーの完成形(押したボタンを赤くする)

図59●押したときボタンが赤くなる

 図58で示したHTMLファイルでも十分ロボットをコントロールできますが、このままでは、ボタンを押した後、どのボタンが押された状態なのかが分かりません。図59のようにボタンが押されたらボタンのバックグランドカラーを赤くする関数を追加した「rasrobo.html」は図60の通りです。これが「rasrobo.html」の完成形になります。

図60●RasRoboコントローラー「rasrobo.html」の完成形
<html>
    <head>
        <meta charset="UTF-8">
        <title>RasRoboコントローラー</title>
    </head>

    <body>
        <p>ボタンを押すとRasRoboが動くよ!</p>
        <button id="left_forward" type="button" onClick="left_forward()">左前</button>
        <button id="forward" type="button" onClick="forward()">前進</button>
        <button id="right_forward" type="button" onClick="right_forward()">右前</button>
        <p>
          <button type="button">*</button>
          <button id="stop" type="button" onClick="stop()">停止</button>
          <button type="button">*</button>
        </p>
        <button id="left_back" type="button" onClick="left_back() ">左後</button>
        <button id="back" type="button" onClick="back()">後進</button>
        <button id="right_back" type="button" onClick="right_back() ">右後</button>

        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript" src="/jquery.js"></script>
        <script type="text/javascript">
            var webiopi = webiopi();
            webiopi.ready(function() {
               webiopi.refreshGPIO(true);
               webiopi.setFunction(8, "OUT");
               webiopi.setFunction(7, "OUT");
               webiopi.setFunction(23, "OUT");
               webiopi.setFunction(24, "OUT");
            });
            function forward() {
                    webiopi.digitalWrite(8, 1);
                    webiopi.digitalWrite(7, 0);
                    webiopi.digitalWrite(23, 1);
                    webiopi.digitalWrite(24, 0);
                    button_color("#forward");
            }
            function back() {
                    webiopi.digitalWrite(8, 0);
                    webiopi.digitalWrite(7, 1);
                    webiopi.digitalWrite(23, 0);
                    webiopi.digitalWrite(24, 1);
                    button_color("#back");
            }
            function stop() {
                    webiopi.digitalWrite(8, 0);
                    webiopi.digitalWrite(7, 0);
                    webiopi.digitalWrite(23, 0);
                    webiopi.digitalWrite(24, 0);
                    button_color("#stop");
            }
            function right_forward() {
                    webiopi.digitalWrite(8, 1);
                    webiopi.digitalWrite(7, 0);
                    webiopi.digitalWrite(23, 0);
                    webiopi.digitalWrite(24, 0);
                    button_color("#right_forward");
            }
            function left_forward() {
                    webiopi.digitalWrite(8, 0);
                    webiopi.digitalWrite(7, 0);
                    webiopi.digitalWrite(23, 1);
                    webiopi.digitalWrite(24, 0);
                    button_color("#left_forward");
            }
            function right_back() {
                    webiopi.digitalWrite(8, 0);
                    webiopi.digitalWrite(7, 1);
                    webiopi.digitalWrite(23, 0);
                    webiopi.digitalWrite(24, 0);
                    button_color("#right_back");
            }
            function left_back() {
                    webiopi.digitalWrite(8, 0);
                    webiopi.digitalWrite(7, 0);
                    webiopi.digitalWrite(23, 0);
                    webiopi.digitalWrite(24, 1);
                    button_color("#left_back");
            }
            var last_id = "";
            function button_color(id) {
              $(last_id).css('background', "#808080");
              $(id).css('background', "#CC0033");
              last_id = id;
            }
        </script>
        <style type="text/css">
            button {
                display: inline;
                margin: 5px 5px 5px 5px;
                width: 80px;
                height: 45px;
                border-radius: 10px;
                font-size: 12pt;
                font-weight: bold;
                color: white;
                background-color:#808080
            }
            body {
                background-color:#C0C0C0
            }
        </style>
    </body>
</html>