Edited at

konashi 2.0 入門 - Part3: タクトスイッチ(S1)を押す

More than 3 years have passed since last update.

konashi.jsはjsdo.itと連動して使うことで、コミュニティが共有しているコードをForkして動作を確認しながら学習することができます。前回まずはLチカ(LEDチカチカ)をForkして動かしました。次にLEDをコントロールしちゃおう☆をForkします。コードを編集して理解しながらタクトスイッチのON/OFFの状態を画面に表示するプログラムを書いてみます。


はじめての開発

jsdo.itのkonashiタグなどから参考にしたいリポジトリをさがしてForkします。今回はLEDをコントロールしちゃおう☆使わせていただきます。jsdo.itのエディタを使い、今回使わないコードの削除や編集していきます。


JavaScript

オリジナルのLEDをコントロールするコードを削除して、タクトスイッチだけ動作するコードにします。Zepto.js(jQuery互換)を使ったコードなので、だいたい何をしているか理解できると思います。イベントハンドラはJavaScrptによくある非同期処理で書いていきます。

今回は以下の4つのAPIにイベントハンドラを登録して処理を実装します。



  • find


    • iPhone周辺のkonashiを検索する




  • ready


    • このイベントハンドラからkonashiと通信が可能になる




  • updatePioInput


    • PIOの入力の状態が変化したら実行される




  • digitalRead


    • PIOの特定のピンの入力状態を取得する

    • (事前にpinModeやpinModeAllでピンのモードを入力にしておく)



// forked from monakaz's "LEDをコントロールしちゃおう☆" http://jsdo.it/monakaz/w1gz

$(function(){

$("#btn-find").on("tap", function() {
if($("#btn-find").hasClass("find")) {
k.find();
} else {
k.disconnect();

// change find button
$("#btn-find")
.addClass("find")
.html("Find konashi");

$("#s1-status").html("OFF");
}
});

// konashiと接続できた
k.ready(function() {
// change find button
$("#btn-find")
.removeClass("find")
.html("Disconnect konashi");

k.pinMode(k.S1, k.INPUT);
});

// 入力が変化した時
k.updatePioInput(function(data) {
k.digitalRead(k.S1, function(value) {
//k.log(value);
if(value == k.HIGH) {
$("#s1-status").html("ON");
} else {
$("#s1-status").html("OFF");
}
});
});

//k.showDebugLog();
});

またk.showDebugLog();をアンコメントするとkonashi.jsの左上にデバッグ用の領域が表示されます。k.log(value);のようにしてデバッグしたい値を出力することができます。


HTML

HTMLファイルも今回利用しないLEDをコントロールするli要素は削除します。

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=2, minimum-scale=1, maximum-scale=1, user-scalable=no">

<!-- ratchet css -->
<link rel="stylesheet" href="http://jsrun.it/assets/h/F/P/P/hFPPa">

</head>
<body>
<header class="bar-title">
<h1 class="title">konashi.js: Drive PIO</h1>
</header>

<div class="content">

<div class="hello">
<p>Hello konashi.js!</p>
<p>First make sure you tap the following button to find konashi.
</div>

<div class="find">
<a id="btn-find" class="button-main button-block find">Find konashi</a>
</div>

<ul class="list inset">
<li class="list-divider">PIO: Input Status</li>
<li>S1: <span id="s1-status">OFF</span></li>
</ul>

</div>

<!-- for konashijs -->
<script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script>

<!-- for this sample -->
<!-- zepto -->
<script src="http://jsrun.it/assets/1/M/0/f/1M0fl"></script>
<!-- touch.js -->
<script src="http://jsrun.it/assets/g/s/1/M/gs1MI"></script>
<!-- ratchet.js -->
<script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script>
</body>
</html>


CSS

オリジナルではdisplay: noneの非表示にして、konashiに接続後に要素を表示しています。今回は最初からul要素は表示します。id属性のスタイルも削除します。

.hello {

margin: 10px;
}

.find {
margin: 10px;
}


テスト


コード検索

iPhoneからkonashi.jsアプリを起動します。アプリ内のブラウザからjsdo.itに作成したリポジトリを検索して表示します。「タクトスイッチを押してみる」をタップします。

konashi-switch.png


コードのページ

コードのページの左側プレビューをタップします。

konashi-switch-preview.png


konashiの検索

「Find konashi」からkohashiを検索します。「Select Module」に表示されるkonashiタップします。

konashi-switch-find.png


タクトスイッチを押す

konashiの本体にあるタクトスイッチを押すと、konashi.jsアプリのブラウザに表示されたテキストが「S1:OFF」から「S1:ON」に変更されます。