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

Forward Logo (image)      

pfodDesigner™ pfodDesigner on Google Play
Android/Arduino menus for Beginners
Design Custom menus to switch Arduino outputs on and off
Absolutely No Programming Required

by Matthew Ford 4th January 2015 (originally posted 28th August 2014)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.



Introduction

The example project shown here is suitable for complete beginners. No coding experience is required. Part 1 of this tutorial does not require any soldering. Once you have finished this tutorial you will be able to design whatever menus you need to switch Arduino outputs on and off. When you have completed the second part of this tutorial, Simple Home Automation for Beginners, you will be able to switch real things on and off from your Android mobile, via relays connected to Arduino's digital outputs.

The first part of this two part tutorial that 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 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 in Part 2 of this tutorial will look at connecting a relay board to the outputs to switch real things on and off.



On/Off Toggle buttons switch the Arduino output between +Vcc and GND each time they are clicked or you can slide the slider left or right. When the toggle button's slide is on the left side, the output is Low (GND), when it is to the right the output is High (+Vcc). The pfodDesigner also lets you add plain buttons. See Android menu buttons for Arduino made Simple for a tutorial on using plain menu buttons.

Part 1 Designing and testing the Menu

What you need to be able to do before you start Part 1.

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.

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 pfodDesigner app on your Android mobile.

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.

What you need to buy for Part 1.

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.

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

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.

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 Part 2 you will be adding relays to actually switch things on and off.

An Example Fish Tank Control Menu

This tutorial 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.

Starting a New Menu

Download and install pfodDesigner from GooglePlay.

On opening pfodDesigner you will be presented with the Start new Menu button. Each screen also has a Help button.



or if you have already started a menu you will also see an option to
Edit existing Menu



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.

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 buttons. In the Editing 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'.

Click the tick box to accept these changes and re-display the
Editing 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.

Adding an On/Off Toggle Button

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 following choices:-


There are a number of different types of menu items. In this tutorial 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.
See Design a Custom Menu System for a tutorial that uses the Sub-menu item.
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.

Setting the Arduino Output Pin

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 tutorial, 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 following screen.


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
Editing 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.

Adding the second On/Off Toggle button

When you are satisfied 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.

Generating the Arduino Code

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 tutorial 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.

Transferring the Sketch to Your Computer

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 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.



The generated code is a complete sketch which includes a copy 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.

Compiling and Testing your Menu

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 tutorial. Simple Home Automation for Beginners 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.

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