RobotUI Spinner 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 spinner (drop down menu) to manipulate the contents of text box.
#include <RobotUI.h> #define BT_BAUDRATE 9600 char dayIndex = 0; RobotUI robotUI; RobotUIText textBox; RobotUISpinner spinner; #define NUM_OPTIONS 6 //const char option0[] PROGMEM = "Monday"; // nobody likes Monday const char option1[] PROGMEM = "Tuesday"; const char option2[] PROGMEM = "Wednesday"; const char option3[] PROGMEM = "Thursday"; const char option4[] PROGMEM = "Friday"; const char option5[] PROGMEM = "Saturday"; const char option6[] PROGMEM = "Sunday"; const char * const options[NUM_OPTIONS] PROGMEM = {option1, option2, option3, option4, option5, option6}; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(textBox, 1, DEFAULT_TEXT_SIZE, JUSTIFY_CENTER); robotUI.Add(spinner); robotUI.EndLayout(); } void RecoverStatus() { UpdateTextBox(); spinner.SetOptionsF(options, NUM_OPTIONS, dayIndex); } void UpdateTextBox() { char dayStr[10]; strcpy_P(dayStr, (char *)pgm_read_word(&(options[dayIndex]))); char textStr[32]; sprintf(textStr, "My favourite day is %s", dayStr); textBox.SetText(textStr); } 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(spinner.HasChanged()) { spinner.ConsumeHasChanged(); dayIndex = spinner.GetOption(); UpdateTextBox(); } }
Below you can see the RobotUI app running when connected to the above example code.



LayoutDef function

Here we declare a spinner 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.
RobotUI robotUI; RobotUIText textBox; RobotUISpinner spinner; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(textBox, 1, DEFAULT_TEXT_SIZE, JUSTIFY_CENTER); robotUI.Add(spinner); 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 your favourite day of the week, the index of which we store in dayIndex. 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 dayIndex is 0, so the first time you connect to your Arduino project the text being displayed will be "My favourite day is Tuesday". Click the spinner and select Saturday. When you do this the text shown is "My favourite day is Saturday". 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 "My favourite day is Saturday" 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. I've extracted SetText and other text manipulations into a function called UpdateTextBox() so I can re-use it in the main loop. RecoverStatus also needs to set the options and current value of the spinner, we do that with SetOptionsF. I've used the more complicated PROGMEM method for saving the option strings, to show you how to save memory.
#define NUM_OPTIONS 6 //const char option0[] PROGMEM = "Monday"; // nobody likes Monday const char option1[] PROGMEM = "Tuesday"; const char option2[] PROGMEM = "Wednesday"; const char option3[] PROGMEM = "Thursday"; const char option4[] PROGMEM = "Friday"; const char option5[] PROGMEM = "Saturday"; const char option6[] PROGMEM = "Sunday"; const char * const options[NUM_OPTIONS] PROGMEM = {option1, option2, option3, option4, option5, option6}; void RecoverStatus() { UpdateTextBox(); spinner.SetOptionsF(options, NUM_OPTIONS, dayIndex); } void UpdateTextBox() { char dayStr[10]; strcpy_P(dayStr, (char *)pgm_read_word(&(options[dayIndex]))); char textStr[32]; sprintf(textStr, "My favourite day is %s", dayStr); textBox.SetText(textStr); }

The main loop

The loop function is where we monitor the spinner 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 spinner object has been changed by the user of the RobotUI app. If it has then spinner.HasChanged() will return true. It will continue to return true until you call spinner.ConsumeHasChanged() to consume that last event. If spinner.HasChanged() returns true then the contents of the if statement will be executed. So the first thing we do is to consume the spinner event with spinner.ConsumeHasChanged(). We then determine the new selection of the spinner by using spinner.GetOption() and placing it in dayIndex. We need to record dayIndex so we can remember and recover the correct UI when the RobotUI app reconnects to the Arduino project after an absence. Finally we update the textBox contents with a call to UpdateTextBox() which we defined earlier.
void loop() { unsigned long ms = robotUI.Update(); if(spinner.HasChanged()) { spinner.ConsumeHasChanged(); dayIndex = spinner.GetOption(); UpdateTextBox(); } }

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