Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
IoT実践! 行先予定表を電子ペーパーで作る
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Ryosuke Uchiyama
December 11, 2022
Technology
50
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
IoT実践! 行先予定表を電子ペーパーで作る
Ryosuke Uchiyama
December 11, 2022
More Decks by Ryosuke Uchiyama
See All by Ryosuke Uchiyama
AWSでサーバレスな書籍管理アプリを作る
step63r
0
69
PythonでSlack通知botを作る
step63r
0
23
ChatGPT実践
step63r
1
400
React x Socket.ioで人狼サーバを作る 第一章 フロントエンド実装
step63r
0
35
深層強化学習で東方AI 第一章 DQNの基本
step63r
0
390
Build 2021 プレイバック
step63r
0
44
WPFで実践アプリ開発! 第四章 機能の実装 Part 2
step63r
0
62
WPFで実践アプリ開発! 第三章 機能の実装 Part 1
step63r
0
140
WPFで実践アプリ開発! 第二章 UI
step63r
0
190
Other Decks in Technology
See All in Technology
個別開発で終わらせない。 現場の課題をプロダクトの強さに変える StockmarkのFDE
ktkrhr
0
440
Oracle Cloud Infrastructure(OCI):Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
oracle4engineer
PRO
3
21k
企業の現実世界をグラフで写し取る
sansantech
PRO
0
220
Databricksメトリクスビューはじめてのもくもく会
taka_aki
0
140
「大丈夫そう?」をObservabilityで確かめる
mrmtsu
0
240
ビジネスを止めない技術的負債の返済のための戦略とその手法 - 技術的負債と向き合う / Complexity and Simplicity
soudai
PRO
0
100
3人で1000GPU超を統合運用する?マルチクラウド&オンプレを跨ぐ、構築と運用のリアル!
kazukun0716
2
780
カンファレンスに参加した後の浮遊感とセルフケア
pauli
0
260
Azure Copilot Resiliency Agentをいろいろ試してみる
tomokusaba
0
140
AWS DevOps Agent スキルをつかいこなそう / Master AWS DevOps Agent Skills
kinunori
2
640
AI感のないAWS構成図をAIエージェントに描かせたい!
sagochiko
2
480
猫でもわかるKiro Web
kentapapa
1
160
Featured
See All Featured
Code Review Best Practice
trishagee
74
20k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
310
How to build a perfect <img>
jonoalderson
1
6k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
46k
Visualization
eitanlees
153
17k
Believing is Seeing
oripsolob
1
230
Product Roadmaps are Hard
iamctodd
55
13k
From π to Pie charts
rasagy
1
380
Fireside Chat
paigeccino
43
4k
4 Signs Your Business is Dying
shpigford
187
23k
Git: the NoSQL Database
bkeepers
PRO
432
67k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
Transcript
IoT実践! 行先予定表を電子ペーパーで作る Ryosuke Uchiyama step63r
概要 • 行先予定表を電子化したい • 在席状況を自席から更新・確認できる • 在宅、出張先でも更新・確認できる
要件定義 Ph.1 • 行先表示端末 • Webアプリのダッシュボード Ph.2 • ダッシュボードから行先表示板を確認 •
ユーザー管理 Ph.3 • マルチデバイス対応(各島に1端末) • ログ強化など
行先表示端末 名前 行先 帰社 高海 桜内 テレワーク 黒澤 渡辺 4/7~9
東京 4/10 津島 国木田 テレワーク 小原 • こんな感じで表示制御できるやつ • 名前、行先、帰社、出勤有無を変更可能 • 出勤有無は反転色などで表現 • RasPi+モノクロ液晶or電子ペーパー • データはRasPi上にて永続化 • ダッシュボードから更新、参照するため、 WebAPIを用意して待ち受ける
ダッシュボード • 行先表示端末を変更するWebアプリ • それぞれ任意の文字列を入力可能 • 出勤有無はトグル的なUIで変更 • 更新されたら端末に即時反映 •
Ph.1ではとりあえず誰が誰の情報を書き換えてもよいことにする • Ph.2でユーザー管理:権限持ったユーザー?だけが他人の行先表示板を変更可能 • Ph.3でマルチデバイス対応:複数の島の端末を1つのダッシュボードで閲覧、変更可能
たてつけ 予定表の更新 予定表の閲覧
使ったもの Raspberry Pi 4 Model B ARMプロセッサを搭載したシングルボードコンピュータ。 購入価格:7,700円 7.5inch E-Ink
display HAT for Raspberry Pi SPIインターフェイスでRasPiと接続できる電子ペーパーディスプレイ。 購入価格:9,197円
IoT側の実装
プロパティ設計 - テーブル 高坂 高海 絢瀬 桜内 南 松浦 園田
黒澤(ダ) 星空 渡辺 西木野 津島 東條 国木田 小泉 小原 矢澤 黒澤(ル) 幅マージン 高さマージン フォント、サイズ 行数 列数(この場合は2) e-Paperの高さ e-Paperの幅
プロパティ設計 - セル 高坂 高海 1列に占める名前の幅の比率 セルと文字のパディング テーブルでそのセルが属する X, Y
位置
インターフェイス設計 名前 説明 引数 戻り値 get_all() テーブル情報を全て取得 なし テーブル: List[List[Dict[str,
Any]]] set_name() 指定セルの名前を設定 X位置: int, Y位置: int, 設定文字列: str なし set_status() 指定セルの行先を設定 X位置: int, Y位置: int, 設定文字列: str なし set_present() 指定セルの在席状態を設定 X位置: int, Y位置: int, 設定状態: bool なし get_name() 指定セルの名前を取得 X位置: int, Y位置: int 名前: str get_status() 指定セルの行先を取得 X位置: int, Y位置: int 行先: str get_present() 指定セルの在席状態を取得 X位置: int, Y位置: int 在席状態: bool
Web API設計 パス メソッド リクエストパラメータ レスポンス / GET なし テーブル:
List[List[Dict[str, Any]]] /{row}/{column} GET なし セルの情報: Dict[str, Any] /{row}/{rolumn} POST { "name": Union[str, None], "status": Union[str, None], "present": Union[bool, None] } { "status": "update success." }
ソースコード step63r/destboard https://github.com/step63r/destboard
ダッシュボード側の実装
画面設計 名前、行先、在席状態を表示する 行先を変更する トグルで在席状態をスイッチする
画面設計 名前、行先、在席状態を表示する 変更をe-Paperにも反映する
ソースコード step63r/destboard-client https://github.com/step63r/destboard-client
Demo
今後の課題など • とりあえず Issues に起票した機能追加、不具合改修 • 帰社時刻を入力する欄を忘れてた • ダッシュボードをもうちょっとリッチに •
複数デバイス対応とかデプロイ先真面目に考えるとか • 筐体が欲しい • 数十分放置で画面が少しずつ薄くなっていく希ガス(リフレッシュ入れたら改善するのか) • ぶっちゃけ実用に足るかどうかは分からない • 実用するなら数十センチ四方の電子ペーパーが必要。存在するのか。コスパ悪そう