#M5Stack: Widgets on your Smartphone help you to stay safe from #COVID-19

This is the last follow-up of the tutorials:

• M5Stack: Fresh air checker helps you to stay safe from #COVID-19 and,
• Nginx: Docker, Flask and Let's Encrypt (SSL),

in which I explained how to build a CO2 measuring device using a M5Stack and an SG30 sensor, send the data to GCP, and offer it using HTTPS.

Fig. 1: CO2 reporting widgets on Android and iOS.

These sensors can help to prevent Covid-19 spread in a room. If you want to implement the complete pipeline, check out the links above. This tutorial connects the data to your Android or iOS phone to see that in a Widget (see Fig. 1).

Android

On Android, you can use the Gauge Widget application. In Fig. 2, you can see an example of how to configure the Widget to see the data published by the sensor and it results in Fig. 3.

Fig. 2: Gauge Widget configuration.

Fig. 3: Gauge Widget reporting TVOC measurements.

iOS

On iPhone or iPad running iOS 14+, you can use Scriptable app. This app lets you automate iOS using JavaScript. I forked the Toilet paper widget from marco79cgn, and create a widget to check the data send from the CO2 measuring devices. To run the application, first, install Scriptable and then follow these steps:

1. Go to lemariva/tvoc-eco2-device-widget.js) and copy the source code;
2. Open the Scriptable app;
3. Click on the + symbol at the top right and paste the copied script;
4. Change the line var domainName = "https://apis.lemariva.com/" to match your domain.
5. Click on the title of the script at the top and give it a name (e.g. CO2 Measuring Device);
6. Save the script by clicking on "Done" in the top left;
7. Go to your iOS home screen and long-press somewhere to get into "wiggle mode" (which can also be used to arrange the app icons);
8. Press the + symbol at the top left, then scroll down to "Scriptable" (the list is alphabetical), choose the first widget size (small), and select Add widget at the bottom;
9. Press on the widget to edit its settings (optionally long-press if the wiggle mode has already been exited)
10. Under "Script", select the one created above (CO2 Measuring Device) (see Fig. 4)
11. Scroll down and enter the determined device_id as "Parameter", e.g. m5stack-atom-office (see Fig. 5)

Fig. 4: Scriptable Widget configuration.

Fig. 5: Gauge Widget reporting TVOC/ECO2 measurements.