Creating apps in the Digi-Key IoT Studio is easy, but if you know how to use elements cleverly, then you have some powerful options available to you. In this how-to, we will learn how to use images dynamically so that they can respond to data.
In a previous how-to, we saw the different elements that are available to designers in the Digi-Key IoT Studio, which included the image element. This element can be used to display an image, such as a company logo, but it is not limited to a single image. If an element is connected to the image element, there is an ability called Set Image, which allows the user to change the image. The image element itself can only hold a single image, so if an image element connects to another image element, it can send its image and the connected image element will display the sent image.
Every image element placed will produce an image object in the app view, which would not be advantageous if we are storing images that should not be displayed. Fortunately, we can hide images using the Visibility property, allowing us to store images in an image element without it being visible. So, let’s see how we use images dynamically to produce more interesting visual indicators.
The device program consists of an interval element that toggles GPIO 13 once every second. At the same time, the interval also triggers a read, and the read value from the GPIO is sent to a Bluetooth element. GPIO 13 is used because it is connected to an onboard LED, allowing us to confirm that the program is running correctly on the device side.
The app is made up of a number of elements - an interval element triggers a read from a Bluetooth element twice a second, and the read value from the Bluetooth element is passed to a label. This allows us to visually confirm that the Bluetooth connection is working and viewing the data live. The Bluetooth element also has been configured to use Boolean values, as this makes the next stage easier.
The Bluetooth element is also connected to a condition element whose purpose is to determine what the value of the Bluetooth element is. While not obvious, the condition element performs a check on an incoming expression and not a value. In our example, we simply check the readData variable, and this works because we are dealing with a Boolean (either true or false). If, however, we wanted to check a number, we can insert an expression (such as readData > 100). If this condition is true, then the condition element can be triggered, and the same can be done if the condition is false.
The condition element is then connected to two different image elements who are set to be invisible. The first image element, FlagOn, holds an image of an upright flag and the second image element, FlagOff, holds an image of an upside-down flag. The condition element will trigger either image element when a condition check is triggered. The FlagOn element is triggered if the condition element detects true, and the FlagOff element is triggered if the condition element detects false.
The two image elements are both connected to the GPIOIndicator image element, which is set to be visible. Both of these elements, when triggered, set the image of the GPIOIndicator image element to their own value, and this allows us to dynamically change the image.
So, to summarize, Bluetooth data is sent to a condition element that checks to see if the value is either true or false. Depending on the value, a specific image element is triggered, which causes this image element to send its image data to the GPIOIndicator element. The result is that the GPIOIndicator element will display an upright flag when the GPIO pin on the device is on and an upside-down flag when the GPIO pin on the device is off.