RobotUI Widget Tutorial

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. Start with the following simple code that creates a UI with one button. Make sure to change the BT_BAUDRATE value if you are no longer using the default baudrate for your HC-06 module.
#include <RobotUI.h> #define BT_BAUDRATE 9600 RobotUI robotUI; RobotUIButton button1; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); } 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(); }


Add a checkbox

You can add a checkbox by adding the following lines, recompile and upload to see you changes appear in the RobotUI app.
RobotUI robotUI; RobotUIButton button1;
RobotUICheckBox checkbox2;
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1);
robotUI.Add(checkbox2);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button");
checkbox2.SetName("My Check");
}


Add a seekbar

You can add a seekbar by adding the following lines, recompile and upload to see you changes appear in the RobotUI app. Notice that the RobotUISeekBar class has a value of 10 passed into its constructor method. This value is the maximum value that you want yout seekbar to represent.
RobotUI robotUI; RobotUIButton button1; RobotUICheckBox checkbox2;
RobotUISeekBar seekbar3(10);
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2);
robotUI.Add(seekbar3);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check"); }


Add a label for the seekbar

When we added the above seekbar, we didn't specify a name for it in the RecoverStatus function as we did for the button and checkbox. That is because the seekbar widget does not have a name rendered with it like the button and checkbox. However, we can add a label just above it to inform the user about our seek bar by adding the following code.
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2);
robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM);
robotUI.Add(seekbar3); robotUI.EndLayout(); }


Add a spinner

You can add a spinner by adding the following lines. As a spinner is a drop down menu that can contain a lot of text, there are two methods to add all of that text. Method one stores the text in precious SRAM, method two stores the text in flash ram where the code is stored (PROGMEM). The latter method saves space, but requires some extra steps to get access to the text. The first method is simpler, but uses up precious SRAM. There is more information about saving memory and using PROGMEM on the Arduino site.

Method 1

Don't store text in PROGMEM (Easier, but wastes memory)
RobotUICheckBox checkbox2; RobotUISeekBar seekbar3(10);
RobotUISpinner spinner4; #define NUM_OPTIONS 3 char const * const options[NUM_OPTIONS] = {"Mild", "Spicy", "Extra Spicy"};
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2); robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM); robotUI.Add(seekbar3);
robotUI.Add(spinner4);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check");
spinner4.SetOptions(options, NUM_OPTIONS, 0);
}

Method 2

Store text in PROGMEM (Preferred, saves memory)
RobotUICheckBox checkbox2; RobotUISeekBar seekbar3(10);
RobotUISpinner spinner4; #define NUM_OPTIONS 3 const char option0[] PROGMEM = "Mild"; const char option1[] PROGMEM = "Spicy"; const char option2[] PROGMEM = "Extra Spicy"; const char * const options[NUM_OPTIONS] PROGMEM = {option0, option1, option2};
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2); robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM); robotUI.Add(seekbar3);
robotUI.Add(spinner4);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check");
spinner4.SetOptionsF(options, NUM_OPTIONS, 0);
}


Add a switch

You can add a switch by adding the following lines, recompile and upload to see you changes appear in the RobotUI app.
RobotUISpinner spinner4;
RobotUISwitch switch5;
#define NUM_OPTIONS 3 // snipped code void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2); robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM); robotUI.Add(seekbar3); robotUI.Add(spinner4);
robotUI.Add(switch5);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check"); spinner4.SetOptionsF(options, NUM_OPTIONS, 0);
switch5.SetName("My Switch");
}


Add a text box

You can add a text box by adding the following lines, recompile and upload to see you changes appear in the RobotUI app.
RobotUISpinner spinner4; RobotUISwitch switch5;
RobotUIText text6;
#define NUM_OPTIONS 3 // snipped code void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2); robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM); robotUI.Add(seekbar3); robotUI.Add(spinner4); robotUI.Add(switch5);
robotUI.Add(text6);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check"); spinner4.SetOptionsF(options, NUM_OPTIONS, 0); switch5.SetName("My Switch");
text6.SetText("First line \nSecond line \nThird line \nFourth line \nFifth line");
}
The five lines of text are clipped because they go beyond the size of the box, but you can scroll the text within the alotted space...


You can of course increase the size of the text box to display all five lines simultaneously if that is desired...
robotUI.Add(spinner4); robotUI.Add(switch5); robotUI.Add(text6
, 2
); robotUI.EndLayout(); }


Add a toggle button

You can add a toggle button by adding the following lines, recompile and upload to see you changes appear in the RobotUI app.
RobotUISwitch switch5; RobotUIText text6;
RobotUIToggleButton toggle7;
#define NUM_OPTIONS 3 // snipped code void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1); robotUI.Add(checkbox2); robotUI.AddLabel("My Seek Bar", 0.5f, DEFAULT_TEXT_SIZE, JUSTIFY_BOTTOM); robotUI.Add(seekbar3); robotUI.Add(spinner4); robotUI.Add(switch5); robotUI.Add(text6);
robotUI.Add(toggle7);
robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("My Button"); checkbox2.SetName("My Check"); spinner4.SetOptionsF(options, NUM_OPTIONS, 0); switch5.SetName("My Switch"); text6.SetText("First line \nSecond line \nThird line \nFourth line \nFifth line");
toggle7.SetNames("Active", "Inactive");
}
Pressing the button on and off will change the name between the two names you passed to SetNames...