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

Forward Logo (image)      

pfodDesignerV2™ pfodDesigner on Google Play
Android menu buttons for Arduino made Simple
No Android Programming Required

by Matthew Ford 4th June 2016 (originally posted 15th June 2014)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.

Introduction

This page shows you how to use the free pfodDesignerV2 Android app available on GooglePlay to design Android menu buttons to control your Arduino projects. No Android Programming is required.
The pfodDesignerV2 generates an Arduino sketch that implements the menu you design. You only need to add the action code for each button.

Once you have finished this tutorial you will be able to design whatever menu buttons you need for your projects.

This tutorial has been update with the code from the latest version of pfodDesignerV2 V2.0.2082

Also see the pfodDesignerV2 page for a tutorial on designing menus to switch things on and off that will generate all the code needed to switch Arduino digital outputs on and off. No Arduino or Android programming required.

The Menu Design

This tutorial will design a menu with two buttons, On and Off to turn the Arduino Uno's Led on and off. Here is what the final menu will look like.

Starting a New Menu

Download and install pfodDesignerV2 from GooglePlay.

On opening pfodDesignerV2 you will be presented with the Start new Menu button. Each screen has a Help button. Check them out as you go through this tutorial.

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 no buttons and a default menu name, Menu_1


Click Preview Menu to see what the current design looks like. No buttons yet just some default prompt text at the bottom.

Use the mobile's back button to go back to the Editing Menu screen to edit the default prompt to something more useful.

Changing the Prompt

Click on Edit Prompt to open the Editing Menu Prompt screen. The prompt is the text displayed to the user at the bottom of the scrollable list of menu items. A preview of the prompt is at the bottom of the Editing Menu Prompt screen.

Select the Edit prompt text button and set the prompt 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.

Go back to the Edit Menu screen to add a button.

Adding a Button

Now use the mobile's back button to go back to the Editing Menu screen and click Add Menu Item to add the first button for this menu. This will display the following choices:-


There are a number of different types of menu items. In this tutorial we are just using Buttons so select the
Button item. See menus to switch things on and off for a tutorial that uses the Output On/Off menu item. See Design a Custom Menu System for a tutorial that uses the Sub-menu item.
Selecting that option opens the Edit Menu Item screen for the button just added.


The preview of the button is at the top of the screen. Note that for the background colour of this button the prompt background colour is used as a default. You will change that shortly.

Click the Edit Text button to open the Edit Button Text screen.

Change the button text to “ON”.

Remove any trailing space and then click the accept button (bottom left). That returns to the Editing Menu Item 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 pfodDesignerV2.

Use the mobile's back button to go back to the Editing Menu screen. The select the Preview Menu button to see what the menu looks like now. If you want to change the design of the ON button just click on it in the preview screen and the Editing Menu Item screen will open again.

Use the mobile's back button to take you back to the Editing Menu screen.

Adding the second Button

From the Editing Menu screen choose Add Menu Item to add the second button for this menu. Again choose a Button type of menu item to open Editing Menu Item screen for this second button.

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 to Editing Menu screen 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 unwanted buttons as well as changing the menu name. The menu name is only for your use. It is shown in the list of Existing Menus, but is not displayed to the user.

Generating the Arduino Sketch

Now that the design is finished you can generate the Arduino sketch that implements this menu. From the Editing Menu screen and click the Generate Code button. This opens the Generate Code Menu.


From this menu you can choose which hardware you want to target, Serial connected shields, Bluetooth Low Energy, ESP8266, Wifi, SMS etc. For Serial connections you can also set the baud rate. Any changes you make here are saved with your menu design.

In this tutorial we will just use the default settings, Serial and 9600, as these are what the ITead Bluetooth Shield (Slave) needs.

To save the Arduino sketch to a file on your mobile, select the Write Code to file button. This opens a view of the last 4K of code and tells you the location of the output file on your mobile.

Copying the Sketch

You can exit pfodDesignerV2 now. Your design has been saved and is available under Edit existing Menu. Connect your mobile to your computer either via a USB cable or using a File Transfer app. 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 transfer the pfodDesignerV2.txt file to your computer. Open pfodDesignerV2.txt in a text editor (such as WordPad) and go to the bottom of the file. Each time you click Write Code to file, the generated code is written to the bottom of the file, 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 and baud rate this generated code is using for sending and receiving messages, in this case
Serial, 9600

Next is the header file from the the pfodParser library that is needed to parse the commands returned when users click the buttons. For Serial connections, the complete code for the pfodParser is included in the generated code so you do not any extra libraries. However for some other targest you need to download and install the pfodParser library in your Arduino IDE (see pfodParser Libraries for installation instructions).

Adding your Action Code

The sketch generated by pfodDesignerV2 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.

The generated code contains place holders for the button actions

    // now handle commands returned from button/sliders
    } else if('A'==cmd) { // user pressed -- 'ON'
      // in the main Menu of Menu_1 
      // << add your action code here for this button
      parser.print(F("{}")); // change this return as needed.       // always send back a pfod msg otherwise pfodApp will disconnect.

    } else if('B'==cmd) { // user pressed -- 'OFF'
      // in the main Menu of Menu_1 
      // << add your action code here for this button
      parser.print(F("{}")); // change this return as needed.       // always send back a pfod msg otherwise pfodApp will disconnect.



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

You also need to define the 'led' pin as digital I/O 13 and make it an output.

So above setup(), define a name for the led pin
int led = 13; // led is on digital pin 13 on Uno

It setup() replace
// <<<<<<<<< Your extra setup code goes here
with
// initialize the digital pin as an output.
pinMode(led, OUTPUT);

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

Controlling Arduino from Android via pfodApp

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 your designed will be displayed. Click the buttons to turn the Led on and off. That's it.

Next Steps

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 edit void send_menuContents() method to add 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.

Also check out the pfodDesignerV2 tutorial on designing menus to switch things on and off that will generate all the code needed to switch Arduino digital outputs on and off. No Arduino or Android programming required.

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.

AndroidTM is a trademark of Google Inc. For use of the Arduino name see http://arduino.cc/en/Main/FAQ


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-2017 Forward Computing and Control Pty. Ltd. ACN 003 669 994