|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 24th August 2025 (originally posted 4th August
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
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 – 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 – Covers copying dwgs
and using insertDwg to insert multiple copies into the main
drawing.
touchActions for Instant Feedback –
This one. Covers using touchActions to give instant feedback in a
slider control.
more tutorials will follow
This is the third tutorial on using pfodWeb Designer to create
interactive and responsive GUI for pfodApp and the free, open source,
pfodWeb.
This tutorial will cover touchActions in more detail and
how the message they send includes the x,y point. It also covers
using that data to give uses instant feedback of mouse position on a
slider position without having to wait for the pfodDevice to respond.
Your micro serves all the necessary code to run the web page
controls. No third party js libraries or internet access is needed.
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 board, e.g. Dfrobot ESP32 board.
This tutorial creates a simple slider, shown above, which allows the user to touch or drag the slider and see what value will be set before the msg is sent to the microprocessor (pfodDevice). It will also cover the touchZone messages in more detail and how to extract the position in the touchZone that the user touched and the use of BLACK_WHITE for item color.
Open pfodWeb and create a new drawing. You can reuse this drawing later in other GUI's by using insertDwg to add it as was covered in the previous tutorial, Reuse Controls with insertDwg
Create a dwg called Slider with dimensions 110 x 40 and
background color 12 (BLUE).
This dwg will have multiple items
added so start with a pushZero xOffset 5, yOffset 0, scale 1,
to reposition the (0,0) for the following items.
Add a white
filled rectangle 100 x 5 xOffset 0, yOffset 16
Add a red
filled rectangle 10 x 5 xOffset 0, yOffset 16 and Use
Index. This will be updated by your Arduino code to show the
current slider position.
Add a touchZone 100 x 5 xOffset 0, yOffset 16 with touch filter: DOWN_DRAG_UP.
The touchZone with filter DOWN_DRAG_UP will respond to mouse down and drag but only send one message on mouse UP. The message sent will contain the main drawing load command, the touchZone cmd, the mouse location in touchZone co-ordinates and filter setting that triggered the message.
e.g. the pfodWebDesigner terminal window will show,
cmd="{pfodWeb~cmd_c2`47`3`256}”
where (47,3) is
the x,y position in the touchZone and 256 is the filter value for
DOWN_DRAG_UP.
In your Arduino code, the pfodParser automatically parses these commands and makes the values available via the methods, getTouchedX() and getTouchedY() and getTouchType(). There are also utility methods like isTouch(), isDrag(), isUp() etc.
The touchZone mouse co-ordinates start at (0,0) top left hand corner of the touchZone and extend to (width,height) at the bottom right hand corner. These are independent of the position and scaling of the touchZone in the final drawing. That is this touchZone (100 x 5) will always return a mouse x position between 0 and 100 regardless of how the slider is scaled and positioned when inserted in the main drawing.
These mouse co-ordinates are always integers, which simplifies your Arduino code, so the mouse resolution depends on the size of the touchZone. While the maximum size of a dwg ins 255 x 255, the touchZone can be much larger and then scaled down to display on the dwg. This makes the maximum resolution for the mouse position only limited by the screen pixels.
In practice, the touchZone should be sized for a relatively coarse resolution so that the user does not have to exercise fine mouse control to make a selection. For this slider a touchZone width of 100 allows for 1% slider settings.
Each touchZone is automatically enlarged slightly so that
i) a
mouse click near the edge of a button or slider will still trigger it
and
ii) so that very small touchZones will still have a clickable
size.
This enlargement does not depend on the touchZone's scaled dimensions but is set by the current screen size and does not effect the mouse position returned by the touchZone which is always limited to the touchZone's Width and Height. If touchZones overlap, a best fit algorithm is used to determine which one is triggered. There is also, an advanced, priority setting that can be used to force one touchZone to take precedence over another. See the pfodSpecification.pfd for the details.
Go back to the control panel and use the Arduino Export to export the Slider dwg to Arduino code. The result is Dwg_Slider.zip (see Dwg_BasicSlider.zip). Save a clean copy of the example sketch pfodWeb_ESP32 as Slider and unzip the Dwg_Slider code to that sketch directory.
Edit the Dwg_Slider.cpp file to add a variable
int colOffset = 0;
And edit processDwgCmds() to pick up the column number returned in the touchZone mouse up message
bool Dwg_Slider::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
colOffset = parserPtr->getTouchedCol(); // another name for getTouchedX()
sendUpdate();
return true;
}
return false; // not handled
}
Finally, edit the sendIndexedItems() method to use the column
position to set the length of the RED rectangle in the Slider
drawing.
void Dwg_Slider::sendIndexedItems() {
dwgsPtr->rectangle().filled().idx(idx_1).color(dwgsPtr->RED).size(colOffset,5).offset(0,16).send();
}
The completed sketch is in BasicSlider.zip
Set the network settings and upload the code (and the data
directory to the LittleFS file system) to your ESP32 and open pfodWeb
(or pfodApp) to display the basic slider.
Note that nothing
updates until you release the mouse button. There are no touchActions
specified so noting changes as you drag the mouse in the touchZone.
The basic slider only updates the red rectangle when the
pfodDevice (ESP32) responds to the mouse UP msg. The special values
COL and ROW when used in touchActions are replaced with the touchZone
column and row values of where the mouse is. Note: these are values
are the same as sent in the touch message and are integers in the
touchZone co-ordinates.
This section of the tutorial will add
touch actions use COL to show where along the slider the mouse is and
what % that will set the slider to when the mouse UP send the touch
msg. These update happen in the drawing itself and do not require any
messages to or from the ESP32.
Open the basic Slider dwg (SliderBasic.json)
in the pfodWeb Designer for Editing.
Before editing the touchZone
actions, via the Show Details button, two index place holders
need to be added which the touchActions can update with the position
indicator and % value.
Using on Add New Item and add two Index Placeholder items. These index items capture the current pushZero settings so that when they are replaced by the touchActions the touchActions have the correct (0,0) location and scale.
Then click on the touchZone Show Details button to expose the Add touchZoneInput and Add touchAction buttons.
Click on the Add touchAction button and then on the next page click on the Add touchAction Item button
Holding down the idx_1 rectangle Show button will hide the red rectangle so you can check which item the touchAction will replace. Index items are not visible so they do not have a Show button.
Click the Replace on Touch button for idx_2 to open the Add touchAction Item page. Clicking in the touchZone will trigger it (depending on the filter setting) and replace idx_2 with the default line item.
Edit the Line item to change the X Offset to COL (Touch
Column) and the Y Offset to 16 and the X to 0 and Y
to -7 and color 15 (WHITE), so that when the touchZone is
triggered, a line from (col,16) to (col+0,16-7) will be drawn to
replace idx_2
Move the mouse down in the touchZone to test the
result, as shown below. The white line only appears when the mouse is
down in the touchZone and moves left and right with the mouse.
Otherwise the dwg reverts to the invisible idx_2
Add Item to accept this touchAction.
On the touchActions Items page, click Add touchAction Item again to and select Replace on Touch for idx_3 to add a touchAction for that index.
Click the drop down list of items and choose Value. Choose
COL for the X Position and 7 for the Y Position and
Alignment Center and Color 15 (WHITE)
Mouse down in the
touchZone will show the white line and now the text Value: 0.50
To show the current mouse
position on the slider, in the Value Scaling Parameters
choose COL for the Integer
Value and set the Display Max to
100 and Decimals to
0
Set the Units to
% and delete the Value:
text from the Prefix
Text: Then when you mouse down
and drag in the touchZone you will see the current % setting
Add Item to accept these edits
Finally, Accept Changes to add these touchActions to the touchZone.
Go back to the Control Panel and export the Arduino code with the
Arduino Export button to produce Dwg_Slider.zip
Update the Slider sketch with
this code while keeping the colOffset code
that was added previously.
You can also add another Value
Item to the dwg below the slider to
display the current setting.
The complete code including the
Slider % label is in Slider.zip
and is shown in the animated GIF at the top of this page
This page covered using touchActions to give the user immediate feedback. It covered more detail the message that a touchZone sends when triggered. The message includes the x,y point in touchZone co-ordinates which do not change with the position and scaling of the touchZone in the final drawing.
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