Header Ads

簡易ウェブアプリによるUSBバスパワーリレーモジュール制御

どうも、とらです(๑´∀`)  前回までにRubyスクリプトによってリレーを制御できるようになりましたので、今回はその続きということで、ウェブアプリ( HTML、CSS、PHPのみを使用)を作ってPCやiPhoneからリレーを動かすということをやりました。

まずはこちらの動画をごらん下さい。Safariを起動してボタンを押すとリレーがOn/Offします。


(ボードの仕様でリレーは0番から3番まで4個ありますが、アプリ上では1番から4番としています)


ブラウザからアクセスするだけでリレーがOn/Offできるラッパー(PHPスクリプト)を使い、画面遷移が起きないようにフレームを使っただけの小学生仕様となっていますので誰でも簡単に作ることができます。




relay.rb (リレー制御用Rubyスクリプト)

#!/usr/bin/ruby
require 'rubygems'
require 'serialport'
sp = SerialPort.new "/dev/ttyACM0", 9600
sp.write "relay #{ARGV[0]} #{ARGV[1]}\r"
sp.close
 
シェル上での使い方
# ./relay.rb on 1
# ./relay.rb off 1

(注意)このコマンドはroot権限で実行される必要があります。

relayon0.php (0番リレーOn用PHPスクリプト)

<?php
exec('sudo /usr/bin/ruby /var/www/html/relay/relay.rb on 0');  //Turn on relay 0
?>

Apacheの公開ディレクトリは /var/www/html です。Rubyスクリプトは公開ディレクトリに置いて置く必要はありません。on 0 のところを off 0とかにすればOff用になります。これらを8個作っておきます。

(注意)httpd.confに書かれているApacheのユーザーがRubyスクリプトを実行できるよう、sudo します。この際ぼくの環境では /etc/sudoers を以下のようにする必要がありました。

#Defaults    requiretty                       
apache ALL = (ALL) NOPASSWD:/usr/bin/ruby


relay.html  (ウェブアプリ用HTMLファイル)

<html>
<head>
<title>Tora Relay</title>
</head>
<frameset rows="40%,*" frameborder="0">
  <frame src="control_relays.html" name="top">
  <frame src="dummy.html" name="bottom">
</frameset>
</html>


control_relays.html   (ボタンの画面のHTMLファイル)

<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css">
<title>Tora Relay</title>
</head>
<body>
<a href="relayon0.php" class="myButton" target="bottom">Relay 1 On</a>
<a href="relayoff0.php" class="myButton2" target="bottom">Relay 1 Off</a><br><br>
<a href="relayon1.php" class="myButton" target="bottom">Relay 2 On</a>
<a href="relayoff1.php" class="myButton2" target="bottom">Relay 2 Off</a><br><br>
<a href="relayon2.php" class="myButton" target="bottom">Relay 3 On</a>
<a href="relayoff2.php" class="myButton2" target="bottom">Relay 3 Off</a><br><br>
<a href="relayon3.php" class="myButton" target="bottom">Relay 4 On</a>
<a href="relayoff3.php" class="myButton2" target="bottom">Relay 4 Off</a>
</body>
</html>


b.css  (ボタン用のスタイルシート)

.myButton {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}


.myButton2 {
background-color:#c74545;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #ab1919;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #662828;
}
.myButton2:hover {
background-color:#bd2a2a;
}
.myButton2:active {
position:relative;
top:1px;
}


dummy.html (フレーム用のダミーHTMLファイル)

Tora Relay



いかがだったでしょうか? 見た目はまああれなので、これは非常時のコントロール用にでもしようかと思います。

ではまた〜(๑´∀`)

0 件のコメント:

Powered by Blogger.