|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
Control and Data Display/Plotting for Arduino
|
by Matthew Ford 2nd August 2026 (originally posted
12th June 2016)
© Forward Computing and Control
Pty. Ltd. NSW Australia
All rights reserved.
Updated 2nd August 2026 – To use pfodWeb.html Designer and to use Arduino UNO in place of replace Arduino 101 which is no longer available. Other tutorials are based on pfodDesignerV3 which has almost identical menus.
Arduino
IDE V2 (V2.3.6)
Any Arduino board e.g. Arduino UNO
Libraries
- pfodParser
– Install via Arduino or install the pfodParser.zip
The project is suitable for complete beginners. No coding experience is required. Once you have finished this tutorial you will be able to design whatever menus you need to display, plot and log Arduino Data, Analog readings and Digital Inputs, and control Arduino outputs, PWM outputs and Digital Outputs on any web browser. In particular this tutorial will show you how to display, plot and log an Analog reading and display the state of a Digital input and control a PWM output and pulse a Digital Output.
To actually switch something on and off see How to Add Relays to Arduino and Simple Home Automation for Beginners. There are also more pfodDesigner tutorials and another tutorial Data Logging and Plotting available and there is also a new pfodDesigner tutorial on plotting against date/time using only the Arduino millis() function, Arduino Date and Time using millis() and pfodApp
Absolutely NO CODING IS REQUIRED for this tutorial. No Arduino coding is required, the pfodWeb Designer generates all the code you need. No Web coding is required, the pfodWeb.html displays the menus and data and plots and logs the data and handles user inputs. However this tutorial only covers some the screens and display options available. Check out the complete pfodSpecification for all the details.
pfodWeb.html (included in the pfodParser library) is a single, off-line webpage that runs on any browser. It can connect via Serial, Bluetooth Classing, BLE, TCP/IP and HTTP. If your browser does not support the connection, use the pfodProxy to connect. pfodProxy is available for Windows, MacOS and Linux. See pfodWeb_startup There is also a pfodApp client runs on Android mobiles, V2.1 onwards and can connect using Bluetooth Classic, Bluetooth Low Energy (BLE), TCP/IP and SMS.
On the Arduino side, the pfodWeb Designer generates code for any Arduino board to connect via Serial. It also has board pin details for over 600 boards, including Arduino AVR boards, ESP32 and related boards, ESP8266 and Pi Pico boards. Depending on what the target board supports, you can also generate code for BLE, TCP/IP or HTTP connections. For Classic Bluetooth, use the Serial connection to connect to a Bluetooth Classic daughter board.
This project is suitable for complete beginners, but you need complete a few tasks before you start. You need to first set up the Arduino IDE V2 (V2.3.6) and install the pfodParser library.
a) Install the Arduino IDE for your computer's
operating system from Getting
Started with Arduino and work through the example of compiling
and running the Blink example.
b) Install the pfodParser library
via the Arduino library manager or from this pfodParser.zip
file
c) Purchase an Arduino supported board.
Here an Arduino Uno is used, but any board can be controlled via the
Serial connection.
Any Arduino board will do, Here an Arduino UNO is used.
This Tutorial will cover five (5) menu items, Data Display to display an Analog reading scaled to real world units, On/Off Display to show the state of a digital input, PWM Output to set a pwm output and On/Off Setting to set or pulse a digital output and Chart to plot an analog reading scaled to real world units. Each of these items offers designable text, formats and displays. But first you need to open pfodWeb.html in your browser and create a new menu.
In your Arduino libraries directory there is
the pfodWeb.html web page under the pfodParser/pfodWeb dir. Open
…Arduino/libraries/pfodParser/pfodWeb/pfodWeb.html
in
any browser. The Arduino IDE does not need to be open.
Select the
Designer connection and choose your Target board. If your board is
not listed use the Unlisted
Board – Serial target.
The geneated code will have placeholders for you to fill in the
appropiate pin numbers for your board.
Click on Open Designer to open the top level designer menu. As you can see here it is almost and exact copy of the pfodDesignerV3 Android app version, except for the new Create/Edit Dwg button which opens the drawing designer to created interactive Gui's (See the Interactive GUI tutorial.)
In this tutorial a menu system of button, sliders and charts will be designed. It is simpler to build and connects directly to board pins.
Edit
Existing Menu can be used to re-edit a menu or to reload a menu from
its ...pfodMenu_json
file.
All edits are automatically saved as you make them.
Each edit you make is automatically saved to the browser's local storage so you will not lose any edits if you exit the browser. Also you can Save the Design as a ...pfodMenu_json file and when you generated code the design is also exported in the code .zip file. The current design is also saved when you delete a menu from pfodWeb Designer.
So to exit the Designer you can either use the
Exit option
from the bottom right hand … menu OR just reload the
pfodWeb.html web page. All the current menus and drawings will be in
browser local storage when you open pfodWeb.html again.
NOTE:
The pfodWeb.html storage is keyed to the file path pfodWeb.html is
opened from. If you open pfodWeb.html from a different directory it
will not show these menus.
Select
Start
new Menu 
This displays a list of operations available for the new menu. A
new menu is created with no buttons and a default menu name, Menu_1.
If you already have a menu or if you have saved a design
previously, you can use Edit
existing Menu to
reload the menu.
We want the pfodWeb to re-request this menu at regular intervals to get the latest values, so use the Refresh Interval slider to set the refresh interval to 1sec.
Click Preview Menu to see what the current
design looks like. No buttons yet, just some default prompt text at
the bottom.
The back arrow at the bottom left of the screen takes you back one screen. The center refresh button re-request the current screen. The … right hand menu lets you exit the current connection, in this case the Designer, and gives you access to the raw pfod messages and the chart display. pfodWeb is a single web page so the browser own back button will not work.
Use the back arrow to go back to the Editing screen to edit the default prompt to something more useful.
Click on Edit Prompt to open the Editing Prompt screen. The prompt is the text displayed to the user at the bottom of the scrollable list of menu buttons. In the Editing Prompt screen, a preview of the prompt is shown at the bottom of the screen.
Click
Edit prompt text and
set the text to “Arduino Data”, pfodApp will
automatically warp the text if it too wide for the screen, you can a
newline between 'Arduino' and 'Data' to force the text on two
lines.
Click the tick box to accept these changes and re-display the
Editing Menu Prompt screen
with the updated prompt text, at the bottom of the screen.
Then set the
font size to <+4>, background colour to Navy and set Bold.
(Scroll down to access the other formatting options). White is the
default text colour, you can change it if you wish.
The background colour set
for the prompt also sets the default background colour for the whole
menu.
The first menu item that will be added is a display of an integral value scaled to real world values and with descriptive text and units. Go back to the Editing Menu_1 screen and click on Add Menu Item. This will show you a list of menu items you can add. You can scroll down to show the other menu items that can be added. The Drawing item, at the bottom, will add the interactive GUI you have designed with the Create/Edit Dwg. (See the Interactive GUI tutorial.) You can have multiple dwgs in the same menu and scroll to show them
Click on Data/ADC Display option to add it
and open its edit screen.
The Data Display only accepts integral
data values from your pfodDevice (your Arduino). The integral data
value has a specified range (default 0 to 1023) which is mapped to
display range (Display Min .. Display Max) in your Android mobile and
displayed using the Leading Text, the mapped value and the Trailing
Text. The mapped value is also displayed on a horizontal bar. Use the
Change Item's Appearance
button to change the displays font size and stye,
colors etc
pfodWeb defaults the displayed range, 0-5V for UNO, and the variable ADC range, 1023 for UNO, depending on the board selected at the target. So for Pi Pico 2W it defaults to 0-3.3V and 4095. You can edit those defaults as necessary. Using Edit Display Max, Edit Display Min and Edit Data Variable Range. pfodApp ensures that the number of decimal places displayed exceeds the resolution of the data value.
In this example Edit Leading Text to 'A0 ' with a space after the 0. Edit Units is defaulted to 'V' with no spaces.
If you are acquiring data from a 12 bit converter then the entered Data Variable Range should be 0 to 4095, for 16 bit it would be 0 to 65535. Example: If you are acquiring data from a 12 bit ADC, connected to a 1000 kPa pressure transducer, then enter 0 to 4095 as Data Variable Range, 0 as Display Min, 1000 as Display Max and 'kPa' as the Trailing Text, so that 1000kPa will be displayed when Arduino send a data reading of 4095.
As well as setting the font size, colour, style and background, there is also the option of just displaying the text or the bar indicator or both by clicking on the Display Text and Slider button to toggle between these options:-
Display Text and Slider
Display
Text Only
Display
Slider Only
This
example will display both the text and the bar indicator (slider).
Note: The slider can not be moved. This menu item is for display
only, not for user input.
Finally scroll down the Editing Menu Item screen to the “No connected to an I/O pin” button and click it to open display as list of available ADC pins for this target board
For Uno there are 6 Analog input pins
(ADC), if you are not using the IC2 connections. Other targets will
list their available ADC pins.
Select A0.
When the pfodWeb Designer generates the code it will include methods
to call analogRead and send the reading to pfodWeb to update the menu
each time pfodWeb requests a refresh.
Go back to the Editing Menu_1 screen and
preview the menu again. This is EXACTLY how it will look in
pfodWeb, because the Designer is actually just a version of
pfodWeb with a special back end to handle the menu building and
editing. Every screen in the pfodWeb Designer is a standard pfodWeb
screen that you can create and control from your pfodDevice (your
Arduino)
As
pfodWeb re-requests this menu each second, it will update the display
with the latest data mapped to the range 0V to 5V.
The next menu item to be added is an On/Off
Display which will show the current state of a 0 / 1 variable. It
this tutorial we will monitor the state of the D4 digital input pin,
High (1) or Low (0).
Click Add Menu Item again and choose
On/Off Display (Note carefully, this is the On/Off
Display below the
On/Off Setting.)
Scroll down and click on the “No connected to an I/O pin” button and select D4 as the pin to connect to this display. In our example the input to D4 is actually as door switch which is closed when the door is closed and open otherwise, so when the input is High the door is open and when the input is Low the door is closed. Note that on the UNO D0, D1 are not listed as available as they are used for the Serial connection. Also A0 is not listed as it is already being used.
Edit Leading Text to “Door is “. Note the space after 'is' and Edit Low text to “Closed” and Edit High text to “Open”. You can also change the text font size, colour etc as you wish via Change Item's Appearance button.
Also
click on Display Text and Slider
until it says Display
Text Only
That's
all that is need for displaying a digital input. Go back and preview
the menu.
pfodWeb Designer also makes it easy to control PWM outputs or let the user set a variable from a slider.
Click Add Menu Item again and choose Slider Input or set PWM/Analog Output
By
default this menu item is initialized with the variable range set to
0 to 255 and the Display Max set to 100 and the Trailing Text set to
'%' so for Arduino compatible boards you can connect this menu item
to a PWM capable pin and control the PWM output from 0% to 100% by
sliding the slider. The slider is live so you can try it out.
Click on the “No connected to an I/O pin”
button to connect this menu item to a PWM capable digital output, D5
for UNO in this example. The available PWM / DAC pins presented for
selection will vary depending on which target board you select.
As
with the other menu items, you can choose you own text, Display Max /
Min, font formats etc. You can also just display the slider with no
text if you wish.
Note: The Data Variable Range sets the range values the slider sends back to the pfodDevice (your Arduino). The pfodWeb / pfodApp always and only sends integral values, so while the display says 0 to 100% the slider actually sends back an integral value in the range 0 to 255 as set by the Edit Data Variable Range button. You can Edit Data Variable Range button and change the Edit Maximum Value to 1023 etc as you need. Notice that this does not change the Display Max which still shows 100%. It changes the mapping from the slider setting, so that 0 to 1023 will be displayed as 0 to 100%
Go back and preview the menu again.
This
menu preview is live and you can move the slider. If you add
sub-menus you can also open them and navigate in the same way pfodWeb
/ pfodApp will.
The next menu item to be added is On/Off Setting or Pulse which lets you control a digital output on or off or pulse it.
Click Add Menu Item again and choose On/Off Setting or Pulse
You
can click anywhere in the button to toggle the setting. Here we will
use this menu item to pulse the Arduino LED (D13) on for 10 sec.
after which it will turn off. The menu will update once a sec (the
Refresh Interval you
set for this menu at the beginning of this tutorial) to show the
current state of the led. You can force it the led to turn off early
by clicking on the button again.
Set the Edit Leading Text to “LED is “ and Edit Low text to “Off” and Edit High text to “On”. Click on the “No connected to an I/O pin” button to connect this menu item to D13. Click Display Text and Slider to Display Text Only and increase the font size to <+6> (via Change Item's Appearance button) so the button is bigger and easier to click. You can also change the text font size, colour etc as you wish. Here I have set a Silver background and a Bold font
To
set the pulse length, click on the “Output
is not pulsed” button
and select Pulsed High
on the top
slider. The set a 10 sec pulse length.
Go
back and preview the menu again.
If
you don't like the way it looks you can go back the Editing
Menu_1 screen and edit the menu items.
I wanted a bit more space between the menu items and a larger font
for the Door is Open display.
Go back to Editing
Menu_1 and click on Add
Menu Item and scroll down and choose
“Label”
Edit
Text to remove all the text so that you are left with a blank spacer.
You can adjust the size of the space with the Font Size setting. Here
I have set <-6> (via Change Item's
Appearance button) for a small
spacer.
Add another second Spacer and then go back to the Editing Menu_1 screen and scroll down to Move Items Up/Down
Click
on Move Items Up/Down
this and select
a label to move and move to Door
is.
It will be inserted above the Door is display item. Move the other
label to PWM to
place it between Door and PWM. Finally I also increased the font for
the Door is menu item to <+4> and made it bold, by choosing
Edit Menu and
then Door is and
editing that button
The menu preview is now
Finally we will add a Chart to plot and log the value of A0.
Go back to Editing
Menu_1 and click on Add
Menu Item and scroll down and select
Chart Button.
pfodWeb / pfodApp lets you have multiple plots per chart but, for
simplicity, pfodWeb Designer only allows up to 3 plots on a chart.
The pfodSpecification has a lot of charting and plotting options.
Not all of them are available via pfodWeb Designer. Check the
pfodSpecification.pdf
for all the details.
You
can edit the Chart Button
like any other button. Here I will set the text of
this button to Voltage Plot
with a text size of <+4> (via Change
Item's Appearance button)
To
edit the Chart itself, click on the Chart
Button Voltage
Plot.
That will open the Editing Plots
for screen
As
you edit the chart and its plots, you can preview the result using
the Chart
Preview button.
Use
back arrow button to go back to the chart editing screen.
Set the Edit Chart Label to “Voltage at A0” or whatever label you want. Also set the Plot Data Interval. This interval at which your Arduino will send the plot data for logging and plotting. Plot data is automatically accumulated by pfodWeb and pfodApp. You can save the data to a file for further processing. Here I have left the plotting interval at 1 sec. For more details on the pfodWeb charting options once the data is displayed in pfodWeb, see Plotting with pfodWeb and the pfodWeb-chart-mode-guide.html in the ../pfodParser/pfodWeb/docs folder
Click on Edit Plot 1 to open its editing screen. Use this edit screen to set the Edit Plot Label to “A0” and Edit Plot yAxis Units to “Volts”
As with the Display Data screen above, set the Plot Data Variable Range and the Display Max and Display Min so that the plot will display the real world values. For Arduino UNO, the data range is 0 to 1023 and the represents 0V to 5V. For So leave the Plot Data Variable range unchanged and Edit Display Max to 5
Click on Not connected to an I/O pin to connect this Plot to pin A0 and click Plot is Auto Scale to toggle to Plot is Fixed Scale. Fixed scale sets the initial yAxis to the Display Max / Min, while Auto scale adjust the yAxis to just display the data. In any case is the plot data exceeds the Display Max / Min the plot will always auto scale to show all the data.
Use the Chart Preview button to check your settings.
Finally
click on Edit
Plot 2 and
Edit
Plot 3 to
and click the Hide
button to hide
them as we are only plotting on data variable in this example. The
Chart
Preview now
shows just one plot.
Going
back to the Editing Menu_1
screen and
selecting Preview
Menu show
the final menu.
This
menu preview is 'live'. You can move the PWM slider and toggle the
LED on and off and click on the Voltage Plot button to open the plot
screen.
Back in the Editing Menu_1 screen you can delete unwanted menu items as well as changing the menu name. The menu name is for your use only. It is shown in the list of Existing Menus, but is not displayed to the user when the menu is displayed on pfodWeb or pfodApp.
Now that you have finished the design you can click Generate Code on the main menu to generate the Menu_1.zip file. If the target board supports more than just a Serial connection, you can click the … - Serial@115200 to change to connection the code is generated for. Exit the Designer or just reload pfodWeb.html
Unzip the Menu_1.zip to your Arduino sketch directory and open Menu_1.ino in the Arduino IDE and upload it to your board, in this case an Arduino UNO. Close the Arduino Serial Monitor!!
If your browser supports Web Serial, you can open the Arduino Com port that way. Otherwise follow the pfodProxy Instructions to install and start the pfodProxy to provide the Serial connection.
On connecting to the Arduino UNO, pfodWeb will display your designed menu. Now you click the LED button to turn the led on for 10sec and then turn off. The menu will update to LED is Off when the led turns off. If you connect the D4 input to GND then the menu will show Door is Closed.
By connecting as 100K resistor from D5 to A0 and adding as 220nF (0.22uF) capacitor from A0 to GND, you can use the PWM slider to control the input voltage to A0. (Note: If the capacitor you are using has a +/- make sure the – is connect to GND). This RC network smooths out the PWM pulses to give an approximately steady DC voltage. Then as you adjust the PWM slider the voltage measured at A0 changes and the menu shows the changed value.
The
plot will also show the varying voltage measured at A0.
You
can use Freeze and the Chart Configuration to set the number of
Display Data Points and the Max Min scale to zoom in to get a closer
look at each level.
If
you look at the Raw Message Viewer you will see the menu update
messages are very short because pfodWeb caches the menu and there
after the Arduino sketch only sends the update values for each menu
item instead of resending the whole menu text each second.
You can save the plot data to a CSV file for later use by opening the Raw Message Viewer and clicking on Export CSV by Fields
Even though the Serial connection is being used to send / receive the pfod messages, you can still use Serial to write out debug messages. pfod messages are enclosed in {..} and any characters outside the pfod messages are just written to the Raw Data Messages screen, so you just use Serial.print( ) as usual any where outside the sendMainMenu() and sendMainMenuUpdate() methods.
This completes the tutorial. See the other example tutorials on creating menus and also pfodWeb Designer tutorial for drawaings to create interactive GUIs. Simple Home Automation for Beginners looks at attaching relays, so that you can switch real things on and off.
But pfodWeb (and pfodApp) can do much more than this. The pfod protocol is a rich but simple one and contains much more then just simple menus. Check out the full pfodSpecification.pdf for all the details and examples. Also see www.pfod.com.au for numerous example projects. All the screens used by the pfodWeb Designer are standard pfod screens. The pfodWeb Designer is just the pfodWeb client connected to a back-end that keeps track of your selections and serves up the requested screens.
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