情報処理学会 インタラクション 2022
IPSJ Interaction 2022

1D162022/2/21

人工大理石透過型 LED タッチディスプレイのソフトウェアライブラリ開発
中植 義斗1,a)

平井 重行1,b)

概要：キッチンのワークトップなどに使われる人工大理石には光を透過する性質があり，その背面に LEDマトリクスディスプレイを配置することでワークトップ表面をディスプレイ化する研究に取り組んでいる．
そして，その LED マトリクスパネル中の LED の幾つかを赤外線 LED とフォトトランジスタを置き換えることで，赤外線反射によるタッチや物体のセンシング機能を持たせている．本研究は，この人工大理石
透過型 LED タッチディスプレイの研究において，LED マトリクスパネルのサイズや配置を抽象化するほか，画面表示 API やセンシング機能 API の提供などアプリケーション開発のためのライブラリ開発を行っている．本稿は，開発中のライブラリの機能および実装，またそれを利用したアプリケーション例について述べる．

1. はじめに

本研究は，この人工大理石透過型 LED タッチディスプ
レイについて，そのデバイスの設定や表示機能，またセンスマートハウスのユーザインタフェース研究の一つとしサ機能を抽象化し，アプリケーション開発を容易にするたて，キッチンや洗面台をスマート化する研究が数々行われめのライブラリ開発を行っている．以下の章では，開発中ている [1][2][3][4][5][6]．ここでは，プロジェクタを用いて，のライブラリの機能と実装について，またライブラリを利キッチンのワークトップ（天板）や壁，冷蔵庫の扉などを用したアプリケーション例についても述べる．

ディスプレイ化し，キッチン家電の状況提示・操作を含めて調理・生活支援などのアプリケーションの提案と試作を行っている．そのような中で，Tada らの研究 [7] では，人2. ライブラリの機能概要
2.1 複数 LED マトリクスパネルの統合化と点灯制御

工大理石製のキッチンの天板をタッチディスプレイ化する

LED マトリクスパネルは，パネル上の LED の配置ピッ技術を提案および試作している．この研究では，人工大理

チ（間隔）や縦横の画素数により，形状やサイズで様々な石の光の透過性に着目し，天板の裏側に LED マトリクスものがある．それらを縦横に配置して組み合わせることデバイスを後付けすることで，天板をディスプレイ化してで，様々なサイズ・形状として構成することが一般的であいる．ただ，ディスプレイとしては厚みのある人工大理石る．多様なキッチンサイズや配置可能な範囲に対応するた内で光が拡散するため，滲むディスプレイとなる．そして，めに，複数パネルを組み合わせていくことが必要となる．

その滲む特性から全てが点灯せずともディスプレイとしてそこで，本研究でのライブラリでは，マトリクスパネルの機能する点を活かし，LED マトリクスの素子の幾つかを赤配置を元に画素を統合したワールド座標を定義し，アプリ

外線 LED とフォトダイオードとすることで，天板表面上ケーションソフトウェアからはそのワールド座標での描での赤外光タッチセンシングを実現している．この人工大画が行えるようにする．そして，アプリケーションソフト

理石透過型 LED タッチディスプレイは，従来のプロジェウェアでは，そのワールド座標で以下に示す図形やテキスクタによる情報提示とは違い，天板そのものがセンサおよト，画像などの表示を行う．

びディスプレイとして機能することから，デバイスの設置方法やメンテナンス性などの点で新たなスマート環境を実現する技術と言える．

2.2 図形描画機能
一般的な 2D グラフィックスライブラリに見られる基本的な図形描画機能を提供する．ここでは，点を打つ，線を1a)b)

京都産業大学 情報理工学部
ynkue165@gmail.com
hirai@cc.kyoto-su.ac.jp© 2022 Information Processing Society of Japan引く，矩形を描くなどの API を用意する．アプリケーショ
ンソフトウェアでは，これらを使用することで LED マト194

情報処理学会 インタラクション 2022
IPSJ Interaction 2022

リクス上に指定図形を描画することができる．

1D16
2022/2/21

る．また，人工大理石を介して見る際の LED の画素がぼやけた表示となる様子を確認表示する機能も提供する．前

2.3 テキスト描画機能

述の各機能は，組込み用マイコン上で動作する機能だが，フォントデータを読み込む機能，および指定した文字列

この表示シミュレーション機能は，PC や RaspberryPi なを描画する機能を提供する．アプリケーションソフトウェ

どの通常のディスプレイに接続されたコンピュータ向け

アでは，これらの機能を使用することで，LED マトリクスに提供する．アプリケーションソフトウェアを開発する際上に指定文字列を描画することができる．ただし，人工大に，実機でかつ人工大理石下に LED タッチマトリクスパ

理石によって滲む表示となるため，比較的小さめの文字列ネルを配置せずとも，PC 上でアプリ表示画面の確認がでを表示すると文字の輪郭がわからなくなる．適切なフォンきるようにし，画面設計の支援を行えるようにする．

ト表示サイズを設定することに注意が必要となる．

2.4 画像描画機能

3. ライブラリの実装と各機能の使用例
3.1 LED マトリクスの統合と点灯制御

画像ファイル読み込む機能により，JPEG や PNG 形式

様々な LED マトリクスパネルに対応するべく，LED マの画像ファイルを読み込み，その画像を LED マトリクス

トリクスドライバ IC や HUB75 規格の LED マトリクス上の指定した位置，サイズで描画する機能を提供する．ア

パネルに対応させる．現状の実装では，8x16 サイズまで

プリケーションソフトウェアでは，この機能を使用するこの LED マトリクスを制御可能な LED ドライバ IC に接続とで LED マトリクス上に画像を表示することができる．

された LED マトリクスを利用できる．ここでは，複数の

ただし，LED マトリクスの縦横の画素数は通常の PC やスLED ドライバ IC それぞれに接続された LED マトリクス

マートフォンの画面ほど多くなく，人工大理石によって滲の配置を設定するようデータを記述し，それぞれの位置関む表示となるため，読み込んで表示させる画像の解像度や係から，図 1，図 2 のような 1 枚の LED マトリクスのよ

その内容が綺麗に再現はできない点に注意が必要となる．

うに統合化され，かつそれをワールド座標で点灯制御できるようにしている．マトリクスパネルの配線や接続の物理

2.5 動画再生機能

的制約はあるものの，ソフトウェアライブラリとしては，画像描画機能と同様に，動画ファイルの読み込み機能にディスプレイサイズ（画素数）としての制約は無く，図 2 のより，MPEG4 などの動画ファイルを読み込み，その動画をように L 字型のような配置のパネルも扱うこともできる．

LED マトリクス上の指定した位置，サイズで再生・停止等のフレーム描画制御する機能を提供する．アプリケーションソフトウェアでは，この機能を使用することで，LEDマトリクス上の任意の位置に動画を表示させることができる．ただし，画像描画機能と同様の状況から動画の解像度やその内容が綺麗に描画できるとは限らない点に注意が必要となる．

2.6 タッチ・物体領域情報の利用機能

図 1

24x16 サイズとして点灯制御を行う様子

本研究で試作する LED タッチディスプレイのマトリクスパネルでは，マトリクス内に一定間隔で配置されたフォトダイオードの電圧値から，人工大理石表面上のタッチ位置もしくは置かれた物体の領域を検出する．そして，検出されたタッチ点や物体の領域は，TUIO プロトコル [8][9]のデータとして出力する TUIO サーバ機能を提供する．ア
プリケーションソフトウェアでは，タッチ点や物体のデータを利用する際，TUIO クライアントとして作成すれば，人工大理石上をインタラクティブにタッチ操作したり，物体の領域に対応した処理が行える．

2.7 表示シミュレーション機能
マトリクスパネル上の各 LED（画素）の点灯状態を，PC等の通常のコンピュータ画面で確認表示する機能を提供す© 2022 Information Processing Society of Japan

図 2

L 字型の 16x32 サイズとして点灯制御を行う様子

195情報処理学会 インタラクション 2022
IPSJ Interaction 2022

また，今回は単色の LED マトリクスを用いて動作させ

1D16
2022/2/21

Algorithm”を使用して表現する．ているため，点灯制御は ON と OFF のみであるが，各チップ LED に対して色情報も保持しているため，ハードウェ
アによってはフルカラーでの表示も可能である．

3.2 シミュレーション機能
図 3 に示す各 LED の点灯状態を確認するものと，図 4 に示す人工大理石を介した際にデザインが滲んで見えるディ

図 5

図形描画例（左：円，右：矩形）スプレイの光学特性を再現するもの，2 種類の表現ができるよう実装を行った．今回の実装では，OpenCV によるウィンドウに円形で各チップの点灯状態を再現したものに3.4 テキスト描画機能ガウシアンフィルタを適用することで，人工大理石の表面フォントデータを読み込み，テキスト描画機能を呼びに表示した際の滲んだように見える特性を再現している．

出すことでディスプレイ上に文字列を描画する機能を実装した．フォントデータの読み込み，文字列の描画にはOpenCV 及び FreeType モジュールによる機能を用いた．
図 6 のように日本語等のマルチバイト文字の描画にも対応しており，今回はデフォルトで使用するフォントデータにはビットマップフォントを用いたが，使用するフォントデータ，サイズによっては文字が潰れてしまうなどの問題が発生することがあった．そのため，適切なフォントデータ，フォントサイズを設定することに注意が必要となる．

図 3点灯状態を再現するシミュレータ

図 6 「あかさたな」の文字列を描画している様子

テキスト描画処理は，図 7 のように FreeType の機能によりフォントデータから文字列データを生成し，その文字列データを指定サイズの無地の矩形領域に書き込む．そして，文字列を書き込んだ矩形領域の各画素を走査し，白色の部分に指定色の情報を加えることでシミュレータ・LEDマトリクス上でテキストの描画を行う．
図 4

人工大理石表面への表示を再現するシミュレータ

3.3 図形描画機能
今回の実装では，矩形と円形の描画機能を実装した．パネル全体に対するワールド座標を指定して各描画関数を呼び出すことで，図 5 のように指定座標の位置に指定図形を描くことができる．円描画の際の描画が行われるピクセルの計算には Midpoint Circle Drawing Algorithm を使用
し，対象のピクセルの色情報を更新することで円形を表現

図 7生成した文字列データを書き込んだ矩形領域している．また，直線を描画する際には”Bresenham’s Line© 2022 Information Processing Society of Japan196

情報処理学会 インタラクション 2022
IPSJ Interaction 2022

3.5 画像描画機能

1D162022/2/21

自宅の中では常にスマートフォンを持ち歩かない場合もOpenCV の機能を用いて JPEG や PNG 形式の画像ファ多いため，予め連動させておくことでスマートフォンへのイルを読み込み，画像内の全画素を走査し，各画素の色情通知が来ていることを示すアイコンを表示したり，着信時報を元に各チップ LED の点灯状態を制御する方法で実装に電話に出る・出ないといった操作を行うことも可能であを行った．読み込んだ画像データは OpenCV による形式ると考えられる．

で保持しておくことで，リサイズ・回転等の処理を行うことも可能である．画像サイズが 1920x1280 である図 8 左側

5. おわりにの画像データを読み込み，24x16 のサイズにリサイズした

本研究は，キッチンや洗面台などにて使用される人工大後に描画を行った様子が図 8 右側である．このように，画理石製の天板の背面に設置する，赤外線 LED とフォトダ像データをリサイズし描画することは可能であるが，PCイオードを用いたタッチ・物体検出センシング機能を統合などの画面のようにはっきりと描画することはできないた

した LED マトリクスディスプレイに関するものである．

め，表示する内容には注意が必要となる．

そのディスプレイデバイス上で表示およびタッチさせるアプリケーションを開発するためのライブラリ開発を行っている．
今後は，現状ではタッチ・物体領域検出のセンシング機
能のデータを TUIO イベントとして扱う処理を実装する
ことや，様々な LED マトリクスドライバ IC への対応とHUB75 規格への対応により，様々なディスプレイデバイス
図8

画像描画の例（左：読み込んだ画像，右：LED での描画の様子）のサポート拡大に取り組む予定である．また，改良の進む
ハードウェア [10] の構成に合わせた実装も行い，その性能向上や機能拡張を行いつつ，実際に様々なアプリケーショ

3.6 動画再生機能
画像ファイルの扱いと同様に，OpenCV の機能を用いてンを動作させ，人工大理石製のキッチンや洗面台での実践的な利用を試みていきたい．

MPEG4 形式などの動画ファイルを読み込み描画を行う．
描画の際には，動画内の各フレームを 1 枚の画像として画参考文献像描画機能と同様の処理を行ってパネル上に描画する．画[1]

像描画機能と同様に，解像度の高い表示はできないため，表示内容には注意が必要となる．

[2]

4. 表示例本ディスプレイの設置が想定されるキッチンや洗面所で[3]の利用が考えられる表示の例を示す．
まず，テキスト描画機能を用いた時計・タイマー機能である．現在時刻を取得するプログラムさえ記述すれば，本[4]ライブラリの機能を用いてテキスト描画機能を使い図 9 のように表示することができる．また，タッチ時のイベント処理を組み込むことでタイマーのセットなどの操作も可能となると考えられる．

[5]

[6]

[7]

[8]
図 9

時刻（5:18）を描画している様子© 2022 Information Processing Society of Japan

Bonanni, L., C.-H. Lee, and T. Selker, Attention-based
design of augmented reality interfaces. In CHI’05 extended abstracts, pp. 1228–1231 (2005)
杉野 碧, 塚田 浩二, 椎尾 一郎, 家事を楽しくする「歌うキッチン」, 情報処理学会第 69 回全国大会講演論文集,
pp. 283–284 (2007)
Olivier, P., Xu, G., Monk, A. and Hoey, J., Ambient
kitchen: designing situated services using a high ﬁdelity
prototyping environment, Proc. of the 2nd InternationalConference on PErvasive Technologies Related to Assistive environments, pp.1-7 (2009)
武田嵩太朗, 鈴木優, 島村祐介, 朴春子, 大和田創, 三末和男, 田中二郎, キッチンにおける調理者の状況に適したイ
ンタフェース ―まな板への情報提示とそのタッチ操作手法の開発―, 情報処理学会第 72 回全国大会講演論文集,pp. 183-184 (2010)
Suzuki, Y., Morioka, S. and Ueda, H., Cooking support
with information projection onto ingredient, In Proc. of
the 10th asia paciﬁc conference on Computer human interaction, pp. 193–198, (2012)
塚田義典, 細越一希, 距離画像センサと小型プロジェクタを用いたスマートキッチンの実現に関する研究, 日本知能
情報ファジィ学会 ファジィシステムシンポジウム 講演論
文集 第 34 回ファジィシステムシンポジウム. 日本知能情報ファジィ学会, 2018.
Tada, T., and Hirai, S., Transmissive LED Touch Display for Engineered Marble., ACM UIST 2020 (AdjunctVolume), pp.145-147 (2020)
Kaltenbrunner, M., Bovermann, T., Bencina, R.,
Costanza, E.: ”TUIO - A Protocol for Table-Top Tangible User Interfaces”, Proc. of the 6th International Work-197

情報処理学会 インタラクション 2022
IPSJ Interaction 2022

[9]

[10]

1D16
2022/2/21

shop on Gesture in Human-Computer Interaction andSimulation (2005)
Kaltenbrunner, M. and Echtler, F., ”The TUIO 2.0 Protocol: An Abstraction Framework for Tangible Interactive Surfaces”, Proc. of the ACM on Human-Computer
Interaction, Vol. 2, No. 8, pp. 1–35 (2018)
浦千尋, 蚊野浩, 平井重行: 人工大理石透過型 LED タッチ
ディスプレイのハードウェア改良 -センシング基板の設計と表面実装, 情報処理学会インタラクション 2022 論文集,インタラクティブ発表 (2022)© 2022 Information Processing Society of Japan198