Creare un'esperienza utente eccezionale (UX) per le tue applicazioni è un lavoro difficile, soprattutto se stai sviluppando applicazioni integrate. Oggi ci sono due tipi di strumenti di interfaccia utente grafica (GUI) generalmente disponibili per lo sviluppo di software embedded:o coinvolgono tecnologie complesse o sono estremamente costosi.
Tuttavia, abbiamo creato una prova di concetto (PoC) per un nuovo modo di utilizzare gli strumenti esistenti e consolidati per creare interfacce utente (UI) per applicazioni eseguite su desktop, dispositivi mobili, embedded e dispositivi ARM Linux a basso consumo . Il nostro metodo utilizza Android Studio per disegnare l'interfaccia utente; TotalCross per eseguire il rendering dell'XML Android sul dispositivo; una nuova API TotalCross chiamata KnowCode; e un Raspberry Pi 4 per eseguire l'applicazione.
Scegliere Android Studio
È possibile creare un'esperienza utente reattiva e bella per un'applicazione utilizzando l'API TotalCross, ma la creazione dell'interfaccia utente in Android Studio riduce il tempo tra la prototipazione e l'applicazione reale.
Sono disponibili molti strumenti per creare interfacce utente per le applicazioni, ma Android Studio è quello che gli sviluppatori di tutto il mondo utilizzano più spesso. Oltre alla sua massiccia adozione, questo strumento è anche super intuitivo da usare ed è davvero potente per creare applicazioni sia semplici che complesse. L'unico inconveniente, secondo me, è la potenza di calcolo richiesta per utilizzare lo strumento, che è molto più pesante di altri ambienti di sviluppo integrato (IDE) come VSCode o la sua alternativa open source, VSCodium.
Pensando a questi problemi, abbiamo creato una prova di concetto utilizzando Android Studio per disegnare l'interfaccia utente e TotalCross per eseguire Android XML direttamente sul dispositivo.
Costruzione dell'interfaccia utente
Per il nostro PoC, volevamo creare un'applicazione per elettrodomestici per controllare la temperatura e altre cose e che potesse essere eseguita su un dispositivo ARM Linux.
Volevamo sviluppare la nostra applicazione per un Raspberry Pi, quindi abbiamo utilizzato ConstraintLayout di Android per creare un'interfaccia utente con dimensioni dello schermo fisse di 848x480 (la risoluzione del Raspberry Pi), ma puoi creare interfacce utente reattive con altri layout.
Android XML aggiunge molta flessibilità per la creazione dell'interfaccia utente, semplificando la creazione di esperienze utente avanzate per le applicazioni. Nell'XML di seguito, abbiamo utilizzato due componenti principali:ImageView e 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" />
Gli elementi TextView vengono utilizzati per mostrare alcuni dati all'utente, come la temperatura all'interno di un edificio. La maggior parte degli ImageView vengono utilizzati come pulsanti per l'interazione dell'utente con l'interfaccia utente, ma sono anche necessari per implementare gli eventi forniti dai componenti sullo schermo.
Integrazione con TotalCross
La seconda tecnologia in questo PoC è TotalCross. Non vogliamo utilizzare nulla da Android sul dispositivo perché:
- Il nostro obiettivo è fornire un'interfaccia utente eccezionale per Linux ARM.
- Vogliamo ottenere un ingombro ridotto sul dispositivo.
- Vogliamo che l'applicazione funzioni su dispositivi hardware di fascia bassa con bassa potenza di calcolo (ad es. nessuna GPU, poca RAM, ecc.).
Per iniziare, abbiamo creato un progetto TotalCross vuoto utilizzando il nostro plug-in VSCode. Successivamente, abbiamo salvato una copia delle immagini all'interno del disegnabile cartella e una copia del file XML di Android all'interno di XML cartella:entrambi si trovano all'interno delle Risorse cartella:
Per eseguire il file XML utilizzando TotalCross Simulator, abbiamo aggiunto una nuova API TotalCross chiamata KnowCode e una MainWindow per caricare l'XML. Il codice seguente utilizza l'API per caricare e visualizzare l'XML:
public void initUI() {
XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
swap(xmlCont);
} Questo è tutto! Con solo due comandi, possiamo eseguire un file XML Android utilizzando TotalCross. Ecco come si comporta l'XML sul simulatore di TotalCross:
Rimangono due cose per completare questo PoC:aggiungere alcuni eventi per fornire l'interazione dell'utente ed eseguirlo su un Raspberry Pi.
Aggiunta di eventi
L'API KnowCode fornisce un modo per ottenere un elemento XML in base al suo ID (getControlByID) e modificarne il comportamento per eseguire operazioni come l'aggiunta di eventi, la modifica della visibilità e altro ancora.
Ad esempio, per consentire agli utenti di modificare la temperatura nella propria casa o in un altro edificio, mettiamo i pulsanti più e meno nella parte inferiore dell'interfaccia utente e un evento "clic" che aumenta o diminuisce la temperatura di un grado ogni volta che si fa clic sui pulsanti:
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 su un Raspberry Pi 4
Finalmente l'ultimo passaggio! Abbiamo eseguito l'applicazione su un dispositivo e verificato i risultati. Avevamo solo bisogno di impacchettare l'applicazione, distribuirla ed eseguirla sul dispositivo di destinazione. È inoltre possibile utilizzare un VNC per controllare l'applicazione sul dispositivo.
L'intera applicazione, comprese le risorse (immagini, ecc.), Android XML, TotalCross e l'API KnowCode, è di circa 8 MB su Linux ARM.
Ecco una demo dell'applicazione:
Più risorse Linux
- Comandi Linux cheat sheet
- Cheat sheet sui comandi avanzati di Linux
- Corso online gratuito:Panoramica tecnica RHEL
- Cheat sheet della rete Linux
- Cheat sheet di SELinux
- Cheat sheet dei comandi comuni di Linux
- Cosa sono i container Linux?
- I nostri ultimi articoli su Linux
In questo esempio, l'applicazione è stata inclusa in un pacchetto solo per Linux ARM, ma la stessa app verrà eseguita come app desktop Linux, dispositivi Android, Windows, Windows CE e persino iOS.
Tutto il codice sorgente di esempio e il progetto sono disponibili nel repository GitHub HomeApplianceXML.
Nuove possibilità con gli strumenti esistenti
La creazione di GUI per applicazioni integrate non deve essere così difficile come lo è oggi. Questa prova di concetto offre una nuova prospettiva su come eseguire facilmente questa attività, non solo per i sistemi embedded ma per tutti i principali sistemi operativi, tutti utilizzando la stessa base di codice.
Non miriamo a creare un nuovo strumento per i progettisti o gli sviluppatori per creare applicazioni dell'interfaccia utente; il nostro obiettivo è fornire nuove possibilità per utilizzare i migliori strumenti già disponibili.
Qual è la tua opinione su questo nuovo modo di creare app? Condividi i tuoi pensieri nei commenti qui sotto.