|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb and pfodWebDesigner
|
by Matthew Ford 4th October 2025 (originally posted 17th July
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
9th September 2025 – V1.1.3 of pfodWebDesigner.zip now includes all the necessary npm packages to avoid downloading possibly compromised packages. pfodWebServer.zip V1.1.3 now also includes all the necessary npm packages for hosting pfodWeb on your computer. pfodWeb served from your microprocessor does not use nodejs or any NPM packages. See How Safe is pfodWeb, pfodWebServer and pfodWebDesigner below for the details
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 and Using pfodWeb Designer to Create GUI's below. 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 webpage.
There are two ways to run pfodWeb
depending on where the javascript and html files are hosted, either
on your microprocessor or locally on your computer :-
pfodWeb
support files hosted on your microprocessor – When
hosted in your microprocessor's file system and served from there, no
third part code needs to be download and no internet access is
needed. This is a completely stand alone solution.
pfodWeb
support files hosted on your computer – When
the support files are hosted on your computer, the microprocessor
does not need a file system. node,js
is used start a web server to serve
the files, only the small pfod message are sent to and from your
microprocessor.
Install Arduino IDE V2 – For Windows, use the "Windows ZIP" or plain "Windows" executable (EXE) downloaded direct from https://arduino.cc. and allow it to install any device drivers it suggests.
Install the latest pfodParser and SafeString libraries from the library manager OR unzip the libraries.zip to your Arduino libraries dir
Plug in your board (ESP32, ESP8266, Pi PicoW) and check that the File → Examples → Blink example loads and runs. Note: Arduino IDE V2 is slow to open the File menu and sometimes does not show the examples.
Set the File System size to hold the .html / .js files. For ESP32 choose a Partition Scheme: >150KB SPIFFS, for ESP8266 choose a Flash Size: with FS: >200KB, for Pi PicoW/2W choose a Flash Size: with FS: >150KB
Load the File → Examples → ASCIITable example and check that your board outputs to the Serial Monitor.
Install the data upload add-on from arduino-littlefs-upload This handles uploading the .html / .js data to ESP32, ESP8266 or Pi PicoW
Open the File → Examples → pfodParser → pfodWeb_LedOnOff. If the examples do no show, try restarting the Arduino IDE. It data sub-directory contains the supporting .html / .js files for pfodWeb.
Close the Serial Monitor and press Ctrl+P to open the Arduino tools list. Type in upload LittleFS into the search bar to find the Upload LittleFS to Pico/ESP8266/ESP32 tool and click on that to upload the data directory of pfodWeb_LedOnOff. This only needs to be done once per board as the same files are used for all pfodWeb displays.
In pfodWeb_LedOnOff.ino, set your networks SSID and Password and upload the sketch to your board. Open the Serial Monitor as soon as the upload completes to see the IP assigned to your board on the network.
In
your web browser open http://theIPassignedToYourBoard
(e.g.
http://10.1.1.100 ) Note carefully
use http:// NOT https://
From the welcome page served by your
board, choose the pfodWeb link to show the web page that will turn
your led on and off.
If
the web page does not load, try the pfodWebDebug link and look in the
browser console for errors. see How
to Open the Developer Console in different Browsers.
You can
also open the pfodParser/src/ESP_PicoW_LittleFSsupport.cpp and
uncomment the #define DEBUG at the top of that file. That will print
out listing of the files in the microprocessor's file system.
In the json sub-directory of the pfodWeb_LedOnOff are the design files for the main drawing and the two included buttons, you can use pfodWebDesigner to modify these as you wish and re-generate the Arduino code that will display them. You need to merge any regenerated display code into the existing files which include the led control functions and message/color updates.
This example sketch as well as starting a web server on port 80, also starts a tcp/ip server on port 4989 that pfodApp can connect to to display the same control screen.
This introductory tutorial will cover installing the web based
pfodWeb files on a ESP32 / ESP8266 / Pi PicoW / Pi Pico2W 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.
The messages that create the GUI are very compact and can be served by any microprocessor that has a Bluetooth Classic, Bluetooth Low Energy (BLE) or WiFi connection. pfodWeb requires a microprocessor with WiFi connection and capable web server support
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 microprocessor serves all the
necessary code to run the web page controls. No third party files or
internet access is needed.
Introductory Tutorial –
This one. Covers setting up the pfodWeb Designer local server and
install the pfodWeb support on ESP32 / ESP8266 / Pi PicoW. 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.
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.
pfodApp
has been in development for 15 years.
First as a J2ME application and since 2012 as an paid Android
app.
This javascript web based, pfodWeb, provides a browser based
version of pfodApp that can be run on any modern computer or mobile
(including Apple IPhones)
The current release of pfodWeb concentrates on rendering pfod drawings which provide support flexible and interactive GUIs. Support for other pfodApp features is planned.
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 board led. Shown at 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.
The two button example, pfodWeb_LedOnOff, will be covered in a later tutorial, Reusing Controls with InsertDwg.
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.
For pfod Device to serve your GUI (.js
served from your micro)
FireBeetle
2 ESP32-E US$8.90 or Beetle
ESP32 C3 US$7.90 or other ESP32 board
Adafruit
Feather HUZZAH ESP8266 US$14.95 or other ESP8266 board
Pi
PicoW US$4.95 or Pi
Pico2W US$7.00
Arduino
IDE V2 (V2.3.6)
ESP32
board support V3.3.0 OR ESP8266
board support V3.1.2 OR Pi
Pico board support V5.1.0
Libraries (libraries.zip)
– All the necessary libraries display your GUI on Android via
(paid) pfodApp
or on a web page via (free) pfodWeb.
data
upload add-on arduino-littlefs-upload
For pfod Device to serve your GUI via
pfodWebServer (.js files hosted on your computer)
One
of the boards listed above and the compiler support.
node,js from
https://nodejs.org/
pfodWebServer.zip
For
the pfodWeb Designer
node,js
from https://nodejs.org/
pfodWebDesigner.zip
To server the .html / .js files from your microprocessor's file system, see the above Quick Start. In this mode no third party packages are downloaded and no internet access is required. See How Safe is pfodWeb, pfodWebServer and pfodWebDesigner below
The files in the data sub-directory are all zipped (.gz) The unzipped source files and the batch files to zip them up are in pfodParser library in the pfodWeb_data_src sub-directory
If your microprocessor does not have a convenient file system that can hold the pfodWeb files, you can host the files on your computer instead and use nodejs to serve them.
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
Unzip pfodWebServer.zip to convenient location on your computer. To avoid the possibility of downloading compromised NPM packages, all necessary packages are including in the pfodWebServer.zip file. See How Safe is pfodWeb, pfodWebServer and pfodWebDesigner below
Run the pfodWebServer.bat (or pfodWebServer.sh)
file to start the pfodWebServer on your computer. No additional npm
packages are loaded or updated.
The pfodWebServer url is
http://localhost:8080
Then at the top of the pfoWeb_LedOnOff.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 microprocessor and browse to its IP, for example
if the Arduino monitor shows
Connected!
IP address: 10.1.1.100
then
enter http://10.1.1.100 in your
computer's web browser. The microprocessor will then redirect back to
the pfodWebServer running on your computer and display the
pfodWebServer's welcome page will the IP already filled in
Choose either the normal pfodWeb or the debug version pfodWebDebug to display the Led controls. To see the debug msgs open the web page console (see How to Open the Developer Console in different Browsers)
You can also just open http://localhost:8080 in your browser and fill in the microprocessor's IP address directly.
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. To
avoid the possibility of downloading compromised
NPM packages, all necessary packages are including in the
pfodWebDesigner.zip
file. See How Safe is pfodWeb, pfodWebServer and
pfodWebDesigner below
Go to that directory and run the
pfodWebDesigner.bat (or pfodWebDesigner.sh) to start
the local server. No additional npm packages are loaded or
updated.
The server starts on port 3000 on the computer's IP.
Open a web browser and enter the URL 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.
This section covers starting pfodWebDesigner, loading an existing design, editing it and exporting the Arduino code that implements it.
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
starts the local server.
The server starts on port 3000.
> 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 pfod_HelloWorld.zip to a convenient directory and from the json directory, load the json file HelloWorld.json
You can then view, edit, copy, etc. or export the dwg as a Arduino Code, which generates the Dwg_HelloWorld.zip file.
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 file
Dwg_HelloWorld.zip
to update your pfod_HelloWorld files sketch.
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.
The pfodParser library V3.64.1+ includes the pfodWeb_HelloWorld (.zip) example. This example consists of the main sketch, pfodWeb_HelloWorld.ino, the pfodMainMenu (.cpp/.h), the pfodMainDrawing (.cpp/.h) and drawing (Dwg_xxx) files the main drawing needs. The .ino sketch file handles setting up the connection, either WiFi, BLE or Classic Bluetooth, depending on your board. The pfodMainMenu handles serving the main pfod menu in response to the {.} request. In this pfodWeb framework, the main menu consists of just a drawing, the mainDwg. The pfodWeb or pfodApp then request the main drawing and any inserted drawings to finally display the user interface.
When you modify your drawing, or design a completely new one, you only need to replace/update the pfodMainDrawing and the drawing Dwg_xxx files. The main sketch .ino and the pfodMainMenu remain unchanged.
The pfodWeb_HelloWorld and pfodWeb_LedOnOff examples in the pfodParser library will compile under ESP32, ESP32C3 (and others), ESP8266, Pi PicoW and Pi Pico2W boards without change so you can save either of those sketches under a new name to start your own user interface design. After exporting your design, unzip the Dwg_xxx.zip file to the sketch directory to overwrite the pfodMainDrawing and Dwg_xxx files with your new files.
Currently pfodWeb only supports displaying a pfod menu with just one drawing item. However pfodApp supports a much wider range of menu items, sub-menus, charts, data logging, etc. See the free Android app, pfodDesignerV3, for how to generate more elaborate menus and sub-menus.
When you have finished editing the HelloWorld drawing and used Arduino Export to export the Dwg_HelloWorld.zip file, open the pfodParser example sketch pfodWeb_HelloWorld (.zip here) and unzip the modfied Dwg_HelloWorld.zip files to the pfodWeb_HelloWorld sketch directory to update the drawing. Remember to set the Flash Size to support the LittleFS file system and to upload the data.
Then at the top of the Arduino pfodWeb_HelloWorld.ino file, set your network's SSID and password and compile and upload the sketch to your ESP32 / ESP8266 / Pi PicoW microprocessor. Open the Serial Monitor as soon as the upload completes to see what IP the network assigned to your microprocessor.
Without loading any data files, you can set up a connection from pfodApp to that IP using port:4989 (see pfodAppForAndroidGettingStarted.pdf). Connecting will display your modified drawing.
To display the drawing using the free pfodWeb, you need to
configure the microprocessor to provide space for the data files.
From the Arduino IDE tools menu, set the File System size to hold
the .html / .js files.
For ESP32 choose a Partition Scheme:
512KB SPIFFS,
For ESP8266 choose a Flash Size: with FS:
1024KB,
For Pi PicoW/2W choose a Flash Size: with FS:
512KB
Then re-compile and upload the sketch with this changed Flash Size
and the close the Serial Monitor and press
Ctrl+P to open the Arduino tools list. Type in upload
LittleFS into
the search bar to find the Upload
LittleFS to Pico/ESP8266/ESP32 tool
and click on that to upload the data
directory
of pfodWeb_HelloWorld to your microprocessor.
This only needs to
be done once per board as the same files are used for all pfodWeb
displays.
In your web browser open http://theIPassignedToYourBoard (e.g. http://10.1.1.100 ) Note carefully use http:// NOT https:// From the welcome page served by your board, choose the pfodWeb link to show the Hello World web page
You can also go directly to the pfod drawing by using http://theIPassignedToYourBoard/pfodWeb url.
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.
As covered in the Installation above, there are two ways to serve the pfodWeb supporting .js and .html files. The stand alone method loads all the files into your microprocessor'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. This method is useful if your microprocessor does not have sufficient LittleFS file space to host the 500 to 550KB of .js and .html files needed for pfodWeb. See the Installing the pfodWebServer on your computer section above for how to install and run the pfodWebServer on your computer.
After starting the pfodWebServer, open http://localhost:8080 in your browser, enter the IP address assigned to your microprocessor (see the Serial Monitor startup msgs) and choose either pfodWeb or pfodWebDebug. The pfodWebServer will then connect to your microprocessor to request the main menu and subsequently the drawing data to display. All the .html / .js files are served by your computer, your microprocessor only sends the small pfod messages needed to define the GUI.
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 your microprocessor's IP directly into the browser, e.g. http://10.1.1.100 and the your microprocessor will redirect to http://localhost:8080?targetIP=10.1.1.100 to open the pfodWebServer welcome page with the IP pre-loaded. You can also go directly to pfod drawing using the url http://localhost:8080/pfodWeb.html?targetIP=10.1.1.100 where the targetIP argument informs the pfodWebServer where to request the pfod main menu and drawing data from.
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 an
integer and is relative to the webpage / screen size. Increasing the
number by 6 doubles the font size, decreasing by 6 (e.g. -6) halves
it.
Most Important. Tick the Use Index button. Only indexed drawing items can be updated. The index is the variable name holding 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.
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 drawing's 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.
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.
Save Changes and go back to Control Panel and use the Arduino Export button to generate the updated code, Dwg_HelloWorldCounter.zip
Open the pfodParser example
sketch, pfodWeb_HelloWorld, in the Arduino IDE and save it as
HelloWorldCounter.
Unzip the Dwg_HelloWorldCounter.zip
to that sketch directory.
That updates the pfodMainDrawing files
and adds the new Dwg_HelloWorldCouter files. You can delete the unsed
Dwg_HelloWorld files if you wish.
Note:
Arduino IDE V2 is slow to open the File menu and sometimes does not
show the examples. If the examples don't show try quiting and
restating the IDE
Remember
to set the Flash Size to support the LittleFS file system and to
upload the data.
Set your network's ssid and password. Then
compiling and upload the code to display the edited dwg in pfodWeb.
If you choose the pfodWebDebug
link to display the drawing in debug mode and then open the web page
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 your miccroprocessor.
To add the real loop counter, in pfodWeb_HelloWorldCounter.ino add a loopCounter variable and increment it each loop
size_t loopCounter = 0; void loop(void) { handle_pfodAppServer(); handle_pfodWebServer(); 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->BLACK_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
The LedOnOff example creates a new drawing and adds a button to turn the microprocessor'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 drawing update changes the button's text and color to indicate the current state of the led, on or off.
Start by saving opening the the pfodParser example pfodWeb_HelloWorld (.zip) sketch and saving it as LedOnOff Once you create your drawing you will update this sketch with the new drawing files.
Open the pfodWeb Designer and Create Drawing, called LedOnOff with dimensions 50 x 25, background color Blue (12) with a 4 second refresh.
You can choose any convenient dimensions from 1 to 255 for the
drawing width and height. When the drawing is displayed it will be
scaled 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.
Note: When adding
the label, after positioning it in the button rectangle, the label
will not be visible until Use Index is ticked. Un-indexed
items are drawn first and then overlaid by indexed items in their
listed order.
Important: Note that both the button rectangle and the label have Use Index ticked, as they will be both be updated 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 / pfodApp.
However pfodWebDesigner will display its outline.
If you choose
pfodWebDebug, or if you tick Log Debug data in the pfodApp connection
settings, then the touchZone will be displayed as a dotted 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 drawing item so you can check what item your touchAction will replace.
Replace the Green rectangle with a GREY one in the same position
and the same size, but without rounded corners. Mouse down on the
touchZone in the preview to check the result.
Add Item and Accept
Changes and 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
actions.
When you are satisfied with your design, export the Arduino code, Dwg_LedOnOff.zip
Open the pfodParser example
sketch, pfodWeb_HelloWorld, in the Arduino IDE and save the sketch as
LedOnOff. If you have
not already done so.
Unzip the Dwg_LedOnOff.zip
to that sketch directory.
That updates the pfodMainDrawing files
and adds the new Dwg_LedOnOff files. You can delete the unsed
Dwg_HelloWorld files if you wish.
Note:
Arduino IDE V2 is slow to open the File menu and sometimes does not
show the examples. If the examples don't show try quiting and
restating the IDE
Remember
to set the Flash Size to support the LittleFS file system and to
upload the data.
Set your network's ssid and password. Then
compile and upload the code to display the LedOnOff drawing in
pfodWeb. Clicking the button will flash its color to Grey until your
microprocessor responds to the touchZone msg.
The completed sketch files, with these modifications, are in LedOnOff.zip (which also handles ESP8266 reverse led logic)
To see the command the touchZone sends, uncomment
#define DEBUG
and in the bool Dwg_LedOnOff::processDwgCmds() method uncomment the line
parserPtr->printDwgCmdReceived(debugPtr); // does nothing if passed NULL
to see the commands sent when the button is pressed, either in pfodWeb or pfodApp
touchZone cmd c2 at (9,2) 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(debugPtr); // does nothing if passed NULL toggleLed(); // add your cmd handling code here 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.
// initialize digital pin for the LED
const int ledPin = LED_BUILTIN;
bool ledIsOn = false;
// these fns call from the button code
void turnLedOff() {
digitalWrite(ledPin, LOW);
ledIsOn = false;
}
void turnLedOn() {
digitalWrite(ledPin, HIGH);
ledIsOn = true;
}
bool isLedOn() {
return ledIsOn;
}
void toggleLed() {
if (ledIsOn) {
turnLedOff();
} else {
turnLedOn();
}
}
To initialize the ledPin add this code in the void Dwg_LedOnOff::init() {
void Dwg_LedOnOff::init() {
if (initialized) {
return;
}
pinMode(ledPin,OUTPUT);
turnLedOff();
. . .
Finally the sendIndexedItems() which is called by both
sendFullDrawing() and sendUpdate() needs to update the
button color and text, based on the current led state
void Dwg_LedOnOff::sendIndexedItems() { if (isLedOn()) { 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").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 On").offset(25,12).center().decimals(2).send(); } }
The result is the animated one button GUI at the top of this page. As you select the button it flashes a GREY color change and sends a command to your microprocessor to change the LED. When the microprocessor responds, its message sets the button's new color and the new text.
There have been a number of attacks on NPM packages recently, see Shai-Hulud malware campaign (local copy here) and NPM Supply Chain Attack (local copy here). None of the compromised packages are used by pfodWeb, pfodWebServer or pfodWebDesigner.
pfodWeb uses files served from your microprocessor and does not
use nodejs or any nodejs packages.
pfodWebServer serves files from
your computer and uses nodejs but pfodWebServer is supplied complete
with all necessary un-compromised packages. Only the debug package is
used here and the version supplied here is V4.4.1 which is prior to
the version compromised.
pfodWebDesigner serves files from your
computer and uses nodejs but pfodWebDesigner is supplied complete
with all necessary un-compromised packages. Only the debug package is
used here and the version supplied here is V4.4.1 which is prior to
the version compromised.
This page covered installing pfodWeb on ESP32 / ESP8266 / Pi PicoW
microprocessor and using their file system to serve the .html / .js
files.
It also covers installing the pfodWebDesigner server and
using pfodWebDesigner to design interactive GUI's that can be
displayed by either the pfodWeb browser page or pfodApp.
This tutorial included three simple examples, HelloWorld, HelloWorldCounter which displayed the current loop count and LedOnOff which used a touchZone and touchAction to control the ESP32 / ESP8266 / Pi PicoW 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