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

Forward Logo (image)      

Inline Power Switch, Auto refresh and Blank Space for pfodApp V2™ menu
Using pfodDesignerV2 create the Inline Power Switch menu with auto refresh and an empty inactive spacer

by Matthew Ford 7th June 2016 (originally posted 3rd Decmeber 2015)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.

Introduction

The free pfodDesignerV2 lets you design your menus interactively and then generate the necessary Arduino sketch for a variety of boards and connection types, Bluetooth Classic, Bluetooth Low Energy,WiFi and SMS to connect via pfodApp. Sometimes you want the menu to automatically update with the latest device status and sometimes you want to add an empty, spacer, button to separate out an important button or just move the following button to the centre of the screen.

This tutorial shows you how to do both of those. How to set the menu to auto refresh and how to create that blank spacer, using pfodDesignerV2. It will also cover modifying the generated code to change the background colour as the switch state changes. As a concrete example, this tutorial builds the menu for the Inline ESP8266 controlled Power Switch.

For other tutorials on using the pfodDesignerV2 to create an Android menu system with sub-menus for Arduino Compatible devices, check out the pfodDesignerV2 main page.

Designing the Inline ESP8266 controlled Power Switch menu

For the inline power switch we only need one on/off slider button that will turn the relay on or off, we would like to have the button display more centrally on the mobile's screen. To do that we will add a blank inactive button above it. Start by downloading the free pfodDesignerV2 (V2.0.2082+) Android app.

Designing the On/Off Slider button

Having install the pfodDesignerV2 app, open it and choose “Start new Menu”



From this screen, scroll down a little and you can Change the Menu name, I changed the menu name to “Inline Power Switch”

Then choose “Add Menu Item” and from that screen choose “Output On/Off or Pulse”. That will add a new slider menu item and open its editing screen.



Edit this slider to change the Leading Text to
Extension Power Is and add a return at the end of the text so that the On/Off will appear on the next line.
Edit the Low text to
Off and edit the High text to On
Scroll down and change the Connected pin to “Connect to D5” since this code will be loaded onto an Olimex-EVB board which has an on board relay driven by output D5.
Set the font size to +6, this gives a big button to press. Pressing anywhere in the button will toggle the power from On to Off or visa versa.
Set the font colour to White and the background colour to Black.

Now you can test the button by clicking on its preview at the top of the screen. As you click anywhere in the button the slider goes from On to Off and back again.

Changing the Background Colour for ON

While the button works, it would be nice to have a more visual indication of when the power was switch on. This will be done by editing generated code, see below, so that the menu update sets the background red, <bg r> when the output is ON
See the pfodSpecification.pdf for all the available formatting.

Setting the prompt

That is it for the the on/off button design. Go back to the menu editing screen and select “Preview Menu” to see what the menu will look like on your mobile. You can click anywhere in the slider button to test turning it On and Off.

Go back and Edit prompt to “Extension Cord Inline Power Switch” with font size +2 and font colour black and background silver. Then previewing the menu again shows

Adding a Blank Spacer

To position the On/Off button more centrally on your mobile's screen, you can add a blank spacer above it. Go back to the Editing screen and choose Add Menu Item, scroll down and select Label. That adds a new label to the menu and opens it's editing screen. Edit the text to delete the default “Label” text and also make the font bigger, +7.



If you go back to the preview screen there is an invisible spacer below the On/Off button. To move this up above the On/Off button go back to the menu Editing screen and scroll down to find the “Move Items Up/Down”



Click on the “Move Items Up/Down button to show the two menu items

Click the blank (Label) button to select it and the move to screen is displayed.

Select the Extension Power is item to move the blank spacer to that position. i.e. Make the space the first item in the menu. The updated move to screen is then displayed and you can use the back button to go back menu Editing screen and select Preview Menu again.

This shows the On Off button moved towards the centre of the screen. You can adjust the font size of the blank spacer to make the spacer larger or smaller as you wish. You can also add newlines to expand the spacer. On the preview screen you can check that clicking in the spacer does nothing while the clicking in the on/off button changes the Power from On to Off and changes the background colour.

Setting the Menu Auto Refresh Interval

By default, pfodApp only requests the menu when you open it or send a command. However sometimes you what the menu to refresh at a regular interval in order to display any status changes on the remote pfodDevice. In the case of the Inline Power Switch, the generated sketch is going to be modified to add a manual push button input to turn the power on and off from the device. So in order to display this local manual override on the remote pfodApp, pfodApp needs to regularly re-request the menu to display the current setting, On or Off.

To set the refresh interval go back to the Editing screen and set the Menu Refresh Interval to 1sec. as shown below.




Generating the Code for ESP8266 devices

Once your menu design is complete, you can generate the Arduino sketch that will display this menu on pfodApp and allow you to turn D5 on and off from the on/off button.

From the Editing menu screen and select Generate Code. Click on the Change Target button change the selection.



and select ESP8266 Wifi connection as the target device and then choose the (only) option, ESP8266 programmed via Arduino IDE option



Then go back to the Generate Code Menu Screen



Then click on Write Code to file to generate and write the sketch suitable for ESP based devices. In this case an Olimex-EVB board with a built-in relay controlled by D5



As shown in the screen shot, the generated code is written to a file on your mobile
/pfodAppRawData/pfodDesignerV2.txt You need to transfer this file to your computer to program your device using the Arduion IDE. I use a WiFi File Transfer app to do the transfer. The generated sketch is here.

To compile this sketch you will need to install two libraries, pfodParser.zip and pfodESP8266BufferedClient.zip , from pfod Parser Libraries page Then follow the instructions on Code Generator for OLIMEX ESP8266-EVB to install the ESP8266 board support for Arduino V1.6.8 and program the OLIMEX-EVB board.

Changing the Background Colour for ON implemented

As generated the code will display the menu on your Android mobile and switch the OLIMEX relay on and off as you click the button. As noted above we would like the button's background to be updated to RED when the power switch is on. To do that we need to modify the code that sends the main menu and the update.

Here are the two methods the need to be modified

void sendMainMenu() {
  // !! Remember to change the parser version string
  //    every time you edit this method
  parser.print(F("{,"));  // start a Menu screen pfod message
  // send menu background, format, prompt, refresh and version
  parser.print(F("<bg w><+2><bk>~Extension Cord Inline Power Switch`1000"));
  parser.sendVersion(); // send the menu version 
  // send menu items
  parser.print(F("|!B<+7>"));
  parser.print(F("~"));
  parser.print(F("|A<bg bk><+6><w>"));
  parser.print('`');
  parser.print(cmd_A_var); // output the current state 0 Low or 1 High 
  parser.print(F("~Extension Power is\n~~Off\\On~"));
 // Note the \\ inside the "'s to send \ ... 
  parser.print(F("}"));  // close pfod message
}

void sendMainMenuUpdate() {
  parser.print(F("{;"));  // start an Update Menu pfod message
  // send menu items
  parser.print(F("|A"));
  parser.print('`');
  parser.print(cmd_A_var); // output the current state 0 Low or 1 High 
  parser.print(F("}"));  // close pfod message
  // ============ end of menu ===========
}


When the cmd_A_var is 1 we want to add <bg r> after the |A command to set the background to red when the switch is on. The revised methods are:-

void sendMainMenu() {
  // !! Remember to change the parser version string
  //    every time you edit this method
  parser.print(F("{,"));  // start a Menu screen pfod message
  // send menu background, format, prompt, refresh and version
  parser.print(F("<bg w><+2><bk>~Extension Cord Inline Power Switch`1000"));
  parser.sendVersion(); // send the menu version 
  // send menu items
  parser.print(F("|!B<+7>"));
  parser.print(F("~"));
  parser.print(F("|A"));
  if (cmd_A_var == 1) {
    parser.print(F("<bg r>")); // red if on
  } else {
    parser.print(F("<bg bk>")); // black if off
  }
  parser.print(F("<+6><w>"));
  parser.print('`');
  parser.print(cmd_A_var); // output the current state 0 Low or 1 High 
  parser.print(F("~Extension Power is\n~~Off\\On~"));
 // Note the \\ inside the "'s to send \ ... 
  parser.print(F("}"));  // close pfod message
}

void sendMainMenuUpdate() {
  parser.print(F("{;"));  // start an Update Menu pfod message
  // send menu items
  parser.print(F("|A"));
  if (cmd_A_var == 1) {
    parser.print(F("<bg r>")); // red if on
  } else {
    parser.print(F("<bg bk>")); // black if off
  }
  parser.print('`');
  parser.print(cmd_A_var); // output the current state 0 Low or 1 High 
  parser.print(F("}"));  // close pfod message
  // ============ end of menu ===========
}


Finally change the version number at the top of the sketch so the pfodApp knows to its cached menu is not the current one. Here I have just added 'm' for modified to the current version. The pfodDesignerV2 automatically updates the version number each time it generates the code.

pfodSecurity parser("V3m"); // create a parser to handle the pfod messages

The completed modified sketch is here, InlinePowerSwitch.ino

With these modifications the button background changes to red when the switch is ON

Conclusion

This tutorial showed you how to use pfodDesignerV2 to add a blank spacer to a menu, how to set an auto refresh interval to regularly update the menu with the latest device status and how to modify the generated code to change the background colour with the switch state. The example used was the design of a menu for OLIMEX-EVB ESP8266 based board which will used for the InlineWiFiPowerSwitch. The InlineWiFiPowerSwitch page will show show the hardware is constructed and how this generated code is modified to add a push button input and to add a web page config to set your network parameters.



pfodDesignerV2TM is a trademark of Forward Computing and Control Pty. Ltd.
Android
TM 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.


Forward home page link (image)

Contact Forward Computing and Control by
©Copyright 1996-2020 Forward Computing and Control Pty. Ltd. ACN 003 669 994