CodePenからObnizを起動するメモ

16593 ワード
obniz codepen codepen テキストリンク

「自作PC特化だけど、リモート起動や自動起動を好きにカスタムできるWebアプリをobnizで試作してみた」を参考にObnizを起動すまでのメモ

第1段階

まずはLEDの点灯ができるか引用したそのままのHTMLとJSをCodePenにコピペ。
問題なく起動ボタンで点灯

第2段階

次にHTMLの見た目をobnizID入力だけにするのと、ライブラリをコードから設定に追加し削除する。
ここで問題発生！
obnizのライブラリ追加の時だけ動かない。

<script src='https://unpkg.com/[email protected]/obniz.js'>

上記のコードからバージョンの違いでJSでエラーが起きているのではないかと推測。
追加しようとしていたライブラリが3.15.1だったので3.9.0に修正し追加するも動かず。

よく見ると追加しようとしているライブラリが違うことに気づく。
ここで書かれているobinizライブラリはブラウザからインストールするためのURLなのでunpkg.comで提供されているものを使用する。obnizインストール参考

<html lang="jp" >
<head>
  <meta charset="UTF-8">
  <title>HPC-accede</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
</head>

<body>
<!-- 全体をVue.js有効にする -->
<div id="app" class="container text-white bg-dark p-1">

  <!-- タイトル -->
  <div class="row text-center">
    <div class="col-sm-6 mx-auto"><h1>HPC-accede</h1></div>
  </div>
  <!-- 設定 -->
  <div class="form-group my-3 mx-4">
    <div class="border-bottom col-sm-12"><h5>Obniz ID</h5></div>
  </div>
  <div class="form-group form-inline my-3 mx-5">
    <input v-model:value="ObnizID[0]" class="form-control" type="text" maxlength="4" style="width:80px;">
    <label class="control-label mx-2">-</label>
    <input v-model:value="ObnizID[1]" class="form-control" type="text" maxlength="4" style="width:80px;">  
  </div>

  <!-- 即時電源ON -->
  <div class="form-group my-3 mx-4">
    <div class="border-bottom col-sm-12"><h5>即時起動</h5></div>
  </div>
  <div class="form-group my-3 mx-5">
    <button v-on:click="PowerON" class="btn btn-success">電源ON</button>
  </div>


</body>
</html>

第2段階突破！

第3段階

JSを電源ONのみに変更
dataの曜日設定を削除のみ変更

const sleep = (msec) => new Promise(res => setTimeout(res, msec));
// Obniz関数
let obniz;

// Obniz呼び出し関数
const connect = function(func, ob){
  console.log(ob.connectionState);
  // Obnizへの接続を確認
  if (ob.connectionState === "connected") {
    func();
  } else {
    ob.on('connect', () => {
      func();
    })
  }
}

const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素
  data: {
    // Vue内部で利用する変数定義
    ObnizID: ['0000', '0000'],
  },

  methods: {
    // 関数はココに記述
    PowerON: function() {
      // LED ON
      // Obniz ID 指定
      let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
      console.log(obnizid);
      this.obniz = new Obniz(obnizid);

      let me = this; // thisを関数内で使えないので変数に代入
      // connect関数を呼んで、connect関数内で以下のFunctionを実行
      connect(async function() {
        const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
        me.obniz.display.clear();
        me.obniz.display.print('ON');
        led.on(); await sleep(1000); led.off();   // LED点灯 1s
        me.obniz.display.clear();
      }, this.obniz);
    },
  },
});

これにてObnizを起動するCodePenの完成。