瀬谷啓介「ゼロから学ぶロボット製作教室」第4回 から引用:



モータードライバー TA7291P の制御方法
  IN1     IN2   モーターの動作
0 0 ストップ
1 0 回転
0 1 逆回転
1 1 ブレーキ




設 定
RasPi TA7291P モーター
GPIO 8 IN1
GPIO 7 IN2
GPIO 23 IN1
GPIO 24 IN2

<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>

 
        <-- JavaScript プログラム -->
        <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>