|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
pfodWeb
|
by Matthew Ford 22nd October 2025 (originally posted 4th August
2025)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
This is the third tutorial on using pfodWeb Web Designer to create
interactive and responsive GUI for pfodApp and the free, open source,
pfodWeb.html.
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.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
pfodWebDesigner Tutorial – Covers
using pfodWeb to create a simple press button example that
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.
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.
The complete source code for
pfodWeb.html is available in pfodWeb_src.zip
and on Github.
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 command 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.
Start
pfodWeb Dwg Designer. You can delete any existing dwgs.
Create
a dwg called BasicSlider with dimensions 110 x 40 and
background color 12 (BLUE).
You can reuse this drawing later in
other GUI's by using insertDwg to add it. See the previous tutorial,
Reuse
Controls with insertDwg
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 x Position 0,
y Position 16 and 100(w) x 5(h)
Add a red filled rectangle
x Position 0, y Position 16, 10(w) x 5(h) and Assign Index.
This will be updated by your Arduino code to show the current slider
position.
Add a touchZone x Position 0, y Postion 16, 100(w) x 5(h) 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 top level drawing load command, the command the menu used
to load the top level drawing, the touchZone cmd, the mouse
location in touchZone co-ordinates and filter setting that
triggered the message. E.g.
{A~c1`47`5`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.
Use the Generate Code button to export the BasicSlider_serial.zip containing the Arduino sketch.
Create SliderControl.cpp / .h to keep track of the position and to
update the red bar on the dwg in response to the touchZone cmd.
Again
this is straight forward to do manually or you can use claude.ai with
a prompt like
dir C:\ai\aicode\DwgCode\BasicSlider contains a basic slider drawing add a sub-class, SliderControl, that subclasses Dwg_BasicSlider and keep track of the slider position with setPosition and getPosition and updates the slider indicator. Make the position variable a float. The displayed slider extends from 0 to position
The completed code is in BasicSlider.zip Uploading this will display the slider. Clicking in it will update the position and the ribbon.
Note that nothing updates until you release the mouse
button.
There are no touchActions specified so nothing
changes as you drag the mouse in the touchZone.
The interesting parts of SliderControl.cpp are
// Update the display GUI with the current slider position.
// Sends the one indexed item of the BasicSlider dwg, the red bar idx_1. The bar
// is drawn from the left hand end of the white track, offset 0, and extends to
// the current position, so its width is what shows the position. The indexed
// item is the generated one with only its width changed, the rest, offset, color
// and height, are as generated.
// Called by the generated Dwg_BasicSlider::sendFullDrawing(), after the idx_1
// place holder has been sent, and by Dwg_BasicSlider::sendUpdate(), so the bar is
// drawn from position both when the dwg is first drawn and on every update of it.
void SliderControl::sendIndexedItems() {
float barWidth = (position * TRACK_WIDTH) / MAX_POSITION; // 0.0 .. TRACK_WIDTH
dwgsPtr->rectangle().filled().idx(idx_1).color(dwgsPtr->RED).size(barWidth, BAR_HEIGHT).offset(0, BAR_ROW).send();
}
// touchZone cmd_c1 touched, move the slider to the touch.
// The touchZone is sent with the DOWN_DRAG_UP filter, so this is called for the
// touch down, for every drag as the finger moves and for the touch up, giving a
// bar that follows the finger.
// col is the column of the touch across the touchZone, 0 at the left hand end of
// the track, so the bar runs from 0 to col and col converts straight to a 0.0 to
// 100.0 position. setPosition() clamps the result to keep the bar inside the
// track.
// row/touchType/editedText are not used, every touch on the zone moves the slider.
// Returns true, handled here, this dwg's update is the response to the touch.
bool SliderControl::Dwg_BasicSlider_cmd_c1(int row, int col, uint8_t touchType, const byte* editedText) {
(void)row; (void)touchType; (void)editedText; // suppress warnings
setPosition((col * MAX_POSITION) / TRACK_WIDTH);
sendUpdate(); // sendUpdate from here
return true; // handled here, return true, only this dwg needs updating
}
The top of the SliderControl.cpp file contains some constants the match the dwg slide dimensions and are used in the above methods.The basic slider only updates the red rectangle when the
pfodDevice (your microprocessor) responds to the mouse UP message.
Using touchActions you can show the user immediate feedback as they
move the mouse. In touchActions, the special values COL and
ROW, are replace, on the fly, by the current mouse position in
the co-ordinates to the touchZone.
Note: these values are
the same as the ones sent in the touch message and are integers in
the touchZone co-ordinates.
This section of the tutorial will add two (2) touch actions using COL to show where along the slider the mouse is and what % the slider will be set to when the mouse UP sends the touch message. These updates happen immediately in the drawing itself and do not require any messages to or from your microprocessor.
touchZone touchActions need to work with existing indexed item. The slider ribbon is indexed so a the touchAction can update that, but there are no existing indexed items for the indicator line and % value, so start by adding two Index Placeholder dwg items and then a popZero to close out the pushZero.
Here the Assigned Index variable names have been edited to
something more obvious.
These index items capture the current pushZero position and scaling at that point. When they are replaced by the touchAction the position is the (0,0) for that touchAction item and the scaling scales it.
Open the touchZone for editing and click Add another
touchAction. Choose the
rectangle to indicator index to replace.
Replace it with a
vertical line running from the current COL position and Y offset of
16, up -7 units
The preview is live, so you can drag the mouse along the bar and see the indicator line display and move.
Click Add Item and Add another touchAction
Choose the value Index item and set
its X position to the current mouse Column and the Y position to
above the 16-7 = 9 end of the indicator line so Y offset of 7.
For
the value remove the prefix text and set the unit to % and the
Integer Value to the mouse Column position. Set the display scaling
so that 0 to 100 value is mapped to 1 to 100 to display with 0
decimal place. Set Center alignment and Bold text, +3 font size and
BLACK_WHITE color. Again the preview is live so you can mouse along
the slider bar and see both touchAction displayed.
Click Add Item.
Click Save Changes
Click on Generate Code to re-export the latest design to BasicSlider_serial(1).zip Because all the program logic is in SliderControl.cpp / .h, you can just unzip these new drawing files over the existing ones and replace them. BasicSlider_1.zip contains the updated sketch with the SliderControl class files.
Uploading this sketch now shows the slider percent indicator as the mouse is dragged and send the command when the mouse is released.
You can also add a label to display the current slider setting.
Edit the
BasicSlider to add a Value item, indexed. Value Items differ from
Labels in that they map the Integer Value before displaying it.
The
mapping is from (minValue,maxValue) to (display minValue, display max
Value). In this instance the mapping is from 0 – 100 to the
display 0 – 100 for % slider.
Click Add Item, then move the Value item up above the popZero so that it is offset by the pushZero and centers under the slider.
Generate Code to export BasicSlider_serial(2).zip and replace the files in BasicSlider with these updated ones.
Copy the dwgPtr->label()... line from BasicSlider::sendIndexedItems() to SliderControl::sendIndexedItems() and replace the intValue(50) with intValue(getPosition())
void SliderControl::sendIndexedItems() {
float barWidth = (position * TRACK_WIDTH) / MAX_POSITION; // 0.0 .. TRACK_WIDTH
dwgsPtr->rectangle().filled().idx(idx_1).color(dwgsPtr->RED).size(barWidth, BAR_HEIGHT).offset(0, BAR_ROW).send();
dwgsPtr->label().idx(idx_2).color(dwgsPtr->BLACK_WHITE).text("Slider").fontSize(9).offset(50,30).center()
.intValue(getPosition()).units("%").maxValue(100).minValue(0).displayMax(100).displayMin(0).decimals(0).send();
}
The final sketch code is in BasicSlider_Value.zip. Uploading that gives the user interface shown at the top of the tutorial
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. The x,y point co-ordinates do not change when the touchZone is scaled and move by pushZero or when inserted in another drawing.
The next tutorial, TouchActionInput for text/number entry covers using touchActionInput to input text / numbers to your micro.
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