|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 4th October 2025 (originally posted 24th July
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
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.
pfodWebDesigner is a free web based replacement for the free Android app, pfodGUIdesigner. pfodWebDesigner allows you to design interactive and responsive user interfaces for your microprocessor. pfodWebDesigner generates Arduino code that works with all pfodDevices that connect via Bluetooth, BLE, SMS and WiFi, not just those that have WiFi support. See how to install pfodWebDesigner in the previous tutorial. Individual pfodWebDesigner controls are stored as JSON files which you can duplicate, modify and reuse in other designs. Each reused control can be individually scaled and positioned in the final design.
pfodWeb is a free web based partial replacement for the paid Android app, pfodApp. pfodWeb runs in a browser and connects via http. ESP32, ESP8266 and Raspberry Pi Pico W microprocessors are supported. pfodWeb provides interactive and responsive web browser controls built with pfodWebDesigner. pfodWeb is a set of less than 200K of zipped javascript and html files that run in your browser and connect to your microprocessor, render the interface design and send the commands as the user interacts with it. The actual messages exchanged are tiny compared to a typical web page.
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.
TouchActionInput
for text/number entry – Covers
using touchActionInput to input text / numbers to your micro
Building
Reusable Controls – Covers building a re-usable popup help
button component.
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 or ESP2866 or Pi PicoW 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.
Each drawing you insert into the main drawing has to be unique, so you need to make copies, with different names, if you want to insert multiple instances of essentially the same drawing, e.g. a button
Having loaded the LedOnOff drawing into pfodWebDesigner, 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 need 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, TwoButtons, 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) 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. Un-indexed items that occur later 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 own 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 for the all the drawings so you can
reload them for later editing.
Open the pfodParser example sketch, pfodWeb_HelloWorld and
save the sketch as TwoButtons
Unzip the Dwg_TwoButtons.zip
to that TwoButtons sketch
directory.
That updates the pfodMainDrawing files and adds the new
Dwg_TwoButtons files. You can delete the unsed Dwg_HelloWorld files
if you wish.
Edit TwoButtons.ino to set your network's ssid and
password.
Remember to set the Flash Size to support the LittleFS
file system and to upload the data.
Compile and upload to
your microprocessor. 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 (which also handles ESP8266 reverse led logic)
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.
// initialize digital pin for the LED const int ledPin = LED_BUILTIN; bool ledIsOn = false; bool highIsOn = true; // these fns called from the button code void turnLedOff() { digitalWrite(ledPin, LOW); ledIsOn = false; } void turnLedOn() { digitalWrite(ledPin, HIGH); ledIsOn = true; } bool isLedOn() { return ledIsOn; }
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 and use
that method to send the appropriate update for the label
extern bool isLedOn(); . . . void Dwg_TwoButtons::sendIndexedItems() { if (isLedOn()) { dwgsPtr->label().idx(idx_1).color(dwgsPtr->RED).text("Led is On").bold().offset(20, 11.5).center().decimals(2).send(); } else { 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 turnLedOff();
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() {
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
// add your cmd handling code here
turnLedOff();
return false; // let the pfodMainMenu send a full drawing update to update the lable
}
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 flashes and sends a command to the microprocessor to change LED state. When the microprocessor responds, its message sets the label text and color.
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