Home | pfodApps/pfodDevices | WebStringTemplates | Java/J2EE | Unix | Torches | Superannuation | | About Us
 

Forward Logo (image)      

pfodDesignerV2™ pfodDesigner on Google Play
Android/Arduino menus for Beginners
Design a Custom Menu System
Absolutely No Programming Required

by Matthew Ford 22nd Februray 2015
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.


Main Menu


Sub-Menu Control LED


Sub-Menu Output Control

Introduction

This tutorial shows you how use the free pfodDesignerV2 available on GooglePlay to design an Android menu system with sub-menus for Arduino Compatible devices. The tutorial is suitable for complete beginners. No coding experience is required. The pfodDesignerV2 generates all the necessary Arduino code and the pfodApp handles the Android side. No Android Programming is required. The one pfodApp works with all pfodDevices. The screens and menus on the Android mobile are completely controlled by simple string messages coded in the Arduino sketch. The connection between the pfodApp and your Arduino device can be either Bluetooh Classic, Bluetooth Low Energy, Wifi or SMS.

This tutorial will design three (3) menus, one main menu and two sub-menus. For the purposes of this tutorial the main menu will have just two buttons (you can add more if you wish using pfodDesignerV2). Each button will open a sub-menu, each of which will have just one button. One sub-menu will control the Uno Led (pin 13). The other sub-menu will control Output D3. The menus are completely customizable. You can change the text, color and font size etc as you wish.

After designing the menu system and previewing it (WYSIWYG) on the Android mobile, pfodDesignerV2 will generate all the necessary code. As you will see the code has a very simple structure. The complexity of keeping track of the menu hierarchy is left to the pfodApp. The pfodDevice (the Arduino) just handles the command the pfodApp sends and returns the result.

Designing and Previewing the Menu System

What you need to be able to do before you start

This project is suitable for complete beginners but you need to complete a few tasks before you start. You need to first set up the Arduino IDE, install pfodDesignerV2 and make sure you can transfer the final sketch (code file), that pfodDesignerV2 produces, from your mobile to your computer.

a) Install the Arduino IDE for your computer's operating system from Getting Started with Arduino and work through the example of compiling and running the Blink example.

b) Install the free pfodDesignerV2 app on your Android mobile. Version 2.0.2082 or later.

c) Check that you are able to transfer files from your mobile to your computer either via a USB cable or a file transfer app such as WiFi File Transfer. See pfodAppForAndroidGettingStarted.pdf for more details.

d) You should also be familiar with using pfodDesignerV2 to added and format buttons. See these other tutorials for the details, Android/Arduino Menu Designer for Beginners to switch things on and off from your mobile and Android/Arduino menu buttons.

What you need to buy

The pfodDesignerV2 is free so you can do most of this tutorial with just the pfodDesignerV2 on your Android mobile. But if you want to actually switch something on or off you will need some hardware and the pfodApp. Here is a complete parts list.

You need an Arduino board. The tutorial uses an Arduino Uno.

You need a Wifi or Ethernet or Bluetooth or Bluetooth LE shield, so your Android mobile can connect to the Uno. This tutorial uses iteadstudio BT Shield (Slave) which connects via Serial at 9600 baud.

Finally to test your design, you need to download pfodApp V2.208+ from GooglePlay to connect your Android mobile to the Uno via bluetooth or wifi (or SMS) and display the menu you have designed to control the Arduino outputs. See pfodAppForAndroidGettingStarted.pdf for how to set up a connection in pfodApp.

Designing the Menu System – The first Sub-Menu

Open pfodDesignerV2 and start a new Menu and change the menu name to “Menus Tutorial”. This is not essential, but helps keep track of this menu design. This menu name is not displayed to the pfodApp user. It is only shown on pfodDesignerV2.



Then click “Add Menu Item”. This opens a screen giving you choices of menu items to add. Scroll down to the Sub-menu option



Choose the Sub-Menu option. This adds a Sub-menu button and opens the Editing screen for this Button.



The bottom part of the screen above is the edit screen for the button that will appear on the Main Menu. Change the Button Text from “Sub-menu” to “Control LED” and set whatever font size, colour and background colour you like.



As mentioned above, this screen just formats the button that opens the sub-menu. To actually add items to the sub-menu itself you need to open its edit screen. You do that by clicking on the “Control LED” button at the top of the edit screen. This opens the sub-menu edit screen.



To help you keep track of which sub-menu you are working with, it is a good idea to “Change Sub-Menu Name” to something recognizable, say “LED”. The pfodDesignerV2 always put '
subMenu_' in front of all sub-menu names. Like the Menu Name, subMenu names are not displayed to the pfodApp user. They are only shown on pfodDesignerV2 and used in code comments.



Now complete this sub-menu by adding a menu item to turn D13 on and off and setting a menu prompt. (see Android/Arduino Menu Designer for Beginners to switch things on and off from your mobile for details). When you are finished go back to the Editing subMenu_LED screen and press Preview subMenu_LED to preview the subMenu design.



You can click the Led button to see it operate.

Designing the second Sub-Menu

Now click the mobile's back button a number of times to get back to the “Editing Menus Tutorial” screen. If you press the “Preview Menu” button on that screen you can preview the operation of the single button “Control LED” opening the sub-menu you have just completed. This is exactly how pfodApp will display your design.

Set the Main Menu prompt (by clicking “Edit Prompt”) and set some suitable text, size and colours. I set “UNO LED and Output Control” as the prompt for the main menu.

Then return to the Editing Menus Tutorial Screen and add the second menu item which will open the second sub-menu. Click on “Add Menu Item” and select Sub-menu. By default the background colour is the same as the background colour set for the prompt. Change the button's text to “Output Control” split over two lines and choose a suitable size and colour.



When you have finished formatting this button, click on it, to open the “Editing subMenu_C” screen



As before, rename this subMenu, using Change Sub-Menu Name, to something more recognizable. I used “Output” which resulted in a name of
subMenu_Output.

Finally complete the design by Editing the subMenu prompt and adding a menu item to turn Output D3 on and off. Preview subMenu_Output when you have finished.



When you have finished you can preview the whole menu by going back to the Editing Menus Tutorial screen and clicking Preview Menu. This shows the three screens shown at the top of this page. If you don't like the colours I have chosen, you can easily choose your own.

Generating the Code

To generate the Arduino Code, click on a “Generate Code” button in any of the menu editing screens. Then select the settings for the board and shield you are using. Here I used an UNO board with a Itead Studio Bluetooth Slave shield connected to Serial at 9600 baud.

Clicking “Write Code to file” saves the generated code to the end of a local file pfodAppRawData/pfodDesignerV2.txt.

Transferring the Sketch to Your Computer

You can exit pfodDesignerV2 now, your design has been saved and is available under “Edit existing Menu”.
You MUST exit the pfodDesignerV2 to ensure the last block of code is written to the file.

Connect your mobile to your computer and turn on the USB Storage, or use a Wifi File Transfer App to access your mobile's storage from your computer. (See pfodAppForAndroidGettingStarted.pdf for more details) Note: pfodDesignerV2 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 pfodDesignerV2 again.

Navigate to /pfodAppRawData and open the pfodDesignerV2.txt in a text editor (such as WordPad). The pfodDesignerV2.txt file is over written 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.
A copy of the generated code is here.

You can then compile and download the code to your UNO board, plug in the bluetooth shield and connect using pfodApp to control the LED and output D3. See the previous tutorial Android/Arduino Menu Designer for Beginners to switch things on and off from your mobile for details of compiling and testing your menu. See pfodAppForAndroidGettingStarted.pdf for how to set up a bluetooth connection in pfodApp.

The Generated Code Format

At the top of the generated code are comments showing the three menus you have designed and the pfodApp commands the open them. When the pfodApp first connects it always send {.} and so gets the Main Menu.

/* ===== pfod Command for Menus Tutorial ====
pfodApp msg {.} --> {,<bg bl><+4><w>~Uno LED and Output Control`0~V1|A<bg s><+3><r>~Control LED|C<bg w><+6><n>~Output
Control}
 */
/* ===== pfod Command for subMenu_LED ====
pfodApp msg {A} --> {,<bg s><+4><n>~Uno LED Control`0~V1|B<bg w><+4><r>`0~Led is ~~Off\On~}
 */
/* ===== pfod Command for subMenu_Output ====
pfodApp msg {C} --> {,<bg w><+4><r>~Set D3 Output`0~V1|D<bg s><b><+4><r>`0~D3 is ~~Low\High~}

The loop() method contains a series of if else statements that handle all the commands. The commands . , A and C return the main menu and the sub-menus respectively. The other two commands, B and D change the setting of the LED and output D3 respectively and return a menu update. This update lets pfodApp display the result of the command, i.e the state of the output.

Menu messages and Menu Update messages

There is an important difference between menu (or sub-menu) messages and menu updates. Menus start with {, and define a new menu. pfodApp sees this and remembers the command that produced this menu reply (and also caches that menu) so that when the use presses the back button, pfodApp know what command to send to get the previous menu. This means the Arduino code does not need to keep track of the user's navigation through the menu system.

On the other hand, when the user presses a button on menu that performs an action, like turning the LED on or off, it is important to return an menu update, {; message instead. Menu update messages do not start a new menu, they only modify the display of the existing menu.

Next Steps

This completes the tutorial. 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 pfodDesignerV2 are standard pfod screens. The pfodDesignerV2 is just a pfodApp connected to a back-end that keeps track of your selections and serves up the requested screens. From the pfodDesignerV2, you can use the mobile's menu button to open the Debug View to see what pfod messages are being sent to generate the pfodDesignerV2 screens and what commands are sent back by your actions.

pfodDesignerV2TM is a trademark of Forward Computing and Control Pty. Ltd.
Android
TM is a trademark of Google Inc. For use of the Arduino name see http://arduino.cc/en/Main/FAQ


The General Purpose Android/Arduino Control App.
pfodDevice™ and pfodApp™ are trade marks of Forward Computing and Control Pty. Ltd.


Forward home page link (image)

Contact Forward Computing and Control by
©Copyright 1996-2020 Forward Computing and Control Pty. Ltd. ACN 003 669 994