|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 24th July 2025 (originally posted 24th July
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
pfodWeb is a free web based version of the paid Android app,
pfodApp. pfodWeb implements a significant subset of pfodApp's
capabilities that is interactive dwgs.
Your micro serves all the
necessary code to run the web page controls. No third party or
internet access is needed.
Introductory
Tutorial – Covers setting up the pfodWeb
Designer local server and install the pfodWeb support on an ESP32. A
simple press button example illustrates touchZone and
touchAction.
Reuse Controls with insertDwg –
This one. Covers copying dwgs and using insertDwg to insert multiple
copies into the main drawing.
touchActions
for Instant Feedback – Covers
using touchActions to give instant feedback in a slider
control.
more tutorials will follow
This is the second tutorial on using pfodWebDesigner to create
interactive and responsive GUI for pfodApp and the free, open source,
pfodWeb.
This tutorial will cover making copies of an existing
control and inserting multiple controls into a single, main, drawing,
handling the commands sent and updating the GUI with the current
state.
Your micro serves all the necessary code to run the web
page controls. No third party js libraries or internet access is
needed.
pfodWeb is free and open source. If you want to support this work,
purchase the Android pfodApp
which will work with the same code developed here and which provides
more features such as charting and data logging.
See the free
pfodDesigner
Android app for creating menus and charts for pfodApp.
See the Introductory Tutorial for the parts list and the Installation instructions. Physical parts consist of just an ESP32 board, e.g. Dfrobot ESP32 board.
This tutorial builds on the previous one, but you can start here by loading this file, LedOnOff.json, into pfodWeb designer.
Having loaded the LedOnOff drawing, click Copy to make a
copy. Call it LedOn. Then Edit LedOn and change the
Label text to Turn Led On
Go
back to the control panel and make another copy called LedOff
and edit it to have a White
text, Turn Led Off,
on a Black rectangle.
Note that the labels still need to be indexed even though they will not be updated AND they needs to be below the indexed rectangle in the list of each drawing's items.
This is because indexed items are layered (drawn) in order of their numeric index which is assigned by pfodParser in the order the item is processed for sending to pfodApp/pfodWeb. Higher indices go on top.
The rectangle needs to be indexed so it has a reference for updating when 'touched'. If you un-index the label or move it above the rectangle, it will be completely covered and will not be visible.
Items without Use
Index ticked are drawn first in
the order they are received. That is in the order they appear in the
list of item. Then indexed items are drawn in index order. That is in
the order they appear in the list.
The index name under Use
Index is the name of the code
variable that holds the numeric index. Changing that name has no
effect on the actual numeric index assigned.
Create a new drawing called TwoButtons. Size 40 x 15, Silver (light Grey, Color 7) background and 5sec refresh.
Open it in Edit
and Add New Item and
choose Insert Drawing.
From
the drop down list of loaded drawings choose LedOn
Note: The background color of the LedOn dwg is ignored. Only its drawing items are added. Any refresh interval set on an inserted drawing is also ignored. The refresh interval of the main drawing is used.
By default when you insert a drawing each drawing item of the inserted drawing occupies its original position and size. So inserting a drawing with a rectangle 18 x 7 at position (25,12.5) in a drawing that is only 40 x 15, will clip the inserted rectangle.
When the main drawing is being processed for display, the drawing items of each inserted drawing are merged into the final list of drawing items. Un-indexed items of the inserted drawing are inserted in the position (order) the inserted drawing in found in the main drawing list of items. Later un-indexed item can overlay (cover) earlier ones.
The indexed items of the inserted drawing are added in their index order. pfodParser assigns unique numeric indices to each pfodAutoIdx indexed item it servers in the order it is served. For drawings with inserted drawings, the main drawing is completely served first and then the inserted drawings are requested by pfodWeb, in the order they occurred in the main drawing.
This means the auto generated numeric indices of all inserted drawing will be higher than, and can overlay, any indexed item in the main drawing and the indexed items of later inserted drawings will be higher, and can overlay, any indexed item of earlier inserted drawings.
You can adjust this by changing the order of the inserted drawings, or by manually setting your one numeric indices, instead of using the generated pfodAutoIdx variables.
You can reposition the inserted
drawing by using its X and Y zero settings. These set the Column,Row
value of the inserted drawing that is positioned at (0,0) in the main
drawing.
Increasing the X,Y moves the inserted drawing to the left
and up. Negative and floating point numbers are accepted. Try
changing the values and see how the inserted drawing
re-positions.
Reset them to 0,0 and click Add Item.
As you can see from above, the
inserted drawing is the wrong size and in the wrong position. The
pushZero command changes the position and scale for all
following drawing items, until a matching popZero is
found.
pushZero commands can be nested so you can use them
in the main and inserted drawings.
Click Add New Item again and add a pushZero item and click Add Item to accept it. Then in the Item List click the up arrow for the pushZero to move it above the insertDwg.
Then click on Edit in the pushZero row to edit it in its new position. Set the scale factor to 0.5 and adjust the X, Y to position the inserted LedOn drawing.
Click Update Item
to save the changes.
Insert the second LedOff drawing. You can either add a
popZero and another pushZero, or it is easier just add
another pushZero which will inherit the 0.5 scaling and Y
translation that currently in effect.
This will keep the LedOff
drawing with the same scale and Y position as the LedOn drawing.
Position the new pushZero above the LedOff inserted drawing and set its X translation to 33 to position the LedOff to the right of the LedOn dwg.
Add two popZeros to restore the original (0,0) position and scaling of 1.0 and add an indexed label to the main drawing to show the current state of the Led on or off. It is indexed because the label will be updated with the current led state.
Remember you can use floating point numbers for the X,Y positions to put the label just where you want it.
To back to the Control Panel. You can also view the final design
from there.
Then click the Arduino Export button to
generate the Arduino code.
That Arduino code zip file,
Dwg_TwoButtons.zip,
also includes the json files the all the drawings so you can reload
them for later editing.
Get a clean copy of pfod_ESP32 save it as TwoButtons and unzip the Dwg_TwoButtons.zip to that directory and compile and upload to your ESP32. That will display the basic display on either pfodApp or pfodWeb.
The sketch needs code to turn the board led on and off as the buttons are clicked and to update the “Led is Off” text to reflect the current led state. The final code is in TwoButtons.zip
In the TwoButtons.ino file, add the methods to turn the led on and off. These are copied from the LedOnOff example in the previous tutorial.
int ledPin = BUILTIN_LED; //D9 on Dfrobot FireBeetle 2 ESP32-E
bool ledOn = false;
void setLedOn() {
pinMode(ledPin,OUTPUT);
digitalWrite(ledPin,HIGH);
ledOn = true;
}
void setLedOff() {
pinMode(ledPin,OUTPUT);
digitalWrite(ledPin,LOW);
ledOn = false;
}
void toggleLed() {
if (ledOn) {
setLedOff();
} else {
setLedOn();
}
}
In Dwg_TwoButtons.cpp file update the sendIndexedItems() to
reflect the current state of the led.
Add an extern bool
ledOn; to the top of the file to access the current led state
from TwoButtons.ino
extern bool ledOn;
. . .
void Dwg_TwoButtons::sendIndexedItems() {
if (ledOn) {
dwgsPtr->label().idx(idx_1).color(dwgsPtr->RED).text("Led is On").bold().offset(20,11.5).center().decimals(2).send();
} else { // off
dwgsPtr->label().idx(idx_1).color(dwgsPtr->BLACK).text("Led is Off").bold().offset(20,11.5).center().decimals(2).send();
}
}Next add the command handling to Dwg_LedOff.cpp and Dwg_LedOn.cpp
In the Dwg_LedOff.cpp file add
extern void setLedOff();
to access the method in the TwoButtons.ino file and in the bool Dwg_LedOff::processDwgCmds() method add setLedOff(); and comment out sendUpdate(); and return true;
bool Dwg_LedOff::processDwgCmds() {
// byte dwgCmd = parserPtr->parseDwgCmd(); // pfodParse calls this automagically before calling this method
if (!(*(parserPtr->getDwgCmd()))) { // ==> getDwgCmd returned pointer to empty string
return false; // not dwg cmd, not handled
}
if (parserPtr->dwgCmdEquals(cmd_c1)) { // handle touchZone cmd_c1
setLedOff(); // add your cmd handling code here
//sendUpdate(); // don't send update from here
//return true; // don't mark this command as being handled
}
// Serial.print("dwgCmd did not match:");Serial.println(cmd_c1);
return false; // not handled
}
Do a similar change for
Dwg_LedOn::processDwgCmds(),
using setLedOn().
When the Turn Led Off or Turn Led On button is pressed, the pfodParser first passes the command to each registered drawing for it to process. In this case Dwg_LedOff::processDwgCmds() will match the the Turn Led Off button command and set the Led off. But returning false, from processDwgCmds() allows the command to propagate up to the top level of the parser processing in pfodMainMenu.cpp
There the processing for menu item A, which holds the main drawing, will call send MainMenuUpdate which reload the main dwg with the updated Led state.
The debug output from pfodMainMenu.cpp is
touchZone cmd c3 at (8,4) touch type:TOUCHEDThe result is the animated GUI at the top of this page. As you select the button it immediately changes color and sends a command to the ESP32 to change LED state. When the ESP32 responds, its message sets the buttons new color and the new text.
After the first design you may want to revise the GUI's colors, size, position etc. After you generate the new Arduino code zip file, use a file comparison tool like Beyond Compare to transfer the GUI changes to your project without disturbing the command processing code you have added.
This page covered using insertDwg to re-use controls. It also
covered using pushZero / popZero to change the scaling and the (0,0)
of following drawing items.
The example used was TwoButtons, shown
at the top of the page.
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-2024 Forward Computing and Control Pty. Ltd.
ACN 003 669 994