Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
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
45
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
61
PythonでSlack通知botを作る
step63r
0
23
ChatGPT実践
step63r
1
390
React x Socket.ioで人狼サーバを作る 第一章 フロントエンド実装
step63r
0
32
深層強化学習で東方AI 第一章 DQNの基本
step63r
0
320
Build 2021 プレイバック
step63r
0
41
WPFで実践アプリ開発! 第四章 機能の実装 Part 2
step63r
0
58
WPFで実践アプリ開発! 第三章 機能の実装 Part 1
step63r
0
140
WPFで実践アプリ開発! 第二章 UI
step63r
0
180
Other Decks in Technology
See All in Technology
Redmine 7.0で私が開発した新機能の狙いと背景
vividtone
1
110
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
naospon
3
230
Benchmarking Vector Databases: pgvector vs. LanceDB
tsho
0
140
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
masahirokawahara
1
300
少人数データチームのDevin活用実践事例
runandy16
2
430
PM領域でのAI Agentの活用
lycorptech_jp
PRO
0
270
Beyond the Hype: Practical AI for Your Oracle Database with MCP
thatjeffsmith
1
240
Nav2、Nav3 ... はたまた自作?〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
yanzm
0
210
bet_ai_day_2026_session02
agenticsec
1
940
どんな手を使っても絶対間に合わせるスケジューラ
asari194617
0
1.6k
Backstageでつくるセルフサービスな社内開発基盤
kikunosuke75
1
240
【試作】IoT x AIエージェント
happysamurai294
0
120
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
41
2.7k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
190
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
520
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.6k
Designing for humans not robots
tammielis
254
26k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
530
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
560
sira's awesome portfolio website redesign presentation
elsirapls
0
400
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
270
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 に起票した機能追加、不具合改修 • 帰社時刻を入力する欄を忘れてた • ダッシュボードをもうちょっとリッチに •
複数デバイス対応とかデプロイ先真面目に考えるとか • 筐体が欲しい • 数十分放置で画面が少しずつ薄くなっていく希ガス(リフレッシュ入れたら改善するのか) • ぶっちゃけ実用に足るかどうかは分からない • 実用するなら数十センチ四方の電子ペーパーが必要。存在するのか。コスパ悪そう