Créer une excellente expérience utilisateur (UX) pour vos applications est un travail difficile, surtout si vous développez des applications embarquées. Aujourd'hui, il existe deux types d'outils d'interface utilisateur graphique (GUI) généralement disponibles pour développer des logiciels embarqués :soit ils impliquent des technologies complexes, soit ils sont extrêmement coûteux.
Cependant, nous avons créé une preuve de concept (PoC) pour une nouvelle façon d'utiliser des outils existants et bien établis pour créer des interfaces utilisateur (UI) pour les applications qui s'exécutent sur des ordinateurs de bureau, des appareils mobiles, des appareils embarqués et des appareils Linux ARM à faible consommation. . Notre méthode utilise Android Studio pour dessiner l'interface utilisateur; TotalCross pour restituer le XML Android sur l'appareil ; une nouvelle API TotalCross appelée KnowCode ; et un Raspberry Pi 4 pour exécuter l'application.
Choisir Android Studio
Il est possible de créer une UX réactive et belle pour une application à l'aide de l'API TotalCross, mais la création de l'interface utilisateur dans Android Studio réduit le temps entre le prototypage et l'application réelle.
Il existe de nombreux outils disponibles pour créer des interfaces utilisateur pour les applications, mais Android Studio est celui que les développeurs du monde entier utilisent le plus souvent. En plus de son adoption massive, cet outil est également super intuitif à utiliser et il est vraiment puissant pour créer des applications simples et complexes. Le seul inconvénient, à mon avis, est la puissance de calcul requise pour utiliser l'outil, qui est beaucoup plus lourde que d'autres environnements de développement intégrés (IDE) comme VSCode ou son alternative open source, VSCodium.
En réfléchissant à ces problèmes, nous avons créé une preuve de concept en utilisant Android Studio pour dessiner l'interface utilisateur et TotalCross pour exécuter le XML Android directement sur l'appareil.
Construire l'interface utilisateur
Pour notre PoC, nous voulions créer une application d'électroménager pour contrôler la température et d'autres choses et qui fonctionnerait sur un appareil Linux ARM.
Nous voulions développer notre application pour un Raspberry Pi, nous avons donc utilisé ConstraintLayout d'Android pour créer une interface utilisateur à taille d'écran fixe de 848 x 480 (résolution du Raspberry Pi), mais vous pouvez créer des interfaces utilisateur réactives avec d'autres dispositions.
Android XML ajoute beaucoup de flexibilité pour la création d'interface utilisateur, ce qui facilite la création d'expériences utilisateur riches pour les applications. Dans le XML ci-dessous, nous avons utilisé deux composants principaux :ImageView et 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" />
Les éléments TextView sont utilisés pour montrer certaines données à l'utilisateur, comme la température à l'intérieur d'un bâtiment. La plupart des ImageViews sont utilisées comme boutons pour l'interaction de l'utilisateur avec l'interface utilisateur, mais elles sont également nécessaires pour implémenter les événements fournis par les composants à l'écran.
Intégration avec TotalCross
La deuxième technologie de ce PoC est TotalCross. Nous ne voulons rien utiliser d'Android sur l'appareil car :
- Notre objectif est de fournir une excellente interface utilisateur pour Linux ARM.
- Nous souhaitons réduire l'encombrement de l'appareil.
- Nous voulons que l'application s'exécute sur des appareils matériels bas de gamme avec une faible puissance de calcul (par exemple, pas de GPU, peu de RAM, etc.).
Pour commencer, nous avons créé un projet TotalCross vide à l'aide de notre plug-in VSCode. Ensuite, nous avons enregistré une copie des images dans le drawable dossier et une copie du fichier XML Android dans le dossier XML dossier—les deux sont situés dans le dossier Ressources dossier :
Pour exécuter le fichier XML à l'aide du simulateur TotalCross, nous avons ajouté une nouvelle API TotalCross appelée KnowCode et une MainWindow pour charger le XML. Le code ci-dessous utilise l'API pour charger et restituer le XML :
public void initUI() {
XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
swap(xmlCont);
} C'est ça! Avec seulement deux commandes, nous pouvons exécuter un fichier XML Android à l'aide de TotalCross. Voici comment le XML fonctionne sur le simulateur de TotalCross :
Il reste deux choses pour terminer ce PoC :ajouter des événements pour fournir une interaction utilisateur et l'exécuter sur un Raspberry Pi.
Ajouter des événements
L'API KnowCode fournit un moyen d'obtenir un élément XML par son ID (getControlByID) et de modifier son comportement pour effectuer des actions telles que l'ajout d'événements, la modification de la visibilité, etc.
Par exemple, pour permettre aux utilisateurs de modifier la température de leur maison ou d'un autre bâtiment, nous avons placé des boutons plus et moins en bas de l'interface utilisateur et un événement « clic » qui augmente ou diminue la température d'un degré à chaque fois que les boutons sont cliqués :
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();
}
}
}); Test sur un Raspberry Pi 4
Enfin, la dernière étape ! Nous avons exécuté l'application sur un appareil et vérifié les résultats. Nous avions juste besoin de conditionner l'application, de la déployer et de l'exécuter sur l'appareil cible. Un VNC peut également être utilisé pour vérifier l'application sur l'appareil.
L'ensemble de l'application, y compris les ressources (images, etc.), Android XML, TotalCross et l'API KnowCode, fait environ 8 Mo sur Linux ARM.
Voici une démo de l'application :
Plus de ressources Linux
- Aide-mémoire des commandes Linux
- Aide-mémoire des commandes Linux avancées
- Cours en ligne gratuit :Présentation technique de RHEL
- Aide-mémoire sur le réseau Linux
- Aide-mémoire SELinux
- Aide-mémoire sur les commandes courantes de Linux
- Que sont les conteneurs Linux ?
- Nos derniers articles Linux
Dans cet exemple, l'application a été packagée uniquement pour Linux ARM, mais la même application fonctionnera comme une application de bureau Linux, des appareils Android, Windows, Windows CE et même iOS.
Tous les exemples de code source et le projet sont disponibles dans le référentiel GitHub HomeApplianceXML.
Nouvelles possibilités avec les outils existants
La création d'interfaces graphiques pour les applications embarquées n'a pas besoin d'être aussi difficile qu'elle l'est aujourd'hui. Cette preuve de concept apporte une nouvelle perspective sur la façon d'effectuer cette tâche facilement, non seulement pour les systèmes embarqués, mais pour tous les principaux systèmes d'exploitation, tous utilisant la même base de code.
Notre objectif n'est pas de créer un nouvel outil permettant aux concepteurs ou aux développeurs de créer des applications d'interface utilisateur ; notre objectif est de fournir de nouvelles possibilités d'utilisation des meilleurs outils déjà disponibles.
Que pensez-vous de cette nouvelle façon de créer des applications ? Partagez vos impressions dans les commentaires ci-dessous.