LinuxARMデバイス用のクロスプラットフォームUIを構築するための新しい方法

アプリケーションに優れたユーザーエクスペリエンス（UX）を作成することは、特に組み込みアプリケーションを開発している場合、大変な作業です。現在、組み込みソフトウェアの開発に一般的に利用できるグラフィカルユーザーインターフェイス（GUI）ツールには2つのタイプがあります。複雑なテクノロジを使用するか、非常に高価です。

ただし、既存の確立されたツールを使用して、デスクトップ、モバイル、組み込みデバイス、および低電力Linux ARMデバイスで実行されるアプリケーションのユーザーインターフェイス（UI）を構築する新しい方法の概念実証（PoC）を作成しました。 。この方法では、AndroidStudioを使用してUIを描画します。 TotalCrossを使用して、デバイスでAndroidXMLをレンダリングします。 KnowCodeと呼ばれる新しいTotalCrossAPI。アプリケーションを実行するためのRaspberryPi4。

AndroidStudioの選択

TotalCross APIを使用して、アプリケーション用のレスポンシブで美しいUXを構築することは可能ですが、Android StudioでUIを作成すると、プロトタイピングから実際のアプリケーションまでの時間が短縮されます。

アプリケーションのUIを構築するために利用できるツールはたくさんありますが、Android Studioは、世界中の開発者が最も頻繁に使用するツールです。このツールは大規模に採用されているだけでなく、非常に直感的に使用でき、単純なアプリケーションと複雑なアプリケーションの両方を作成するのに非常に強力です。私の意見では、唯一の欠点は、ツールを使用するために必要なコンピューティング能力です。これは、VSCodeやそのオープンソースの代替手段であるVSCodiumなどの他の統合開発環境（IDE）よりもはるかに重いです。

これらの問題を検討することで、Android Studioを使用してUIを描画し、TotalCrossを使用してAndroidXMLをデバイス上で直接実行する概念実証を作成しました。

UIの構築

PoCでは、温度などを制御する家電アプリケーションを作成し、LinuxARMデバイスで実行できるようにしたいと考えていました。

Raspberry Pi用のアプリケーションを開発したかったので、AndroidのConstraintLayoutを使用して848x480（Raspberry Piの解像度）の固定画面サイズのUIを構築しましたが、他のレイアウトでレスポンシブUIを構築できます。

Android XMLは、UI作成に多くの柔軟性を追加し、アプリケーションのリッチなユーザーエクスペリエンスを簡単に構築できるようにします。以下のXMLでは、ImageViewとTextViewの2つの主要コンポーネントを使用しました。

<ImageView

android:id="@+id/imageView6"

android:layout_width="273dp"

android:layout_height="291dp"

android:background="@drawable/Casa"

tools:layout_editor_absoluteX="109dp"

tools:layout_editor_absoluteY="95dp" />

<TextView

android:id="@+id/insideTempEdit"

android:layout_width="94dp"

android:layout_height="92dp"

android:background="#F5F5F5"

android:text="20"

android:textAlignment="center"

android:gravity="center"

android:textColor="#000000"

android:textSize="67dp"

android:textStyle="bold"

tools:layout_editor_absoluteX="196dp"

tools:layout_editor_absoluteY="246dp" />

TextView要素は、建物内の温度など、一部のデータをユーザーに表示するために使用されます。ほとんどのImageViewは、ユーザーがUIを操作するためのボタンとして使用されますが、画面上のコンポーネントによって提供されるイベントを実装するためにも必要です。

TotalCrossとの統合

このPoCの2番目のテクノロジーはTotalCrossです。次の理由により、デバイスでAndroidの機能を使用したくありません。

1. 私たちの目標は、LinuxARMに優れたUIを提供することです。
2. デバイスの設置面積を小さくしたい。
3. アプリケーションを、コンピューティング能力の低いローエンドのハードウェアデバイス（GPUがない、RAMが少ないなど）で実行する必要があります。

まず、VSCodeプラグインを使用して空のTotalCrossプロジェクトを作成しました。次に、ドローアブル内に画像のコピーを保存しました フォルダとXML内のAndroidXMLファイルのコピー フォルダ-どちらもリソース内にあります フォルダ：

TotalCross Simulatorを使用してXMLファイルを実行するために、KnowCodeと呼ばれる新しいTotalCross APIと、XMLをロードするためのMainWindowを追加しました。以下のコードは、APIを使用してXMLをロードおよびレンダリングします。

public void initUI() {

    XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);

    swap(xmlCont);

}

それでおしまい！ 2つのコマンドだけで、TotalCrossを使用してAndroidXMLファイルを実行できます。 TotalCrossのシミュレーターでのXMLのパフォーマンスは次のとおりです。

このPoCを完了するには、2つのことが残っています。ユーザーとの対話を提供するイベントを追加することと、RaspberryPiで実行することです。

Button plus = (Button) xmlCont.getControlByID("@+id/plus");

Label insideTempLabel = (Label) xmlCont.getControlByID("@+id/insideTempLabel");

plus.addPressListener(new PressListener() {

    @Override

    public void controlPressed(ControlEvent e) {

        try {

            String tempString = insideTempLabel.getText();

            int temp;

            temp = Convert.toInt(tempString);

            insideTempLabel.setText(Convert.toString(++temp));

        } catch (InvalidNumberException e1) {

            e1.printStackTrace();

        }

    }

});