画面を見ながら照明操作をおこなう – 後編「操作画面とAPIの接続」

2024/05/22

遠隔制御の活用例

「画面を見ながら照明操作をおこなう」の連載、後編です。今回は実際に操作画面との接続の設定を行っていきます。

前編の記事

画面を見ながら照明操作をおこなう – 前編「より安心・安全な遠隔操作のために」

作成するシステムの概要

操作画面を作成するまでの流れ

操作画面の用意
画面とAPIの接続
操作テストをおこない完成

1. 操作画面の用意

HTML、CSS、JavaScriptを使用して、Webブラウザ上の操作画面を作成します。

SMARTIOを設置しているローカルネットワーク上にローカルサーバ用意し、操作画面のデータを設置します。

Webカメラを用いて現場の確認用の映像を画面に映し出します。Webサイトへの埋め込み機能を備えたWebカメラを利用すると、簡単に現場の様子をHTML画面に映し出すことができます。

2. 画面とAPIの接続

下記は、HTMLで作成されたWebブラウザ画面と、ローカルAPIとの連携部分のサンプルコードとなります。

<html><head>  <title>画面を見ながら照明操作をおこなうデモ</title></head><body>  <div>    <iframe width="560" height="315" src="[youtubeのアドレス]" title="YouTube video player" frameborder="0"      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>  </div>  <div>    <button onClick="api('ONE', 'ON')">照明を点ける</button>    <button onClick="api('ONE', 'OFF')">照明を消す</button>  </div>  <script>    const userId = "[APIが実行可能なユーザのユーザID]";    const password = "[APIが実行可能なユーザのパスワード]";    async function api(portNo, operation) {      const response = await fetch("http://[SMARTIOのアドレス]/v1/query", {        method: "POST",        headers: {          authorization: "Basic " + btoa(userId + ":" + password),          "Content-Type": "application/json",        },        body: JSON.stringify({          query: `          mutation (            $portNo: OutportPortNoEnum!            $operation: OneofWriteOutportOperation!            $logMessage: String!          ) {            writeOutport(              portNo: $portNo              input: {                oneofOperation: $operation                logMessage: $logMessage              }            ) {              id            }          }        `,          variables: {            portNo,            operation: operation === "ON" ? { on: {} } : { off: {} },            logMessage: "画面を見ながら照明操作をおこなうデモ",          },        }),      });      const result = await response.json();      console.log(result);    }  </script></body></html>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