Das Erstellen einer großartigen Benutzererfahrung (UX) für Ihre Anwendungen ist eine schwierige Aufgabe, insbesondere wenn Sie eingebettete Anwendungen entwickeln. Heutzutage gibt es zwei Arten von Tools für grafische Benutzeroberflächen (GUI), die allgemein für die Entwicklung eingebetteter Software verfügbar sind:entweder beinhalten sie komplexe Technologien oder sie sind extrem teuer.
Wir haben jedoch einen Proof of Concept (PoC) für eine neue Möglichkeit zur Nutzung bestehender, etablierter Tools zum Erstellen von Benutzeroberflächen (UIs) für Anwendungen erstellt, die auf Desktop-, Mobil-, Embedded-Geräten und Linux-ARM-Geräten mit geringem Stromverbrauch ausgeführt werden . Unsere Methode verwendet Android Studio, um die Benutzeroberfläche zu zeichnen; TotalCross zum Rendern des Android-XML auf dem Gerät; eine neue TotalCross-API namens KnowCode; und ein Raspberry Pi 4, um die Anwendung auszuführen.
Android Studio auswählen
Es ist möglich, mithilfe der TotalCross-API eine ansprechende und schöne UX für eine Anwendung zu erstellen, aber die Erstellung der Benutzeroberfläche in Android Studio verkürzt die Zeit zwischen dem Prototyping und der eigentlichen Anwendung.
Es gibt viele Tools zum Erstellen von Benutzeroberflächen für Anwendungen, aber Android Studio wird von Entwicklern weltweit am häufigsten verwendet. Zusätzlich zu seiner massiven Akzeptanz ist dieses Tool auch sehr intuitiv zu bedienen und es ist wirklich leistungsfähig, um sowohl einfache als auch komplexe Anwendungen zu erstellen. Der einzige Nachteil ist meiner Meinung nach die Rechenleistung, die für die Verwendung des Tools erforderlich ist, das viel schwerer ist als andere integrierte Entwicklungsumgebungen (IDEs) wie VSCode oder seine Open-Source-Alternative VSCodium.
Durch das Nachdenken über diese Probleme haben wir einen Machbarkeitsnachweis erstellt, indem wir Android Studio zum Zeichnen der Benutzeroberfläche und TotalCross zum Ausführen des Android-XML direkt auf dem Gerät verwendet haben.
Erstellen der Benutzeroberfläche
Für unseren PoC wollten wir eine Anwendung für Haushaltsgeräte erstellen, um die Temperatur und andere Dinge zu steuern und die auf einem Linux-ARM-Gerät laufen würde.
Wir wollten unsere Anwendung für einen Raspberry Pi entwickeln, also haben wir ConstraintLayout von Android verwendet, um eine Benutzeroberfläche mit fester Bildschirmgröße von 848 x 480 (Auflösung des Raspberry Pi) zu erstellen, aber Sie können reaktionsschnelle Benutzeroberflächen mit anderen Layouts erstellen.
Android XML fügt viel Flexibilität für die UI-Erstellung hinzu und macht es einfach, reichhaltige Benutzererfahrungen für Anwendungen zu erstellen. Im folgenden XML haben wir zwei Hauptkomponenten verwendet:ImageView und TextView.
<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" />
Die TextView-Elemente werden verwendet, um dem Benutzer einige Daten anzuzeigen, z. B. die Temperatur in einem Gebäude. Die meisten ImageViews werden als Schaltflächen für die Benutzerinteraktion mit der Benutzeroberfläche verwendet, aber sie werden auch benötigt, um die Ereignisse zu implementieren, die von den Komponenten auf dem Bildschirm bereitgestellt werden.
Integration mit TotalCross
Die zweite Technologie in diesem PoC ist TotalCross. Wir möchten nichts von Android auf dem Gerät verwenden, weil:
- Unser Ziel ist es, eine großartige Benutzeroberfläche für Linux ARM bereitzustellen.
- Wir wollen einen geringen Fußabdruck auf dem Gerät erreichen.
- Wir möchten, dass die Anwendung auf Low-End-Hardwaregeräten mit geringer Rechenleistung (z. B. keine GPU, wenig RAM usw.) ausgeführt wird.
Zunächst haben wir mit unserem VSCode-Plug-in ein leeres TotalCross-Projekt erstellt. Als Nächstes haben wir eine Kopie der Bilder im drawable gespeichert Ordner und eine Kopie der Android-XML-Datei im XML -Ordner – beide befinden sich in den Ressourcen Ordner:
Um die XML-Datei mit dem TotalCross-Simulator auszuführen, haben wir eine neue TotalCross-API namens KnowCode und ein MainWindow zum Laden der XML hinzugefügt. Der folgende Code verwendet die API zum Laden und Rendern des XML:
public void initUI() {
XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
swap(xmlCont);
} Das ist es! Mit nur zwei Befehlen können wir eine Android-XML-Datei mit TotalCross ausführen. So verhält sich XML auf dem TotalCross-Simulator:
Es bleiben noch zwei Dinge, um diesen PoC fertigzustellen:Hinzufügen einiger Ereignisse, um Benutzerinteraktionen bereitzustellen, und Ausführen auf einem Raspberry Pi.
Ereignisse hinzufügen
Die KnowCode-API bietet eine Möglichkeit, ein XML-Element anhand seiner ID (getControlByID) abzurufen und sein Verhalten zu ändern, um Dinge wie das Hinzufügen von Ereignissen, das Ändern der Sichtbarkeit und mehr zu tun.
Um es beispielsweise Benutzern zu ermöglichen, die Temperatur in ihrem Haus oder einem anderen Gebäude zu ändern, platzieren wir Plus- und Minus-Schaltflächen am unteren Rand der Benutzeroberfläche und ein „Klick“-Ereignis, das die Temperatur jedes Mal, wenn auf die Schaltflächen geklickt wird, um ein Grad erhöht oder verringert:
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();
}
}
}); Testen auf einem Raspberry Pi 4
Endlich der letzte Schritt! Wir haben die Anwendung auf einem Gerät ausgeführt und die Ergebnisse überprüft. Wir mussten die Anwendung nur packen und auf dem Zielgerät bereitstellen und ausführen. Ein VNC kann auch verwendet werden, um die Anwendung auf dem Gerät zu überprüfen.
Die gesamte Anwendung, einschließlich Assets (Bilder usw.), Android XML, TotalCross und der KnowCode-API, ist unter Linux ARM etwa 8 MB groß.
Hier ist eine Demo der Anwendung:
Weitere Linux-Ressourcen
- Spickzettel für Linux-Befehle
- Spickzettel für fortgeschrittene Linux-Befehle
- Kostenloser Online-Kurs:RHEL Technical Overview
- Spickzettel für Linux-Netzwerke
- SELinux-Spickzettel
- Spickzettel für allgemeine Linux-Befehle
- Was sind Linux-Container?
- Unsere neuesten Linux-Artikel
In diesem Beispiel wurde die Anwendung nur für Linux ARM gepackt, aber dieselbe App wird als Linux-Desktop-App, Android-Geräte, Windows, Windows CE und sogar iOS ausgeführt.
Der gesamte Beispielquellcode und das Projekt sind im HomeApplianceXML-GitHub-Repository verfügbar.
Neue Möglichkeiten mit bestehenden Tools
Das Erstellen von GUIs für eingebettete Anwendungen muss nicht so schwierig sein wie heute. Dieser Proof of Concept bietet eine neue Perspektive, wie diese Aufgabe einfach zu erledigen ist – nicht nur für eingebettete Systeme, sondern für alle wichtigen Betriebssysteme, die alle dieselbe Codebasis verwenden.
Wir zielen nicht darauf ab, ein neues Tool für Designer oder Entwickler zu erstellen, um UI-Anwendungen zu erstellen; Unser Ziel ist es, neue Möglichkeiten für die Verwendung der besten bereits verfügbaren Tools bereitzustellen.
Was halten Sie von dieser neuen Art, Apps zu erstellen? Teilen Sie Ihre Gedanken in den Kommentaren unten mit.