|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
|
| About
Us
|
|
|
pfodDesignerV2™
|
by Matthew Ford 4th June 2016 (originally
posted 15th June 2014)
© Forward Computing and
Control Pty. Ltd. NSW Australia
All rights reserved.
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.
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.
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.
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.
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.
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.
Go back to Editing Menu screen and click
Preview Menu to see the final design.
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.
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.
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).
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.
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.
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
The General Purpose Android/Arduino Control App.
pfodDevice™ and pfodApp™ are trade marks of Forward Computing and Control Pty. Ltd.
Contact Forward Computing and Control by
©Copyright 1996-2020 Forward Computing and Control Pty. Ltd.
ACN 003 669 994