Tweet
Web Serial Monitor is similar to Serial Monitor on Arduino IDE, except for the following points:
- Web Serial Monitor is accessed on web browser through Internet (Serial Monitor is accessed on Arduino IDE through USB cable).
- Web Serial Monitor can be accessed from any OS (Android, iOS, Windows, macOS, Linux...) without any installation. Therefore, you can monitor Arduino from mobile devices.
This tutorial shows how to use Web Serial Monitor.
Hardware Required
- Arduino Uno or Mega
- USB Cable for Arduino
- PHPoC Shield (P4S-347) or PHPoC WiFi Shield (P4S-348)
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 Monitor and Web Serial Monitor Works
How Serial Monitor works
Serial Monitor is a tool that is available on Arduino IDE and Arduino Web Editor.
- On Arduino IDE, Serial Monitor reads data that is sent by Arduino through serial port, and then displays the data.
- On Arduino Web Editor, a plugin reads data that is sent by Arduino through serial port and pass the data to Serial Monitor. Serial Monitor displays the data.
How Web Serial Monitor Works
Web Serial Monitor 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 displays the data
Serial Monitor vs Web Serial Monitor
The Commons
- Display data that is sent by Arduino through Serial.
The Differences
Web Serial Monitor's functionalities are similar to Serial Monitor's functionalities. Especially, Web Serial Monitor 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 displayed on mobile devices.
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 "DataTime" example on Arduino IDE or any example that print data to Serial.
- 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 Monitor icon. (You can also access directy by typing: ip_address/serial_monitor.php).
- Click "Connect" button and see the data is displayed.
- Data is displayed.
- If you are connecting Arduino to Arduino IDE, you can open Serial Monitor by navigating to "Tools" -> "Serial Monitor" on Arduino IDE.
The displayed data is the same as Web Serial Monitor.
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:
- Baud Rate: selectable value.
- Width: settable value.
- Height: settable value.
How To
- Click "Setup" on Web App
- It shows setup page. The below is default setting.
- Change setting parameters as you want.
See Also
- Arduino - TCP Chat Server
- Arduino - TCP IPv6 Chat Server
- Arduino - Telnet Server
- Arduino - SSH Server
- Arduino - SSL Server
- Arduino - Email Client
- Arduino - Gmail Client
- Arduino - Web Client
- Arduino - IPv6 Web Client
- Arduino - SSL Web Client
- Arduino - SSL IPv6 Web Client
- Arduino - Web Server - Remote Push
- Arduino - Web Server - Remote Slide
- Arduino - Web Server - Remote Pad
- Arduino - Web Serial Plotter
- Arduino - Web Serial Monitor
- Arduino - RTC Date and Time
References
Attempted to the set MY_BAUD_RATE to 57600 with no karma. Attempted with 9600, worse !
At last attempted with 19200 and now it works !
Sounds somewhat odd to me, possibly the board itself is awful quality.
When you set baudrate from web. It just change the baudrate of PHPoC Shield. You also need to change the baudrate in Arduino by changing parameters in Serial.begin() function.
I hope this help!