Interactive Design and Code Generation of Custom Android Menus for Arduino -- No Android Programming Required

Update 1st Dec 2022: As well as the free pfodDesignerV3 Android app for menu design, there is now also a free pfodGUIdesigner Android app to design interactive GUI components

UpDate: Check out the newer Instructable

Andriod/Arduino for Beginners - Design Custom Andriod menus to switch Arduino outputs on and off. Absolutely No Programming Required

that generates ALL the Arduino code for you using the latest version of pfodDesigner. Suitable for complete beginners wanting to switch things on and off from your Android mobile using custom menus.

Introduction

This instructable shows you how to use the free pfodDesigner Android app available on GooglePlay to interactively design and code generate custom Android menus to control your Arduino projects. You set the number of buttons, font sizes, colours, styles all controlled by the generated Arduino sketch.

No Android Programming is required.

The pfodDesigner generates an Arduino sketch which will display the menu on your Android mobile, via pfodApp, and handle the commands returned when the user presses the buttons you designed. You only need to add the action code for each button. Once you have finished this tutorial you will be able to design whatever menus you need for your Arduino projects. The generated code targets the Arduino boards using the Serial connection to send and received the messages, e.g. Uno with a iteadstudio bluetooth shield.

If you would like support added for other configurations email the pfodDesigner developer via the Google Play store.

The Menu Design

This instructable will design a menu with two buttons, On and Off to turn the Arduino Uno's Led on and off. The final menu is shown above.

-------------------------------------------------------------------------------------------------

What is pfod?

(Protocol for Operations Discovery)

The pfod protocol is a rich but simple one and contains much more then just simple menus. Check out the full pfodSpecification.pdf for all the details and examples. Also see www.pfod.com.au for numerous example projects.

All the screens used by the pfodDesigner are standard pfod screens. The pfodDesigner is just a pfodApp connected to a back-end that keeps track of your selections and serves up the requested screens. From the pfodDesigner you can use the mobile's menu button to open the Debug View to see what pfod messages are being sent to generate the pfodDesigner screens and what commands are sent back by your actions.

This tutorial is also available at the pfodDesigner page on www.pfod.com.au

Download and install the free pfodDesigner app from GooglePlay.

On opening pfodDesigner you will be presented with a “Start new Menu” button. Once you have designed a menu there will also be an “Edit existing Menu” button.

Clicking the “Start new Menu” button creates a new menu with one button and a default menu name, Menu_1

Click “Preview Menu” to see what the current design looks like.

Click “Button A” to open the Edit Menu Button screen. This screen lets you edit all the features of a button and shows a preview of the button at the top of the screen.

Clicking the preview button opens the Edit Button Text screen, as does clicking the “Edit Button Text” button below it.

Change the button text to “ON”. Remove any trailing space and then click the accept button (bottom left). That returns to the Edit Button screen with the preview updated.

Now set the rest of this button's format. Set the font size to <+10>. Leave the font colour as “Default” (white). Set the background colour as Green. Set Bold.

You can also change the command character that pfodApp sends back when this button is pressed but usually you will just use the default assigned by pfodDesigner.
Clicking the mobile's back button takes you back to the menu preview screen updated with these changes.

Clicking back again takes you back to the Edit Menu screen.

Next click on “Edit Prompt” to edit the menu prompt. This is the text displayed to the user at the bottom of the scrollable list of menu buttons. A preview of the prompt is at the bottom of this screen.

For the menu prompt set the text to 'Uno Led Control' with a newline between 'Led' and 'Control'.

Set the font size to <+7>, font colour to Navy and background colour to Silver.

Now go BACK and click “Add a button” to add the second button for this menu.

As you can see the background colour for this new button is already Silver. If you don't set a button's background colour then buttons use the prompt's background colour as their default background colour.

Finish editing this button. Set the text to “OFF”, set the font size to <+10>, set the background colour to Red and set Bold.

Previewing the Final Design

Go BACK and click “Preview Menu” to see the final design.

Changing Button order and Deleting Buttons

From the Editing Menu screen you can also change the order of the buttons in the menu and delete un-needed buttons as well as changing the menu name. The menu name is for your use only. It is shown in the list of Existing Menus. It is not displayed to the user.

Now that the design is finished you can generate the Arduino sketch that implements this menu.

Go BACK to the Editing Menu screen and click “Generate Code”.

This opens a Raw Data screen and displays the last 4K of the sketch code. All of the code is saved to the file /pfodAppRawData/pfodDesigner.txt on your mobile's SD card.

Copying the Sketch

You can exit pfodDesigner now, your design has been saved and is available under “Edit existing Menu”.

Connect your mobile to your computer and turn on the USB Storage. Note: pfodDesigner cannot access the SD card to save the generated code while it is being accessed by the computer as USB Storage, so turn of USB Storage before running the pfodDesigner again.

Navigate to /pfodAppRawData and open the pfodDesigner.txt in a text editor (such as WordPad). The pfodDesigner.txt file is appended to each time you click “Generate Code”, so you need to go to the end of the file to get the most recently generated code.

Open the Arduino IDE and make a new sketch, delete any code from the sketch window and then copy and past the generated code into the Arduino IDE.

As this screen shows, at the top of the generated code is a comment containing the actual pfod message that will produce the menu on the pfodApp. This is followed by a comment specifying which interface this generated code is using for sending and receiving messages, in this case Serial. The setup() method sets the baud rate to 9600. Change this if you need to to match your bluetooth/wifi module's baud rate.

Adding your Action Code

The sketch generated by pfodDesigner will send the menu and process the commands received, but you need to decide what to do when the user presses the button. In this example we will just turn the Uno Led on when the user pressed the ON button and off when they press the OFF button.

Above setup(), define a name for the led pin

int led = 13; // led is on digital pin 13 on Uno

In setup() replace

// <<<<<<<<< Your extra setup code goes here

with

// initialize the digital pin as an output.

pinMode(led, OUTPUT);

Then in loop() near the bottom where is says

// now handle commands returned from button clicks

For ON replace

// << add your action code here for this button

with

digitalWrite(led, HIGH); // turn led on

For OFF replace

// << add your action code here for this button

with

digitalWrite(led, LOW); // turn led off

That's the coding finished. The completed sketch is here.

You can now program your Uno board and then add a bluetooth shield connected to the RX, TX pins such as described in Arduino for Beginners, controlled by Android

Then download and install the pfodApp from Google Play and set up a bluetooth connection to your bluetooth module as described in pfodAppForAndroidGettingStarted.pdf

Then start pfodApp and connect to your Arduino and the menu you designed will be displayed. Click the buttons to turn the Led on and off. That's it.

Next Steps

Check out the full pfodSpecification.pfd for all the other screens you can generate from your Ardunio code. Look at the example projects on www.pfod.com.au.

The first change you might like to make is to have just one button that is updated with the current state of the led, with text like 'Switch Led Off 'if the led is on and 'Switch Led On' if the led if off. For this you need to an if/else statement to send the correct menu when first connect and then when the one button is pressed, your action code would toggle the led and send back an updateMenu {: message to update the text and format of the button to its new state.