Code Generator for Custom Android/Arduino Menus to Switch Arduino Outputs on and Off. Andriod/Arduino for Beginners. Absolutely No 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 8th Nov 2016: pfodApp / pfodDesignerV2 now supports BLE (Bluetooth Low Energy) cards, including BBC micro:bit. See this tutorial on designing menus for BLE.

Update 6th July 2016: pfodDesignerV2 is now available. See this tutorial for beginners for how to collect and plot data from your arduino without writing any code.

Update: A user asked for sub-menu support. pfodApp always supported sub-menus but I have added sub-menus to pfodDesigner. The instructable Design A Custom Menu System shows you how to use pfodDesigner to build a menu with sub-menus that will display on your Android mobile - No coding required pfodDesigner generates all the code for you.

The latest version of pfodDesigner will generate code for Arduino code sketches for Arduino Uno, Arduino Mega2560, WildFire, LinkIt ONE (WiFi/BT), Arduino Ethernet, Adafruit CC3300 shield, Itead Bluetooth shield, SMS SIM900 GPRS SeeedStudio and ICOMSAT IteadStudio shields and more.

Introduction

This is the first of two instructables that make up a complete customizable Home Automation for Beginners example.

See DIY Home Automation for Beginners for the second part. It is aimed at the absolute beginner. If you can handle a sharp knife without cutting your fingers off you can make and customize this home automation controller.

The first instructable shows you how to use the free pfodDesigner available on GooglePlay to design Android menus to switch Ardunio outputs on and off from your Android mobile, without you having to write any program code at all. The Fish Tank picture above shows the example designed in this instructable.

The example project shown here is suitable for complete beginners. This instructable does not require any soldering and No coding experience is required.

Once you have finished this instructable you will be able to design whatever menus you need to switch Arduino outputs on and off. When you have completed the second instructable you will be able to switch real things on and off from your Android mobile, via relays connected to Arduino's digital outputs.

This instructable is also available as a tutorial at Android/Arduino menus for Beginners

The menus are completely customizable. You can change the text, color and font size as well as selecting the Arduino output to be controlled. All using the pfodDesigner running on your Android mobile. The pfodDesigner gives you an exact preview of how your menu will display when you connect using pfodApp . No Android Programming is required.

When you have finished designing your menu, the pfodDesigner generates a complete, well commented, Arduino sketch that will implement your menu and allow you to turn the outputs on and off via your mobile using the pfodApp (via bluetooth or wifi). No Arduino Programming is required.

As part of the design you specify which digital output each On/Off Toggle button is connected to. Arduino digital pins can be configured as either inputs or outputs. The code generated by the pfodDesigner configures the selected pins as outputs. When configured as an output, an Arduino digital pin can be either High or Low.

On an Uno, when it is High, the pin supplies +5V (Vcc) and less than 40mA. On Arduino boards Vcc is either +5V or +3.3V depending on board. When the output pin is set to Low, it grounds anything you connect to the pin and can drain away less than 40mA. These outputs have enough power to drive a led or a reed relay, but not enough to directly drive the 5V relay coil of a power relay, so a second Instructable will look at connecting a relay board to the outputs to switch real things on and off.

What you need to be able to do before you start this Instructable.

This project is suitable for complete beginners but you need complete a few tasks before you start.

You need to first set up the Arduino IDE, install pfodDesigner and make sure you can transfer the final sketch (code file), that pfodDesigner produces, from your mobile to your computer.

1. 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.
2. Install the free pfodDesigner app on your Android mobile.
3. 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.

What you need to buy for this Instructable

The pfodDesigner is free so you can do most of this tutorial with just that pfodDesigner 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 for Part 1

1. You need an Arduino board. The tutorial uses an Arduino Uno.
2. You need a wifi or bluetooth shield, connected via a serial connection, so your Android mobile can connect to the Uno. This tutorial uses iteadstudio BT Shield (Slave) which connects via Serial at 9600 baud.
3. Finally to test your design, you need to download pfodApp from GooglePlay to connect your Android mobile to the Uno via the bluetooth (or wifi) shield and display the menu you have designed for you to control the Arduino outputs. See pfodAppForAndroidGettingStarted.pdf for how to set up a bluetooth connection in pfodApp.

In a later Instructable you will be adding relays to actually switch things on and off.

Now lets build and test an example menu. At the end of this you will be able to build any menu you like to switch Arduino outputs on and off.

This Instructable will design a custom menu on an Android phone to control the low voltage light and pump of a fish tank. Here is what the final menu will look like, but you can choose your own text and colors and font sizes using the pfodDesigner.

Download and install pfodDesigner from GooglePlay.

On opening pfodDesigner you will be presented the Start new Menu button or if you have already started a menu you will also see an option to Edit existing Menu. Each screen also has a Help button.

Clicking the Start new Menu button displays a list of operations available for the new menu. A new menu is created 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 screen to edit the default prompt to something more useful.

Click on Change Prompt to open the Change Menu Prompt screen. The prompt is the text displayed to the user at the bottom of the scrollable list of menu buttons. In the Change Menu Prompt screen a preview of the prompt is shown at the bottom of the screen.

Click Edit prompt text and set the text to “Fish Tank Control” with a newline between 'Tank' and 'Control'. Then click the tick box to accept these changes and re-display the Change Menu Prompt screen with the updated prompt text.

Then set the font size to <+7>, font colour to Aqua, background colour to Navy and set Bold.

That completes the prompt for this example menu.

Use the mobile's back button to go back to the Editing screen and click Add Menu Item to add the first button to this menu. This will display the choices shown above.

There are a number of different types of menu items. In this Instructable we are using On/Off Toggle Buttons that switch a digital output pin on an Arduino board, so select the Output On/Off. (See Android menu buttons for Arduino made Simple for a tutorial on using plain menu buttons.)

Selecting the Output On/Off option opens the Changing Menu Item screen for the item just added.

The “Low” state sets the Arduino output to zero Volts, while the “High” state sets the output to the Arduino +Vcc, usually +5 or +3.3V depending on the Arduino board. Uno boards are +5V.

The text displayed on the button consists of the Leading Text followed by the current state. So for the default leading text of “Output is” and a current setting of Low the button will display “Output is Low”. You can edit all these texts to suit your own use.

You can move the preview's slider left or right to change the current setting in the preview, but it is easier to just click anywhere in the button to see how it toggles.

This On/Off toggle button controls a particular Arduino digital output pin. The Connected to pin.. button tells you which pin it will control. You can click on that button to change the pin.

In this Instructable, the Pump button will be connected to D4 and the Light button will be connected to D5. So click on the Connected to pin .. which opens the first screen above.

Select D4 from this list and the screen will close and re display the Changing Menu Item screen with the updated pin.

You can also change the initial state the output starts in when the power is applied to the board or after the reset is pressed. Leave this setting as Low for now.

You can scroll down to see more options for changing this menu item.

Now finish designing this menu item by editing the leading text to “Pump is ” and edit the Low text to “Stopped” and edit the High text to “Running”. Note the space at the end of “Pump is “. Set the font size to <+4> and the background to Green.

This completes the first button. You can click on the Pump button to see how it will look when it toggles between Stopped and Running.

Use the mobile's back button to go back to the Editing Menu screen and select Preview Menu to see what the menu looks like with this button.

If you don't like the way it looks you can click on the “Pump is” button to open its Change Menu Item screen and modify it. If you want to change the prompt you need to go back to the Editing Menu screen and choose the Change Prompt option.

When you are satisfied with the preview, go back to the Editing Menu screen and choose Add Menu Item to add another Output On/Off toggle button to control the aquarium light.

Change the Connected to pin.. to D5. Edit the leading text to “Light is “. Edit Low text to “Off” and the High text to “On”. Set the font size to <+4> and the background colour to Green.

Now when you go back to Editing Menu and choose Preview Menu you can see how the final menu will look on pfodApp.

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 unneeded 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 you have finished the design you can click Generate Code to open the Generate Code Menu.

From this menu you can change which hardware serial the code will use and what baud rate it will run at. You need to set these depending on the Arduino board you are using and which pins the bluetooth or wifi shield is connected to. For the Uno board used in this Instructable with the Itead Studio BT Shield (Slave) the defaults of Serial and 9600 are correct.

When you have set the serial and baud rate click the Write Code to file button to generate the complete Arduino sketch. This button writes the sketch to a file on your mobile and displays the last 4k bytes in a screen.

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

You MUST exit the pfodDesigner 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: 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. A copy of the generated code is here.

The generated code is a complete sketch which includes a generated version of the pfodParser library code so you don't need to install any extra libraries. All the code need to turn the Arduino output pins on and off when you click the button in the pfodApp on your mobile is included in the generated sketch.

Compile and Upload the sketch to your Uno board.

Remember to remove the bluetooth shield first as it is connected the the same pins (D0 and D1) as the USB.

Set the switches on the Itead Studio bluetooth shield. Set the 3.3V/5V switch to 5V and set the To FT232/To Board switch to To Board and plug it into the Uno.

Install pfodApp from GooglePlay and set up a bluetooth connection to the itead bluetooth shield, as described in pfodAppForAndroidGettingStarted.pdf.

On connecting to the Uno + Bluetooth Shield, pfodApp will display your designed menu. To test the menu take the longest leg of one of the Red Leds and bend it up and twist one end of a 330ohm resistor around it. Then plug the remaining (shortest) leg of the Led into one of the GND pins and plug the other end of the resistor into D4. Do the same for D5 with another Led and resistor.

Now as you click the On/Off toggle buttons on your mobile the leds will turn on and off.

Next Steps

This completes the first Instructable. A later Instructable will look at attaching relays to these outputs so that you can switch real things on and off, but pfodApp can do much more than this.

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.