<Raspberry Pi-54> Raspberry Pi-51とPi-53を組み合わせたものを紹介します。 GPIO5,GPIO13,GPIO17,GPIO19のボタンで、スイッチ操作をさせて、スライダー(GPIO25)で モーターの回転数制御(電球の調光)が出来るので、玩具のタンク、車など応用範囲が 拡がると思います。(Raspberry Pi-36 -39 -41参照) 必要ファイルはconfig、index.htmlとscript.pyで、/home/pi/webiopi_kisoフォルダを作成し ここに置きます。 それでは、下記の@ABを行っていきます。 @/etc/webiopi/configファイルで、index.htmlとscript.pyを/home/pi/webiopi_kisoフォルダに置く設定をします。 (下の←←←←←ここですを追加) #------------------------------------------------------------------------# [SCRIPTS] # Load custom scripts syntax : # name = sourcefile # each sourcefile may have setup, loop and destroy functions and macros #myscript = /home/pi/webiopi/examples/scripts/macros/script.py myscript = /home/pi/webiopi_kiso/script.py #←←←←←ここです #------------------------------------------------------------------------# [HTTP] # HTTP Server configuration enabled = true port = 8000 # File containing sha256(base64("user:password")) # Use webiopi-passwd command to generate it passwd-file = /etc/webiopi/passwd # Change login prompt message prompt = "WebIOPi" # Use doc-root to change default HTML and resource files location #doc-root = /home/pi/webiopi/examples/scripts/macros doc-root = /home/pi/webiopi_kiso #←←←←←ここです # Use welcome-file to change the default "Welcome" file #welcome-file = index.html #------------------------------------------------------------------------# Aindex.html(<は半角に修正のこと) ------------------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>PWM制御</title> <style> /*下の<input class="class1" id="idx" type="button" value="GPIO5" onclick="control(x)" >の ボタンのサイズ・色を設定*/ /*上位.class1を指定しているので、ボタン全部の指定*/ .class1 { width: 110px; height: 70px; background-color:aqua; color:black; font-size:26px } /*下位指定なのでid5だけ別の色に指定*/ #id5 { background-color:yellow } /*.class1のボタンにカーソルが乗ると色を変える*/ .class1:hover{background-color:white} /*id5のボタンにカーソルが乗ると色を変える*/ #id5:hover{background-color:white} </style> <script type="text/javascript" src="/webiopi.js"></script> <script> function control(mode){ webiopi().callMacro( "Controlmode", mode ); // } //webiopi起動時のSpeedlevel値の設定 webiopi().ready( function(){ Speedlevel( 50 ); //speed初期値(pwmのデューティ比)) } ); //スライダを使ったときのSpeedlevel値の設定 function changeValue(value) { Speedlevel(value); } //Speedlevel値をscript.pyに渡す function Speedlevel(level){ webiopi().callMacro( "Speedlevel", level); // Speed制御 } </script> </head> <body> <center> <input class="class1" id="id1" type="button" value="GPIO5" onclick="control(1)" > <input class="class1" id="id2" type="button" value="GPIO13" onclick="control(2)" > <input class="class1" id="id3" type="button" value="GPIO17" onclick="control(3)" > <input class="class1" id="id4" type="button" value="GPIO19" onclick="control(4)" > <input class="class1" id="id5" type="button" value="CLEAR" onclick="control(0)" > </center> <br><br><br> <center> <input type="range" min="0" max="100" step="1" value="50" onchange="changeValue(this.value)" style="width:500px"> </center> </body> </html> ------------------------------------------------------------------------------- Bscript.py ------------------------------------------------------------------------------- import webiopi GPIO = webiopi.GPIO SW1 = 5 SW2 = 13 SW3 = 17 SW4 = 19 GPIO.setFunction( SW1, GPIO.OUT ) GPIO.setFunction( SW2, GPIO.OUT ) GPIO.setFunction( SW3, GPIO.OUT ) GPIO.setFunction( SW4, GPIO.OUT ) def pinclear(): GPIO.pwmWrite(SW1, 0 ) GPIO.pwmWrite(SW2, 0 ) GPIO.pwmWrite(SW3, 0 ) GPIO.pwmWrite(SW4, 0 ) @webiopi.macro def Controlmode( mode ): if mode == "0": pinclear() if mode == "1": pinclear() GPIO.digitalWrite(SW1, GPIO.HIGH ) if mode == "2": pinclear() GPIO.digitalWrite(SW2, GPIO.HIGH ) if mode == "3": pinclear() GPIO.digitalWrite(SW3, GPIO.HIGH ) if mode == "4": pinclear() GPIO.digitalWrite(SW4, GPIO.HIGH ) SPEED_PWM = 25 GPIO.setFunction( SPEED_PWM, GPIO.PWM ) @webiopi.macro def Speedlevel(dc): GPIO.pwmWrite( SPEED_PWM, int(dc)/100 ) ------------------------------------------------------------------------------- webiopiを起動させます、コマンドラインから、下のように打ち込みます。 pi@raspberrypi:~ $ sudo /etc/init.d/webiopi start 停止はstartをstopにする そして、webブラウザから、http://192.168.0.30:8000/にアクセスするとスライダーが 表示します。(IPアドレスは自分の環境) また、Raspberry Piの電源ON時に自動起動させるには、下記の/etc/rc.localファイルの ←ここを追加をすれば、自動で起動します。 /etc/rc.local --------------------------------------------------------------------- #!/bin/sh -e # # rc.local # # This script is executed at the end of each multiuser runlevel. # Make sure that the script will "exit 0" on success or any other # value on error. # # In order to enable or disable this script just change the execution # bits. # # By default this script does nothing. # Print the IP address _IP=$(hostname -I) || true if [ "$_IP" ]; then printf "My IP address is %s\n" "$_IP" fi sudo /etc/init.d/webiopi start #←ここを追加 exit 0 --------------------------------------------------------------------- <参考> webブラウザのchromeとIE11では、PWM制御方法のボタンとスライダーでは、ブラウザでの 見え方が違います。(スイッチ操作のGPIO5,GPIO13,GPIO17,GPIO19,CLEARのボタンは同じでした) また、見え方意外に、chromeでは、マウスボタンの左をクリックしながらドラッグして マウスボタンを放したときにPWM出力が反映しますが、IE11では、マウスボタンの左をクリックして ドラッグ中にPWM出力が反映するので、IE11のほうが使い勝手は良いと感じました。 PWM制御方法:ボタン chrome PWM制御方法:ボタン IE11 PWM制御方法:スライダー chrome PWM制御方法:スライダー IE11 Raspberry メニューに戻る