pfodWeb
A Web page version of pfodApp

by Matthew Ford 17th August 2025 (originally posted 17th July 2025)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.

How Design Interactive Web pages
served from your Micro
using pfodWeb

Tutorial List

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

Introduction

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 pfodWebDesigner 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 pfodWebDesigner.

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.

Background – Why pfodWeb?

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.

Support pfodWeb

pfodWeb and pfodWebDesigner are 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.
Also see the free pfodDesigner Android app for creating menus and charts for pfodApp.

Parts List

For pfod Device to serve your GUI (.js served from your micro)
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 pfod Device to serve your GUI via pfodWeb server (.js files hosted on your computer)
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.
node,js from https://nodejs.org/

For the pfodWeb Designer
node,js from https://nodejs.org/
pfodWebDesigner.zip

Installation

Installation of the pfodWebDesigner

Installing node.js

The web based pfodWebDesigner uses nodejs to provide the local server for the graphical 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 pfodWebDesigner 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 pfodWebDesigner. See the batch file terminal log for the IP to use if accessing the designer from another machine on the network.

Installing the pfodWeb server on an ESP32

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.

Installing ESP32 Sketch Data Upload

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)

From there you can choose either the normal or debug version of pfodWeb, which will display the web interface that you have designed.

Installing the pfodWeb server on your computer

If your microprocessor does not have a convenient file system that can hold the 460kB of pfodWeb files, you can host the files on your computer instead and use nodejs to serve them.

Copy the data sub-directory from the sketch to a convenient location on your computer.
Install nodejs as described above and then run the pfodWebServer.bat (or pfodWebServer.sh) file to load the extra npm packages and start the pfodWebServer on your computer.
The pfodWebServer url is http://localhost:8080

Then at the top of the Arduino .ino sketch set the pfodWebServerURL to point to the pfodWebServer url (comment out the following line which sets an empty url )

const char pfodWebServerURL[] = "http://localhost:8080"; //this url serves the .js and .html page, the device handles the pfod messages via http (not https)

Upload the sketch to your ESP32 and browse to its IP, for example if the ESP32 Arduino monitor shows
Connected! IP address: 10.1.1.100
then enter http://10.1.1.100 in your computer's web browser. The ESP32 will then redirect back to the pfodWebServer running on your computer and display the pfodWebServer's welcome page will the IP already filled in

You can also just open http://localhost:8080 in your browser and fill in the ESP32's IP address directly.

Programming the ESP32 pfodWeb Server with your GUI

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_HelloWorld.zip.

Open the pfodWeb_ESP32 example sketch (in the pfodWeb_ESP32 library) OR unzip the pfodWeb_ESP32.zip example to the Arduino sketch directory to get the empty framework to add the drawing files to the frame work.
Save the sketch as HelloWorld and CLOSE the HelloWorld sketch window. (Arduino does not detect file changes on disk, so you need close, add files, and re-open the sketch)
Then unzip Dwg_HelloWorld.zip to the HelloWorld sketch directory to install the designed GUI.
Set your network's SSID and password and
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)

Using pfodWeb Designer to Create GUI's

Hello World Example

This simple example will open the HelloWorld dwg and edit it. Go to the directory where you install pfodWebDesigner and run the pfodWebDesigner.bat (or pfodWebDesigner.sh) which checks the npm installation and starts the local server.
The server starts on port 3000 on the computer's IP.

> start
> node server.js
Server running on http://localhost: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 drawing edit screen

From here you can change the size of the canvas, the background colour, the auto refresh interval and add and edit drawing 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 drawing.
When you are finished go back to the Control Panel from which you can export Arduino code to update your HelloWorld sketch.

The completed sketch is in HelloWorld.zip

Saving Drawings

With Auto Save On you don't need to explicitly save the drawing, as each edit will save a new version of the drawing. However this can generate a lot of versions of the drawing file.
If you toggle Auto Save Off you can use the Save buttons to save the latest drawing edits.

In any case when you use Arduino Export to generate Arduino code, the current drawing is also exported in the json subdirectory of the generated code.

Use the pfodWeb_ESP32 sketch framework.

Load the pfodWeb_ESP32 example sketch OR unzip pfodWeb_ESP32.zip to your Arduino Sketch directory and then save the sketch as HelloWorld and close the Arduino sketch window.
Then unzip the Dwg_HellowWorld.zip, file generated by pfodWeb Designer's Arduino Export button, into the HelloWorld sketch directory. That generated code contains the drawiing classes and in the json sub-directory are the json files of the drawings which you can reload into pfodWebDesigner to modify the dwg later.

At the top of the Arduino .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 sketch into your ESP32. This sketch will start a web server in the ESP32 to serve pfodWeb webpages and also start a TCP server on port 4989 to serve the pfodApp Android app with the same drawing.

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 Arduino .ino sketch.

Open your browser and enter the ESP32's IP, e.g. http://10.1.1.100 to server the welcome screen from which you can choose either pfodWeb or pfodWebDebug.
You can also go directly to the pfod Drawing by using http://10.1.1.100/pfodWeb

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 pfod drawing items.

Using the pfodWebServer

As covered in the Installation above, there are two ways to server the pfodWeb supporting .js and .html files. The stand alone method loads all the files into the ESP32's LittleFS file system and serves them from there. This stand alone method removes all external/third party dependencies and will run on a completely isolated / non-internet connected network.

The second alternative uses a computer hosted pfodWebServer to server the .js and .html files. Install node.js on your computer and copy the data subdirectory to your computer and run the pfodWebServer.bat (or pfodWebServer.sh) to complete the installation and start the pfodWebServer. The pfodWebServer starts on http://localhost:8080 This method requires an internet connection initially to complete installation but can useful if your microprocessor does not have a convenient way of hosting and serving the 460kB so .js and .html files needed for pfodWeb.

Open http://localhost:8080 in your browser, enter the IP address of your ESP32 and open pfodWeb or pfodWebDebug. The pfodWebServer will then connect to your ESP32 and request the drawing data to display.

You can also edit the top of the Arduino .ino sketch to set

const char pfodWebServerURL[] = "http://localhost:8080";

With this setting, you can enter the ESP32's IP directly into the browser, e.g. http://10.1.1.100 and the ESP32 will redirect to the local host pfodWebServer welcome page with its IP pre-loaded.
You can also go directly to pfod drawing using http://localhost:8080/pfodWeb.html?targetIP=10.1.1.100 where the targetIP argument, lets the pfodWebServer know where to request the pfod drawing data from.

Hello World Counter Example

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 pfodWebDesigner, 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 (maps) 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. Value needs to be set to display the Units.
Set the Decimals as 0 and Alignment as Center. Position the text using the X and Y Position settings.

X and Y positions (and sizes) can be floating point numbers for precise positioning.
Font Size is relative to the webpage / screen size. Increasing the number by 6 doubles the font size, decreasing by 6 (e.g. -6) halves it. The pfodParser trancates Font Size to an int.

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.

The default color is BLACK_WHITE, which ever gives the best contrast, choose Color if you want to specify a particular color for the text.

Click Add Item to go back to the Edit Drawing Items page.

Note about BLACK_WHITE color

By default each new item is assigned the color BLACK_WHITE. That setting lets pfodApp and pfodWeb select either Black or White which ever gives the best contrast against the drawings background color. This setting is particularly useful to keep text visible when that drawing is inserted into another drawing. Inserted drawings do not bring their background color with them, only their drawing items, which are merged with the main drawing. See the Reusing Controls with InsertDwg tutorial for more details.

Auto-Refresh

An auto-refresh interval can be set on the main drawing. Refresh intervals set on inserted drawings are ignored.

Setting a refresh interval on the main drawing causes it and any inserted dwgs to be re-requested at that interval. The pfodWebDesigner specifies the refresh in seconds. The pfod Arduino 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 example sketch, save it as HelloWorldCounter, close the sketch and 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 pfod drawing data refresh from the ESP32.

Added the loopCounter code

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 HelloWorldCounter.zip

LedOnOff

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 and color 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.

A note about canvas dimensions.

You can choose any convenient dimensions from 1 to 255 for the width and height. The final GUI (drawing) will scale to fit the pfodWeb page / pfodApp screen. It is only the ratio of the width to the height that is important.
Later tutorials will cover choosing particular dimensions to set the mouse position resolution in touchZones.

Edit the drawing 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.
Also note that when adding the button text, it will be hidden by the button until Use Index is selected. Un-indexed items are drawn first and then indexed items in their listed order.

Add a touchZone over the button. The dotted outline indicates the touchZone. This outline will not be visible in pfodWeb / pfodApp. However pfodWebDebug and the Designer will display its 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, but without rounded corners. 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
Starting with a clean copy of the pfodWeb_ESP32 example sketch, save it as LedOnOff, close the sketch and unzip the Dwg_LedOnOff.zip to that sketch directory.
Compiling and uploading will display the LedOnOff dwg in pfodWeb. Clicking the button will change its color to Grey while the button is held down and restore it when the button is released.

Modifying the Code to Turn the Led On/Off

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

and add code to toggle the led state when the button press is detected

bool Dwg_LedOnOff::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
     parserPtr->printDwgCmdReceived(&Serial); // does nothing if passed NULL
    // add your cmd handling code here
    toggleLed();
    sendUpdate();
    return true;
  }
  return false; // not handled
}

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, LedOnOff.zip

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();
  }
}

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.

Conclusion

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.

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.

pfodWeb A Web page version of pfodApp

How Design Interactive Web pagesserved from your Microusing pfodWeb