Shulou(Shulou.com)06/01 Report--

This article is about how to build a cross-platform UI for Linux ARM devices. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The use of AndroidXML and TotalCross provides an easier way to create UI for raspberry pies and other devices.

Creating a good user experience (UX) for applications is a daunting task, especially when developing embedded applications. Today, there are two graphical user interface (GUI) tools commonly used to develop embedded software: they either involve complex technologies or are very expensive.

However, we have created a proof of concept (PoC) that provides a new way to use existing, proven tools to build user interfaces (UI) for applications running on desktops, mobile, embedded devices, and low-power ARM devices. Our approach is to use Android Studio to draw UI; using TotalCross to render Android XML; on the device with a new TotalCross API; called KnowCode and to use raspberry pie 4 to execute the application.

Select Android Studio

You can use TotalCross API to build a beautiful, responsive user experience for your application, but creating a UI in Android Studio shortens the time between prototyping and the real application.

There are many tools that can be used to build UI for applications, but Android Studio is the most commonly used tool for developers around the world. In addition to its extensive adoption, the use of this tool is intuitive, and it is powerful for creating both simple and complex applications. In my opinion, the only drawback is the computer performance required to use the tool, which is much larger than other integrated development environments (IDE) such as VSCode or its open source alternative VSCodium.

By thinking about these questions, we created a proof-of-concept, drawing UI using Android Studio and running AndroidXML directly on the device using TotalCross.

Build UI

For our PoC, we want to create a home appliance application to control temperature and other things and run on Linux ARM devices.

Home appliance application to control thermostat

We want to develop our application for raspberry pie, so we use Android's ConstraintLayout to build a fixed screen size UI of 848x480 (raspberry pie resolution), but you can build responsive UI with other layouts.

Android XML adds a lot of flexibility to UI creation, making it easy to build a rich user experience for applications. In the following XML, we used two main components: ImageView and TextView.

The TextView element is used to display some data to the user, such as the temperature in the building. Most ImageView are used as buttons for users to interact with UI, but they also need to implement events provided by components on the screen.

Integrate with TotalCross

The second technology in this PoC is TotalCross. We don't want to use anything from Android on the device because:

one. Our goal is to provide an excellent UI for Linux ARM. two. We want to achieve low footprint on the equipment. three. We want the application to run on low-end hardware devices with low computing power (for example, no GPU, low RAM, and so on).

First, we created an empty TotalCross project using the VSCode plug-in. Next, we saved a copy of the image in the drawable folder and a copy of the Android XML file in the xml folder, both of which are located in the resources folder:

Home Appliance file structure

To run the XML file using the TotalCross simulator, we added a new TotalCross API named KnowCode and a main window to load XML. The following code uses API to load and render XML:

Public void initUI () {XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create ("xml / homeApplianceXML.xml"); swap (xmlCont);}

That's all! With just two commands, we can run the Android XML file using TotalCross. Here's how XML executes on TotalCross's simulator:

TotalCross simulator running temperature application

There are two more things to do to complete this PoC: add some events to provide user interaction and run it on the raspberry pie.

Add event

KnowCode API provides a way to get XML elements and change their behavior through ID (getControlByID), such as adding events, changing visibility, and so on.

For example, to enable users to change the temperature in their home or other buildings, we put plus and minus buttons at the bottom of the UI, and a "click" event occurs each time the button is clicked, causing the temperature to rise or decrease by one degree:

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 on raspberry pie 4

Last step! We ran the application on a device and checked the results. We just need to package the application and deploy and run it on the target device. VNC can also be used to check applications on the device.

The entire application, including resources (images, etc.), Android XML, TotalCross, and Knowcode API, is about 8MB on Linux ARM.

The following is a demonstration of the application:

Thank you for reading! This is the end of the article on "how to build cross-platform UI for Linux ARM devices". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.