キオスクモードを使ったシンプルなRaspberry PiのIoTクロック

日本語フォーラム
1

著者：Nate_Larson

image

私は最近、Odd Jayyの悪名高いロボット製作に協力しているときに、PimoroniのHyperPixel高解像度 Raspberry Pi ディスプレイを手に入れました。ただのHyperPixelではなく、2.1 ‎round HyperPixelです。このディスプレイを使いこなす必要があり、私は使い方をよりよく理解するための動機付けとなるようなプロジェクトを見つけたいと思っていました。

image

丸いディスプレイはちょっと変わっているので、すぐに思いついたプロジェクトは、アナログスタイルの時計でした。このウェブベースの手短かで簡単な時計作りには、Raspberry Pi 3 Bを使用しましたが、40ピンのヘッダを備えた最新のRaspberry Pi‎コンピュータなら、どれでも使えるはずです。

基本的なRaspberry Piのセットアップ

まず、‎Raspberry Pi Imagerを使って、Raspberry Pi OS Lite（32ビット）のオペレーティングシステム（OS）を搭載したmicroSDカードをフラッシュすることから始めます。これは、プログラム内でオペレーティングシステムを選択する際に、「Raspberry Pi OS (other)」というカテゴリで見つけることができます。また、この時に設定メニューを使って、Piのホスト名、ユーザー名、固有のパスワードを割り当て、次にSSHの有効化、無線LANの詳細設定、適切なロケーションの詳細設定を行うと、残りのセットアップが容易になります。

image

OSをフラッシュしたら、microSDカードをPiに挿入し、HyperPixelディスプレイをPiの40ピンヘッダに取り付け、電源を接続してPiを起動させます。初期設定を終えるのに時間がかかるため、最初の起動では、Piがプロセスを完了するまでに数分かかることを覚えておいてください。

Piが起動を完了したことを確認したら、そのIPアドレスを見つける必要があります。これにはいくつかの方法がありますが、通常はネットワークルータにログインして、接続されているクライアントのリストを確認します。もしくは、Piと同じWi-Fiネットワークに接続されているデバイスで、Angry IP ScannerなどのIPスキャナを使用することができます。OSをフラッシュする際に、先ほど指定したホスト名のデバイスを探します。私の場合、192.168.40.7でPiが見つかりました。

image

IPアドレスが手に入ったので、PuTTYやTera termなどのプログラムを使って、PiにSSHで接続します。

image

SDカードにOSをフラッシュしたときに設定したユーザー名とパスワードでログインすると、ターミナルウィンドウが表示されます。

image

潜在的なエラーを回避するために、この時点で次のupdateコマンドを実行してPiのリポジトリ一覧が更新されているのを確認することをお勧めします。 
sudo apt update

HyperPixelソフトウェア

ここで、HyperPixelをセットアップするために、Pimoroniのドライバコードをダウンロードしてインストールする必要があります。

ターミナルに以下の各コマンドを入力してください。

git clone https://github.com/pimoroni/hyperpixel2r
cd hyperpixel2r
sudo ./install.sh

注意：上記の最初のコマンドの後にエラーメッセージが表示された場合、以下のコマンドを使用してgitをインストールする必要があるかもしれません。

sudo apt install git

ドライバをインストールしたら、config.txtファイルを編集してディスプレイを動作させる必要があります。これは、次のコマンドで行うことができます。

sudo nano /boot/config.txt

次の行を見つけるまでスクロールし、行の先頭に#を入力してコメントアウトしてください。

dtoverlay=vc4-kms-v3d

Ctrl + Xを押してから、Yを押して変更を保存し、Enterキーで元のファイル名を保持します。

キオスクモードのセットアップ

Piが自動的にログインして、表示したいページを起動するように、ターミナルに次のように入力して、Raspberry Pi Configuration Toolを起動します。

sudo raspi-config

「System Options」を選択します。

image

「Boot / Auto Login」を選択します。

image

「Console Autologin」を選択します。

image

つぎに「Finish」を選択し、再起動を求められたら「Yes」を選択します。Piが再起動したら、再びSSHで再接続する必要があります。

今回はOSのLite版を使用したため、時計を表示するためのグラフィカルユーザーインターフェース（GUI）がありません。したがって、このプロジェクトを動作させるためには、最小限のGUIをインストールする必要があります。そのためには、ターミナルウィンドウで次のコマンドを実行します。

sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox

次に、時計のウェブページを表示するために、次のコマンドでChromiumウェブブラウザをインストールします。

sudo apt-get install --no-install-recommends chromium-browser

Openboxは、上記コマンドで最初にインストールされたウィンドウマネージャです。これを、autostartとenvironmentファイルを編集して、起動時にchromiumブラウザを起動し、指定したウェブページをロードするように設定します。

autostartファイルを開きます。

sudo nano /etc/xdg/openbox/autostart

画面やウェブページを表示し続けたいので、画面が消えないようにするために、以下のコマンドをファイルに追加してください。

xset -dpms            # turn off display power management system
xset s noblank        # turn off screen blanking‎
xset s off            # turn off screen saver

また、自動起動ファイルに以下の行を追加することで、Chromiumがエラーや更新メッセージ、ダイアログボックス、またはウェブページの邪魔になるものを表示しないようにすることができます。

‎# Remove exit errors from the config files that could trigger a warning‎

sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'‎

sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\%2B"/"exit_type":"Normal"/' ‎‎~/.config/chromium/Default/Preferences‎

‎# Run Chromium in kiosk mode‎
chromium-browser  --noerrdialogs --disable-infobars --kiosk $KIOSK_URL

‎--check-for-update-interval=31536000‎

これらの更新を保存し、Ctrl + Xを押してから、Yを押して変更を保存し、Enterキーを押して元のファイル名を保持したまま、更新内容を保存してファイルを閉じます。

では、environmentファイルを開いてください。

sudo nano /etc/xdg/openbox/environment

ここでは、以下の例にあるDigi-Keyのウェブサイトのように、Chromiumが表示すべきウェブページを定義することになります。私はオンラインで時計の文字盤のウェブサイトを検索しました。ライブの時計が中央に全画面表示されているのを見つけたとき、それがとても気に入ったので、そのページのURLをコピーしました。すでに存在する利用可能なオプションもたくさんあり、またウェブページ制作の経験があれば、独自の画面を制作する良い機会になるでしょう。私が最終的にデザインに採用した時計の文字盤のページは、‎https://www.clockfaceonline.co.uk/clocks/magical/です。もちろん、好きなページを選ぶことができます。

このテキストを追加し、ファイルを閉じて保存してください。

export KIOSK_URL= https://www.digikey.com

表示するウェブページを変更する必要がある場合は、このファイルを編集するだけです

あとは、Piが起動時にXサーバを起動するように設定するだけです。

~/.bash_profileがすでに存在するかどうか確認します。

ls -la ~/.bash_profile

その場合、ファイルを編集することができます。

sudo nano ~/.bash_profile

しかし、存在しない場合は、編集するファイルを開く前に、まず以下のコマンドでファイルを作成してください。

touch ~/.bash_profile

次のテキストを追加してください。これでXサーバが起動します。また、HyperPixelはタッチスクリーンディスプレイなので、カーソルを削除します。

[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor

ファイルを保存して閉じてから、以下のコマンドを実行してください。

source ~/.bash_profile

エラーが出なければ、Piを再起動してビルドは完了です。

sudo reboot

さらなる進化をめざす

この例では時計を作成しましたが、他のウェブページや特定のファイルにも簡単に適応できます。このデバイスは、ローカルファイルを含め、Chromiumブラウザでネイティブに表示できるものなら何でも表示可能です。例えば、PiをシャットダウンしてmicroSDカードを取り出し、PCに戻してください。それから、カードのブートディレクトリに、アニメーションGIFなど表示したいファイルを追加します。

メモリカードをPiに戻して起動し、environmentファイルのテキストを以下のように変更します（ファイル名は表示するファイルに合わせます）。

Export KIOSK_URL=file:///boot/my_gif_file.gif

ファイルを保存して、再起動します。これで、Piはあなたが選択したファイルを表示するようになります。

‎まとめ

これでRaspberry Piで動く、ウェブベースの時計がHyperPixelの丸型のディスプレイに美しく表示されるようになりました。このビルドは、あらゆるウェブページやスマートホームダッシュボードを表示するように簡単に設定することができます。ディスプレイのタッチスクリーンは、モバイルフレンドリーなウェブページを簡単に操作でき、キオスクセットアップにより、起動時にウェブページを自動的にフルスクリーンで表示させることができます。

主要部品とコンポーネント

imageimageimage
image

すべてのDigi-Keyパーツをカートに追加

  • 1778-PIM579-ND
  • 2648-RASPBERRYPI3-ND
  • 3247-USDCOEM-16GB-ND
  • 2648-SC0623-ND

image
    ご質問やご意見がおありですか？Digi-Keyのオンラインコミュニティであり、技術情報源でもある
    TechForumに投稿して下さい。




オリジナル・ソース（English）