|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 26th July 2025 (originally posted 17th July
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
pfodWeb is still under development. Not every thing works as it should. 26rd July 2025
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 – This one. 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.
Reusing
Controls with InsertDwg – 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 introductory tutorial will cover installing the web based
pfodWeb Designer local server and setting up the ESP32 to server
pfodApp and pfodWeb clients.
The companion pfodWeb Designer web
app allows you to create your own interactive and responsive GUI's
and then export the Arduino code that will serve them to pfodApp or
pfodWeb.
You have complete control over the size, color, position
and function of the controls you design using pfodWeb Designer.
There will be three (3) introductory examples.
Hello World, a
simple dwg displaying a text label.
Hello World Counter, a dwg
with auto refresh and updates.
LedOnOff, a on/off button to
control the ESP32 led. Shown a the top of this page. This example has
an interactive/updateable button that responds instantly to mouse
touches and updates with the current led state.
pfodApp has been in development for 15 years. First as a J2ME
application and since 2012 as an paid Android app.
The javascript
web based pfodWeb was development for two reasons.
1) to provide
a Apple IOS compatible version of pfodApp and
2) to provide a
version of pfodApp that was not subject to Google's yearly forced
updates, which provide no functional change, but are required in
order to work with the latest versions of Android.
The current release of pfodWeb concentrates on rendering pfod drawings which provide support flexible and interactive GUIs. Support for other pfodApp features is planned.
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.
For pfod Device to serve your GUI
FireBeetle
2 ESP32-E US$8.90 or other ESP32 board
Arduino IDE
(V1.8.19+)
ESP32 Board support V3.0.7
Libraries
(libraries.zip) –
All the necessary libraries display your GUI on Android via (paid)
pfodApp or on a web page via (free) pfodWeb.
esp32fs.jar from
https://github.com/me-no-dev/arduino-esp32fs-plugin
– to
install web pages and .js file to support pfodWeb
For
the pfodWeb Designer
node,js
from https://nodejs.org/
pfodWebDesigner.zip
Installing node.js
The Web based pfod GUI designer uses nodejs to provide the local
server for the graphical webpage designer.
First install node,js
from https://nodejs.org/ Click on
Get Node.js and scroll down to the prebuild node.js packages.
Choose
the package that matches your OS and CPU.
(For windows use the
.msi installer as the .zip file does not install npm correctly.)
On Windows, run the .msi installation package to install and setup node.js
Installing pfodWeb Designer Server
Having installed node.js, download the pfodWebDesigner.zip
file and un-zip it to a convenient directory.
Go to that
directory and run the pfodWebDesigner.bat (or
pfodWebDesigner.sh) to finish the installation of the express
and express-session modules and to start the local server.
The
server starts on port 3000 on the computer's IP.
You can use
http://localhost:3000 to open
the pfodWeb Designer. See the batch file terminal log for the IP to
use is accessing from another machine on the network.
Rename your existing Arduino libraries directory to libraries_org
for example and unzip the libraries.zip
file to your Arduino sketch directory to install all the libraries
needed to support pfodWeb_ESP32
Unzip pfodWeb_ESP32.zip
to your Arduino sketch directory to create the pfodWeb frame work for
an ESP32 board.
The pfodWeb server sketch needs a number of html and .js files uploaded into the ESP32's LittleFS file system. These files are in the data subdirectory of the pfodWeb_ESP32 sketch directory. With these data files uploaded to the ESP32 no internet connection is needed to display GUI on a webpage. To upload the date directory the ESP32 Sketch Data Upload tool needs to be installed.
Install esp32fs.jar file as described on
https://github.com/me-no-dev/arduino-esp32fs-plugin
Close
and restart the Arduino IDE.
Then with the Arduino monitor closed (not open). Choose from the tools menu ESP32 Sketch Data Upload to upload the files. This only needs to be done once. The same file are used for all dwgs (and board types)
Having designed your GUI, as described below, use the Arduino
Export button on the pfodWeb Designer webpage to create a zip
file containing the files implementing your GUI design.
For
example Dwg_HellowWorld.zip.
Unzip this file to the pfodWeb_ESP32 sketch directory to add the
drawing files to the frame work.
Then compile and upload the
sketch to your ESP32.
Open the Arduino Serial monitor to see what IP address of the
ESP32 is. Then open a web browser and connect to that IP via http://
(NOT https)
For example if the monitor shows
WiFi setup -- Connecting to . . . Connected! IP address: 10.1.1.11
then open the webpage http://10.1.1.11 which will show the welcome page. Or you can go directly to your GUI via http://10.1.1.11/pfodWeb
http://10.1.1.11/pfodWeb shows your GUI.
http://10.1.1.11/pfodWebDebug
shows the same GUI with javascript debug output enabled and with
touchZones visible (see below)
To see the debug msgs open
the web page console (see How
to Open the Developer Console in different Browsers)
This simple example will open the HelloWorld dwg and edit it. Go
to the pfodWebDesigner directory and run the pfodWebDesigner.bat
(or pfodWebDesigner.sh) which checks the installation and
starts the local server.
The server starts on port 3000 on the
computer's IP. See the batch file terminal log for the IP used. In
this case the IP allocated is 10.1.1.6
> start > node server.js Server running on http://localhost:3000 To access from other devices on your network, use: http://10.1.1.6:3000
Opening http://localhost:3000 show the welcome screen
Clicking on the Control Panel Button shows the designer's main screen.
Unzip the Dwg_HellowWorld.zip to a convenient directory and load the json file HelloWorld.json
You can then view, edit, copy, etc. or export the dwg as a Arduino Code, which generated the Dwg_HelloWorld.zip file above.
Choosing Edit show the dwg edit screen
From here you can change the size of the canvas, the background colour, the auto refresh interval and add and edit dwg items.
Try editing and adding new items. The drawing preview will update
as you make changes. Cancel if you don't want the changes and you can
always reload the original dwg.
When you are finished go back to
the Control Panel from which you can export Arduino code to drop into
the pfodWeb_ESP32 sketch.
Unzip pfodWeb_ESP32.zip
to your Arduino Sketch directory.
Then unzip the
Dwg_HellowWorld.zip,
file generated by pfodWeb Designer's Arduino Export button,
into the pfodWeb_ESP32 sketch directory. That generated code contains
the dwg classes and in the json sub-directory the json files of the
dwgs which you can reload into pfodWeb later to modify the dwg.
At the top of the pfodWeb_ESP32.ino file, set your network's SSID and password.
Having loaded the data files in to the ESP32, as described above, compile and load the pfodWeb_ESP32 sketch into your ESP32. This sketch will start a web server in the ESP32 to serve pfodWeb webpages and a TCP server on port 4989 to serve the pfodApp Android app with the same dwg.
When you start the ESP32, check the Arduino monitor for the IP that has been assigned to it, or preferably set a fixed IP at the top of the pfodWeb_ESP32.ino sketch
Here are the side by side results for Hello World on the Android pfodApp and the web base pfodWeb
See the pfodSpecification.pdf, page 42 onwards, for all the details of drawing items.
This example will modify the Hello World to add a loop counter and a 5sec auto-refresh which will request the current value every 5 seconds and display it.
Open pfodWeb Designer, load the HelloWorld.json
file and then Copy to make a copy called HelloWorldCounter.
Click on Edit to open the dwg editor.
Then click Add
New Item
From the Item Type
drop down list select Label
Label lets you send a leading
and trailing text with an embedded floating point number for display.
Value is similar but
accepts integers and transforms them for display.
Set the Text as Count: with a trailing
space and set the Units as loops with a leading space. Set the
initial Value as 0.
Set the Decimals as 0 and Alignment as Center.
Position the text using the X and Y Position settings.
Most Important. Tick the Use Index button. Only indexed drawing items can be updated. The index is the unique reference to the item. In this case the Count label.
Click Add Item to go back to the Edit Drawing Items page.
An auto-refresh interval can be set on the main drawing. Refresh intervals set on inserted dwgs are ignored.
Setting a refresh interval on the main
drawing causes it and any inserted dwgs to be re-requested at that
interval. The pfodWeb Designer specifies the refresh in seconds. The
pfod code uses ms.
To set the refresh interval, click Edit Canvas
Properties and set 5 sec refresh
and Save Changes and go back to Control Panel and use the Arduino Export button to generate the updated code, Dwg_HelloWorldCounter.zip
Starting with a clean copy of
the pfodWeb_ESP32 sketch (from pfodWeb_ESP32.zip),
unzip the Dwg_HelloWorldCounter.zip
to that sketch directory.
Compiling and uploading will display the
edited dwg in pfodWeb.
If you choose the pfodWebDebug
link to display the drawing in debug mode and then open the webpage
console (see How
to Open the Developer Console in different Browsers)
you will
the console output update every 5 seconds as the drawing refreshes.
This is not a browser page refresh, just a drawing refresh.
To add the real loop counter, in pfodWeb_ESP32.ino add a loopCounter variable and increment it each loop
size_t loopCounter = 0;
void loop(void) {
ESP32_handle_pfodWebServer();
ESP32_handle_pfodAppServer();
loopCounter++;
}and in the Dwg_HelloWorldCounter.cpp file, add an extern reference to the counter and set it as the value( ) instead of sending 0 in sendIndexedItems()
extern size_t loopCounter;
void Dwg_HelloWorldCounter::sendIndexedItems() {
dwgsPtr->label().idx(idx_1).color(dwgsPtr->WHITE).text("Count: ").offset(25,31).center().units(" loops").decimals(0).value(loopCounter).send();
}Then when you upload this code you will see the display update every 5sec with the current loop counter value. The completed sketch is in pfodWeb_ESP32_HelloWorldCounter.zip
The LedOnOff example creates a new drawing and adds a button to turn the ESP32's led on and off. It uses a touchZone to make part of the web page responsive to mouse actions and adds a touchAction which is triggered immediately the mouse action is detected to indicate the button has been clicked. The dwg update changes the button's text to indicate the current state of the led, on or off.
Open the pfodWeb Designer and Create Drawing , 50 x 25 Blue with a 4 second refresh.
You can choose any convenient dimensions from 1 to 255 for the
width and height. The final GUI will scale to fit the pfodWeb page.
Here it is only the ratio of the width to the height that is
important.
Later tutorials will cover choosing particular
dimensions for touchZones.
Edit the dwg to add a rectangle for the button and some text indicating the Led's state, on or off.
Important: Note that both the button rectangle and the label have Use Index ticked, as they will be updated both when the button is clicked and when the led state is updated.
Add a touchZone over the button. The dotted outline indicates the touchZone. This outline will not be visible in pfodWeb. However pfodWebDebug and the Designer will display it outline.
Now you will add touchActions that will trigger immediately the mouse triggers the touchZone. Click on the touchZone's Show Details button
Then click on Add touchAction and then on Add
touchAction Item
Clicking on the Show buttons will hide the respective dwg item so you can check what item you are replacing.
Replace the Green rectangle with a GREY one in the same position
and the same size, or slightly smaller. Mouse on the touchZone in the
preview to check the result.
Go back to the Control Panel and
choose View to see what the button will look like and how it will
respond to the mouse action.
When you are satisfied with your design, export the Arduino code.
Dwg_LedOnOff.zip
Unzip to a the files to a clean pfodWeb_ESP32 sketch.
In the bool Dwg_LedOnOff::processDwgCmds() method uncomment the line
parserPtr->printDwgCmdReceived(&Serial);
to see the commands sent when the button is pressed
touchZone cmd c2 at (5,4) touch type:TOUCHED
Add the code to turn the led on and off and to keep track of its state to send back to pfodWeb on updates. See the complete code, pfodWeb_ESP32_LedOnOff.zip
The sendIndexedItems() which is called by both sendFullDrawing() and sendUpdate() is edited to update the button color and text, based on the current led state
void Dwg_LedOnOff::sendIndexedItems() {
if (ledOn) {
dwgsPtr->rectangle().filled().centered().rounded().idx(idx_1).color(dwgsPtr->LIME).size(18,7).offset(25,12).send();
dwgsPtr->label().idx(idx_2).color(dwgsPtr->RED).text("Led is On").bold().offset(25,12).center().decimals(2).send();
} else { // led off black button white label
dwgsPtr->rectangle().filled().centered().rounded().idx(idx_1).color(dwgsPtr->BLACK).size(18,7).offset(25,12).send();
dwgsPtr->label().idx(idx_2).color(dwgsPtr->WHITE).text("Led is Off").bold().offset(25,12).center().decimals(2).send();
}
}The 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. When the ESP32 responds, its message sets the button's new color and the new text.
This page covered installing the pfodWeb Designer local server and
using the pfodWeb_ESP32 library to enable an ESP32 board to send
interactive GUI's to the pfodWeb browser page and pfodApp.
It
included three simple examples, Hello World, Hello World Counter
which displayed the current loop count and LedOnOff which used a
touchZone and touchAction to control the ESP32 onboard led.
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