Published November 15, 2018 © GPL3+

Arduino - Web Serial Plotter

Web Serial Plotter brings Serial Plotter on Arduino IDE to web browser, which can be accessed from mobile devices. It can be customized.

BeginnerFull instructions provided15 minutes18,019

Things used in this project

Hardware components

Arduino UNO

Arduino Uno or Mega

PHPoC WiFi Shield 2 for Arduino

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

DIYables USB Cable 2.0 Type A/B for Arduino Uno

DIYables Prototype Expansion Board for Arduino Uno

DIYables Starter Kit

Story

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.

Demonstration

Circuit

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

How It 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 data 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 advantages:

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. (See "Web Customization" part)

You can learn more about Arduino Serial Plotter here

Network Setup

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)

How To

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.
Open "WebSerialPlotter" example on Arduino IDE

The line-by-line explanation of code is presented inside the code.
Compile the example code and upload to Arduino
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 directly 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 pre-load 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.

Customizable 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.

How To

Click "Setup" on Web App

It shows setup page. The below is default setting.

Change setting parameters as you want. The below is an example.

Back to Web App, we can see the changes (portrait and landscape)

References

WebSerialPlotter.ino

// 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);
  }
}

Arduino - Web Serial Plotter

Things used in this project

Hardware components

Story

Demonstration

Circuit

How It Works

Network Setup

How To

Web Customization

See Also

References

Code

WebSerialPlotter.ino

Credits

phpoc_man

Comments

Embed the widget on your own site

Arduino - Web Serial Plotter

Arduino - Web Serial Plotter

Things used in this project

Hardware components

Story

Demonstration

Circuit

How It Works

Network Setup

How To

Web Customization

See Also

References

Code

WebSerialPlotter.ino

Credits

phpoc_man

Comments

Related channels and tags