Introduction: Code Generator for Custom Android/Arduino Menus to Switch Arduino Outputs on and Off. Andriod/Arduino for Beginners. Absolutely No Programming Required

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.

Step 1: An Example Fish Tank Control Menu

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.

Step 2: Starting a New Menu

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.

Step 3: Changing the Prompt

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.

Step 4: 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 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.

Step 5: 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 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.

Step 6: Adding the Second On/Off Toggle Button

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.

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

Step 8: 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 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.

Step 9: 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 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.

Comments

author
CandyceK1 made it!(author)2017-01-24

Could you please (pretty please!) add a code generator for 3G SIM5320A tinysine shield (Adafruit_FONA)

I'm trying to use a PIR motion sensor to trigger sending sms text but having a very hard time getting codes to work! I can get both sensor and 3G shield to work separately no problem. But cannot seem to get the combo of these to work properly. Thank you!

author
drmpf made it!(author)2017-01-24

I can add support for Adafruit 3G SIM5320A but that may not solve your problem.

The support I would be adding would be for receiving cmds from pfodApp and sending responses to pfodApp. Those pfod messages are encoded in base 64, to handle Unicode chars, and have a secure hash attached, to protect against unauthorized access, as well as message sequence numbers and auto resends for recovering out of sequence/missing/lost messages. See pfodApp SMS message design for the details.

The support would not cover sending plain text SMS in general. It would also not cover integration with other components like the PIR sensor.

Some of the SMS parsing is time critical and the PIR sensor library may be interfering with that. Suggest you get your SMS messages running first and then turn on the SMS library debugging and add the PIR and see what breaks.

Send me an email via the contact link on pfod.com.au if you need to discuss pfodApp further.

author
drmpf made it!(author)2017-01-14

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.

author
drmpf made it!(author)2015-03-17

Latest version of pfodDesigner adds code generators for Adafruit CC3300 shield and WildFire and LinkIt ONE

author
drmpf made it!(author)2015-02-23

The trick is the pfodApp.

If someone writes an IOS version of pfodApp then the code generated by pfodDesigner will work with it also.
The complete spec for messages is published on www.pfod.com.au, so you just need an IOS guru ( not me :-( ) to knock one up.

author
brad.hunt.96155 made it!(author)2015-02-26

Perfect! Thanks for the feedback --Brad

author
drmpf made it!(author)2015-02-23

The latest version of pfodDesigner now lets you design a menu system with sub-menus and generates all the code required to show that menu system on your Android mobile.

author
brad.hunt.96155 made it!(author)2015-02-23

I'm a complete Arduino noob so this may be a stupid question, but is there a way to construct a system like this that will work with iOS?

author
drmpf made it!(author)2015-02-03

Add update about pfodDesigner generating code for LinkIt ONE bluetooth and wifi connections

author
drmpf made it!(author)2015-01-10

Added update note for latest pfodDesigner which will generate code for SMS connections and Arduino Ethernet shields.

author
Leichiel made it!(author)2014-10-20

where should i put or insert on the generated code the additional sketch to act when i pressed some buttons. thanks hope u gonna help..tnx

author
drmpf made it!(author)2014-10-20

This example generates the complete code to turn outputs on and off.

Take a look at the "Interactive Design and Code Generation of custom Android menus for Arduino -- No Android Programming Required" instructable (https://www.instructables.com/id/Interactive-Design-and-Code-Generation-of-custom-A/ ) or http://www.forward.com.au/pfod/pfodDesigner/ButtonExample/buttonExample.html for an example of adding your own code to be run when you press a button.

The generated code includes comments where you should add your code such as

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

Normally all your code is in just one sketch (unless you code a library to be "included" ). So just copy and paste the code from your other sketch (except the setup() and loop() methods to the bottom of the generated code.

Email me at pfod.com.au via support if you need more help.

author
drmpf made it!(author)2014-09-17

Added link to second part, DIY Home Automation for Beginners.

author
palestinian-warrior made it!(author)2014-09-11

good work!

Just an extra info: You don't even need programming skills to build that app, it has been built using appinventor from mit.

author
drmpf made it!(author)2014-09-11

pfodApp is much better than using inventor. No need to write a new app for each project. Just install pfodApp from GooglePlay and drive it with simple text strings from your Arduino. The one pfodApp handles multiple types of projects.

Check out the many varied projects on www.pfod.com.auall controlled with the one same pfodApp. Also check out my other instructables for more examples on how simple pfodApp is to use.

pfodApp does much more than shown in this instructable. pfodApp does data logging. plotting, handles UTF8 so you can display the text in your native language. pfodApp also keeps track of the menu hierarchy for you, so your Arduino does not need to worry about menu navigation. It has user text and number input screens and sliders. It connects via bluetooth and wifi and has 128bit security available on the wifi/internet connection.

You only need one app, pfodApp to do all of this for any project you can think of.

Think of pfodApp as a general purpose micro-browser for a very simplified HTML replacement language with built in support for buttons, user input (text and numbers), plotting, data logging and connection handling. Arduino is the server, serving up simple text strings to drive the pfodApp screens. Everything is controlled from the Arduino side via simple text strings.

The pfod spec has been made as simple as possible to produce Android interfaces without any programming. Just send a short text string to tell the pfodApp what type of screen to display and what to show on it. Users commands are sent back as short simple text strings designed for micro-processors the handle easily.

Here is the complete command, sent from Arduino, to display menu list with a prompt “Uno Led Control” on a silver background with navy text, large and two buttons “On” on a green background, very large and in bold, and “Off” on a red background, very large and in bold. (see the attached image)

{.<bg s><n><+7>Uno Led Control|A~<bg g><+10><b>ON|B~<bg r><+10><b>OFF}

When the user presses the ON, button pfodApp sends back the command you specified, in this case the character 'A'. For OFF the pfodApp will send back 'B'. Your Arduino code only needs to look for the character you specified in the screen command to know what the user pressed. Check out the pfodSpecification.pdf at www.pfod.com.au for all the details and sample screens. Check out the free pfodDemo on GooglePlay for a sample of all the screens on your mobile.

If you want to make stylish, custom, Android menus to control any of your Arduino projects, while avoiding the complexities of multi-threaded Android programming, then pfodApp is for you.

Email me via pfod.com.au at support if you need any help. Or just email me and tell me what you have used pfodApp for. I don't get may requests for support :-(

pfodApp just works.

finalDesign.png
author
ade+angelis made it!(author)2014-09-06

hello, awesome build, really! I'd like to replicate this project, but I was wandering if other wireless modules could be used, so that I can mount everything with a standalone atmega chip. Would that involve any modification to the app or to the code? Thank you very much for sharing!

author
drmpf made it!(author)2014-09-06

hi ade angelis

Further to my previous reply:
Since most wireless modules are 3.3V, you should run your atmega chip at 3.3V so you can directly connect the atmega pins to the wireless module without level shifters

author
ade+angelis made it!(author)2014-09-10

thank you very much for tour answer, drmpf! I don't really know much of electronics and all that UART stuff, but i've seen many people use hc-06 module to provide Arduino projects with bluetooth connection. Would that be compatible with this build? Thank you

author
drmpf made it!(author)2014-09-10

further to my reply below, the iteadstudio bluetooth shield does not cost much more then a HC-06 module and the iteadstudio BT shield just plugs in, no fuss.

author
drmpf made it!(author)2014-09-10

Yes,

When you click the generate code button the default baud rate is 9600. As the button says, this the default for the HC-06 module so that that's OK. No need to change the baud rate. And for the UNO leave the Serial connection as Serial D0,D1 (the default)

BUT

there are lots of HC-06 modules out there. The basic chip is 3.3V and the Arduino is 5V so you may need to add some parts to make the it compatible. Some modules say there are already 5V compatible others aren't. If your module is not 5V compatible on the TX,RX pins (as well as the supply) you need to add two resistors to stop the 5V Arduino damaging the 3.3V HC module.

Check out the first image in the instructable, "Cheap 2-Way Bluetooth Connection Between Arduino and PC" https://www.instructables.com/id/Cheap-2-Way-Blueto... for how to wire up the resistors and the TX,RX leads

codeGenerator_HC_06baudrate.pngcodegeneratorSerial_Uno_HC_06.pngcodegeneratorDefault.png
author
nivitalindasarii made it!(author)2014-09-10

author
Avadhut.Deshmukh made it!(author)2014-09-08

good work

author
gunnlaugursig made it!(author)2014-09-06

Very helpful instructable. Thanx :-)

author
drmpf made it!(author)2014-09-06

Yes other wireless modules can be used. The generated code assumes the module is connected via a hardware UART, you can specify either Serial or Serial1 . For the Arduino Mega boards these are D0,D1 and D16,D17. see http://www.ardumower.de/ schematics and sketches for connecting a bluetooth module to D16,D17.

For a stand alone chip (non Arduino board) you can use Atmel Studio and Visual Micro to compile the generated sketch with the Arduino libraries into an Atmel hex file for programming your micro. Check out the Arduino Hardware Serial library code to see which hardware UART corresponds to Serial and Serial1. If you are programming stand alone chips you are probably already using Atmel Studio.

You can also follow the steps at http://arduino.cc/en/Tutorial/ArduinoToBreadboard which show you how to move code a standalone ATmega328.

In either case just connect the wireless module to the same ATmega328 pins as the Uno board uses (see the Arduino Uno board schematics, chip pins 2,3 goto D0,D1) and select Serial when generating the code.

email me via pfod.com.au at support is you need more help.

author
drmpf made it!(author)2014-09-03

you are welcome. Email me at pfod.com.au via support if you need help using the other screens and features of pfodApp for life box.

author
Akin+Yildiz made it!(author)2014-09-03

amazing work. we need this system installed on the life box. thank you for sharing !

06.jpg