Announcement

Collapse
No announcement yet.

Arduino - Web Serial Plotter

Collapse
X
Collapse

  • 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
    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:

    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.


    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)



    See Also


    References
      Posting comments is disabled.

    Categories

    Collapse

    Latest Articles

    Collapse

    • Arduino - RS-485 Expansion Board
      by support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 02:45 PM
    • Arduino - RS-422 Expansion Board
      by support
      PES-2607 is an easy-to-use RS422/RS485 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS422 or RS485.
      Especially, Arduino does NOT use UART pins to communicate with RS422/RS485 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS422/RS485 expansion boards (up to 14) without using Arduino UART pins.

      Library and examples for...
      11-13-2018, 02:44 PM
    • Arduino - RS-232 Expansion Board
      by support
      PES-2606 is an easy-to-use RS-232 Expansion Board for Arduino Uno and Mega, which allows Arduino to exchange data with serial device via RS-232.
      Especially, Arduino does NOT use UART pins to communicate with RS-232 expansion board. Therefore, users can use Arduino UART pins for other purposes.
      Moreover, A single Arduino Uno/Mega can communicate with multiple RS-232 expansion boards (up to 14) without using Arduino UART pins.

      Library and example for the RS-232 expansion board...
      11-13-2018, 02:43 PM
    • Arduino - Stepper Motor Controller
      by support
      PES-2605 is an easy-to-use stepper motor controller for Arduino Uno and Mega, which uses micro-stepping method to precisely control stepper motor.
      Library and example for the stepper motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the step motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 02:41 PM
    • Arduino - DC Motor Controller
      by support
      PES-2604 is an easy-to-use DC motor controller for Arduino Uno and Mega.
      Library and example for the DC motor controller are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use the DC motor controller with an example of PhpocExpansion library for Arduino.


      Hardware Required...
      11-13-2018, 02:40 PM
    • Arduino - Digital Input Board
      by support
      PES-2602 is an easy-to-use 4-port Input Expansion Board for Arduino Uno and Mega, which allows Arduino to monitor state of DC electric device. In addition, it can monitor NPN, PNP and dry contact(relay).
      Library and example for the 4-port input expansion board are part of of PhpocExpansion library for Arduino. The library reference is available here.

      This tutorial shows how to use 4-port input expansion board with an example of PhpocExpansion library for Arduino.

      ...
      11-13-2018, 02:39 PM
    Working...
    X