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.

Thanks for sharing

Yes thanks too
Added to the Useful Websites database.