obnizを使用して、ドアセンサーを作った[状況確認WEBページ編]

今回は、作ったドアセンサーの状況確認 WEB ページの話

以前作った「ヤルキスイッチ」で
調子づいたので今回も WEB 画面を作った。

物理の動作を、2D の画面に落とし込めるのは楽しいですね。

それではコードです。

目次

コード

コードはすべてセキュリティにかかわるものはマスクしてあります。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GEME</title>

    <link rel="stylesheet" href="./Skeleton-2.0.4/css/normalize.css" />
    <link rel="stylesheet" href="./Skeleton-2.0.4/css/skeleton.css" />
    <link rel="stylesheet" href="./app.css" />
  </head>
  <body>
    <div class="container"></div>
    <script src="bundle.js"></script>
  </body>
</html>
app.css
1
2
3
#mycanvas {
  width: 100vw;
}
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import * as PIXI from "pixi.js";
const Mqtt = require("mqtt");

//キャンバス作成
var app = new PIXI.Application(600, 900, { backgroundColor: 0x1099bb });
app.view.id = "mycanvas";
document.body.appendChild(app.view);

//ドア枠の幅
let fw = app.renderer.width * 0.6;
//ドア枠の高さ
let fh = (fw / 2) * 3;
//ドア枠オフセット幅
let fofw = app.renderer.width * 0.2;
//ドア枠オフセット高さ
let fofh = fw / 3;

//ドア本体幅
let dw = fw * 0.9;
let dwmin = dw / 2;
let dwmax = dw;
//ドア本体高さ
let dh = fh * 0.9;
//ドア本体オフセット幅
let dofw = fofw + fw * 0.05;
//ドア本体オフセット高さ
let dofh = fofh + fh * 0.05;

//ドアノブ幅
let nw = fw * 0.1;
//ドアノブ高さ
let nh = nw;
//ドアノブオフセット幅
let nofw = dofw + dofw * 0.1;
//ドアノブオフセット高さ
let nofh = dofh + dh / 2;

//ドア枠追加
let frame = new PIXI.Graphics();
frame.lineStyle(10, 0x000000, 1);
frame.beginFill(0x1099bb);
frame.drawRect(0, 0, fw, fh);
frame.endFill();
frame.x = fofw;
frame.y = fofh;
app.stage.addChild(frame);

let i = 0;
//ドア追加
let door = new PIXI.Graphics();
door.lineStyle(10, 0x000000, 1);
door.beginFill(0x000000);
door.drawRect(i, 0, dw, dh);
door.endFill();
door.x = dofw;
door.y = dofh;
app.stage.addChild(door);

//ドアノブ追加
let nob = new PIXI.Graphics();
nob.lineStyle(10, 0x1099bb, 1);
nob.beginFill(0x1099bb);
nob.drawRect(0, 0, nw, nh);
nob.endFill();
nob.x = nofw;
nob.y = nofh;
app.stage.addChild(nob);

let sp = 3;
let open = () => {
  if (dwmin < door.width) {
    door.width -= sp;
    door.x += sp;
    nob.x += sp;
  }
};
let close = () => {
  if (dwmax > door.width) {
    door.width += sp;
    door.x -= sp;
    nob.x -= sp;
  }
};

let state = "CLOSE";

var client = Mqtt.connect("ws://[サーバーアドレス]:[ポート]", {
  clientId: "[クライアントID]",
  username: "[クライアント名]",
  password: "[パスワード]",
});
client.on("connect", function () {
  client.subscribe("[トピック]", function (err) {
    if (!err) {
      console.log(`OK Subscribe`);
    }
  });
});

client.on("message", function (topic, message) {
  // message is Buffer
  state = JSON.parse(message.toString()).data.door;
  console.log(state);
});

// Listen for animate update
app.ticker.add(() => {
  if (state == "OPEN") open();
  else {
    close();
  }
});

index.jsは Webpack+babel でバンドルしたbundle.jsにして使用します。

アクセスすると、以下のような表示で、ドアだけが動きます。

動いている動画は、こちら。

pixi.js がいいよ(たぶん今さらだろうけど)

「ヤルキスイッチ」と、
今回のドア通知でどちらもpixi.jsを使用したんですが、2D 表現 canvas としては個人的にもスタンダードになりそうです。
learningPixiで、大体学べて、
公式のexamplesが充実してるのもすごくいい。

一点だけ直したくなっていること

今回作成した中で、この記事を書きながら一点直したいポイントが湧いてきていて、それはドアが「引き戸」になっていること。
今回センサーを設置したのは「開き戸」だったので、ドア形状を台形に変形させるのが本来だったなぁと。

今度直そうと思います。

次は、音声再生クライアント編です。

ではでは。