How to build a Coronavirus Chart and run on embedded devices

Coronavirus has grown a lot globally, and a lot of public datasets have shown up to provide live and historical information about the spread of the virus, but how can you plot all this information on a chart, in your own embedded device?

In this article, we show how to build a graphical user interface (GUI) of a chart from scratch, connected to a REST database of coronavirus information, and how to run it on an embedded device. The data collected will be drawn on a line chart representing the evolution of the virus worldwide, and we will perform all the tests using a Toradex Colibri module and NXP iMX6ULL, with no GPU.

The data shown on this chart are available free from the Coronavirus Map section of the Rapid API website. It is possible to connect using Rest WebService or you can download the JSON data and package inside the device. This code was written using TotalCross SDK to develop, build and package the application to the embedded device as shown in the image below.

Colibri iMX6ULL is a Toradex Computer Module that has Wi-Fi and Bluetooth and is based on an NXP i.MX 6ULL application processor, featuring an Arm Cortex-A7 core for a wide range of IoT and embedded devices. This powerful tool, working together with Totalcross SDK, makes it possible to develop a wide range of applications. All this sample code is available on GitHub for free, you just need to have the development environment configured to TotalCross. Here we have a simple tutorial which also provides information about deploying and running a project.

To access the coronavirus data, visit the Rapid API website. On the coronavirus map, get the URL request data; the latest report menu has the code snippets. The project basically has two main classes, CoronaChart and CoronaChartApp; it also has the run class RunCoronaChartApplication. A JSON file is used when the data is offline so the device can read the information directly; this file has been saved in the resource folder.

The CoronaChart class is responsible for structuring the data on a chart. The CoronaChartApp class is the main window that loads the main UI. It connects to the web service and runs the animation of confirmed, recovered, and deaths in the chart.

private void fillData() {
[...]
if (offlineCheck.isChecked())
response =
getCoronavirusData("https://coronavirus-map.p.rapidapi.com/v1/summary/latest", HttpStream.GET);
else
response = new JSONObject(new String(Vm.getFile("request.json")));
JSONObject data = response.getJSONObject("data");
dates = data.names();
array = data.toJSONArray(dates);
for (int i = 0; i < array.length(); i++) {
date = dates.getString(i);
item = array.getJSONObject(i);
MyDate myDate = new MyDate(Integer.parseInt(Convert.remove(date, "-")));
confirmedList.add(new Data<MyDate, Integer>(myDate, item.getInt("total_cases")));
recoveredList.add(new Data<MyDate, Integer>(myDate, item.getInt("recovered")));
deathsList.add(new Data<MyDate, Integer>(myDate, item.getInt("deaths")));
}
[...]
}

The most important method is fillData() which is used to load information from Rapid API in JSON format. The getCoronavirusData() use Http Stream to connect to the API and get the information from the site. It returns the JSON object that will be processed on the fillData. The secretKey string must be changed with the Rapid API key for the connection to work.

Every time the start button is hit, it connects to the web service, downloading all the information and plotting it on the chart. There is also the possibility of loading the file request.json on the resources folder. The Vm TotalCross class has methods to manipulate files, so we can open the JSON file with the corona information. This file is going to be loaded on the application, parse this data to a string and parse to a JSONObject.

JSONObject getCoronavirusData(final String url, String httpType) {
[...]
HttpStream.Options o = new HttpStream.Options();
o.readTimeOut = 5000;
o.socketFactory = new SSLSocketFactory();
o.requestHeaders.put("x-rapidapi-host", "coronavirus-map.p.rapidapi.com");
o.requestHeaders.put("x-rapidapi-key", secretKey);
HttpStream hs = new HttpStream(new
URI("https://coronavirus-map.p.rapidapi.com/v1/spots/summary"), o);
ByteArrayStream bas = new ByteArrayStream(4096);
bas.readFully(hs, 10, 4096);
hs.close();
String string = new String(bas.getBuffer(), 0, bas.available());
request = string;
[…]
}

This JSONObject will be read and separated to the confirmed list, recovered list, and deaths list. The file request.json is automatically available on the device when the build package is loaded. In addition to the information on our chart, there is other information that may be useful in future work such as active cases, critical, tested, death ratio, and recovery ratio.

Most of the other methods present in the project concern the assembly and animation of the data in the graph; they can be studied in the code that is available for use. The rest of the code snippets are about the assembly of the screen with the main class extending from the MainWindow class, with its override methods such as InitUI, which will structure all elements on the screen such as background colors, buttons, checkboxes, and their listener methods.

About the technology

The TotalCross technology used in this project delivered a low-footprint application (even using Java), which was perfect for this kind of device. TotalCross does not use the JVM (Java Virtual Machine), but is supported by its own open source virtual machine, the TCVM. This enables it to guarantee almost native performance to the applications developed using this framework. In addition, it allowed us to create a great UI with very few commands, even for low-end MPUs.

Following these steps, you can quickly build your coronavirus chart and run it on an embedded device. You can apply the same knowledge on a different database and create your own chart, based on your needs.