|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 11th August 2026 (originally posted
24th July 2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
This is the second tutorial on using
pfodWeb Dwg Designer to create interactive and responsive GUI for the
free, open source, pfodWeb.html and paid pfodApp.
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.html is a free web based replacement for the paid Android app, pfodApp. pfodWeb.html runs in any browser and connects to your Arduino board via either Serial, Classic Bluetooth, BLE, TCP/IP socket or HTTP. Using Serial you can connect to any Arduino board and display the interactive controls it serves. pfodWeb.html runs competely off-line. No internet connection is needed. See pfodWeb Quick Start for installation setup.
The interactive controls are
completely defined by the code (generated by pfodWeb Designer) in
your Arduino. Very compact pfod
messages are used to send the controls and receive the user's
commands.
If your Arduino board supports HTTP and has a file
system with 550Kb free, then
you can load the pfodWeb.html files onto your microprocessor and
serve them directly from there.
pfodWeb Dwg Designer is just another connection option in pfodWeb.html. It provides a free web based replacement for the free Android apps, pfodDesignerV3 and pfodGUIdesigner. PfodWeb's Designer allows you to design interactive and responsive user interfaces for your microprocessor. The Designer generates Arduino code that works with all pfodDevices that connect via Serial, Bluetooth, BLE, SMS and WiFi, not just those that have WiFi support. Individual pfodWeb Designer dwg 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.
Introductory
Tutorial – Covers
using pfodWeb to create a simple press button example that
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.
See the Introductory
Tutorial for the parts list and the Quick
Start instructions.
Arduino
Mega or higher recommended for these tutorials, although an Arduino
UNO will work for the examples on this page.
The complete source
code for pfodWeb.html is available in pfodWeb_src.zip
and on Github.
This drawing will hold two buttons, “Turn Led On” and Turn Led Off”, together with a text status showing the current Led state.
Start pfodWeb Dwg Designer. Create a new drawing called TwoButtons. Size 40 x 15, Silver (light Grey, Color 7) background and 5sec refresh.
This tutorial will use the previous tutorial button. If it is not still loaded in the Dwg Designer you can load it from this file, LedOnOff.pfodDwg_json, into Web Dwg Designer using Load Dwg
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 pfodWeb Dwg Designer,
click Copy icon twice
to make a two copies. Edit LedOnOff_1 and LedOnOff_2 drawing
properties to rename them LedOn and LedOff.
Having made the
copies you can remove the LedOnOff dwg using the X icon on the far
right. pfodWeb saves a copy of all deleted dwgs so you can reload
them later.
For the LedOn button, just edit the Label dwg item to “Turn
Led On”
For the LedOff button, edit the button rectangle to
make it Blank and change the label to White text, “Turn Led
Off”
Note that the labels in the buttons 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 Assign
Index checked are drawn
first in the order they are received. That is in the order they
appear in the list of items. Then indexed items are drawn in index
order. That is in the order they appear in the list.
The index
name under Assign 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.
Open the TwoButtons
drawing for edition. Click on Add
Item and choose insertDwg from
the drop down list of drawing items
From the drop down list of
loaded drawings choose LedOn and
click Add Item to insert that dwg into the TwoButtons drawing.
This list only show loaded dwgs not already inserted in TwoButtons.
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 centered on position (25,12.5) in a drawing that is only 40 x 15, will position it aligned on the bottom of the TwoButton dwg and slightly off center.
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, but that is usually not required or recommended
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.
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 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.75 and
adjust the X, Y to position the inserted LedOn drawing. (-8,-4)
Click
Save 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 25 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.
Add an indexed label item with the text “Led is On” in bold and centered, font size +3, offset (20,12)
To back to the Control Panel. You can also view the final design
from there.
Then click the Generate Code button to generate
the Arduino serial sketch, TwoButtons_serial.zip.
That
Arduino code zip file also includes the json files for the all the
drawings so you can reload them for later editing.
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
You don't need to use claude.ai to complete this code, it is
just convenient. To do it by hand just follow the LedControls
template for overriding.
If you use claude.ai, check the results.
Claude can be a bit dumb sometimes.
Unzip TwoButtons_serial.zip to your Arduino dir and open the TwoButtons_serial.ino and save as TwoButtons
The LedControls.cpp / .h files are reused from the previous tutorial. Here they will sub-class the Dwg_TwoButtons class, so edit them to replace Dwg_LedOnOff with Dwg_TwoButtons, Remove the Dwg_LedOnOff_cmd_c1() and update the get_Dwg_.. to
Dwg_TwoButtons& get_dwg_TwoButtons() {
return ledControls;
}
Each Dwg_LedOn and Dwg_LedOff also need to be sub-classed to handle the touchZone cmd. See the TwoButtons.zip for the updated class. In the subclasses the touchZone cmd handler to change the led state
// touchZone cmd_c1 of the LedOn dwg touched, turn the led on.
// row/col/touchType/editedText are not used, this touchZone is a plain button.
// Returns false, i.e. not handled here, so the touch propagates up to
// pfodMainMenu which sends the response. The text this touch changes,
// "Led is On"/"Led is Off", is in the enclosing TwoButtons dwg and NOT in this
// dwg, so updating only this dwg (sendUpdate() and return true) would leave
// that text showing the old state.
bool LedOn::Dwg_LedOn_cmd_c1(int row, int col, uint8_t touchType, const byte* editedText) {
(void)row; (void)col; (void)touchType; (void)editedText; // suppress warnings
ledControls.turnLedOn();
return false; // let pfodMainMenu send the response so the TwoButtons dwg is updated as well
}
Note: the Dwg_LedOn_cmd_c1() returns false which indicated no response has been sent for this cmd. The cmd is then passed up the
void pfodMainMenu::handle(pfodParser &parser)
for processing and to return a response.
Claude.ai implemented these code changes using the prompt
dir C:\ai\aicode\DwgCode\TwoButtons contain generated code for TwoButtons dwg. Modify the LedControls to subclass the override TwoButtons and add subclasses LedOn and LedOff for Dwg_LedOn and Dwg_LedOff to allow handling of touchZone cmd. dir C:\ai\aicode\DwgCode\pfodParser\src contains the source for the supporting Arduino library Do not access outside this directory C:\ai\aicode\DwgCode.
Providing the previous LedControl class and the pfodParser library gives claude.ai with the necessary context to complete the code.
Claude completed the modifications, putting all the extra code in the LedControls.cpp / .h file and returned this note
One design point worth flagging: both touch handlers return false rather than sendUpdate(); return true;. The label the buttons change (idx_1) lives in the enclosing TwoButtons dwg, not in the button dwg that received the touch, so the generated "only this dwg needs updating" shortcut doesn't apply here — returning false lets the touch fall through to pfodMainMenu, which sends the menu update that refreshes TwoButtons.
The code produced by claude.ai correctly identified that the Led statue label was not part of the inserted button dwgs and so after setting the Led on or off passed the command backup to the main menu to handle. There the default handling is to sendMainMenuUpdate which updates the entire drawing to the lastest state.
} else if (parser.cmdEquals(dwgMenuItem_Cmd)) { // user touch not responded to by dwg, handle it here sendMainMenuUpdate(parser); // always send back a pfod msg otherwise pfodApp will disconnect. }
This is the best way to isolate the inserted button dwg from the rest of the dwg. In pfodWeb / pfodApp, the main menu update triggers a request to update the TwoButtons dwg that the menu holds. That TwoButtons dwg update in turn triggers requests to update all the inserted dwgs. This results in four cmd / response pairs that do a complete update. To can see these messages in the Raw Message Viewer. The 5sec refresh also does this complete update every 5 seconds.
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