Control, Monitoring, Charting and Data Logging for any Arduino from your browser using pfodWeb

pfodWeb is an open-source, off-line, web page that is a pfod client and code designer. It can connect via Serial, BLE, Bluetooth, TCP/IP and HTTP

pfodWeb Quick Start

  1. Install Arduino IDE V2. Install the latest pfodParser library from the library manager OR the pfodParser.zip

  2. Open …Arduino/libraries/pfodParser/pfodWeb/pfodWeb.html in your browser. Click on the Designer connection, choose your Target board and connect to design your user interface and connect board pins to control, monitor, plot. See the tutorials on building your menu / sub-menus and data logging and charting. Preview the menu and generate the complete Arduino sketch.

  3. Program your board and connect via Serial from pfodWeb. Follow the pfodProxy Instructions to install the pfodProxy for your OS (windows, macOS or linux). See pfodWeb_startup.
    Make sure the Arduino IDE or other application does not already have that port open.
    pfodWeb will display you designed control and monitoring menu.

See the docs for more details on pfodWeb and Charting and Data Logging

What Menu Items are there?

Run the pfodParser library pfodWeb demoScreen examples. The menu items include:- set or pulse an output, display input's level, set PWM / DAC output via a slider, display ADC input in real units (not just counts), buttons, labels, spacers, charts, sub-menus. There is also a drawing menu item to display user designed controls like the Weather Station above.

My board is not listed

pfodWeb designer connection lists board pins for over 600 boards. If you board/connection is not listed, raise a request on github BUT in the mean time use the Unlisted Board Serial target to design your menu and attach pins. The generated code will have place holders like
const int onoff_Set_Led_Cmd_2_pin = ?; // name the digital output pin for 'Set Led'
for you to fill in the appropriate pin number for your board.

I only want to Chart and Log data

Use the Chart Only Mode which opens the chart directly and plots and logs streaming CSV data. See Flexible Plotting with pfodWeb

I Want a Completely Self-contained Deployment

If your board supports HTTP server and has 1MB of file storage, you can server pfodWeb.html directly from your microprocessor for a completely self-contained, off-line, deployment. This allows any browser to display your controls, including iPhones.

I Want Controls like the Weather Station above

pfod support response controls with immediate user feedback via drawing menu items. See pfodWebDesigner the companion, free web based replacement for the 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 Design interactive GUI components for pfodApp and pfodWebDesigner

My board is not Arduino

For non-Arduino boards there is a Minimal C Code target that only requires a 'serial' interface. See pfod for Non-Arduino based microprocessors, which has ATTiny and PIC examples.

Quick Overview of pfodWeb

**pfodApp**has been in development for over 25 years. First as a J2ME application and, since 2012, as an paid Android app.
This javascript web based, pfodWeb.html, provides a browser based version of pfodApp that can be run on any modern computer or mobile (including Apple IPhones)

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, BLE, TCP/IP or HTTP. Using Serial you can connect to any Arduino board and display the menus / interactive controls it serves. pfodWeb.html runs competely off-line. No internet connection is needed. The menus and interactive controls are completely defined by your Arduino using the code generated by the pfodWeb.html Designer connection, or the Android app, pfodDesignerV3. Very compact pfod messages are used to send the controls and receive the user's commands.

Install the Arduino pfodParser library (or download pfodParser.zip). Open …/Arduino/libraries/pfodParser/pfodWeb/pfodWeb.html in your browser. Click on the Serial connection and follow the pfodProxy Instructions to download and run the pfodProxy. The pfodProxy lets you connect via Serial, BLE and TCP/IP. See pfodWeb_startup and Quick Start below

If your Arduino board supports HTTP and has a file system of 1MB, then you can load the all necessary pfodWeb.html files for an HTTP connection onto your microprocessor and serve them directly from there for a completely self contained deployment. See the pfodParser library examples/pfodWeb/demoScreens_http and LedOnOff_http.

pfodWeb Designer

pfodWeb includes a Designer connection that lets you design your own menus / charts etc and connect the controls to your board's pins. You can preview the control menus and then generate complete Arduino sketches for your board. This Designer connection is a re-implementation of the pfodDesigner Android app. See the many tutorials on using it to build you own controls and data logging and charting.

Quick and Simple Charting and Data Logging.

pfodWeb can chart and data log csv data streamed from your micro. No menu or GUI is needed. The charting much more flexiable than the default Arduino plotter. You can freeze the chart and zoom in, scale and split the plots or ignore them. For a detailed tutorial on Charting see Flexible Plotting with pfodWeb via Serial BLE, HTTP and also the docs pfodWeb-chart-mode-guide

Support pfodWeb

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 developed here.
Also see the free pfodDesigner Android app for creating menus and charts for pfodApp.

1 Like

Thanks for sharing

Yes thanks too
Added to the Useful Websites database.

V4.1.11 of pfodWeb (in pfodParser library V5.1.9) includes code generation and board pin functions for over 600 board, AVR boards, XIAO BLE boards, Adafruit BLE boards, ESP8266, ESP32 and associated chips and Pi-Pico boards. The code generator produces complete sketches for all the boards for Serial connection and for connection via BLE, Tcp/IP and HTTP for those boards that support those connections.

This version also supports md style, [txt] (url), webpage links in menu label items and prompts. Since the menu is being displayed by pfodWeb.html, these links work with all connections, Serial, BLE, Tcp/Ip and HTTP and opens the link in another tab in the browser.

This version has also be optimized for use with AI assistants. It includes AI guides to seed the AI with the pfodWeb designer menu and dwgs context and pfodWeb.html has been modified to allow brower harnesses like Claude-in-Chrome to drive the pfodWeb to display the preview of the AI generated UI. There is also a .png button for the AI to take a snapshot of the dwg design for it to compare against the your request.

Usually you would describe what you want and ask the AI to produce the json file for the design and load it into the pfodWeb.html designer and then ask the AI to stop at this point for you to review the design. You can then make small changes yourself and export the updated json description or tell the AI what wholesale changes you want made.

Looks wonderful. If only I knew what "pfod" is.

From https://www.forward.com.au/pfod/index.html:

pfod™ (Protocol For Operations Discovery)

Started back in the J2ME era. I wanted a general purpose protocol where the server (the micro device, pfodDevice) completely defined what was displayed on the client. Like a mini-html but which would run on an Attiny12 connected to a Classic bluetooth module.

The protocol has not changed much in the last 25 years, just a few more features added. The main one being drawings, see the Weather station above. Line, rectangles, circles and touchZones and touchActions that respond to your finger/click on that part of the screen to send a command and fire the touchAction to immediately update the screen to indicate you have triggered a cmd, while you wait for the response.