Vue.jsでObnizを操作する基本－単純Lチカ（メモ）

14823 ワード
JavaScript obniz メモ Vue.js 初心者 JavaScript テキストリンク

Vue.jsからのObniz操作でエラーになったのでメモ。Webアプリでボタン押下でLEDを点灯。

Consoleエラー

原因

  if (obniz.connectionState === "connected") {
    // **** 実行する処理 ****
  } else {
    obniz.on('connect', () => {
      // **** 実行する処理 ****
  })

修正後のコード

.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/[email protected]/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消灯
      });
    },
  },
});