Mobile App Development using Flowcode to access Temp and Humidity

Beyond embedded

Improvements in M2M (machine-to-machine) and Internet communications have meant that embedded systems can easily be interfaced to PCs and the Internet for monitoring and configuration purposes. Web and USB-compatible technology from ESP32, RPi and others have made this a practical, and low cost, proposition. The difficulty here, until now, has been that creating PC and Web applications requires embedded developers to use different software development tools and learn new programming languages.

The recent release of Flowcode 10.1 now provides all the tools you need to create these apps using similar techniques within the same software package:

• Embedded apps for ESP32, ARM, PIC, RPi, Arduino and others
• PC apps running on Windows PCs
• Web apps running on mobile phones, tablets, PCs, etc.

This article shows you how you can use Flowcode to create highly functional embedded systems connected to and controlled by Web and PC software apps: in this case a temperature and humidity-controlled heater application.

The embedded project

We will use a web-enabled ESP32 module with temperature and humidity sensors fitted.  You can see the hardware here:

Arduino Nano ESP32 + Grove Temperature and Humidity Sensor SHT31

Flowcode is used to create an embedded system which connects to the local Wi-Fi network and publishes temperature and humidity information to the web using MQTT. We use a couple of outputs on the ESP32 to control a heater and a fan using relay modules. Flowcode Embedded includes libraries for a wide range of sensors and communications protocols which greatly simplifies creating the program.  You can see the embedded system program here:

Connecting to the embedded system

Next, we will create a browser-based app to display sensor information on our mobile phone.

Flowcode Web Developer allows you to drag the required components onto a panel to create a user interface and associated JavaScript code for the app that will communicate with the hardware via MQTT.  Once created and tested within Flowcode, an HTML web app is produced that can be loaded into a web browser on a PC or mobile device.

Similarly, Flowcode PC Developer allows you to develop a Human Machine Interface that runs on a Windows PC. This can also communicate with the hardware via MQTT.

You can see the Web Developer program being designed here:

More information

MQTT is a popular protocol for M2M communications. A central server is responsible for coordinating the communications and several clients connect to this server to both send and receive data.

The MQTT server (or broker) is a bit like a mailbox in the cloud using a “publish-subscribe” model for machine-to-machine data exchange. The web app and embedded app are both MQTT clients, and they communicate with the server using messages that are organised into named “topics”. These topics contain data which, when received by the server, are automatically sent to all clients that have subscribed to that particular topic.

For example, the embedded app could periodically send data by publishing the current temperature to a topic called “temperature”. The web app has subscribed to the “temperature” topic and so when the MQTT server receives this data from the embedded app, it knows to forward this message on to the web app. Similarly, the embedded app could subscribe to command topics published by the web app which would allow a fan or heater to be controlled or an ambient temperature value to be maintained.

Several web-based MQTT servers exist that can be used for projects like this, or one can be installed on your local network (e.g. on a PC, Raspberry Pi or ROCK SBC).

Here is the Web Developer app running in a browser (on the phone) next to the prototype hardware. You can see the temperature and the humidity and use buttons to control the heater and fan.

Flowcode 10 contains all the software you need to create these three applications: Embedded, PC and Web. Flowcode was first released in 2001 as a tool to simplify embedded programming. Flowcode PC Developer has been available for 3 years now and is well established and Flowcode Web Developer is new for version 10.1, released in December 2023.

The following diagram shows these interrelated aspects of the Flowcode software toolset:

Flowcode 10 is now available from the RS website. A free version of Flowode allows users to create programs for selected PIC, Arduino, ESP and RPi devices. Flowcode for professional users is a paid-for licence which includes compilers for 500 embedded devices and professional user benefits.

Buy Flowcode: https://software.rs-online.com/product-category/software/ 

Flowcode wiki: https://software.rs-online.com/support/