🖼️

Seeed reTerminal、Ubuntu FrameとFigmaで簡単ミニサイネージを作る

2022/02/19に公開

Figma

reTerminal

サイネージ

tech

ども、takiponeです。

Seeed reTerminalはRaspberry Pi Compute Module4をベースに、液晶ディスプレイやボタンを内蔵した多目的デバイスです。サイネージ用途で使えるUbuntu FrameでWebプロトタイピングツールのFigmaを表示させてみたら、リモートから表示が制御できる便利サイネージシステムができたのでご紹介します。

https://youtu.be/Fyf6BTAVEWs

Ubuntuのインストール

reTerminalにプリインストールされるOSはRasbian(Debian)なので、Ubuntuをインストールします。以下の記事の手順でインストールします。

Ubuntu Frameのインストール

Ubuntu Frameのセットアップ手順は、GitHubの以下のリポジトリにある RUNNING_*.md ファイルを参考にします。

今回はサイネージ用途なのでデスクトップ機能を無効化しつつ、 RUNNING_ON_YOUR_DEVICE.md の手順を抜粋して内蔵ディスプレイでの全画面出力をやってみます。

まずはSSHで接続し、以下のコマンドでデスクトップを無効化します。

sudo systemctl set-default multi-user
sudo reboot

一旦ディスプレイが真っ黒になります。続いてsnapユーティリティでUbuntu Frameをインストールし、有効化します。

sudo snap install ubuntu-frame
sudo snap set ubuntu-frame daemon=true

これで画面がUbuntu Frameの初期画面(グレーのグラデーション)になるはずです。縦表示になので、横表示に切り替える場合は /var/snap/ubuntu-frame/current/frame.display ファイルで設定します。

sudo vim /var/snap/ubuntu-frame/current/frame.display

      # orientation: normal   # {normal, left, right, inverted}, defaults to normal
        ↓
      orientation: right      # {normal, left, right, inverted}, defaults to normal

一度再起動すれば横表示になります。

sudo reboot

続いて任意のWebページを表示するためにwpe-webkit-mir-kioskスナップをセットアップします。

sudo snap install wpe-webkit-mir-kiosk
sudo snap connect wpe-webkit-mir-kiosk:wayland
sudo snap set wpe-webkit-mir-kiosk daemon=true

これでOKです。

Figmaのフレームとプロトタイピング作成

ここからは表示するページとして、Figmaのデザイン機能とプロトタイピング機能を利用していきます。まずはFigmaのアカウントを発行し、ログインします。

https://figma.com/

[New Disign file]をクリックして新規デザインファイル画面を開き、フレームを作成するために画面左上の井桁マークをクリックします。

画面右側のメニュー[Frame]からreTerminalの画面比率に合う[Presentation] - [Slide16:9]を選択しフレームを追加します。

reTerminalのディスプレイ解像度は1280x720なので、フレームのサイズを合わせます。画面右のフレームのプロパティのうち、W(幅)/H(高さ)の右にある縦横比固定ボタンをクリックしてからWを 1280 に直すのが楽です。

あとは自由に文字や図形を変更して画面を描いて行きましょう。複数画面はフレームのコピー&ペーストで増やしていくのが簡単です。フレームの並び位置はreTerminalでの表示には影響しないので適当です。ここでは3画面ほど作って、デザインは一旦完成とします。

ではプレゼンテーション画面で確認してみましょう。右上の再生アイコンをクリックします。

それらしい表示になったでしょうか。これでFigmaの準備はOKです。

reTerminalの動作確認

Figmaのプレゼンテーション画面右上の[Share prototype]ボタンをクリックします。

共有ダイアログ左下の[Copy link]でプレゼンテーション画面のリンクをコピーします。

このURLを以下のコマンドでUbuntu Frameにセットし、表示します。

sudo snap set wpe-webkit-mir-kiosk url=https://www.figma.com/proto/XXXXX/XXXXX
sudo snap start wpe-webkit-mir-kiosk

これでreTerminalにプレゼンテーションが表示されます！簡単！画面右半分のタッチで次の画面、左半分のタッチで前の画面に切り替える感じで操作できます。

自動ページ送り

画面送りのためにタッチ操作が必要なところを、Figmaのプロトタイピング機能で自動ページ送りにしてみましょう。Figmaのプレゼンテーション画面を閉じてデザイン画面に戻り、右上の[Prototype]メニューをクリックします。

この状態でフレームをクリックすると、右側中央に〇が表示されるので、これをクリックしたままドラッグ&ドロップでとなりのフレームに繋げます。

こんな感じ。

そうするとInteraction detailsダイアログが表示されるので、ここで画面遷移の設定を変えていきます。

自動ページ送りは[On click]を[After delay]に変更し、右に出てくる時間を好みの長さに変更します。単位はミリ秒なので、5秒にするなら5000と入力します。

これでOKです。残りの画面も同様に設定していきます。画面3→画面1に設定することでループになります。

reTerminalで表示するリンクのURLは変化しないので、即時反映でいきなりループ表示になります。

https://youtu.be/Fyf6BTAVEWs

Figma側でいつでもどこからでも表示内容が変更できるの、便利ですよね。

ボタンアクション

Figmaのプロトタイピング機能がフルで使えるので、キーボードでの画面操作もできます。reTerminalの4つのボタンはキーボードとして左からA, S, D, Fのキーが割り当てられているので、ボタンの押下でプレゼンテーションの操作ができるわけです。

Note: The buttons are configured as a s d f from left to right by default

FigmaのInteraction detailで[Key/gamepad]を選択し、キーを入力すればOKです。

これも便利！

まとめ

reTemrinalをミニサイネージ端末にするために、Ubuntu FrameをFigmaを組み合わせた例をご紹介しました。リモートから自由に編集できるので、様々なデモや展示の説明に利用できると思います。また、自宅に置いてリモート会議中を示す端末にも使えたりしそうです。

reTerminalをなんとなく買ったという方は、いじるだけでも楽しいのでぜひ試してみて下さい！