Vue.jsからのObniz操作でエラーになったのでメモ。Webアプリでボタン押下でLEDを点灯。
Consoleエラー
原因
-
"obniz.onconnect"内で処理が必要？ ※Vue.jsでは良くないらしい
デバイスへの接続 - obniz公式 -
Vue.js での書き方が悪かった ※Vue.jsでは以下のほうが良さそう
Vue.jsでobnizをつかおう - Qiita
if (obniz.connectionState === "connected") {
// **** 実行する処理 ****
} else {
obniz.on('connect', () => {
// **** 実行する処理 ****
})
-
コールバック関数、アロー関数のメモ
JavaScriptの「コールバック関数」とは一体なんなのか
JavaScript アロー関数を説明するよ - Qiita
書き方で変わる?! Vue.jsでthisのスコープを調査した
修正後のコード
.html
<!DOCTYPE html>
<html lang="jp" >
<head>
<meta charset="UTF-8">
<title>Obniz Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 全体をVue.js有効にする -->
<div id="app">
<!-- タイトル -->
<h1>Obniz Test</h1>
<!-- 設定 -->
<h5>Obniz ID</h5>
<input v-model="ObnizID[0]" type="text" maxlength="4">
<label>-</label>
<input v-model="ObnizID[1]" type="text" maxlength="4">
<!-- LED-ON -->
<button v-on:click="PowerON">LED-ON</button>
<button v-on:click="PowerOFF">LED-OFF</button>
</div>
<!-- CDN -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
<script src='https://unpkg.com/obniz@3.9.0/obniz.js'></script>
<!-- 実行script -->
<script src="./script.js"></script>
</body>
</html>
script.js
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
obniz: null, // Obniz関数
data: {
// Vue内部で利用する変数定義
ObnizID: ['0000', '0000'],
},
methods: {
// 関数はココに記述
ObnizConect: function(func){
// Obnizへの接続を確認してfuncに渡した関数を実行するコールバック
console.log(this.obniz.connectionState);
if (this.obniz.connectionState === 'connected') {
func();
} else {
this.obniz.on('connect', () => {
this.ObnizConect(func);
})
}
},
PowerON: function() {
// LED ON
// Obniz ID 指定
let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
if (this.obniz == null) {
this.obniz = new Obniz(obnizid);
}
console.log(obnizid);
let me = this; // thisを関数内で使えないので変数に代入
// connect関数を呼んで、connect関数内で以下のFunctionを実行
this.ObnizConect(async function() {
const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
me.obniz.display.clear();
me.obniz.display.print('ON');
led.on(); // LED点灯
});
},
PowerOFF: function() {
// LED OFF
// Obniz ID 指定
let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
if (this.obniz == null) {
this.obniz = new Obniz(obnizid);
}
console.log(obnizid);
let me = this; // thisを関数内で使えないので変数に代入
// connect関数を呼んで、connect関数内で以下のFunctionを実行
this.ObnizConect(async function() {
const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
me.obniz.display.clear();
me.obniz.display.print('OFF');
led.off(); // LED消灯
});
},
},
});