enebular-agentでキオスク端末を作る

前回の記事では、enebular-agentで表示端末を作りましたが、今度は入力も可能なキヨスク端末を作ってみたいと思います。

必要なものは前回の記事と同様で、ここで使用しているモニタはタッチパネルにもなっているので、タッチするとマウスでクリックしたのと同様の動作をします。

どんなキオスク端末を作るか

以前、以下の記事で作成しているカードリーダを使ったリアルイベントの参加者集計システムを、カードリーダーではなく、タッチ入力で社員番号を入力することで参加登録を行えるようにしてみたいと思います。

社員証タッチで参加者リストを自動作成
参加者リスト自動作成システムを作ってみた

フロー

表示の仕組みは前回の記事と同じです。dashboardノードの中にボタンのノードがあるので、それを使用して0～9の数字を入力し、Enterで確定してスプレットシートに入力された社員番号を書き込みます。

[{"id":"91d993af.d1dad","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"1ac497ad.87f788","type":"inject","z":"91d993af.d1dad","name":"フロー起動時に1回のみ","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"2","x":190,"y":200,"wires":[["3626f898.1595a8","b2dd845c.037748","dae6cae8.e5ed48","ebf808d7.a6b458"]]},{"id":"3626f898.1595a8","type":"exec","z":"91d993af.d1dad","command":"DISPLAY=:0 chromium-browser ","addpay":false,"append":"--noerrdialogs --kiosk --incognito http://localhost:1880/ui","useSpawn":"false","timer":"","oldrc":false,"name":"","x":490,"y":220,"wires":[[],[],[]]},{"id":"b2dd845c.037748","type":"exec","z":"91d993af.d1dad","command":"DISPLAY=:0 xset -dpms;DISPLAY=:0 xset s off;DISPLAY=:0 xset s noblank","addpay":false,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":630,"y":160,"wires":[[],[],[]]},{"id":"8a620e19.52a9d","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":2,"width":"2","height":"2","passthru":false,"label":"1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"str","topic":"","x":110,"y":460,"wires":[["f5cd556b.2a96e8"]]},{"id":"c618f0fe.8482d","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":3,"width":"2","height":"2","passthru":false,"label":"2","tooltip":"","color":"","bgcolor":"","icon":"","payload":"2","payloadType":"str","topic":"","x":110,"y":500,"wires":[["f5cd556b.2a96e8"]]},{"id":"4f517cf3.640f24","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":4,"width":"2","height":"2","passthru":false,"label":"3","tooltip":"","color":"","bgcolor":"","icon":"","payload":"3","payloadType":"str","topic":"","x":110,"y":540,"wires":[["f5cd556b.2a96e8"]]},{"id":"c24dd2f8.9d154","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":5,"width":"2","height":"2","passthru":false,"label":"4","tooltip":"","color":"","bgcolor":"","icon":"","payload":"4","payloadType":"str","topic":"","x":110,"y":580,"wires":[["f5cd556b.2a96e8"]]},{"id":"8d33018.f1343","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":6,"width":"2","height":"2","passthru":false,"label":"5","tooltip":"","color":"","bgcolor":"","icon":"","payload":"5","payloadType":"str","topic":"","x":110,"y":620,"wires":[["f5cd556b.2a96e8"]]},{"id":"1bd482b7.485fbd","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":7,"width":"2","height":"2","passthru":false,"label":"6","tooltip":"","color":"","bgcolor":"","icon":"","payload":"6","payloadType":"str","topic":"","x":110,"y":660,"wires":[["f5cd556b.2a96e8"]]},{"id":"e4837a64.584d18","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":8,"width":"2","height":"2","passthru":false,"label":"7","tooltip":"","color":"","bgcolor":"","icon":"","payload":"7","payloadType":"str","topic":"","x":110,"y":700,"wires":[["f5cd556b.2a96e8"]]},{"id":"9cb2f4e5.6530a8","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":9,"width":"2","height":"2","passthru":false,"label":"8","tooltip":"","color":"","bgcolor":"","icon":"","payload":"8","payloadType":"str","topic":"","x":110,"y":740,"wires":[["f5cd556b.2a96e8"]]},{"id":"38ca67d3.4e0af8","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":10,"width":"2","height":"2","passthru":false,"label":"9","tooltip":"","color":"","bgcolor":"","icon":"","payload":"9","payloadType":"str","topic":"","x":110,"y":780,"wires":[["f5cd556b.2a96e8"]]},{"id":"b2740dfd.45efd","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":11,"width":"6","height":"2","passthru":false,"label":"0","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"str","topic":"","x":110,"y":820,"wires":[["f5cd556b.2a96e8"]]},{"id":"3b2cdc6b.4036f4","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":13,"width":"3","height":"2","passthru":false,"label":"Enter","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Enter","payloadType":"str","topic":"","x":110,"y":900,"wires":[["f5cd556b.2a96e8"]]},{"id":"7078520e.879d9c","type":"ui_text","z":"91d993af.d1dad","group":"19e61436.0843ac","order":1,"width":"6","height":"1","name":"","label":"社員番号","format":"{{msg.payload}}","layout":"row-left","x":700,"y":560,"wires":[]},{"id":"3b1a687c.0dbbe8","type":"ui_button","z":"91d993af.d1dad","name":"","group":"19e61436.0843ac","order":12,"width":"3","height":"2","passthru":false,"label":"C","tooltip":"","color":"","bgcolor":"","icon":"","payload":"C","payloadType":"str","topic":"","x":110,"y":860,"wires":[["f5cd556b.2a96e8"]]},{"id":"f5cd556b.2a96e8","type":"function","z":"91d993af.d1dad","name":"UI入力を処理","func":"var id = flow.get('id');\n\nif(msg.payload === 'Enter'){\n    msg.payload = '';\n    flow.set('id',''); \n    msg.id = id;\n    return [ msg, msg ];\n} else if(msg.payload === 'C'){\n    id = '';\n} else {\n    id += msg.payload;\n}\n\nflow.set('id',id); \n\nmsg.payload = id;\n\nreturn [msg, null];","outputs":2,"noerr":0,"x":480,"y":580,"wires":[["7078520e.879d9c"],["36a66a1f.ea8866"]]},{"id":"dae6cae8.e5ed48","type":"change","z":"91d993af.d1dad","name":"","rules":[{"t":"set","p":"id","pt":"flow","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":300,"wires":[[]]},{"id":"2ded32cd.21512e","type":"function","z":"91d993af.d1dad","name":"時刻を書き込む","func":"var d = new Date();\nvar localTime = d.getTime();\nvar localOffset = d.getTimezoneOffset() * 60000;\nvar utc = localTime + localOffset;\nvar offset = -9.0;\nvar result = utc - (3600000 * offset);\nvar date = parseInt(new Date(result) / 1000);\nvar dt = new Date(result);\n\nvar year = dt.getFullYear();\nvar month = dt.getMonth()+1;\nvar day = dt.getDate();\nvar hour = dt.getHours();\nvar minute = dt.getMinutes();\nvar second = dt.getSeconds();\nmsg.payload = year + \"/\" + month + \"/\" + day + \" \" + hour + \":\" + minute + \":\" + second;\n\nvar count = flow.get(\"cell_count\");\nmsg.topic = \"B\" + count.toString();\n\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":820,"wires":[["8eeb51bb.54f1c"]]},{"id":"36a66a1f.ea8866","type":"function","z":"91d993af.d1dad","name":"社員番号を書き込む","func":"var count = flow.get(\"cell_count\");\n\nmsg.payload = msg.id;\nmsg.topic = \"C\" + count.toString();\nmsg.sheet = flow.get(\"sheet\");\nreturn msg;","outputs":1,"noerr":0,"x":740,"y":760,"wires":[["640fc154.693c6"]]},{"id":"47344eb9.b7033","type":"function","z":"91d993af.d1dad","name":"列をインクリメント","func":"var count = flow.get(\"cell_count\");\ncount += 1;\nflow.set(\"cell_count\",count);\nreturn msg;","outputs":1,"noerr":0,"x":740,"y":940,"wires":[[]]},{"id":"1098c6c3.051ca9","type":"function","z":"91d993af.d1dad","name":"Noを書き込む","func":"var count = flow.get(\"cell_count\");\nmsg.topic = \"A\" + count.toString();\ncount -= 1;\nmsg.payload = count.toString();\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":880,"wires":[["38a4b5a5.47fb8a"]]},{"id":"4302502a.1ae4b","type":"comment","z":"91d993af.d1dad","name":"スプレットシートへの書き込み","info":"","x":770,"y":720,"wires":[]},{"id":"8eeb51bb.54f1c","type":"GSheet","z":"91d993af.d1dad","creds":"2f765a08.fb0b26","method":"update","action":"","sheet":"","cells":"","flatten":false,"name":"","x":970,"y":820,"wires":[["1098c6c3.051ca9"]]},{"id":"640fc154.693c6","type":"GSheet","z":"91d993af.d1dad","creds":"2f765a08.fb0b26","method":"update","action":"","sheet":"1ayLmxv6Swghlf87IZiQUi8QsXaxWQGmycW3_1Yr55JI","cells":"","flatten":false,"name":"","x":970,"y":760,"wires":[["2ded32cd.21512e"]]},{"id":"38a4b5a5.47fb8a","type":"GSheet","z":"91d993af.d1dad","creds":"2f765a08.fb0b26","method":"update","action":"","sheet":"","cells":"","flatten":false,"name":"","x":970,"y":880,"wires":[["47344eb9.b7033"]]},{"id":"ebf808d7.a6b458","type":"change","z":"91d993af.d1dad","name":"","rules":[{"t":"set","p":"cell_count","pt":"flow","to":"2","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":340,"wires":[[]]},{"id":"dad708ea.781388","type":"change","z":"91d993af.d1dad","name":"","rules":[{"t":"set","p":"sheet","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":380,"wires":[[]]},{"id":"c88f233e.7d885","type":"inject","z":"91d993af.d1dad","name":"スプレットシートIDをセット","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":210,"y":380,"wires":[["dad708ea.781388"]]},{"id":"19e61436.0843ac","type":"ui_group","z":"","name":"社員番号入力","tab":"92ae92e1.5922b","order":1,"disp":false,"width":"6","collapse":false},{"id":"2f765a08.fb0b26","type":"gauth","z":""},{"id":"92ae92e1.5922b","type":"ui_tab","z":"","name":"ホーム","icon":"dashboard","disabled":false,"hidden":false}]

スプレットシートIDをセットと書いてあるinjectノードのトピックにスプレットシートのIDを記載するとそのスプレットシートに書き込みます。
スプレットシートノードの使い方はenebular-Blog Google スプレッドシート・ノードを使おうがわかりやすいです

動作確認

スプレットシートへの書き込みは以下のようになりました。名前は別な管理している社員番号と名前を管理しているスプレットシートから持ってくる様になってます。

あとがき

キオスク端末としてはすごく簡単な例ですが、工夫すればメニューを作って、画面遷移させることも可能だと思います。
アドベントカレンダーのネタとしてenebular-agentで簡単な表示端末とキオスク端末を作ってみましたが、応用すればいろいろ出来そうなので、もうちょっと遊んでみたいと思います。