pfodWeb
touchActionInput

by Matthew Ford 22nd October 2025 (originally posted 27th August 2025)
© Forward Computing and Control Pty. Ltd. NSW Australia
All rights reserved.

How to Input Text / Numbers
to your micro
using touchActionInput

Introduction

This is the fourth tutorial on using pfodWeb Designer to create interactive and responsive GUI for pfodApp and the free, open source, pfodWeb.
This tutorial will cover touchActionInputs which when triggered popup a single line text input dialog to allow the user to send text/numberic data to the pfodDevice (microprocessor)
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 a free web based partial replacement for the paid Android app, pfodApp. pfodWeb runs in a browser and connects to your Arduino board via either Serial or BLE or HTTP. Using Serial you can connect to any Arduino board and display the interactive controls it serves. pfodWeb runs competely off-line. No internet connection is needed. Just install the pfodParser library and open the index.html in the pfodWeb sub-directory of the pfodParser library. The interactive controls are completely defined by the code (generated by pfodWebDesigner) 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 of 200Kb, then you can load the all pfodWeb files onto your microprocessor and serve them directly from there.

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 Serial, 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. 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.

Tutorial List

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 – Covers using touchActions to give instant feedback in a slider control.
TouchActionInput for text/number entry – This one. Covers using touchActionInput to input text / numbers to your micro
Building Reusable Controls – Covers building a re-usable popup help button component.

Support pfodWeb

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.

Parts List and Installation

See the Introductory Tutorial for the parts list and the Installation instructions. Physical parts consist of just an Arduino board, e.g. Dfrobot ESP32 board or other Arduino board. (An UNO does not have enough memory to run these examples)

touchActionInput

touchActionInput is linked to a touchZone. When the touchZone is triggered, the single line Dialog box opens. The title of the dialog box and the initial text displayed is configurable from your pfodDevice (your microprocessor).
From the dialog box you can either Cancel or OK. If you Cancel the dialog box nothing is set to the pfodDevice and no touchActions are triggered.
If you OK the dialog box, then the input is sent to the pfodDevice and any touchActions for that touchZone are displayed until there is a response from the pfodDevice.

The minimal touchActionInput opens with a blank input. If you link the touchActionInput to a label, the current contents of the that label are used as the initial value for the dialog input. This lets you edit an existing label.
As was covered in previous tutorials, labels (and values) can have prefix and suffix text which will also be displayed in the dialog box. To edit just a numeric value, add another label that holds just the current numeric value and then hide that label. The touchActionInput can still access a hidden label as its default input and the pfodDevice can update both the hidden label and the displayed label with the updated value.

SliderInput Example

This tutorial extends the Slider example of the previous tutorial to add a touchActionInput that accesses a hidden label which lets you type in the required slider % and on OK updates the slider, the main label and the hidden label.
Open pfodWebDesigner and load the Slider.json from the previous tutorial and make a copy of it called SliderInput

Setting Custom idx and cmd Names

By default, pfodWebDesigner allocates idx and cmd variable names like idx_1, idx_2 … and cmd_1, cmd_2 … But you can enter your own descriptive names to make the code more readable.

Like idx_ribbon, cmd_slider and idx_sliderLabel.
Note: The idx_ and cmd_ prefix is not required

Edit the Drawing Item Value “Slider “ and change it to a Label with 2 decimal places. Value items only accept integers and here the slider percent setting will allow decimal places.
Add a touchZone around the Label with a Touch filter (default)

Linking a Label to a touchActionInput

Add another Label, indexed, with 2 decimal places and some initial Value, but with no Text or Units. The color and position is not important as this label will be hidden in a later step.
The idx is named idx_hidden as it will be the hidden label

Open the Show Details of the touchZone that encloses the Slider..% label, and click on Add touchActionInput.

Change the Prompt Text to something suitable and select idx_hidden 50.00 from the drop down list of Indexed Labels

Choose a suitable color for the prompt text and background. You can then click on the Slider % touchZone in the preview to see the touchActionInput in action.

Click Add touchActionInput to accept these edits.

Hiding the Label

Add a hide Item. You can click Show for visible items to make them flash.

Click Hide for idx_hidden to hide the 50.00 label that is used for the touchActionInput.
Go back to the Control Panel and use the Arduino Export to generate the Arduino sketch, SliderInput_serial.zip

Adding the Supporting Code

The completed sketch is in SliderInput_serial.zip.
Open it in Arduino and add the SliderControls.cpp / .h files from the previous tutorial.

Edit SliderControls to add a setPosition(char* str) method that accepts the user's input and converts it to a slider position and checks for errors.
The SafeString library is used to a) safely copy the first 20 chars of the edited text and b) convert it to a float.

#include <SafeString.h>
#include <pfodDebugPtr.h>

#define DEBUG
static Print* debugPtr = NULL; // local to this file

float position;
cSF(sfPosition, 20);

void setPosition(char* str) {
#ifdef DEBUG
 debugPtr = getDebugPtr();
#endif

 sfPosition.clear();
 sfPosition.readFrom(str);      // reads at most 20 chars from the edited text
 if (sfPosition.toFloat(position)) { // if it is a valid float, limit it
  if (position < 0) { position = 0; }
  if (position > 100) { position = 100; }
 } else {
  // not a valid float. print/send an error.
  if (debugPtr) {
   debugPtr->print(sfPosition);
   debugPtr->println(" is not a valid float.");
  }
 }
}

In Dwg_SliderInput.cpp add the function calls to SliderControls

#include "SliderControls.h"
 . . . 

bool Dwg_SliderInput::processDwgCmds() {
 if (!(*(parserPtr->getDwgCmd()))) { // ==> getDwgCmd returned pointer to empty string
  return false; // not dwg cmd, not handled
 }
 if (parserPtr->dwgCmdEquals(cmd_slider)) { // handle touchZone cmd_slider
  setPosition(parserPtr->getTouchedCol());
  sendUpdate();
  return true;
 }
 if (parserPtr->dwgCmdEquals(cmd_input)) { // handle touchZone cmd_input
  setPosition((char*)parserPtr->getEditedText());
  sendUpdate();
  return true;
 }
 return false; // not handled
}
 . . .
void Dwg_SliderInput::sendIndexedItems() {
  dwgsPtr->rectangle().filled().idx(idx_ribbon).color(dwgsPtr->RED).size(getPosition(),5).offset(0,16).send();
  dwgsPtr->label().idx(idx_sliderLabel).color(dwgsPtr->WHITE).text("Slider ").fontSize(8).offset(50,28.5).center().units("%").decimals(2).value(getPosition()).send();
  dwgsPtr->label().idx(idx_hidden).color(dwgsPtr->BLACK_WHITE).text("").offset(1,2).left().decimals(2).value(getPosition()).send();
}

In the previous tutorial, the slider position was an integer set by the touch X position. Here the slider_percent will be a float that can be set by either to touch X position or via the touchActionInput dialog box.

The current value of the slider_percent is used to
a) set the width of the slider RED indicator,
b) set the visible label “Slider … %” and
c) set the numeric value of the hidded label that the touchActionInput will display on opening.

To collect the user's slider settings, edit the processDwgCmds() checks for the command contained in the cmd_slider variable which is the command sent by the slider touchZone and as in the previous tutorial, the position is set to the touchedCol. The command contained in the variable cmd_input is the command sent by the Slider .. % label touchZone after the touchActionInput dialog box has been OKed.

A typical command set when the touchActionInput dialog box is OK is

{A~c3`19`4`0~35.35}

where the last field is the text the user entered. The pfodParser truncates the incoming msg at 255 chars. The Edited text is on the end of the incoming message and so is limited to less than 255 chars. See the pfodSpecification.pdf for more info on touchActionInput messages.

The touchActionInput dialog box does not do any validation. It is up to your Arduino code to do that. In SliderControls.cpp, the SafeString library is used to a) safely copy the first 20 chars of the edited text and b) convert it to a float.

Adding an Error Msg

If the user enters an invalid slider setting, it is helpful to display an error message to them.

Open pfodWebDesigner and copy SliderInput to SliderInputErr and edit it to add an indexed ErrMsg label

If there are no errors, the Arduino Code in SliderControls will set a empty message which make the message invisible.

When the user goes to correct an error, the previous error message will still be displayed until the pfodDevice responds.
To hide any existing error message, add a touchAction to both touchZones to clear the error msg.
That is replace idx_errMsg with an label empty of text.

Go back to the Control Panel and use Arduino Export to generate the new code, SliderInputErr_serial.zip.

Copy over SliderControls and merge the changes in Dwg_SliderInput.cpp into Dwg_SliderInputErr.cpp. In the Dwg_SliderInputErr::sendIndexedItems() call getErrMsg() to display any errors.

void Dwg_SliderInputErr::sendIndexedItems() {
  dwgsPtr->rectangle().filled().idx(idx_ribbon).color(dwgsPtr->RED).size(getPosition(),5).offset(0,16).send();
  dwgsPtr->label().idx(idx_sliderLabel).color(dwgsPtr->WHITE).text("Slider ").fontSize(8).offset(50,28.5).center().units("%").decimals(2).value(getPosition()).send();
  dwgsPtr->label().idx(idx_hidden).color(dwgsPtr->BLACK_WHITE).text("").offset(1,2).left().decimals(2).value(getPosition()).send();
  dwgsPtr->label().idx(idx_errMsg).color(dwgsPtr->RED).text(getErrMsg().c_str()).fontSize(2).bold().italic().offset(50,8).center().decimals(2).send();
}

Add the getErrMsg() method to SliderControls

cSF(sfErrMsg, 30);
SafeString& getErrMsg() {
 return sfErrMsg;
}

and update the sfErrMsg with any error message. See code in the completed sketch SliderInputErr_serial.zip

Conclusion

This page covered using a touchActionInput to allow the use to send text data to the pfodDevice (your microprocessor) . It showed how to add a hidden label to the drawing that does not display but which can be updated and provide the default value for the touchActionInput dialog box.

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 touchActionInput

How to Input Text / Numbersto your microusing touchActionInput