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
- Step 2. Add initialization code
- Step 3. Add update and setup code
- Step 4. Test connection with RobotUI app
- Step 5. Iterate on your UI design
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...
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
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.
robotUI.Init(ROBOTUI_PIN_RX, ROBOTUI_PIN_TX, BT_BAUDRATE, DEFAULT_COMMAND_BUFFER_SIZE, LayoutDef, RecoverStatus);
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.
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...
#define BT_BAUDRATE 9600