RobotUI SeekBar Example

This guide assumes you have already performed the setup and the development guide

Create a new Arduino example project

Within the Arduino IDE start a new project by using the menu File->New. Add the code shown below. Make sure to change the BT_BAUDRATE value if you are no longer using the default baudrate for your HC-06 module. This code will create a text box and a seek bar to manipulate the contents of text box.
#include <RobotUI.h> #define BT_BAUDRATE 9600 int thingyValue = 20; RobotUI robotUI; RobotUISeekBar seekBar(50); RobotUIText textBox; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(textBox, 1, DEFAULT_TEXT_SIZE, JUSTIFY_CENTER); robotUI.Add(seekBar); robotUI.EndLayout(); } void RecoverStatus() { char textStr[32]; sprintf(textStr, "The thingy value is %d", thingyValue); textBox.SetText(textStr); seekBar.ForceProgress(thingyValue); } void setup() { robotUI.Init(ROBOTUI_PIN_RX, ROBOTUI_PIN_TX, BT_BAUDRATE, DEFAULT_COMMAND_BUFFER_SIZE, LayoutDef, RecoverStatus); } void loop() { unsigned long ms = robotUI.Update(); if(seekBar.HasChanged()) { seekBar.ConsumeHasChanged(); thingyValue = seekBar.GetProgress(); char str[32]; sprintf(str, "The thingy value is %d", thingyValue); textBox.SetText(str); } }
Below you can see the RobotUI app running when connected to the above example code.



LayoutDef function

Here we declare a seek bar and a text box to show the internal state of the arduino project. The LayoutDef function defines the layout of those two widgets, simply adding them one after the other so they appear vertically. The default justification of the text box is JUSTIFY_LEFT so I specified JUSTIFY_CENTER to improve the visual appeal of the layout. The seekBar object has its max value passed to its constructor, which is 50 in this case. So when the seek bar is at its maximum, its value will be 50.
RobotUI robotUI; RobotUISeekBar seekBar(50); RobotUIText textBox; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(textBox, 1, DEFAULT_TEXT_SIZE, JUSTIFY_CENTER); robotUI.Add(seekBar); robotUI.EndLayout(); }

RecoverStatus function

The RecoverStatus function is where the Arduino project informs the RobotUI app of its current status. The only state that this example has is the position of the seek bar, which is contained in the thingyValue variable. When the RobotUI app connects it needs to set up the UI to reflect whatever is currently going on in the Arduino project. You can try this yourself with this example. The starting value of thingyValue is 20, so the first time you connect to your Arduino project the text being displayed will be "The thingy value is 20". Move the seek bar all the way to the right, to its maximum. When you do this the text shown is "The thingy value is 50". Now forceably shutdown the app by bringing up the app switcher and swiping away the RobotUI app. This is to pretend you've wandered off for a few hours and the Android OS has dismissed the RobotUI as not being used. Open up the app again and reconnect to your Arduino project. You'll notice that the text says "The thingy value is 50" which is the state in which you left it. That is the purpose of the RecoverStatus function, to correctly set up the RobotUI app with the most recent internal state, as the app may not have been connected for a very long time. RecoverStatus needs to set the contents of the textBox object with SetText. It also needs to set the position of the seek bar using the ForceProgress function. We need to use ForceProgress instead of SetProgress as the latter avoids sending unnecessary state changes if the RobotUI app and Arduino project are already in the correct state. As this is a recovery operation the RobotUI app and Arduino project do not know each others states, so the Arduino project needs to force the RobotUI app.
void RecoverStatus() { char textStr[32]; sprintf(textStr, "The thingy value is %d", thingyValue); textBox.SetText(textStr); seekBar.ForceProgress(thingyValue); }

The main loop

The loop function is where we monitor the seekBar object and change the contents of the textBox object. First we call robotUI.Update() every frame so it can manage communications with the app. Then we check if the seekBar object has been changed by the user of the RobotUI app. If it has then seekBar.HasChanged() will return true. It will continue to return true until you call seekBar.ConsumeHasChanged() to consume that last event. If seekBar.HasChanged() returns true then the contents of the if statement will be executed. So the first thing we do is to consume the seekBar event with seekBar.ConsumeHasChanged(). We then copy the new value of the seekBar by using thingyValue = seekBar.GetProgress(). We need to record thingyValue so we can remember and recover the correct UI when the RobotUI app reconnects to the Arduino project after an absence. We now construct a string that includes our new value by using the sprintf function. Then we change the contents of textBox to that new string by using SetText.
void loop() { unsigned long ms = robotUI.Update(); if(seekBar.HasChanged()) { seekBar.ConsumeHasChanged(); thingyValue = seekBar.GetProgress(); char textStr[32]; sprintf(textStr, "The thingy value is %d", thingyValue); textBox.SetText(textStr); } }

Other Examples

Here are some other examples for various widgets

button example
check box example
seek bar example
spinner example
switch example
text example
toggle button example