<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 メニューに戻る