小学1年生の僕が、obnizで勉強していること
【第1-1講】サンプルの修正(1)
使ったパーツ
どれどれ、サンプルの プログラム は、obniz のディスプレイに文字を表示するのと、ボタンで LED を点灯できるんだね。
（obniz Docs）Step3. プログラムの実行
（obniz Docs）動かしてみよう（サンプルプログラム）
やろうよ。ランプは？
そういえば、買ったセットに LED は無いね・・
えー、どうするの？
三色 LED（信号機）がついてるね。これをさしたら、一色だけつくかもしれないかな？
どうせなら、三色 LED 用に直してあげるよ。
スマホじゃ プログラム はやりにくいから、PCの開発コンソールのプログラムエディタでやるね。
（obniz）開発コンソール
・・・（パパがサンプルを直して、三色 LED を接続）・・・
LEDサンプルの修正版(1)
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/css/starter-sample.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script
src="https://unpkg.com/obniz@3.6.1/obniz.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="obniz-debug"></div>
<!--文字の表示-->
<div class="wrap">
<div class="print">
<h3 class="text-center">Print words on obniz</h3>
<div>
<input type="text" id="text" value="Hello World" placeholder="Input in freely">
<button class="btn btn-primary" id="showtime">Print on obniz</button>
</div>
</div>
<!--ダイヤルスイッチの状態を表示-->
<div class="switch">
<h3 class="text-center"> Swtich </h3>
<span id="print">undefined</span>
</div>
<!--LEDのON/OFFボタン-->
<div class="led">
<h3 class="text-center">Turning on a LED</h3>
<button class="btn btn-primary" id="on">LED ON</button>
<button class="btn btn-primary" id="off">LED OFF</button>
<dl>
<dt>Demo Pin assign</dt>
<dd>- io0:gnd</dd>
<dd>- io1:green</dd>
<dd>- io2:yellow</dd>
<dd>- io3:red</dd>
<dd>- Switch state will be printed on browser</dd>
</dl>
</div>
</div>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function() {
var led = obniz.wired("Keyestudio_TrafficLight", {gnd:0, green:1, yellow:2, red:3});
obniz.display.clear();
obniz.display.print("Hello World");
obniz.switch.onchange = function(state) {
$("#print").text(state);
obniz.display.clear();
obniz.display.print(state);
};
$("#showtime").on("click", function() {
obniz.display.clear();
obniz.display.print($("#text").val());
});
$("#on").click(function() {
led.green.on();
led.yellow.on();
led.red.on();
obniz.display.clear();
obniz.display.print("ON");
});
$("#off").click(function() {
led.green.off();
led.yellow.off();
led.red.off();
obniz.display.clear();
obniz.display.print("OFF");
});
};
</script>
</body>
</html>
じゃあ、実行するね。
やったー！obniz の画面に文字が出たよ。
「Hello World」だね。
コンソールから、[LED ON]ボタンを押してごらん。
わー、ライトが光った！
[LED OFF]ボタンを押すと、消えるよ。
ほんとだ、消えた。
obniz の表示も変わるんだね。
コンソールの[Hello World]の中身を変えて、[Print on obniz]を押してごらん。
obniz の画面に、書いた文字がでるんだね。
obniz のダイヤルスイッチをいじってごらん。
押すと、何か表示が変わるね・・
ダイヤルスイッチの状態を表示してくれるんだ。
面白い。僕も何か直してみたい。
えー、パパみたいに プログラム やってみたいよ。
さすが、我が息子！！
これから、パパが本格的な プログラミング 教えてあげるよ。
ちょっと難しいかもしれないけど、がんばるんだよ。
うん、がんばる！
おすすめ
このサイトについて
僕（算哲）が、obnizで遊びながら、 IoT とプログラミングについて勉強したことをまとめるサイトです。
パパは、IT技術者で、算哲の先生です。