Arduino - Web Server - Remote Slide

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

When an user moves a slider on this web app, the web app sends the slider name and slider value to Arduino via WebSocket.

This tutorial shows how to use Web Remote Slide to control Arduino.



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 Web Remote Slide Works

Web Remote Slide is a web apps that is stored on PHPoC [WiFi] Shield.

When an user access this web app via a web browser, web apps is displayed on web browser.

When the user clicks "Connect" button on this web app, a WebSocket connection is created between web app and Arduino.

When the user clicks or touches on touchable area of web app, web app sends a string to Arduino.
The string includes x, y coordinates and touch's state in order (separated by comma).
The string is terminated by a carriage return and a newline characters.


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 "WebRemoteSlide" example on Arduino IDE
  
  

  	// Arduino Web Server - Remote Control (Slide Switch)
  	//
  	// 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 Remote Slide". When an user moves a slider on this web app, the web
  	// app sends the slider name and slider value to Arduino via WebSocket.
  	//
  	// This example code shows how Arduino communicate with "Web Remote Slide".
  	//
  	// 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/1248-arduino-web-server-remote-slide
  	
  	#include <Phpoc.h>
  	
  	PhpocServer server(80);
  	
  	char slideName;
  	int slideValue;
  	
  	void setup() {
  	Serial.begin(9600);
  	while(!Serial)
  	  ;
  	
  	// initialize PHPoC [WiFi] Shield:
  	Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  	//Phpoc.begin();
  	
  	// start WebSocket server
  	server.beginWebSocket("remote_slide");
  	
  	// print IP address of PHPoC [WiFi] Shield to serial monitor:
  	Serial.print("WebSocket server address : ");
  	Serial.println(Phpoc.localIP());
  	}
  	
  	void loop() {
  	// wait for a new client:
  	PhpocClient client = server.available();
  	
  	if (client) {
  	  // read a string that is terminated by a carriage return and a newline
  	  // characters:
  	  String slideStr = client.readLine();
  	
  	  if(slideStr)
  	  {
  	    // when an user moves a slider on web app, web app sends a string to
  	    // Arduino. The first character of string is slide name, followed by slide
  	    // value and terminated by a carriage return and a newline characters.
  	    slideName = slideStr.charAt(0);
  	    slideValue = slideStr.substring(1).toInt();
  	
  	    Serial.print(slideName);
  	    Serial.print('/');
  	    Serial.println(slideValue);
  	  }
  	}
  	}

• 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 Serial Monitor of Arduino IDE.
• Copy the IP address of the shield and keep the Serial Monitor windows open.
  
• Open a web browser from PC, smartphone or tablet.
• Paste IP address of PHPoC [WiFi] Shield on address bar.
• Web browser shows web page that displays the list of web app.
• Click Web Remote Slide icon. (You can also access directy by typing: ip_address/remote_slide.php).
  
• Click "Connect" button.
  
• There are two slider on web app. Move the slider one by one.
  
• See log on Serial Monitor
  
  As we can see, name and value of each slider are sent to Arduino each time the value changes.
  The first slider's name is A.
  The second slider's name is B.

Now you can try controlling servo motor or brightness of LEDs via this web app.




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:

• Width: settable value.
• Height: settable value.
• Max value: settable value. This is maximum value of sliders.
• Min value: settable value. This is minimum value of sliders.

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

• PHPoC Shield for Arduino Library Reference
• PHPoC Shield User Manual
• PHPoC WiFi Shield User Manual