|
Home
| pfodApps/pfodDevices
| WebStringTemplates
| Java/J2EE
| Unix
| Torches
| Superannuation
| CRPS Treatment
|
| About
Us
|
|
|
Flexible Plotting with pfodWeb
|
by Matthew Ford 19th March 2026 (originally posted 16th March
2026)
© Forward Computing and Control Pty. Ltd. NSW
Australia
All rights reserved.
The tutorial
covers how to plot CSV data, coming from your micro, in a web browser
using pfodWeb Charting. You can connect pfodWeb to your micro via
Serial, BLE or HTTP.
pfodWeb is part of the pfodParser Arduino
library. Detailed code examples are provided here for Pi Pico W / 2W
connecting via Serial, BLE and HTTP. The pfodParser library also
provides examples for ESP32 and ESP8266
A single web page, pfodWeb.html, handles all three connection types, Serial, BLE and HTTP
No external connections or downloads needed.
Any numeric CSV data can be plotted. Any field (or none) can be set as the X-axis. The X-axis can be formatted as Time mins:secs etc.
Fields can be displayed on individual plots or grouped as appropriate.
The Chart Configuration can be saved and reloaded.
Streaming live data is viewed in a window of adjustable number of data points
When the view is frozen you can zoom in.
You can bookmark a url that contains the connection type and chart configuration for quick re-runs.
You can export the CSV data and reload into pfodWeb later for reviewing. Actually any CSV file can be loaded not just ones pfodWeb saved.
Your micro can send, intermixed, multiple data streams which pfodWeb can switch between.
If connecting via HTTP you can optionally serve pfodWeb.html from your micro for a complete stand alone implementation
Quick Overview
of pfodWeb and pfodWebDesigner
Parts
List
pfodWeb Charting via Serial
Saving
and Loading the Chart Configuration
Handling
Multiple Data Streams
pfodWeb Charting via
BLE
pfodWeb Charting via HTTP
Serving
pfodWeb.html from your microprocessor.
Compatible
Web Browsers for Serial and BLE connections via pfodWeb
How
Safe is the pfodWeb
Conclusion
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 that board 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 512KB, 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.
Pi
PicoW US$4.95 or Pi
Pico2W US$7.00 or other Arduino board
Pi
Pico board support V5.5.1 or other board support as needed for
your board
Arduino
IDE V2 (V2.3.8)
data upload add-on arduino-littlefs-upload
if
serving pfodWeb from your microprocessor via HTTP
pfodParser
(V4.1.2+) and SafeString
libraries from the Arduino library manager.
Here the Arduino IDE is used to code the Pi Pico W / 2W, but any micro that supports writing to a Serial connection could be used.
Install Arduino IDE V2 – For Windows, use the "Windows ZIP" or plain "Windows" executable (EXE) downloaded direct from https://arduino.cc. and allow it to install any device drivers it suggests.
Add the Pi Pico board support V5.5.1 to the Arduino IDE.
Install the latest pfodParser library from the library
manager. Install the latest
SafeString library from the library manager
See
pfodWeb-guide.html
and pfodWeb-chart-mode-guide.html
in the documentation
sub-directory of the pfodParser
library for a quick over view of pfodWeb and pfodWeb charting.
Check you have a compatible web browser with the correct settings.
Plug in the Pi Pico and open the pi_picoCharting_serial.ino and upload it. This sketch sends a CSV line of milliseconds since reboot, ADC reading, Chip Temp in ℃, Chip Temp in ℉ every 200ms
From the pfodParser library, in sub-directory pfodWeb, open
pfodWeb.html in a Chrome or Edge or Opera browser (>V141)
and selected Serial connection, 115200 baud,
Tick
Chart Only Mode <<< Very Important this skips the normal
pfod request for the main menu
Then click Connect and
Pair your board's serial port.
Edge and Opera just works with
Serial. Chrome needs a flag changed. See Compatible
Browsers
Note: This will fail if the Arduino IDE or other
application already has that port open. Close the Arduino Serial
Monitor.
By default the first field is used as the X-Axis. Use the … menu button open the Raw Message Viewer.
From there you can export the CSV data by fields for later
reloading and analysis.
Use the … menu to open the Chart Configuration.
Hint you can Load the Pi_Pico_ADC_and_Temp.4fields file to set the complete chart configuration
By default all fields are on the same plot (Plot No 1) and there
is not particular X-axis Format. Put each field on separate plots, 1,
2, 3 and select mins:sec format for the X-axis and the click
Apply
You can remove a
field from the chart by un-ticking that CSV column
Set appropriate max / min values and units and Titles for each plot e.g. (Saved in Pi_Pico_ADC_and_Temp.4fields )
Note that the ADC Reading max
is set to 300, but the data exceeds that and while the chart is
scrolling the scale will always expand to make all the data visible.
Freezing the Chart stops it
scrolling and strictly scales to the set max and min values.
You
can now use the up/down arrows of Display Points to double/half the
number of points displayed and the left / right arrows either side of
Freeze to move the plot.
This lets you zoom in the x-axis to the
area of interest. Changing the max/min and clicking Apply
zooms in the y-axis
Here is the ADC readings zoomed in to display just 32 point and with the scale set to max 500 / min 0
Data continues to be accumulated when the chart is frozen so when you un-Freeze the Chart goes back to showing the latest live scrolling data
Once you have configured the Chart the way you want, you can use the Save button to downloaded the config. Load will reload it. The above chart configuration is saved in Pi_Pico_ADC_and_Temp.4fields Loading that file in Chart Configuration will format the chart as above.
But more conveniently you can just bookmark the current URL which contains all the connection details and the chart configuration. Then next time just open that bookmark and connect to start live plotting of the data stream using your preferred chart options.
To re-examine previously saved data, you can also choose Load CSV to Plot and then select the .csv file to chart. If the number of fields in the .csv does not match the bookmarked chart configuration, then the chart will be blank. Use the drop down fields list to the right of Chart Configuration to select the number of csv fields/line to plot.
You can use the Load CSV to Plot button to reload a previously saved Export CSV by Fields (button in Raw Message Viewer) file. E.g. pfod-csv-4fields-2026-03-09T07-53-05.821Z.csv
You can send multiple data streams interleaved. Each line of .csv data with different number of fields is stored separately. By default the data with the largest number of fields will be plotting in the chart, but you can select other data streams from the fields drop down list to the right of Chart Configuration
While Serial connections are the simplest and most universal means of plotting measurement data, you can also plot data remotely via BLE or HTTP, if your microprocessor supports these connections. This section covers plotting the previous data stream via BLE from a Pi Pico W / 2W.
There is no defined BLE standard for serial connection (a gross oversight), but the Nordic UART BLE service is a widely used service that sends and receives unstructured byte data. pfodWeb can connect to BLE devices that advertise the Nordic UART service. The Pi Pico board support V5.5.1 includes support for a Nordic UART service.
Before compiling BLE sketches for Pi Pico W / 2W you need to enable the BLE stack under the tools menu
Then open the pi_picoCharting_BLE.ino sketch and upload it to your Pi Pico W or 2W
Open pfodWeb and select BLE and Chart Only
Click Connect and choose PicoUART to pair with.
That will open a similar default chart as was shown above in the Serial connection.
Connecting via HTTP requires more code in the microprocessor. The Pi Pico W / 2W has to run an HTTP server that handles CORS (Cross-Origin Resource Sharing) requests so that the pfodWeb.html loaded from a file on your computer can access resources from the microprocessor. Charting via HTTP uses polling to pickup the latest data. In between polls (about 1 per sec), the plot data is save in a line based circular buffer (default size 4096 chars). When the buffer fills, old data is discarded a whole line at a time.
pi_picoCharting_HTTP.ino is the sketch. Edit the ssid and password to suit your network and set a suitable IP address. If you leave the IP blank, check the Serial output to see what IP was assigned to your Pi Pico.
Open pfodWeb.html and select HTTP and set the IP of your board and click Chart Only and click Connect
That will open the Chart mode and start plotting the streaming csv plot data. Open the Chart Configuration and load the previously saved chart config, Pi_Pico_ADC_and_Temp.4fields This updates the URL which you can now bookmark to enable a quick re-connect with the current chart format, next time.
If you can allocate 512KB of LittleFS space on your Pi Pico, you can load pfodWeb.html and all its support .js files into your microprocessor, so that you don't need to have pfodWeb on the device you are connecting from.
From the Arduino IDE tools menu, select a Flash Size that includes at least 512KB of FS.
Unzip the pi_picoCharting_Server.zip
to your Arduino Sketch directory.
Edit the ssid and password to
suit your network and set a suitable IP address. If you leave the IP
blank, check the Serial output to see what IP was assigned to your Pi
Pico.
Then compile and upload the pi_picoCharting_Server.ino
sketch.
Finally upload the contents of data sub-directory using
the Upload LittleFS to Pico/ESP8266/ESP32 tool. Press
Ctrl+Shift+P to open the extra commands menu and type in
Upload LittleFS to search for the upload tool.
You only need to do this the first time. Once you have opened the Chart and formatted it, you can bookmark the URL to go directly there, next time.
Open your web browser (any one) and go to http://<yourMicrosIP> e.g. http://10.1.1.100. Note: the connection is http: not https:
Your micro will return the default index.html page
Choose pfodWeb or
pfodWebDebug (extra logging) and pfodWeb will request pfod's main
menu. However the pi_picoCharting_Server.ino sketch does not respond
with a pfod main menu, it only send plot .csv data.
So pfodWeb
displays this error msg.
Close the error msg and click on the … menu and choose Chart
To display the default chart of the data being sent.
From here you can open the … Chart Configuration panel and
configure / load the chart settings you want.
This updates the
browser URL to
http://10.1.1.100/pfodWeb.html?targetIP=10.1.1.100&chart={=....
} which you can then bookmark. Opening the bookmark next time will
automatically open the Chart and apply the formats you set.
pfodWeb uses Web Serial API for serial connections and Web Bluetooth API for BLE connections. These API's are not implemented in all browsers, see below for compatibility browsers and their setup.
To connect via Serial from pfodWeb, use a recent version of a Chrome or Edge or Opera browser. You also need to enable use of Serial Ports (ask AI if you have trouble)
In the latest version of Chrome V141,
open Open Chrome settings, then Navigate to Privacy and security >
Site Settings.
Display "Additional permissions," (click
the down arrow) and select Serial ports and enable.
In the latest Edge V141 for Windows 10, Serial connections
just work.
In the latest Opera V122 for Windows 10, Serial
connections just work.
To connect via BLE from pfodWeb, use a recent version of a Chrome
or Edge browser. You also need to enable use of Bluetooth (ask AI if
you have trouble)
First check Bluetooth is turned on for your
computer.
In the latest version of Chrome
V141 for Windows 10. BLE
connections just work, if you have turned bluetooth for your
computer
In the latest version of Edge V141
for Windows 10. BLE connections just work, if you have turned
bluetooth for your computer
The latest version of Opera
for Windows 10 BLE connections do not work :-(
The pfodWebDesigner generates complete sketches for Serial, BLE and WiFi.
Serial is the simplest sketch, any print debug msg are sent along with the pfod messages and can be viewed in the Raw Message View, but you need a recent version of Chrome, Edge or Opera browser to connect via Serial.
HTTP is the most universal connection. Any browser will connect and the sketch also includes a tcp/ip server on port 4989 that pfodApp Android app will connect to. However you need a WiFi capable board and you need to connect to the local network.
BLE is the third option, if your Arduino board supports a Nordic UART connection. Recent versions of Chrome and Edge browsers will connect using pfodWeb and the pfodApp Android will also connect.
pfodWeb is pure html / js and does not use any external packages
or downloads. You can run pfodWeb completely off-line with no
internet connection.
The entire source code is supplied with the
pfodParser library download.
This page covered using pfodWeb to connect via Serial, BLE and HTTP to plot streaming CSV plot data. The Raspberry Pi Pico W / 2W was use as the example microprocessor, but any micro with a Serial connection can be used and Arduino micros with a Nordic 'UART' BLE Service or HTTP support can also chart data. Flexible formatting / zooming of the chart is supported and the format can be saved in a bookmarked URL for automatic re-application later. The data received can also be exported to a csv file for further analysis.
pfodApp
has been in development for 15 years.
First as a J2ME application and since 2012 as an paid Android
app.
This javascript web based, pfodWeb, provides a browser based
version of pfodApp that can be run on any modern computer or mobile
(including Apple IPhones)
The current release of pfodWeb concentrates on rendering pfod drawings which provide support flexible and interactive GUIs. Support for other pfodApp features is planned.
pfodWeb and pfodWebDesigner are free and open source. If you want
to support this work, purchase the Android pfodApp
which will work with the same code.
Also see the free pfodDesigner
Android app for creating menus and charts for pfodApp.
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