Web Server Blink Using Arduino Uno WiFi

 

WebServerBlink

 
In this demonstrative example, it is shown how to make a simple web server using an Arduino UNO WiFi to command the switch ON/OFF of a LED.
 
1. Hardware
  • Arduino UNO WiFi
  • Led
  • 220Ω Resistor
  • wire
  • Breadboard
2.Circuit
 
You can use the integrated L LED on pin 13 or use another one, in this case, connect the LED anode (usually the longer pin) in series to a 220Ω resistor and connect it to the board pin 13.
 
After connecting the cathode to GND, as shown in the picture.
 
 
Now plug in the board to PC and upload the sketches below. 
 
3.Code
 
Upload the below code and access via browser to http://<IP>/arduino/webserver/ orhttp://<hostname>.local/arduino/webserver/ to read the sensors values. 
  1. #include <Wire.h>  
  2. #include <ArduinoWiFi.h>  
  3. /* 
  4. on your borwser, you type http://<IP>/arduino/webserver/ or http://<hostname>.local/arduino/webserver/ 
  5. http://www.arduino.org/learning/tutorials/webserverblink 
  6. */  
  7. void setup() {  
  8.     pinMode(13,OUTPUT);  
  9.     Wifi.begin();  
  10.     Wifi.println("WebServer Server is up");   
  11. }  
  12. void loop() {  
  13.     while(Wifi.available()){  
  14.       process(Wifi);  
  15.     }  
  16.   delay(50);  
  17. }  
  18. void process(WifiData client) {  
  19.   // read the command  
  20.   String command = client.readStringUntil('/');  
  21.   // is "digital" command?  
  22.   if (command == "webserver") {  
  23.     WebServer(client);  
  24.   }  
  25.   if (command == "digital") {  
  26.     digitalCommand(client);  
  27.   }  
  28. }  
  29. void WebServer(WifiData client) {  
  30.           client.println("HTTP/1.1 200 OK");  
  31.           client.println("Content-Type: text/html");  
  32.           client.println();  
  33.           client.println("<html>");  
  34.           client.println("<head> </head>");  
  35.           client.print("<body>");  
  36.           client.print("Click<input type=button onClick=\"var w=window.open('/arduino/digital/13/1','_parent');w.close();\"value='ON'>pin13 ON<br>");  
  37.           client.print("Click<input type=button onClick=\"var w=window.open('/arduino/digital/13/0','_parent');w.close();\"value='OFF'>pin13 OFF<br>");  
  38.           client.print("</body>");  
  39.           client.println("</html>");  
  40.           client.print(DELIMITER); // very important to end the communication !!!   
  41. }  
  42. void digitalCommand(WifiData client) {  
  43.   int pin, value;  
  44.   // Read pin number  
  45.   pin = client.parseInt();  
  46.   // If the next character is a '/' it means we have an URL  
  47.   // with a value like: "/digital/13/1"  
  48.   if (client.read() == '/') {  
  49.     value = client.parseInt();  
  50.     digitalWrite(pin, value);  
  51.   }  
  52.   // Send feedback to client  
  53.   client.println("Status: 200 OK\n");  
  54.   client.print(F("Pin D"));  
  55.   client.print(pin);  
  56.   client.print(F(" set to "));  
  57.   client.print(value);  
  58.   client.print(EOL);    //char terminator  
  59. }   
4.Output
  • Open a browser and type: http://<IP>/arduino/webserver/ or http://<hostname>.local/arduino/webserver/ 
  • Click ON to go ON the LED 13:
 
  • Click OFF to go OFF the LED 13:
  • You can command the LED also from the web panel, as shown in the below image: 
 
Note: Type the IP address or the hostname.local/ of your board on the browser so you will access to the Arduino UNO WiFi web panel.