RobotUI Layout 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() { } 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 another button

You can add another button by adding the following lines, recompile and upload to see you changes appear in the RobotUI app.
RobotUI robotUI; RobotUIButton button1;
RobotUIButton button2;
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1);
robotUI.Add(button2);
robotUI.EndLayout(); }


Change button size

You can make the second button twice the size of the first by adding weight parameters to the add functions...
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(button1
, 1
); robotUI.Add(button2
, 2
); robotUI.EndLayout(); }


Horizontal buttons

You can change the two buttons so they appear on the same row by wrapping them in a horizontal group...
void LayoutDef() { robotUI.StartLayout();
robotUI.StartHorizontal(1);
robotUI.Add(button1, 1); robotUI.Add(button2, 2);
robotUI.EndHorizontal();
robotUI.EndLayout(); }


Horizontal button size

If we add another row of buttons, we can make them twice the height of the previous row by passing a weight parameter that is twice the size of the previous weight value.
RobotUI robotUI; RobotUIButton button1; RobotUIButton button2;
RobotUIButton button3; RobotUIButton button4;
void LayoutDef() { robotUI.StartLayout(); robotUI.StartHorizontal(1); robotUI.Add(button1, 1); robotUI.Add(button2, 2); robotUI.EndHorizontal();
robotUI.StartHorizontal(2); robotUI.Add(button3); robotUI.Add(button4); robotUI.EndHorizontal();
robotUI.EndLayout(); }


Setting button names

We can change the name of the buttons by adding some calls to SetName in the RecoverStatus function...
void RecoverStatus() {
button1.SetName("Stop"); button2.SetName("Start"); button3.SetName("On"); button4.SetName("Off");
}


Setting font size

We can change the font size of two of the buttons by adding the following parameters to the Add function. The default value is 15, so we can make the font bigger by using 40...
void LayoutDef() { robotUI.StartLayout(); robotUI.StartHorizontal(1); robotUI.Add(button1, 1); robotUI.Add(button2, 2); robotUI.EndHorizontal(); robotUI.StartHorizontal(2); robotUI.Add(button3
, 1, 40
); robotUI.Add(button4
, 1, 40
); robotUI.EndHorizontal(); robotUI.EndLayout(); }


Including Vertical layout

We can insert a vertical group inside a horizontal group so that buttons will appear on top of each other instead of side by side. We'll add a fifth button within a vertical group by adding the code shown below. We'll decrease their font size from 40 to 20...
RobotUIButton button3; RobotUIButton button4;
RobotUIButton button5;
void LayoutDef() { robotUI.StartLayout(); robotUI.StartHorizontal(1); robotUI.Add(button1, 1); robotUI.Add(button2, 2); robotUI.EndHorizontal(); robotUI.StartHorizontal(2); robotUI.Add(button3, 1, 40);
robotUI.StartVertical(1);
robotUI.Add(button4, 1,
20
);
robotUI.Add(button5, 1, 20); robotUI.EndVertical();
robotUI.EndHorizontal(); robotUI.EndLayout(); } void RecoverStatus() { button1.SetName("Stop"); button2.SetName("Start"); button3.SetName("On"); button4.SetName("Off");
button5.SetName("Quit");
}


Continue on to the widget tutorial to see what other widgets you can use.