Armadilloフォーラム

Armadillo-IoT G4でhtmlを使って構築した画面をローカルに表示したい

yhashi1977

2025年2月26日 20時06分

==========
製品型番:Armadillo-IoT G4
Debian/ABOSバージョン:3.20.5-at.8
カーネルバージョン:3.20.5
==========

お世話になります。

Armadilloのブログの下記ページで紹介されている内容を、
Armadillo-IoT G4のHDMIで実施したいと考えていますが可能でしょうか?

https://armadillo.atmark-techno.com/blog/10899/19079

試しにG4でも同様のプロジェクトを作成し、Armadilloに書き込みしてみましたが
下記のようなエラーログが出力されました。

X.Org X Server 1.20.11
X Protocol Version 11, Revision 0
Build Operating System: linux Debian
Current Operating System: Linux 8805be20cc29 5.10.233-0-at #1-Alpine SMP PREEMPT Mon Jan 27 06:39:36 UTC 2025 aarch64
Kernel command line: console=ttymxc1,115200 root=/dev/mmcblk2p2 rootwait ro quiet nokaslr
Build Date: 27 October 2024  11:03:02AM
xorg-server 2:1.20.11-1+deb11u14 (https://www.debian.org/support)
Current version of pixman: 0.40.0
        Before reporting problems, check http://wiki.x.org
        to make sure that you have the latest version.
Markers: (--) probed, (**) from config file, (==) default setting,
        (++) from command line, (!!) notice, (II) informational,
        (WW) warning, (EE) error, (NI) not implemented, (??) unknown.
(==) Log file: "/var/log/Xorg.0.log", Time: Thu Jan  1 00:03:09 1970
(==) Using system config directory "/usr/share/X11/xorg.conf.d"
(EE)
Fatal server error:
(EE) xf86OpenConsole: Cannot open virtual console 7 (No such file or directory)
(EE)
(EE)
Please consult the The X.Org Foundation support
         at http://wiki.x.org
 for help.
(EE) Please also check the log file at "/var/log/Xorg.0.log" for additional information.
(EE)
Can't open display :0
(EE) Server terminated with error (1). Closing log file.
surf: error while loading shared libraries: libg2d.so.1: cannot open shared object file: No such file or directory

現プロジェクトのapp.confを添付いたします。

以上、よろしくお願いいたします。

ファイル ファイルの説明
app.conf
コメント

at_satoshi.ohta

2025年2月27日 13時37分

太田です。

shellscript のプロジェクトを使用して、Armadillo ゲートウェイ G4 の HDMI から画面に出力する方法をこちらでも試してみました。
ブラウザは surf ではなく firefox ですが、画面上に表示することはできました。
サンプルプログラムからの差分としての修正内容は以下のとおりです。

1. app/src/main.shを以下の内容に書き換える

#!/bin/bash -e
 
#ウインドウシステムの起動
Xorg vt7 -v -s 0 &
#Webサーバの起動
nginx
#surfブラウザでlocalhost直下のindex.htmlを開く
DISPLAY=:0 firefox localhost/index.html

2. config/app.conf に★の内容を追記

...省略
# and should be changed depending on your needs.
add_volumes /sys:/sys
 
#// for HDMI
add_devices /dev/tty7 ★
add_devices /dev/fb0 ★
add_devices /dev/input ★
add_volumes /run/udev:/run/udev:ro ★
 
...省略

3. container/Dockerfile に以下を追記

ENV LD_LIBRARY_PATH /opt/firmware/usr/lib/aarch64-linux-gnu
ENV XDG_RUNTIME_DIR /run/xdg_home
ENV GDK_GL gles

4. container/packages.txt を以下のように修正

bash
xorg
nginx
fonts-ipafont
vim
firefox-esr

5. container/resources にブログと同様に var/www/html/index.html と css/style.css を作成

これで development.swu を生成して Armadillo にインストールしてみていただけますでしょうか?

どうぞよろしくお願いいたします。

太田様

お世話になっております。ご返信ありがとうございます。
ご回答いただいた内容で試したところ、
Armadillo-IoT G4とHDMIディスプレイ(FHD)を接続してfirefoxが起動して
index.htmlが表示されることを確認できました。

ただ、今回の目的が、
●機種はArmadillo-IoT G4
●コンテナ上でWebアプリケーションを実行させ、HDMI接続モニタおよびWi-Fi経由のPCに同じ画面を表示させる
●HDMI接続モニタにはキオスクモードのようにWebアプリを全画面表示させたい
で、本日フォーラムを色々と確認していたところ、
いくつか該当するスレッドがあり、
ブラウザはfirefox、surf、epiphanyの選択肢があるのと
スレッドの内容も時期が前後しているため
どのブラウザがベストな選択なのか決められるほど、私が未だ理解できておりません。

今現在で御社的に、上記目的を達成するために一番お薦めなブラウザおよび構成と
Armadillo-IoT G4でのWebアプリサンプルを構築するための手順を
ご教授いただけないでしょうか?

以上、よろしくお願いいたします。

佐藤です。

> 今現在で御社的に、上記目的を達成するために一番お薦めなブラウザおよび構成と
> Armadillo-IoT G4でのWebアプリサンプルを構築するための手順を
> ご教授いただけないでしょうか?
ブラウザはfirefoxが良いかと思います。
Webアプリとはどのようなものでしょうか、
htmlファイルとcssファイルだけの静的なものか、
あるいはpythonやphpなどを使った動的なものでしょうか。

佐藤様

ご返信ありがとうございます。

WebアプリはバックエンドはDjango(python)、フロントエンドはvue.js(javascript)で実装する
動的なものを考えております。
以前、弊社ではこの構成で、Raspbery Pi 4B+に実装した実績があるため、
Armadillo-IoT G4でも同様の構成を実現できないかと考えております。

Webアプリコンテナとは別に、複数の機器との通信(USBシリアルx2、WebSocket x1)をする処理は
C言語のコンテナ(main)を実装して、コンテナ間(main-web)で、UDPソケット通信によりやり取りする予定です。

Web画面は、mainコンテナで収集したデータを元に
動的にウィジェットの表示を更新する動作を考えています。

当初Flutterでの実装も検討しましたが、
HDMI出力はABOSDEで作成するFlutterプロジェクトで対応できますが、
WebアプリはFlutter Webを別途実装する必要があるとお聞きしており
同じWeb画面を表示させたいとなると、
前述したラズパイで実績のある構成の方が実現し易いのではないかと思い
確認している最中です。

以上、よろしくお願いいたします。

at_satoshi.ohta

2025年2月28日 15時35分

横からすみません。
太田です。

> WebアプリはバックエンドはDjango(python)、フロントエンドはvue.js(javascript)で実装する
> 動的なものを考えております。

ABOSDE の python プロジェクトを使用すればいいと思います。
python プロジェクトは shellscript のプロジェクトに pip でインストールできる設定を追加したものと理解して問題ありません。

大雑把ですが、python プロジェクトで以下のように作成できるかと思います。

1. [左サイドバー] の [CREATE NEW PROJECT] -> [G4/X2] -> [Python New Project] でPythonのプロジェクトを作成(ここでは my_project とします)

2. [左サイドバー] の [OPENED PROJECT] の [Set environment] を実行してください。

3. my_project/app/requirements.txt に pip でインストールするパッケージを追記してください。
Djangoであれば django と追記してください。その他、必要なパッケージがあれば追記してください。

4. my_project/packages.txt に apt-get でインストールするパッケージを追記してください。

5. my_project/app/src 下に必要なソースコードを配置してください。
my_project/app/src 下のファイルは armadillo のコンテナ上では /vol_app/src 下に配置されます。
/vol_app は ABOS 上の /var/app/rollback/volumes/my_project にマウントされます。
また、ソースコード上でログやデータをファイルとして保持している場合は、コンテナ上の /vol_data 下に保存先を変更してください。
/vol_data は /var/app/volumes/my_project にマウントされます。
上記の設定は my_project/config/app.conf に記述されています。

6. デフォルトでは、my_project/config/resources_python/bin/python_launch がコンテナ起動時に実行されます。
python_launch はシェルスクリプトなので、ここに web アプリケーションを実行する処理を記述すればいいと思います。

7. my_project/config/app.conf はコンテナに関する設定です。
コンテナ間でUDP 通信をする場合に port を使用する場合は例えば

add_ports 50241:50241/udp 

などのようにしてコンテナとArmadillo の port を接続できます。
また、マウント先をコンテナ間で共有して、UNIXドメインソケットを使用する方法も考えれます。

8. [Generate development swu] を実行すると SWU イメージ development.swu が生成されますのでインストールしてください。

基本的には上記で説明したファイルを編集すると思いますが、他にも必要な部分があれば、製品マニュアルの「CUI アプリケーションの開発」の節をご参照いただければと思います。もしくはフォラームでご質問いただければ幸いです。
https://manual.atmark-techno.com/armadillo-iot-g4/armadillo-iotg-g4_pro…

> Webアプリコンテナとは別に、複数の機器との通信(USBシリアルx2、WebSocket x1)をする処理は
> C言語のコンテナ(main)を実装して、コンテナ間(main-web)で、UDPソケット通信によりやり取りする予定です。

C言語で開発する場合は C 言語のプロジェクトをご使用ください。
C 言語のプロジェクトは Python のプロジェクトと違い、[Generate development/release swu] もしくは [App run on armadillo] 実行時にビルド用のコンテナを作成して、その中で make を実行し、実行バイナリファイルを my_project/app/build 下に生成します。
Armadillo にはビルド用コンテナイメージとは別にインストール用のコンテナイメージを用意して、作成した実行バイナリファイルと一緒に SWU イメージに含まれます。
ビルド用コンテナイメージとインストール用コンテナイメージの違いは、my_project/config/packages.txt の [build] タグ以下のパッケージがインストールされているかどうかです。

どうぞよろしくお願いいたします。