license.SummaryCHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。Part2の内容:・物理スイッチによるGPIO入力の取り扱い学習の目的:・物理スイッチの仕組みを理解し、CHIRIMEN上で物理スイッチのイベント処理を、ウェブページのイベント処理と同様に扱えることを体感し、理解する。学習の成果:・MUST:サンプルプログラム通りに物理スイッチが押された時の処理を記述し、動作させることができる。・SHOULD:ウェブアプリによるGPIO入力の仕組みを学習し、プログラムとスイッチ操作の関連性が理解できる。・MAY:任意のウェブアプリに物理スイッチ操作による制御を組み込むことができる。Order物理スイッチについて0基本的な物理スイッチは、押下することによって端子間を電気的に接続させる部品。2本足や4本足のものなど、様々なものがある。画像は4本足のスイッチの例。図のように2つづつで組になってなっている。スイッチを押すと12の足と34の足が電気的に接続される。(0V)、もう一方をGPIO端子に接続しておくことで、スイッチが押されたかどうかをGPIOの値で取得することができる。part1の続きとなります。Part1が終了していない方はそちらから実施をお願いします。Order物理スイッチによるwebコンテンツ切替0クリックイベントでLEDを点灯させる処理もそうですが、ウェブページではイベント処理により、その内容を動的に書き換えていくことができます。ウェブページ上のボタンを押して新しい記事を投稿するような機能です。GPIOの制御が可能なCHIRIMENでは、ウェブ上のボタンの代わりに物理的なスイッチを扱えるため、物理スイッチを押したらウェブコンテンツが切り替わるという処理を組み込んでいきます。Shieldを使用します。buttonを参考にして回路を準備してください。OrderGPIOの初期化処理0物理スイッチを扱うために必要なGPIOの初期化処理を記述していきます。CommentsGPIO199番ポートの取得0LED制御のために取得したGPIOアクセサを利用して、使用するGPIOポートオブジェクトを取得します。CN1-10)を物理スイッチ用のポートとして使用しますので、以下のように199を指定した1行をspawn関数内に追加します。gpioAccessor.ports.get(199);CommentsGPIOポートをinputモードで初期化0取得したGPIOポートオブジェクトのexportメソッドを使用して、このGPIOポートをinputモードで初期化します。以下のように”in”を指定した1行を追加します。Order物理スイッチのイベント処理0物理スイッチが押された時(GPIOの値が変化した時)の処理を記述していきます。Commentsonchangeイベント処理0GPIO値の変化は、ウェブベージの様々なイベント処理と同様に、onchangeイベントによって扱うことができます。(btnPort)に対して、以下の行を追加して、onchangeイベントハンドラを設定します。{//スイッチが押された時の処理}Onchangeイベントが発生した際のGPIOの値は引数に指定したbtnValue変数に格納されます。Commentsgpioの値の変化0CHIRIMENのGPIO199(CN1-10)はプルアップされているため、解放状態(スイッチが押されていない状態)ではGPIOの値は1になります。CHIRIMENのピンアサイン。Shieldでは、物理スイッチがGNDに接続されているため、スイッチを押下するとGPIOの値は0になります。Comments物理スイッチが押された時の処理0確認のため、以下の行をスイッチが押された時の処理として追加してみます。btnValue);正しく動作していればスイッチを押した時に"pushed!!"という文字列と、GPIOの値がコンソールに出力されます。Orderウェブコンテンツの書き換え処理0物理スイッチを押した時にウェブコンテンツを書き換える処理を記述していきます。Commentshtmlの書き換え0スイッチが押された時にGPIOの値は0となるため、以下の行をスイッチが押された時の処理の部分に追加して、btnValueが0のときにid=detailの要素の中身を書き換える処理を記述します。crêpe)は、絹を平織りにして作った織物。Wiki";}Commentsスイッチを離した時の動作0スイッチを離したら元の内容に戻るように処理を追加します。前に追加して、スイッチが押される前のhtmlの内容を変数に格納します。document.getElementById("detail").innerHTML;if(!btnValue){...}の最後に続けて以下の行を追加して、スイッチを離したら元の内容に戻る処理を行います。originalContents;}Commentsこれまでのjsコード0これまでに作成した全体のjsがこちらのbutton-changeのmain.jsのようになります。うまく作成できていれば、物理スイッチを押した時にウェブページの内容が変わるようになっているはずです。Order次のステップ0続いて、距離センサを使用した画面スクロール機能を追加していきます。part3に移動してください。