- 必要なコンポーネント：
- Raspberry Piの準備：
- WebIOPiのインストールをテストします。
- Raspberry Piホームオートメーション用のWebアプリケーションの構築：
- ホームオートメーションのためのWebIOPiサーバー編集：
- 回路図と説明：
こんにちは皆さん、今日のチュートリアルへようこそ。RaspberryPiの良いところの1つは、特にホームオートメーション関連プロジェクトのために、デバイスをインターネットに接続する機会を提供する優れた機能と使いやすさです。今日は、インターネットを使用してWebページのボタンをクリックするだけでACアプライアンスを制御する可能性を探ります。このIoTベースのホームオートメーションシステムを使用すると、世界中のどこからでも家電製品を制御できます。このWebサーバーは、スマートフォン、タブレット、コンピューターなど、HTMLアプリケーションを実行できる任意のデバイスから実行できます。
必要なコンポーネント：
このプロジェクトの要件は、ハードウェアとソフトウェアの2つのカテゴリに分類されます。
I.ハードウェア要件：
- Raspberry Pi 3（他のバージョンがいいでしょう）
- RaspbianJessieを実行しているメモリカード8または16GB
- 5vリレー
- 2n222トランジスタ
- ダイオード
- ジャンパー線
- 接続ブロック
- テストするLED。
- テストするACランプ
- ブレッドボードとジャンパーケーブル
- 220または100オームの抵抗器
II。ソフトウェア要件：
ラズベリーパイで実行されているRaspbianJessieオペレーティングシステムに加えて、WebIOPiフレームワーク、PCで実行されているnotepad ++、filezilaを使用して、PCからラズベリーパイにファイル、特にWebアプリファイルをコピーします。
また、このホームオートメーションプロジェクトのためにPythonでコーディングする必要はありません。WebIOPiがすべての作業を行います。
Raspberry Piの準備：
それは私にとってある種の習慣であり、それは良いことだと思います。RaspberryPiを使用するたびに最初に行うことは、PIを更新することです。このプロジェクトの場合、このセクションでは、Piの更新手順とWebIOPiフレームワークのインストールで構成されます。これは、Webページからラズベリーパイへの通信の処理に役立ちます。おそらく、これはpython Flaskフレームワークを使用して、ほぼ間違いなく簡単な方法で実行できることを述べる必要がありますが、DIYの興味深い点の1つは、内部を見て難しい作業を行うことです。それがDIYのすべての喜びがやってくるところです。
以下のコマンドでラズベリーパイを更新してから、RPiを再起動します。
sudo apt-get update sudo apt-get upgrade sudo restart
これが完了したら、次はwebIOPiフレームワークをインストールします。
を使用してホームディレクトリにいることを確認してください。
cd〜
wgetを使用して、sourceforgeページからファイルを取得します。
wget
ダウンロードが完了したら、ファイルを抽出してディレクトリに移動します。
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
このバージョンのWebIOPiは、使用しているラズベリーpi 3で動作せず、Pi 3で明示的に動作するバージョンのWebIOPiが見つからなかったため、セットアップを実行する前のこの時点でパッチをインストールする必要があります。 。
以下のコマンドは、WebIOPiディレクトリにある間にパッチをインストールするために使用されます。
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
次に、を使用してWebIOPiのセットアップインストールを実行できます。
sudo./setup.sh
セットアップのインストール中に依存関係をインストールするように求められた場合は、「はい」と言い続けてください。完了したら、piを再起動します。
sudoリブート
WebIOPiのインストールをテストします。
回路図とコードにジャンプする前に、Raspberry Piをオンに戻した状態で、WebIOPiのインストールをテストして、すべてが期待どおりに正常に機能することを確認する必要があります。
コマンドを実行します。
sudo webiopi -d -c / etc / webiopi / config
piで上記のコマンドを発行した後、raspberry piに接続されているコンピューターのWebブラウザーでhttp：// raspberrypiを指定します。mshome.net:8000またはhttp; // thepi'sIPaddress：8000。システムはユーザー名とパスワードの入力を求めます。
ユーザー名は webiopi パスワードは ラズベリー
このログインは必要に応じて後で削除できますが、ホームオートメーションシステムでさえ、IP制御アプライアンスとIOTデバイスを家に持っている人を防ぐために、ある程度のセキュリティを強化する必要があります。
ログイン後、周りを見回して、GPIOヘッダーリンクをクリックします。
このテストでは、LEDをGPIO 17に接続するので、続けてGPIO17を出力として設定します。
これが完了したら、以下の回路図に示すように、LEDをラズベリーパイに接続します。
接続後、Webページに戻り、ピン11ボタンをクリックしてLEDをオンまたはオフにします。このようにして、 WebIOPi を使用してRaspberry PiGPIOを 制御でき ます。
テスト後、すべてが説明どおりに機能した場合は、ターミナルに戻り、CTRL + Cでプログラムを停止できます。この設定で問題が発生した場合は、コメントセクションから私に連絡してください。
Webiopiの詳細については、Wikiページ（http://webiopi.trouch.com/INSTALL.html）を参照してください。
テストが完了すると、メインプロジェクトを開始する準備が整います。
Raspberry Piホームオートメーション用のWebアプリケーションの構築：
ここでは、WebIOPiサービスのデフォルト構成を編集し、呼び出されたときに実行される独自のコードを追加します。最初に行うことは、 filezilla またはその他のFTP / SCPコピーソフトウェアをPCにインストールすることです。ターミナルを介したpiでのコーディングは非常にストレスが多いので、この段階でfilezillaまたはその他のSCPソフトウェアが役立つことに同意するでしょう。このIoT ホームオートメーションWebアプリケーションのhtml、css、およびjavaスクリプトコードを記述してRaspberry Piに移動する前に、すべてのWebファイルが配置されるプロジェクトフォルダーを作成しましょう。
を使用してホームディレクトリにいることを確認してから、フォルダを作成し、作成したフォルダに移動して、ディレクトリにhtmlフォルダを作成します。
cd〜mkdir webapp cd webapp mkdir html
htmlフォルダー内にスクリプト、CSS、および画像用のフォルダーを作成します
mkdir html / css mkdir html / img mkdir html / scripts
ファイルを作成したら、PCでコードを記述してから、filezilla経由でPiに移動します。
JavaScriptコード：
最初に作成するコードは、JavaScriptのコードです。WebIOPiサービスと通信するためのシンプルなスクリプト。
このプロジェクトでは、Webアプリが4つのボタンで構成されていることに注意してください。つまり、デモでは2つのリレーのみを制御しますが、4つのGPIOピンのみを制御する予定です。最後に完全なビデオを確認してください。
webiopi（）。ready（function（）{webiopi（）。setFunction（17、 "out"）; webiopi（）。setFunction（18、 "out"）; webiopi（）。setFunction（22、 "out"）; webiopi （）.setFunction（23、 "out"）; var content、button; content = $（ "#content"）; button = webiopi（）。createGPIOButton（17、 "Relay 1"）; content.append（button）; button = webiopi（）。createGPIOButton（18、 "Relay 2"）; content.append（button）; button = webiopi（）。createGPIOButton（22、 "Relay 3"）; content.append（button）; button = webiopi（ ）.createGPIOButton（23、 "Relay 4"）; content.append（button）;}）;
上記のコードは、WebIOPiの準備ができたときに実行されます。
以下にJavaScriptコードについて説明します。
webiopi（）。ready（function（）： これは、この関数を作成し、webiopiの準備ができたときに実行するようにシステムに指示するだけです。
webiopi（）。setFunction（23、 "out"）; これは、GPIO23を出力として設定するようにWebIOPiサービスに指示するのに役立ちます。ここには4つのボタンがありますが、より多くのボタンを実装している場合は、さらに多くのボタンを使用できます。
var content、button; この行は、contentという名前の変数を作成し、その変数をボタンにするようにシステムに指示します。
content = $（ "#content"）; content変数は、引き続きhtmlとcssで使用されます。したがって、#contentを参照すると、WebIOPiフレームワークはそれに関連するすべてのものを作成します。
button = webiopi（）。createGPIOButton（17、 "Relay 1"）; WebIOPiは、さまざまな種類のボタンを作成できます。上記のコードは、WebIOPiサービスに、「リレー1」というラベルの付いたこの場合は17のGPIOピンを制御するGPIOボタンを作成するように指示するのに役立ちます。同じことが他のものにも当てはまります。
content.append（button）; このコードを、htmlファイルまたは他の場所で作成されたボタンの他のコードに追加します。より多くのボタンを作成でき、すべてこのボタンと同じプロパティを持ちます。これは、CSSまたはスクリプトを作成するときに特に役立ちます。
JSファイルを作成した後、ファイルを保存してから、私と同じ方法でファイルを作成した場合は、filezillaを使用してwebapp / html / scriptsにコピーします。
これが完了したら、CSSの作成に移ります。最後のコードセクションにあるリンクからコード全体をダウンロードできます。
CSSコード：
CSSは、IoT RaspberryPiホームオートメーションWebページをきれいに見せるために役立ちます。
私はウェブページを下の画像のように見せたかったので、それを実現するために smarthome.css スタイルシートを作成する必要がありました。
以下にCSSコードについて説明しました。
CSSスクリプトはかさばりすぎてここに含めることができないので、その一部を選んで内訳に使用します。ここから完全なCSSファイルをダウンロードできます。CSSは簡単で、CSSコードを読むだけで理解できます。この部分を簡単にスキップして、CSSコードをすぐに使用できます。
スクリプトの最初の部分は、Webアプリの本体のスタイルシートを表しており、以下に示されています。
body {background-color：#ffffff; background-image：url（ '/ img / smart.png'）; background-repeat：no-repeat; background-position：center; background-size：cover; フォント：太字18px / 25px Arial、sans-serif; 色：LightGray; }
上記のコードは一目瞭然だと思います。背景色を白の#ffffffに設定してから、そのフォルダーの場所に背景画像を追加します（以前のフォルダー設定を覚えていますか？）。 t background-repeatプロパティをno-repeatに設定して繰り返し、CSSに背景を一元化するように指示します。次に、背景のサイズ、フォント、色を設定します。
ボディが完成したら、ボタンのCSSをきれいに見せるために作成しました。
ボタン{表示：ブロック;位置：相対;マージン：10px;パディング：0 10px; text-align：center;テキスト装飾：なし;幅：130px;高さ：40px;フォント：太字18px / 25px Arial、sans-serif;色：黒;テキストシャドウ：1px 1px 1px rgba（255,255,255、.22）; -webkit-border-radius：30px; -moz-border-radius：30px; border-radius：30px;
これを簡潔にするために、コード内の他のすべてのことも、見栄えを良くするために行われました。何が起こるかを確認するために変更することができます。試行錯誤による学習と呼ばれていると思いますが、CSSの良い点の1つは、わかりやすい英語で表現されていることです。ボタンブロックの他の部分には、ボタンのテキストシャドウとボタンシャドウ用の追加機能がいくつかあります。また、ボタンを押したときに見栄えがよくリアルに見えるわずかなトランジション効果もあります。これらは、Webページがすべてのプラットフォームで最適に機能することを保証するために、Webkit、Firefox、Operaなどに対して個別に定義されています。
コードの次のブロックは、WebIOPiサービスがこれがWebIOPiサービスへの入力であることを通知するためのものです。
I NPUT {表示：ブロック; 幅：160px; 高さ：45px; }
最後にやりたいことは、ボタンが押されたときに何らかの表示をすることです。そのため、画面を見ると、ボタンの色で現在の状態を知ることができます。これを行うために、以下のコード行がすべてのボタンに実装されました。
#gpio17.LOW {背景色：灰色; 色：黒; }#gpio17.HIGH {背景色：赤; 色：LightGray; }
上記のコード行は、現在の状態に基づいてボタンの色を変更するだけです。ボタンがオフ（LOW）の場合、ボタンの背景色は灰色になり、非アクティブであることを示します。オン（HIGH）の場合、ボタンの背景色は赤になります。
バッグにCSSを入れ、smarthome.cssとして保存し、filezilla（または使用するその他のSCPソフトウェア）を介してラズベリーパイのstylesフォルダーに移動し、最後の部分であるhtmlコードを修正します。ここから完全なCSSをダウンロードすることを忘れないでください。
HTMLコード：
htmlコードは、JavaScriptとスタイルシートのすべてをまとめます。
ボタンを押す; ベーコンを受け取る
内headタグいくつかの非常に重要な機能を存在します。
上記のコード行により、Chromeまたはモバイルサファリを使用しているモバイルデスクトップにWebアプリを保存できます。これは、クロムメニューを介して行うことができます。これにより、モバイルデスクトップまたは自宅からアプリを簡単に起動できます。
以下のコードの次の行は、Webアプリにある種の応答性を提供します。これにより、起動した任意のデバイスの画面を占有できます。
コードの次の行は、Webページのタイトルバーに表示されるタイトルを宣言します。
次の4行のコードはそれぞれ、htmlコードを必要に応じて機能するために必要ないくつかのリソースにリンクする機能を実行します。
上記の最初の行は、サーバールートにハードコードされているメインのWebIOPiフレームワークJavaScriptを呼び出しています。これは、WebIOPiを使用するたびに呼び出す必要があります。
2行目は、私たちのjQueryのスクリプトにhtmlページを指し示す第三に、私たちのスタイルシートの方向にポイントを。最後に、最後の行は、モバイルデスクトップで使用するアイコンを、WebアプリまたはWebページのファビコンとして使用することにした場合に設定するのに役立ちます。
htmlコードの本文セクションにはbreakタグが含まれているだけで、ボタンが下の行に正しく配置され、JavaScriptファイルに記述されている内容を表示するようにhtmlコードに指示されます。 ID =」コンテンツ」は 、以前のJavaScriptコードの下で、当社のボタンの内容の宣言を思い出させる必要があります。
あなたはドリル、index.htmlとしてのhtmlコードを知っていて、filezillaを介してPiのhtmlフォルダに移動します。ここからすべてのCSS、JS、HTMLファイルをダウンロードできます。
ホームオートメーションのためのWebIOPiサーバー編集：
この段階で、回路図の作成とWebアプリのテストを開始する準備が整いましたが、その前に、webiopiサービスの構成ファイルを編集して、付属の構成ファイルではなくhtmlフォルダーのデータを使用するようにする必要があります。 。
構成を編集するには、root権限で以下を実行します。
sudo nano / etc / webiopi / config
構成ファイルのhttpセクションを探し、次のようなセクションの下を確認します。 #doc-rootを使用してデフォルトのHTMLおよびリソースファイルの場所を変更します
#を使用してその下にあるものをコメントアウトし、フォルダが私のように設定されている場合は、doc-rootにプロジェクトファイルのパスを指定します
doc-root = / home / pi / webapp / html
保存して終了。そのポートを使用してpiで別のサーバーを実行している場合は、ポートを8000から変更することもできます。保存しない場合は、先に進むときに終了します。
コマンドを使用してWebIOPiサービスのパスワードを変更できることに注意してください。
sudo webiopi-passwd
新しいユーザー名とパスワードの入力を求められます。これも完全に削除できますが、セキュリティは重要ですよね？
最後に、以下のコマンドを発行してWebIOPiサービスを実行します。
sudo /etc/init.d/webiopi start
サーバーのステータスは、以下を使用して確認できます。
sudo /etc/init.d/webiopi status
を使用して実行を停止できます。
sudo /etc/init.d/webiopi stop
起動時に実行するようにWebIOPiを設定するには、;を使用します。
sudo update-rc.dwebiopiのデフォルト
逆にして起動時に実行を停止する場合は、;を使用します。
sudo update-rc.d webiopi remove
回路図と説明：
ソフトウェアのセットアップが完了したら、このWeb制御の家電プロジェクトの回路図の作成を開始する準備が整いました。
リレーモジュールを手に入れることはできませんでしたが、愛好家にとっては扱いやすいと感じています。そこで、ここでは通常のスタンドアロンシングル5vリレーの回路図を描いています。
上記のフリッツ回路に示すように回路を接続します。独自のリレーのCOM、NO（通常は開いている）およびNC（通常は閉じている）は、異なる側/ポイントに配置されている可能性があることに注意してください。ミリメートルを使用してテストしてください。リレーの詳細については、こちらをご覧ください。
コンポーネントを接続したら、Webページからサーバーを起動し、Raspberry PiのIPに移動して、前述のようにポートを指定し、ユーザー名とパスワードを使用してログインすると、次の画像とまったく同じWebページが表示されます。 。
ボタンをクリックするだけで、どこからでもワイヤレスで4つのACホームアプリケーションを簡単に制御できるようになりました。これは携帯電話、タブレットなどから機能し、ボタンやリレーを追加してより多くのデバイスを制御できます。以下の完全なビデオを確認してください。
それはみんな、これを頑張ってくれてありがとう。ご不明な点がございましたら、コメントボックスにご記入ください。