ObnizにCo2センサを接続その４

2021年6月3日 23:13

前回までで、ObnizからI2Cでコマンドの送受信が出来るところまでを確認出来たため、今回はSCD30のプログラムをパーツとして使用するための理解と準備を行います。

｜リポジトリとパーツの関係

リポジトリ内にパーツのプログラムを作成しておき、それを使用する形を取りますが、Obniz Docsの内容では分かりづらいところがあったので、少し手順を記載しておきます。

１．パーツの作成と保存
パーツと言ってもJavaScriptのClassになりますので、これを作成してリポジトリに保存するだけになります。今回のパーツの中身はObniz Docsに習ってLEDのパーツをMYLEDとして登録しようと思います。
登録するMYLEDは以下の通り。

// Javascript Example

class MYLED {
 constructor() {
   this.keys = ['anode', 'cathode'];
   this.requiredKeys = ['anode', 'cathode'];
 }

 static info() {
   return {
     name: 'MYLED',
   };
 }

 wired(obniz) {
   this.obniz = obniz;
   this.io_anode = obniz.getIO(this.params.anode);
   this.io_anode.output(false);
   this.io_cathode = obniz.getIO(this.params.cathode);
   this.io_cathode.output(false);
 }

 onesec() {
   this.io_anode.output(true);
   obniz.wait(1000);
   this.io_anode.output(false);
 }
}

if (typeof module === 'object') {
 module.exports = MYLED;

上記コードをリポジトリ内に保存していきます。
まずは、Obnizのリポジトリを開きます。

最初は何も入っていないと思います。ここで「新規作成」を選択して「MYLED」という名前でファイルを作成します。この時、タイプは「Parts/Util - 自分のパーツライブラリや・・」を選択しておきます。

これを行うとエディタが開くので、そこに上記のコードをコピペして、メニューの「ファイル - 保存」を選択して保存しておきます。
エディタを開いた時に、キャッシュかなにかデフォルトで入っているコードがありますが、消して上書きして問題ないです。

もう一度リポジトリを開くと、MYLED.jsというファイルが作られていることが確認出来ます。ここでこのパーツをプログラムで利用する為の組み込みコードを取得しておきます。リポジトリの上の方にある「公開ページ」を選択します。

選択するとパーツ使うために実行コードに埋め込むscriptタグが表示されるので、これをメモしておきます。このscriptタグをこれから作成するHTMLプログラムに埋め込む事になります。

ここまでで、パーツのプログラムのリポジトリへの保存とそれを使うためのscriptタグの取得ができたことになります。

｜リポジトリ内のパーツを使用する

パーツ自体の作成が完了したので、次に実行コードを作成していきます。ここではObniz Docsにある最初に行うLED点灯のコードを利用していきます。

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<strong id="here">Touch to turn on LED</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
 var led = obniz.wired("LED", {anode:0, cathode:1});
 $("#here").on("click", function(){
   led.on();
 });
}
</script>
</body>
</html>

上記はまだ変更を入れていないコードになります。ここに以下の変更を加えていきます。

1. scryptタグの埋め込み
2. PartsRegistrate関数でMYLEDパーツの登録
3. LEDをMYLEDに書き換え
4. led.on(): を led.onesec(); に書き換え

1. 先程取得したscryptタグを埋め込んでいきます。
　<script src="https://obniz.com/users/0000/repo/MYLED.js"></script>
　※0000はユーザIDなので個人のIDに置き換えてください。
2. PartsRegistrate関数は使用したいパーツの登録を行います。
　Obniz.PartsRegistrate(MYLED);
3. LEDオブジェクトをMYLEDオブジェクトに書き換えます。
　var led = obniz.wired("MYLED", {anode:0, cathode:1});
4. 今回のパーツはon関数ではなく、onesec関数として実装しているため、
　led.onesec();
　の様に書き換えを行います。
完成したコードは以下になります。

<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<script src="https://obniz.com/users/0000/repo/MYLED.js"></script>
<strong id="here">Touch to turn on LED</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
 Obniz.PartsRegistrate(MYLED);
 var led = obniz.wired("MYLED", {anode:0, cathode:1});
 $("#here").on("click", function(){
   led.onesec();
 });
}
</script>
</body>
</html>

実行すると、LEDが無事に点きました。

このパーツの作成の仕組みを利用して、次回はSCD30の実際のコードをパーツとして作り、Co2の値の読み込みを行います。
その５に続く

この記事が気に入ったらサポートをしてみませんか？

ObnizにCo2センサを接続 その４

｜リポジトリとパーツの関係

｜リポジトリ内のパーツを使用する

ObnizにCo2センサを接続その４