以前のエントリでは余っていたRaspberryPiを簡単にWebサイネージ化してみよういう内容を書いてみました。

結果は非常に簡単にサイネージできた！めでたしめでたしとなりました。

その後、実は縦向きディスプレイのサイネージ化したかったのですが、その時に使用したFullPageOSを使用した方法では、ディスプレイの縦向き表示ができないということが判明しました。これでは要求が達成できない状況です。個人的な意見ではありますが、縦向きのディスプレイにすると情報量がかなり増える印象です（ポスターのような使い方・レイアウトができるメリットを感じています）。また、YoutubeやTwitterといったタイムラインの表示の情報が表示しやすいといった利点もあります。自分がやりたかったのはYouTubeLiveのコメント欄を簡単に表示してくれるようなサイネージができないかと考えていました。

今回は、前回のものと比べると手順がかなり多くはなるのですが、縦向きディスプレイにも対応できるようにRaspberryPiを使用したサイネージを作ってみようと思います。まだまだ、内容的には足りないところもでてくると思いますが、出てくる都度に追記できればと思います。

今回は余っているRaspberry Pi 3Bと最新のRaspberry Pi OSを使用します。

f:id:ueponx:20210305222100p:plain

また、RaspberryPiを起動するとデフォルトユーザ（pi）でXのログインを行う設定（なにもしないとその設定になっています）とし、デフォルトユーザのパスワードは変更するという前提で行っています。

画面表示を回転させる

まずは一番重要になるRaspberryPiの画面（X環境）を90°、または270°回転させるということを行います。現在のディスプレイの接続状況を確認してみたいと思います。以下のコマンドを実行することで状況がわかります。

$ tvservice -s

ちなみに、ヘッドレス（モニタを接続しない）状況では以下のように表示されます。ヘッドレス環境では、設定を行っても画面を回転させるといったことはできませんので注意してください。

ヘッドレス環境の場合

f:id:ueponx:20210208230559p:plain

モニタ未接続では回転表示はもちろんできないので、モニタやキャプチャユニットを接続して設定を行う必要があります。

キャプチャユニットに接続した場合

f:id:ueponx:20210208232346p:plain

ちゃんと接続しているモニタの情報を知っておきます。

モニタを縦向き表示に設定を行う

モニタを縦向き（90°または270°）に回転させるには/boot/config.txtファイルを設定する必要があります。設定の詳細は以下をご確認ください。

www.raspberrypi.org

その中の項目にdisplay_rotateという項目があるので以下を参考に追記を行います。オリジナルの/boot/config.txtにはコメント化されているので、行頭の#を削除するという方法でも問題はありません。ネットをみると、他のパラメータでの設定の情報もありますが、最新のOSではdisplay_rotateのパラメータを使用することを推奨されているようです。

display_rotateの設定値

display_rotate=0 # 通常
display_rotate=1 # 時計回りに90°
display_rotate=2 # 時計回りに180°
display_rotate=3 # 時計回りに270°
display_rotate=0x10000 # 水平方向に反転
display_rotate=0x20000 # 垂直方向に反転

この設定を行う場合の注意点としては、90°、270°の回転の場合にはGPUメモリの設定を増やして上げる必要があります。先程の参考情報でも以下の記載があります。

Note that the 90 and 270 degree rotation options require additional memory on the GPU, so these will not work with the 16MB GPU split.

そこで、以下のように変更をします。

config.txtに以下を追加（時計回りに270°に回転させて表示）

display_rotate=3
gpu_mem=128

回転させる角度に関してはディスプレイの設置に依存しますので、表示しながら確認を行ってください。

オーバースキャンの設定

HDMIの画面の表示が少し小さくなっていることもあるようなので、それを回避するためにオーバースキャンの設定（解除）を行っておきます。これも /boot/configに追記を行って対応します。

/boot/configに以下を追加

disable_overscan=1

設定が終わりRaspberryPiを起動すると以下のようになります。モニタが横向きになっていると270°回転の設定にしているので以下の様になっていると思います。

f:id:ueponx:20210310231414p:plain

モニタが縦向きになっていれば、以下のような感じで表示されています。

f:id:ueponx:20210310005408p:plain

Chromiumブラウザをキオスクモードで起動する

ディスプレイの表示の回転が行われれば、後はブラウザとなるChromiumブラウザをキオスクモードで自動起動すればWebサイネージとしてはほぼ機能できると思います。

以下を参考にさせていただきました。

参考 qiita.com

今回はChromiumブラウザをキオスクモードで自動起動させるのにSystemdを使用します。/etc/systemd/system/chromium-autorun.serviceというファイルを作成し、その中にキオスク起動させる設定をいれていきます。ExecStartのパラメータがキオスクモードにするための設定になります。以下のようにファイルを作成して、

$ vi /etc/systemd/system/chromium-autorun.service

以下のように編集を行います。

/etc/systemd/system/chromium-autorun.service

[Unit]
Description=Chromium Autorun

[Service]
Environment=DISPLAY=:0.0
Environment=XAUTHORITY=/home/pi/.Xauthority
#ExecStartPre=/home/pi/kiosk-setting.sh
ExecStart=/usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mode --kiosk --app=https://youtube.com/
Restart=on-abort
User=pi
Group=pi

[Install]
WantedBy=multi-user.target

キオスクモードで起動するためのオプションは以下のようになっています。今回はYouTubeを起動するようにしています。オープンするURLを設定することで表示させる情報の変更ができます。

--noerrdialogs　…　エラーダイアログを表示しない
--disable-background-mode　…　バックグラウンドモードを無効
--kiosk　…　Kioskモードで起動
--app=https://youtube.com/ アプリケーションモードとして指定されたURLを表示する(今回は)YouTubeにしています

参考

chrome.half-moon.org

キオスクモードおよび自動起動の設定ファイルが出来上がったので、後はこれをサービスの有効化をして、サービスを起動しておきます。これでRaspberryPiが起動したらChromiumブラウザがキオスクモードで起動し、指定したURLが表示されることになります。

$ sudo systemctl enable chromium-autorun.service
$ sudo systemctl start chromium-autorun.service

細かい設定の追加

マウスカーソルを消す

ここまでくるとあとは、細かい点の設定追加をしていくことになります。

X-Windowのマウスカーソルを消します。サイネージでマウスカーソルがそのまま出ているのは少し台無し感がありますし。 X側の設定でマウスカーソールを消すことは可能ですが、全く表示されない状況ではメンテナンス性が悪くなります。そこで、マウスを動かさない状況が続いたら、カーソルを消してみたいと思います。今回はunclutterというアプリを使います。

デフォルトではunclutterはインストールされていないので、aptでインストールを行っておきます。

unclutterのインストール

$ sudo apt install unclutter

このアプリはマウスの動きや表示を制御できるものです。以下のように起動を行うと、マウスの動きが0.1秒間行われない（アイドル状態になったら）と表示を消すといった動作になります。

マウスの動きが0.1秒間アイドル状態になったらカーソル表示を消す

$ unclutter -idle 0.1 -root

何か操作するとマウスカーソルを再表示してくれるので、メンテナンス時には非常に便利です。からあげさんの情報を使用してunclutterの自動起動をします。unclutterはX上のコンソールでしか動作しないのでautostart を使用する方法を使用することになります。

参考 qiita.com

からあげさん情報ありがとうございます。

設定方法

$ mkdir -p ~/.config/lxsession/LXDE-pi
$ cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/
$ echo '/usr/bin/unclutter -idle 0.1 -root' >> ~/.config/lxsession/LXDE-pi/autostart

設定後再起動を行うと反映されます。マウスを動かさないとマウスカーソルは表示されず、

f:id:ueponx:20210310234302p:plain

マウスを動かしたときだけマウスカーソルが表示されます。

f:id:ueponx:20210310234309p:plain

URLの設定をクラウドで管理する

ここまでくればほとんど問題はないのですが、表示したいURLを設定するのに、わざわざRaspberryPiにログインして行う必要があるのはちょっと面倒だなと思ったので、その部分の工夫を考えてみました。

/etc/systemd/system/chromium-autorun.serviceのファイル内にあるURLをGitHub Pagesのものに変更します。GitHub Pages側はリダイレクトするようにしておきます。そうすることで、GitHub側からURLを編集できるようになります。これで遠隔操作で表示するURLを切り替えることができるようになります。あとは現場側の電源断を行うことで切り替えが容易になります。URLのリダイレクトに関しては過去に行ったQRコードリダイレクタの知識をそのまま使えばOKです。

uepon.hatenadiary.com

公開するURLに以下のような記載を行えば、リダイレクトを行ってくれます。以降の設定はGitHub側のURLのみを変更すれば良いことになります。以下の例ではリダイレクト先をGoogleにしています。

index.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //リダイレクト先のURLを記述してください
            window.location.href = "https://www.google.com/?hl=ja";
        }
        );
    </script>
</head>
<body></body>
</html>

以下のようなアクセスルートになります。

RaspberryPi（Chromiumブラウザ）　➡　GitHub Pages（公開URL）　➡　GitHub Pages（公開URL）で指定されたファイル内のリダイレクト先へ　　

/etc/systemd/system/chromium-autorun.serviceに記述するURLはGitHubPages（公開URL）となります。

`YouTube`のコメントのサイネージ化（別モニタ化といったほうがいいかも）

自分がやりたかったのはYouTubeコメント欄のサイネージ化というかRaspberryPiでの外だしだったのであとはGitHub Pages側のURLにYouTubeコメントのURLを設定すればOKです。OBSを使えば同時配信につかえるというものですが、別処理系（RaspberryPiを使って外だし）にしてPCの負担を軽くできます。

配信側であれば、コメント表示のURLは設定画面で表示できると思います。視聴側の場合にはLive配信視聴の画面を表示して、コメント欄のハンバーガボタンをクリックし、

f:id:ueponx:20210309233413p:plain