Arduino - Web Serial Plotter

Web Serial Plotter is one of the built-in embedded web apps in PHPoC [WiFi] Shield.

Web Serial Plotter is similar to Serial Plotter on Arduino IDE, except for the following points:

Web Serial Plotter is accessed on web browser through Internet (Serial Plotter is accessed on Arduino IDE through USB cable).
Web Serial Plotter can be accessed from any OS (Android, iOS, Windows, macOS, Linux...) without any installation.
Web Serial Plotter is easily customizable via a setting page.

This tutorial shows how to use Web Serial Plotter.

Hardware Required

Arduino Uno or Mega
PHPoC Shield 2(P4S-347) or PHPoC WiFi Shield 2(P4S-348)

Note that: This web app is available on:

PHPoC [WiFi] Shield R2
PHPoC [WiFi] Shield R1 with upgrade firmware to v1.5.0 (or higher)

Circuit

Stack PHPoC Shield or PHPoC WiFi Shield on Arduino Uno or Mega

Note that: Arduino communicates with PHPoC [WiFi] Shield via pins 10, 11, 12 and 13 on the Uno, and pins 10, 50, 51 and 52 on the Mega. Therefore, these pins CANNOT be used for general I/O.

How Serial Plotter and Web Serial Plotter Works

How Serial Plotter works

Serial Plotter is a tool of Arduino IDE.
This tool reads data that is sent by Arduino through serial port, and then visualize the data.

How Web Serial Plotter Works

Web Serial Plotter is a built-in web app, which is stored in PHPoC [WiFi] Shield.
When users access this web app in web browser, a WebSocket connection is created between web browser and PHPoC [WiFi] Shield.
PHPoC [WiFi] Shield read datas that is sent by Arduino through serial port, and then send the data to web app through WebSocket connection. Web app visualize the data

Serial Plotter vs Web Serial Plotter

The Commons

Visualize data that is sent by Arduino through Serial.

The Differences

Web Serial Plotter's functionalities are similar to Serial Plotter's functionalities. Especially, Web Serial Plotter has the following addvangages:

Can be accessed via Internet. There is no limit about distance.
Run on any platform that has a web browser (Windows, macOS, Linux, Android, iOS...). Therefore, data can be plotted on mobile devices.
Custommable via the setting page. Web Serial Plotter can be customized to become graph for any sensors. The following parameter can be customized.
- Size of the plotting area: width and height can be set to any value or to full screen.
- The number of samples: By default, Serial Plotter and Web Serial Plotter display the 500 last data samples. Web Serial Plotter allows to change this value.
- Y axis max bound and min bound: by default Serial Plotter and Web Serial Plotter scale these value automatically to fit all data in the plotting area. Web Serial Plotter allows to fix these value
- Axis Title: Web Serial Plotter allows to add X and Y axis title.

Install Arduino IDE

If you have not install Arduino IDE yet, please download and install Arduino IDE .

Install Library

Run Arduino IDE.
Navigate to Sketch > Include Library > Manage Libraries
Search "Phpoc" on search bar of the Library Manager.
Select the PHPoC library and press the [Install] button.
Restart Arduino IDE for the next step.

Setup Network Information

This part is needed only for the first use.

1. If Ethernet is used
In case of using PHPoC Shield (P4S-348), you have two options to connect to network: Ethernet or WiFi.
If using Ethernet, please follow this instruction to connect the shield to Ethernet.

2. If WiFi is used
WiFi is available in both P4S-347 and P4S-348. Please follow:

This instruction to access the setup page.
This instruction if you want to connect shield to WLAN router or Access Point (AP)
This instruction if you want to operate shield as Access Point (AP)

Source Code

Open "WebSerialPlotter" example on Arduino IDE

Code:

	// Arduino Web Serial Plotter
	//
	// PHPoC Shield and PHPoC WiFi Shield are Internet Shields for Arduino Uno and
	// Mega.
	//
	// These Shields have the buit-in web server and WebSocket server. These Shields
	// contain some buit-in embedded web apps. One of the buit-in embedded web apps
	// is "Web Serial Plotter". Web Serial Plotter is similar to Serial Plotter on
	// Arduino IDE, except for the following points:
	//   - Web Serial Plotter is accessed on web browser through Internet (Serial
	// Plotter is accessed on Arduino IDE through USB cable).
	//   - Web Serial Plotter can be accessed from any OS (Android, iOS, Windows,
	// macOS, Linux...) without any installation.
	//   - Web Serial Plotter is easily customizable via a setting page.
	//
	// This example code shows how to use "Web Serial Plotter".
	//
	// Arduino communicates with PHPoC [WiFi] Shield via pins 10, 11, 12 and 13 on
	// the Uno, and pins 10, 50, 51 and 52 on the Mega. Therefore, these pins CANNOT
	// be used for general I/O.
	//
	// This example code was written by Sollae Systems. It is released into the
	// public domain.
	//
	// Tutorial for the example is available here:
	// https://forum.phpoc.com/articles/tutorials/1246-arduino-web-serial-plotter

	#include <Phpoc.h>

	float y1;
	float y2;
	float y3;

	void setup() {
	  Serial.begin(9600);
	  while(!Serial)
	    ;
	  // initialize PHPoC [WiFi] Shield:
	  Phpoc.begin();
	}

	void loop() {
	  for(int i = 0; i < 360; i += 5) {
	    y1 = 1 * sin(i * M_PI / 180);
	    y2 = 5 * sin((i + 90)* M_PI / 180);
	    y3 = 3 * sin((i + 180)* M_PI / 180);

	    Serial.print(y1);
	    Serial.print(" "); // a space ' ' or  tab '\t' character is printed between the two values.
	    //Serial.print(y2);
	    //Serial.print(" "); // a space ' ' or  tab '\t' character is printed between the two values.
	    Serial.println(y3); // the last value is followed by a carriage return and a newline characters.
	    delay(50);
	  }
	}

The line-by-line explaination of code is presented inside the code.
For more detail of functions's reference, please refer to PHPoC Shield for Arduino Library Reference
Compile the example code and upload to Arduino by clicking "Upload" button on Arduino IDE

Test and Result

Open a web browser from PC, smartphone or tablet.
Type IP address of PHPoC [WiFi] Shield on address bar. If you do not know IP address of PHPoC [WiFi] Shield, see this instruction.
Web browser shows web page that displays the list of web app.
Click Web Serial Plotter icon. (You can also access directy by typing: ip_address/serial_plotter.php).
Click "Connect" button and see the data is plotted.
Data is plotted.
If you are connecting Arduino to Arduino IDE, you can open Serial Plotter by navigating to "Tools" -> "Serial Plotter" on Arduino IDE.
Graph is the same as Web Serial Plotter.

Web Customization

The web app has been created and preload to PHPoC [WiFi] Shield. User does not need to write the web code. User just needs to write Arduino code based on the Arduino example. However, user can modify user interface of web app via a setting page.

Custommable Parameters:

Plotter Area Size: Fixed Size (default) of Full Screen. In case of Fixed Size:
- Width: settable value.
- Height: settable value.
Max Sample: settable value. This is the number of sample plotted.
Y-Axis Auto Scale: Auto Scale (default) or Fixed. In case of Fixed:
- Y-Fixed Min Bound: settable value.
- Y-Fixed Max Bound: settable value.
X-Axis Title: Settable String.
Y-Axis Title: Settable String.