R-7　WebIOPiを用いたPCやスマホとの連携　その２

　HOME　　>>　　LED電子工作集　>　R-８　WebIOPiを用いたPCやスマホとの連携　その２

R-7　WebIOPiを用いたPCやスマホとの連携　その２

■　はじめに

　今、RaspberryPiに挑戦している。　先回は、スマホやPCから制御する方法を勉強したのが、さらにPWM制御を使う方法を学ぼう。

■　演習１４：ブラウザのスライダ利用～RGBフルカラーLED

　こｊこでは、教則本の9.5章でに示された演習をじっししました。

　教則本に記述されている通りに実行すれば、簡単に実施できました。　その実行している状態を下に示す。

***** (1) index.html *******************
<!-- jQuery UI -->
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>

<div align="center">
    <div id="text1">色 1</div>
    <div id="slider1"></div>
　　--------------
</div>
***** (2) javascript.js ***************
$(function() {
    var sliderHandler1 = function(e, ui){
        var ratio = ui.value/sliderMax;
        webiopi().pulseRatio(25, ratio);
    };
　　----------
    $( "#slider1" ).slider({
        min: sliderMin,
        ---------
    });
***** (3) script.py *******************
------------

　しかし、このままでは勉強になりません。　そこで、プログラムの内容を追っていく事にしました。

　まず、 index.html は、スライダを表示させていますが、その方法として jQuery UI と呼ばれているライブラリーを利用していました。

　そしてスライダの設定は、javascript.js に記述されており、スライダの大きさなどの設定と共に、スライダの位置を読み取り、パルスレシオの値を指示するイベントハンドラも設定されていた。

　次に、 script.py には初期設定の類が記述されているだけでした。　その理由は、Python プログラムから JavaScript へ値を戻す必要が無いのでマクロと呼ばれる関数は必要ないとのことです。　PWM制御のコマンドは、script.py に記述されている

　　　　　 webiopi().pulseRatio(25, ratio);　

のコマンドだけで実施されるとのこと。　よく解らないけど・・・・・！

　・・・・・・・・・・・・・・・・・

　気になる jQuery UI と呼ばれているライブラリーをネットで調べてみました。　なるほど便利なライブラリーがいっぱい有るのですね。　自分の知識が古くなったことを感じます。

■　演習１５：　タッチイベントの利用～DCモータの速度制御

　教則本の9.6 スマートホンなどの画面タッチによるモータ制御例を紹介しています。　実施状態を下に示す。

***** (1) index.html *******************
<div id="touchArea" align="center">
    <img src="img/DCMotorController.png" id="touchImage"
　　　　　　　　　　 oncontextmenu="return false;">
</div>
***** (2) javascript.js ***************
　省略

***** (3) script.py *******************
@webiopi.macro
def pwm2Write(duty1, duty2, commandID):
    GPIO.pwmWrite(PWM1, float(duty1))
    GPIO.pwmWrite(PWM2, float(duty2))

　作動状態を動画にしました。

　簡単に動いてしまうので拍子抜けしてしまうのですが、今回のプログラムの内容を追っていくことにします。

　まず、 index.html は、イラスト図を使ってタッチーゾンを設定しています。　次に、javascript.js に記述されている内容は、ゴチャゴチャときじゅつされており、内容のチェックを飛ばしてしまいました。　要するに、イラスト図の上でタッチした時、その位置情報を読み取り、PWM制御のための引数としてscript.py に引き渡す方法が記述されています。

　ラズパイで処理するコマンドのメインは、

　　　　GPIO.pwmWrite(PWM1, float(duty1))

の部分になります。

　今回も、またまた、おまじないとしてすっ飛ばした部分が多々ありましたが、全体の流れを掴んでおけば、応用する場合の参考となると考えています。　ニーズが出てきた時点で勉強することにします。　しかし、今なおデコレータ＠の使い方が理解できていませんが、使い方の例として覚えておきます。

　********************************************************************

　教則本にはこの後も、サーボモータの制御やキャタピラ式模型の操作例が説明されていますが、今のところニーズが無いのでこの教則本での演習は、ひとまず完了としておきます。　今後は、鉄道模型に対して、どのように活用できるかを考えていきたいと思っています。　最初のきっかけであった物のインターネット IoT については当面静観状態とします。

　　********************　ひとまず完了　******************************************

R-7 WebIOPiを用いたPCやスマホとの連携 その２

R-7　WebIOPiを用いたPCやスマホとの連携　その２