Complex GUI's using pfodGUIDesigner App and InsertDwg

by Matthew Ford 23rd October 2023 (originally posted 23rd October 2023)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.

This page covers using the free pfodGUIdesigner Andriod app to design complex GUI's built up from individual GUI components.
For the basics of using pfodGUIdesigner see this tutorial.

There are two approaches:-
1) Design a menu using pfodDesignerV3 and add a dwg, which you then modify to add other dwg components.
2) Design an almost empty dwg using pfodGUIdesigner and then add other dwg components.

In both cases the other dwg components are designed using pfodGUIdesigner which generate class files for that drawing.

As an example this tutorial will create a GUI that holds a number of Temperature setpoints.

First design the dwg component you want to display. In this case a GUI component that lets you enter a temperature setpoint.
Follow the tutorial video on creating an ActionInput to create the Setpoint.ino file that holds the class Setpoint.

Break the Setpoint.ino file up into the Setpoint.h and Setpoint.cpp files that define the Setpoint class.
In this tutorial, multiple instances of the Setpoint class will be added to the main drawing, one for each setpoint needed.

Next the main drawing needs to be created.

Design a menu using pfodDesignerV3

The first method is to use pfodDesignerV3 to add a dwg to a menu.

Create a new menu. Choose the target, in this case WiFi via ESP32. Set the prompt and add a Drawing menu item.

Generate the code and save to MenuWithDwg.ino in an Arduino Sketch dir called MenuWithDwg.
Copy the Setpoint.h and Setpoint.cpp files to the same directory and then open the MenuWithDwg.ino in the Arduino IDE.

Delete these lines in MenuWithDwg.ino. (near line 38)

// pfodDwgControls.zip V1.0+ contains pfodDwgControls.h includes DesignerSwitch.h
#include <pfodDwgControls.h>

and these (near the top around line 68)

DesignerSwitch switch_z('a',&dwgs); // an example switch for drawing z
// Commands for drawing controls only need to unique per drawing, you can re-use cmd 'a' in another drawing.

and at the bottom of setup(), delete

  // <<<<<<<<< Your extra setup code goes here
  switch_z.setLabel(F("Label"));

and in the loop() remove the

} else if ('A' == cmd)

code block.

In void sendDrawing_z0() { remove

switch_z.draw();  // button drawn

In void sendDrawingUpdates_z() { remove

switch_z.update();  // update existing button with current state

This removes content of the dwg and its processing.
Add you network SSID and password and set a static IP and you can now compile and connect with pfodApp to display an empty dwg.

Adding the multiple setpoints

Add

#include "Setpoint.h"

at the top of the .ino file and create two instances of the Setpoint class underneath

pfodDwgs dwgs(&parser);  // drawing support
Setpoint setpoint1(&parser,&dwgs);
Setpoint setpoint2(&parser,&dwgs);

As well as creating instances of these components, the construction also assigns them unique commands and registers them with the parser.

Note: If you have these Setpoint creations in a separate file from the pfodParse instance you may get a runtime error when trying to create the Setpoint class due the initialization order of the file not having created the parser first. To fix this issue add a default constructor for Setpoint i.e.

Setpoint::Setpoint() {
   forceReload = true; // force reload on reboot, e.g. reprogrammed
}

and then in an initialization method called from setup() add the parser and dwgs references with

setpoint1.setParserDwgs(&parser, &dwgs);

To display them add them to sendDrawing_z0(), positioned appropiately in the dwg

void sendDrawing_z0() {
  dwgs.start(50, 30, dwgs.WHITE, true); //true means more to come,  background defaults to WHITE if omitted i.e. dwgs.start(50,30);
  parser.sendRefreshAndVersion(0); // send the parser version to cache this image, no auto-refresh
  dwgs.pushZero(25, 5, 1.0f); // scale by 1.0f,  scale defaults to 1.0f if omitted, i.e. pushZero(25,5);
  dwgs.insertDwg().loadCmd(setpoint1).send();
  dwgs.popZero();
  dwgs.pushZero(25, 15, 1.0f); // scale by 1.0f,  scale defaults to 1.0f if omitted, i.e. pushZero(25,15);
  dwgs.insertDwg().loadCmd(setpoint2).send();
  dwgs.popZero();
  dwgs.end();
}

Now when you run the code and enter some numbers into the two setpoints, the monitor displays

 Got pfodAutoCmd:_touchZone_cmd_6
     touchZone cmd c2 at (2,0) touch type:TOUCHED
     Edited text '33'
 Got pfodAutoCmd:_touchZone_cmd_6
     touchZone cmd c4 at (2,0) touch type:TOUCHED
     Edited text '0/'

Each Setpoint instance has its own unique command, c2 and c4 and the parser automatically passes the message to bool Setpoint::processDwgCmds() for processing.

To actually capture and update the setpoint you need to pickup the edited Text from the message and parses it to a float and update a local variable to be then displayed in the update. The tutorial sections following creating an ActionInput cover these points.

The completed code is in MenuWithDwg.zip

Design an almost empty dwg using pfodGUIdesigner

Using pfodGUIdesigner, create a dwg with just a circle on it and then generate the code a your target. In this case ESP32 via WiFi. pfodGUIdesigner.txt contains the generated code.

Split pfodGUIdesigner.txt up into three files GUI_Dwg.ino, MainDwg.h and MainDwg.cpp.
Discard the MainDwg.h and MainDwg.cpp and put GUI_Dwg.ino in the Arduino sketch dir GUI_Dwg and add the (modified) Setpoint.h and Setpoint.cpp files from MenuWithDwg.zip above.

Add your network's SSID and password and set a static IP and load onto an ESP32 board. You can then connect with pfodApp to display a dwg with a circle in it.

Adding the multiple setpoints

In GUI_Dwg.ino, add

#include "Setpoint.h"

at the top of the .ino file and create two instances of the Setpoint class underneath

pfodDwgs dwgs(&parser);  // drawing support
Setpoint setpoint1(&parser,&dwgs);
Setpoint setpoint2(&parser,&dwgs);

remove

#ifndef MAINDWG_H
#include "MainDwg.h"
#endif
MainDwg _maindwg(&parser,&dwgs);  // create dwg object and add to parser processing

and replace sendMainDwg() with

bool sendMainDwg() {
  dwgs.start(50, 50, dwgs.WHITE, false); 
  parser.sendRefreshAndVersion(0); //need to set a version number for image refresh to work!! 
  dwgs.pushZero(25, 5, 1.0f); // scale by 1.0f,  scale defaults to 1.0f if omitted, i.e. pushZero(25,5);
  dwgs.insertDwg().loadCmd(setpoint1).send();
  dwgs.popZero();
  dwgs.pushZero(25, 15, 1.0f); // scale by 1.0f,  scale defaults to 1.0f if omitted, i.e. pushZero(25,15);
  dwgs.insertDwg().loadCmd(setpoint2).send();
  dwgs.popZero();
  dwgs.end();
  return true;
}

Note: The current version of pfodApp does not display dwgs inserted in inserted dwgs. That is if you insert the Setpoints in the MainDwg, replacing the circle, they will not be displayed.

The final code is GUI_Dwg.zip which displays

Conclusion

This tutorial covered how to add multiple GUI components that were designed with the free pfodGUIdesigner Android app for GUI designer to a blank drawing.

The general purpose pfodApp on an Android moble was used as the display interface. The designer lets you create your own GUI components with a drawing program and basic drawing elements and touchZones and touchActions. The generated code for each designed component gives a separate class for that component that can then be combined, positioned and scaled, to give the final Graphical User Interface to control your Arduino project from an Android mobile with pfodApp.

The touchZones provide 'hot' areas on the screen that send commands when the user touches them. The touchActions provide immediate feed back to the user that 'hot' area has been triggered. touchActionInputs provide a text input dialog box with configurable prompt and default text.

The final GUI design is very compact and needs less then 1K of memory and a few hundred bytes of ram to run and so can be run on wide variety of Arduino boards from Uno (with a communication shield) up. The communication between your Arduino board and pfodApp can be via either WiFi or Bluetooth or BLE or SMS. The free pfodDesignerV3 app for Android generates the basic connection sketch for may other boards and communication shields.

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.

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