RobotUI Development Guide

This guide assumes you have already performed the setup.
If you have finished the development guide, you should look at the RobotUI reference

Summary of code changes

Step 1. Include the RobotUI library

Open up your main project file e.g. YourProject.ino in the Arduino IDE. At the top of the file you will see some #include's. Add the following line to include the RobotUI library...
#include <RobotUI.h>
If the above does not compile, make sure you have installed the RobotUI library by following the setup.

Step 2. Add initialization code

The first line is a define that specifies the baudrate of your HC-06
#define BT_BAUDRATE 9600
. The default is 9600, but if you have changed the baudrate of your HC-06, you will need to specify its baudrate here.
The second line defines the RobotUI class
RobotUI robotUI;
. This is the class that will manage your UI and communicate with the RobotUI Android app.
The third line defines a single button.
RobotUIButton buttonHelloWorld;
. You can remove this later, we add it now just to check the connection with the app.
The first function called LayoutDef will describe the layout of your UI. You will be changing this later as you change your UI, for now we will add a single button that we declared above, called buttonHelloWorld.
The second function called RecoverStatus will contain any status updates that your UI requires when reconnecting with the Arduino. More on this later, but we can leave it empty for now.
Below is all of the initialization code in one block. Paste this block of code just before your setup function.
#define BT_BAUDRATE 9600 RobotUI robotUI; RobotUIButton buttonHelloWorld; void LayoutDef() { robotUI.StartLayout(); robotUI.Add(buttonHelloWorld); robotUI.EndLayout(); } void RecoverStatus() { }

Step 3. Add update and setup code

We need to add a call to robotUI.Init(...) to your setup function to initialize the RobotUI system. The initialization function needs parameters for the RX and TX pins, the baudrate of your HC-06 that we defined in Step 2, the command buffer size and references to your LayoutDef and RecoverStatus functions.
We also need to add a call to robotUI.Update() to your loop function. The Update() function internally makes a call to millis() and returns that value for your convenience. As calls to millis() can stall serial communication it could interrupt bluetooth communication with the app, so you can use the return value of Update() instead of making additional calls to millis(). Below shows the lines you can add to your setup and loop functions.
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(); }

Step 4. Test connection with RobotUI app

Now we are ready to test the connection between your Arduino code and the RobotUI Android app. Upload your code to your Arduino project and try connecting to it using the RobotUI app. When you connect you should see a single button on the app, like the picture below.

Step 5. Iterate on your UI design

While you have the RobotUI app connected to your Arduino you can change your code, upload your code changes to the Arduino and watch your changes appear in the app a few seconds later. Add the following lines of code your project. It will add a second button and provide names for the buttons.
#define BT_BAUDRATE 9600 RobotUI robotUI; RobotUIButton buttonHelloWorld;
RobotUIButton button2;
void LayoutDef() { robotUI.StartLayout(); robotUI.Add(buttonHelloWorld);
robotUI.Add(button2);
robotUI.EndLayout(); } void RecoverStatus() {
buttonHelloWorld.SetName("Hello World"); button2.SetName("Hello Universe!");
}
After you upload your code changes to your Arduino you should see your new UI appear in the RobotUI app a few seconds later. Note, if you do not see any changes appear automatically, you can force a UI refresh by using the Refresh UI option in the app menu. Your new UI should appear as follows...