Post topics, source code that relate to the Arduino Platform

User avatar
By katz
#48677 Hi Gianni,

I too have been trying to get sliders to work in AJAX. I couldn't get your program to run on my ESP8266. So, I wrote my own that builds on the code that I posted earlier in this thread, displaying the runtime. I stripped it to the bare essentials. It shows only one slider that controls the blinking speed of an led from 100 to 1000 milliseconds (I assume that you know how to connect an led to your ESP). I use pin16 for the led, you may have to change this according to your setup. The code should run in your ESP without modifications, just try it.

I use Internet Explorer and it runs very well in it. The code works across devices too. If you change the value of the slider on one device, it will magically change on another device ... very nice!

Maybe this helps to get things working in your project.

Ciao, Peter.

Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);
const char* ssid="yourSSID";
const char* password="yourPASSSWORD";
String webSite,javaScript,XML;
unsigned long wait000=0UL,wait001=1000UL;
int LED=16;
int sliderVal=60,blinkSpeed=1000;

void buildWebsite(){
  buildJavascript();
  webSite="<!DOCTYPE HTML>\n";
  webSite+="<META name='viewport' content='width=device-width, initial-scale=1'>\n";
  webSite+=javaScript;
  webSite+="<BODY onload='process()'>\n";
  webSite+="<BR>This is the ESP website ...<BR>\n";
  webSite+="Runtime = <A ID='runtime'></A><BR><BR>\n";
  webSite+="<INPUT ID='slider' TYPE='range' ONCHANGE='Slider()'><BR>\n";
  webSite+="Slidervalue = <A ID='Sliderval'></A><BR>\n";
  webSite+="Blinkspeed = <A ID='Blinkspeed'></A> milliseconds<BR>\n";
  webSite+="</BODY>\n";
  webSite+="</HTML>\n";
}

void buildJavascript(){
  javaScript="<SCRIPT>\n";
  javaScript+="xmlHttp=createXmlHttpObject();\n";

  javaScript+="function createXmlHttpObject(){\n";
  javaScript+="  if(window.XMLHttpRequest){\n";
  javaScript+="    xmlHttp=new XMLHttpRequest();\n";
  javaScript+="  }else{\n";
  javaScript+="    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
  javaScript+="  }\n";
  javaScript+="  return xmlHttp;\n";
  javaScript+="}\n";

  javaScript+="function process(){\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.onreadystatechange=function(){\n";
  javaScript+="      if(xmlHttp.readyState==4&&xmlHttp.status==200){\n";
  javaScript+="        xmlDoc=xmlHttp.responseXML;\n";
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('millistime')[0].firstChild.nodeValue;\n";
  javaScript+="        document.getElementById('runtime').innerHTML=xmlmsg;\n";
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
  javaScript+="        document.getElementById('slider').value=xmlmsg;\n";
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
  javaScript+="        document.getElementById('Sliderval').innerHTML=xmlmsg;\n";
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('blinkspeed')[0].firstChild.nodeValue;\n";
  javaScript+="        document.getElementById('Blinkspeed').innerHTML=xmlmsg;\n";
  javaScript+="      }\n";
  javaScript+="    }\n";
  javaScript+="    xmlHttp.open('PUT','xml',true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="  setTimeout('process()',1000);\n";
  javaScript+="}\n";

  javaScript+="function Slider(){\n";
  javaScript+="  sliderVal=document.getElementById('slider').value;\n";
  javaScript+="  document.getElementById('Sliderval').innerHTML=sliderVal;\n";
  javaScript+="  document.getElementById('Blinkspeed').innerHTML=9*(100-sliderVal)+100;\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.open('PUT','setBlinkspeed?val='+sliderVal,true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="}\n";

  javaScript+="</SCRIPT>\n";
}

void buildXML(){
  XML="<?xml version='1.0'?>";
  XML+="<xml>";
  XML+="<millistime>";
  XML+=millis2time();
  XML+="</millistime>";
  XML+="<sliderval>";
  XML+=String(sliderVal);
  XML+="</sliderval>";
  XML+="<blinkspeed>";
  blinkSpeed=9*(100-sliderVal)+100;
  XML+=String(blinkSpeed);
  XML+="</blinkspeed>";
  XML+="</xml>";
}
String millis2time(){
  String Time="";
  unsigned long ss;
  byte mm,hh;
  ss=millis()/1000;
  hh=ss/3600;
  mm=(ss-hh*3600)/60;
  ss=(ss-hh*3600)-mm*60;
  if(hh<10)Time+="0";
  Time+=(String)hh+":";
  if(mm<10)Time+="0";
  Time+=(String)mm+":";
  if(ss<10)Time+="0";
  Time+=(String)ss;
  return Time;
}

void handleWebsite(){
  buildWebsite();
  server.send(200,"text/html",webSite);
}

void handleXML(){
  buildXML();
  server.send(200,"text/xml",XML);
}

void handleBlinkspeed(){
  sliderVal=server.arg("val").toInt();
  buildXML();
  server.send(200,"text/xml",XML);
}

void setup() {
  Serial.begin(115200);
  pinMode(LED,OUTPUT);
  WiFi.begin(ssid,password);
  while(WiFi.status()!=WL_CONNECTED)delay(500);
  WiFi.mode(WIFI_STA);
  Serial.println("\n\nBOOTING ESP8266 ...");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("Station IP address: ");
  Serial.println(WiFi.localIP());
  server.on("/",handleWebsite);
  server.on("/xml",handleXML);
  server.on("/setBlinkspeed",handleBlinkspeed);
  server.begin();
}

void loop() {
  server.handleClient();
  if(millis()>wait000){
    buildXML();
    wait000=millis()+1000UL;
  }
  if(millis()>wait001){
    digitalWrite(LED,!digitalRead(LED));
    wait001=millis()+blinkSpeed;
  }
}
User avatar
By katz
#48754 It appears that the code in my previous post doesn't work well in all browsers. I use Internet Explorer v11 in which it runs very well. The problem is that different browsers handle the ONCHANGE setting in line 20 differently. It seems that if you change the ONCHANGE to ONINPUT that it works properly in Chrome and Firefox and Edge. But then it won't work in IE version 11.

Peter.
User avatar
By gianni
#49097 Hello Peter, Thanks a lot for your response.
I try your code and it works very well!
Before to read it, I found a solution:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>


ESP8266WebServer server(80);
const char* ssid="htsufficio";
const char* password="hts22bmgf";

String webpage;


void buildwebpage(){
webpage="<!DOCTYPE html> \r\n";
webpage+="<head>\r\n";
webpage+="<meta name='viewport' content='width=device-width, initial-scale=0.5'>\r\n";
webpage+="<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\r\n";
webpage+="<title> HTML5 Slider </title>\r\n";







webpage+="<script>\n\r";
webpage+="function sendDac(Pin,value){\r\n";
webpage+="ValNum = 'valueDac' + Pin;\r\n";
webpage+="document.getElementById(ValNum).innerHTML=value;\r\n";
webpage+="server = '/a_led?n=' + Pin + value;\r\n";
webpage+="request = new XMLHttpRequest();\r\n";
webpage+="request.onreadystatechange = updateasyncDac;\r\n";
webpage+="request.open('ValoreSlider', server, true);\r\n";
webpage+="request.send(null);\r\n";
webpage+="}\r\n";
webpage+="function updateasyncDac(){\r\n";
webpage+="if ((request.readyState == 4) && (request.status == 200))\r\n";
webpage+="{\r\n";
webpage+="}\r\n";
webpage+="}\r\n";
webpage+="</script>\r\n";
webpage+="</head>\r\n";





webpage+=" <tr>";
webpage+="<td bgcolor=\"#000000\"><span style=\"font-style: normal; font-weight: bold; font-size: 70px; color: rgba(255,255,255,1);\">1</span><img src=\"http://s32.postimg.org/vyy4y19et/lampione_JPEG_WEBNRF.jpg\" width=\"150\" height=\"125\" alt=\"\"/></td>";
webpage+=" <td colspan=\"4\" align=\"center\" valign=\"middle\" bgcolor=\"#272727\"><p>";
webpage+="<input type=\"hidden\" name=\"pin\" value=\"1\" id=\"pin1\" />";
webpage+="<input type=\"range\" style=\"width: 700px; height: 30px;\" id=\"dac1\" min=\"0\" max=\"255\" value=\"0\" step=\"1\" onchange=\"sendDac(document.getElementById('pin1').value,this.value);\"/>&nbsp;</p>";
webpage+="<p><br><span style=\"color: orange; font-size: 50px\" ; id=\"valueDac1\">0</span>&nbsp;</p></td>";
webpage+="</tr>";




webpage+="<style>\r\n";
webpage+=" input[type='range'] {\r\n";
webpage+=" -webkit-appearance: none;\r\n";
webpage+=" appearance: none;\r\n";
webpage+=" -moz-appearance: none;\r\n";
webpage+=" border-radius: 5px; \r\n";
webpage+=" box-shadow: inset 15px 15px 15px rgba(1, 121, 41, 0.2); \r\n";
webpage+=" background-color: #C8EBC2; \r\n";
webpage+=" height: 20px; \r\n";
webpage+=" vertical-align: middle; \r\n";
webpage+=" width: 800px; \r\n";
webpage+=" } \r\n";
webpage+=" input[type=range]::-webkit-slider-runnable-track { \r\n";
webpage+=" -webkit-appearance: none; \r\n";
webpage+=" appearance: none; \r\n";
webpage+=" border-radius: 10px; \r\n";
webpage+=" box-shadow: inset 5px 5px 5px rgba(1, 121, 41, 0.2); \r\n";
webpage+=" background-color: #F95; \r\n";
webpage+=" height: 10px; \r\n";
webpage+=" vertical-align:middle; \r\n";
webpage+=" border:solid 15px rgba(0,0,0,0.25); \r\n";
webpage+=" } \r\n";
webpage+=" input[type='range']::-webkit-slider-thumb { \r\n";
webpage+=" -webkit-appearance: none; \r\n";
webpage+=" border-radius: 10px; \r\n";
webpage+=" background-color: #635B52; \r\n";
webpage+=" box-shadow:inset 0px 10px 0px rgba(000,000,000,0.5); \r\n";
webpage+=" border: 8px solid #C8EBC2; \r\n";
webpage+=" height: 60px; \r\n";
webpage+=" width: 40px; \r\n";
webpage+=" vertical-align:middle; \r\n";
webpage+=" margin-top: -6px; \r\n";
webpage+=" } \r\n";
webpage+=" input[type='range']::-moz-range-track { \r\n";
webpage+=" -moz-appearance: none; \r\n";
webpage+=" border-radius: 10px; \r\n";
webpage+=" box-shadow: inset 5px 5px 5px rgba(000,000,000,0.25); \r\n";
webpage+=" background-color: #EAEAE0; \r\n";
webpage+=" height: 20 px; \r\n";
webpage+=" border:solid 10px rgba(0,0,0,0.25); \r\n";
webpage+=" vertical-align:middle; \r\n";
webpage+=" margin:0; \r\n";
webpage+=" padding:0; \r\n";
webpage+=" } \r\n";
webpage+=" input[type='range']::-moz-range-thumb { \r\n";
webpage+=" -moz-appearance: none; \r\n";
webpage+=" border-radius: 10px; \r\n";
webpage+=" background-color: rgba(58, 57, 59, 0.9); \r\n";
webpage+=" box-shadow:inset 0px 1px 0px rgba(0, 255, 0, 0.3); \r\n";
webpage+=" border: 8px solid #999; \r\n";
webpage+=" height: 50px; \r\n";
webpage+=" width: 40px; \r\n";
webpage+=" } \r\n";
webpage+=" </style> \r\n";
webpage+="</BODY>\r\n";
webpage+="</HTML>\r\n";
}


void handlewebpage(){
buildwebpage();
server.send ( 200,"text/html",webpage );
}




void a_led() {
for (uint8_t i=0; i<server.args(); i++){
Serial.println( server.arg(i));
}
}


void setup () {
Serial.begin(115200);
WiFi.begin(ssid,password);
while(WiFi.status()!=WL_CONNECTED)delay(500);
WiFi.mode(WIFI_STA);
Serial.println("\n\nBOOTING ESP8266 ...");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("Station IP address: ");
Serial.println(WiFi.localIP());


server.on ( "/", handlewebpage);
server.on("/a_led", a_led);
server.begin();




}

void loop ()
{

server.handleClient();

}




Thanks again..
Gianni
User avatar
By gianni
#49261 Hi Peter,
I found this solution for to manage more then one slider (4 sliders in this case) using your code . It is fast and works very well, however, using this method I adopted the java code becomes very large.
If the slider become 10, as I tried, and html code is big too, I've problem to load webpage on the browser (white page is displayed on the browser).
I'm sure there is a simpler way for to manage 10 or more slider using your code avoiding to repeat the code for "n" times as I do, but at present I have not been able to do so.
Thanks in advance to you and to anyone who wants to contribute.

Here is the code:
Code: Select all#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);
const char* ssid="XXXXXXXXXXX";
const char* password="XXXXXXXXXXXX";
String webSite,javaScript,XML,XMLFromSerial;
 
 
int sliderVal=0;
int NumSlider=0;
int sliderVal1=0;
int NumSlider1=0;
int sliderVal2=0;
int NumSlider2=0;
int sliderVal3=0;
int NumSlider3=0;


void buildJavascript(){
  javaScript="<SCRIPT>\n";
  javaScript+="xmlHttp=createXmlHttpObject();\n";

  javaScript+="function createXmlHttpObject(){\n";
  javaScript+="  if(window.XMLHttpRequest){\n";
  javaScript+="    xmlHttp=new XMLHttpRequest();\n";
  javaScript+="  }else{\n";
  javaScript+="    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
  javaScript+="  }\n";
  javaScript+="  return xmlHttp;\n";
  javaScript+="}\n";

  javaScript+="function process(){\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.onreadystatechange=function(){\n";
  javaScript+="      if(xmlHttp.readyState==4&&xmlHttp.status==200){\n";
  javaScript+="        xmlDoc=xmlHttp.responseXML;\n";
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('millistime')[0].firstChild.nodeValue;\n";
  javaScript+="        document.getElementById('runtime').innerHTML=xmlmsg;\n";

 
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
 javaScript+="        xmlmsg1=xmlDoc.getElementsByTagName('sliderval1')[0].firstChild.nodeValue;\n";
 javaScript+="        xmlmsg2=xmlDoc.getElementsByTagName('sliderval2')[0].firstChild.nodeValue;\n";
  javaScript+="        xmlmsg3=xmlDoc.getElementsByTagName('sliderval3')[0].firstChild.nodeValue;\n";
javaScript+="        document.getElementById('slider').value=xmlmsg;\n";
javaScript+="        document.getElementById('slider1').value=xmlmsg1;\n";
javaScript+="        document.getElementById('slider2').value=xmlmsg2;\n";
javaScript+="        document.getElementById('slider3').value=xmlmsg3;\n";

 
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('sliderval')[0].firstChild.nodeValue;\n";
javaScript+="        xmlmsg1=xmlDoc.getElementsByTagName('sliderval1')[0].firstChild.nodeValue;\n";
javaScript+="        xmlmsg2=xmlDoc.getElementsByTagName('sliderval2')[0].firstChild.nodeValue;\n";
javaScript+="        xmlmsg3=xmlDoc.getElementsByTagName('sliderval3')[0].firstChild.nodeValue;\n";
 
  javaScript+="        document.getElementById('Sliderval').innerHTML=xmlmsg;\n";
javaScript+="        document.getElementById('Sliderval1').innerHTML=xmlmsg1;\n";
javaScript+="        document.getElementById('Sliderval2').innerHTML=xmlmsg2;\n";
javaScript+="        document.getElementById('Sliderval3').innerHTML=xmlmsg3;\n";
 
  javaScript+="        xmlmsg=xmlDoc.getElementsByTagName('NumSlider')[0].firstChild.nodeValue;\n";
 javaScript+="        xmlmsg1=xmlDoc.getElementsByTagName('NumSlider1')[0].firstChild.nodeValue;\n";
javaScript+="        xmlmsg2=xmlDoc.getElementsByTagName('NumSlider2')[0].firstChild.nodeValue;\n";
 javaScript+="        xmlmsg3=xmlDoc.getElementsByTagName('NumSlider3')[0].firstChild.nodeValue;\n";

 
  javaScript+="        document.getElementById('NumSlider').innerHTML=xmlmsg;\n";
javaScript+="        document.getElementById('NumSlider1').innerHTML=xmlmsg1;\n";
javaScript+="        document.getElementById('NumSlider2').innerHTML=xmlmsg2;\n";
javaScript+="        document.getElementById('NumSlider3').innerHTML=xmlmsg3;\n";

 
  javaScript+="      }\n";
  javaScript+="    }\n";
  javaScript+="    xmlHttp.open('PUT','xml',true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="  setTimeout('process()',1000);\n";
  javaScript+="}\n";

  javaScript+="function Slider(){\n";
  javaScript+="  sliderVal=document.getElementById('slider').value;\n";
  javaScript+="  document.getElementById('Sliderval').innerHTML=sliderVal;\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.open('PUT','setNumSlider?val='+sliderVal,true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="}\n";

  javaScript+="function Slider1(){\n";
  javaScript+="  sliderVal1=document.getElementById('slider1').value;\n";
  javaScript+="  document.getElementById('Sliderval1').innerHTML=sliderVal1;\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.open('PUT','setNumSlider1?val1='+sliderVal1,true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="}\n";


  javaScript+="function Slider2(){\n";
  javaScript+="  sliderVal2=document.getElementById('slider2').value;\n";
  javaScript+="  document.getElementById('Sliderval2').innerHTML=sliderVal2;\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.open('PUT','setNumSlider2?val2='+sliderVal2,true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="}\n";


  javaScript+="function Slider3(){\n";
  javaScript+="  sliderVal3=document.getElementById('slider3').value;\n";
  javaScript+="  document.getElementById('Sliderval3').innerHTML=sliderVal3;\n";
  javaScript+="  if(xmlHttp.readyState==0||xmlHttp.readyState==4){\n";
  javaScript+="    xmlHttp.open('PUT','setNumSlider3?val3='+sliderVal3,true);\n";
  javaScript+="    xmlHttp.send(null);\n";
  javaScript+="  }\n";
  javaScript+="}\n";







 
 

  javaScript+="</SCRIPT>\n";
}




void buildWebsite(){
  buildJavascript();
  webSite="<!DOCTYPE HTML>\n";
  webSite+="<META name='viewport' content='width=device-width, initial-scale=1'>\n";
  webSite+=javaScript;
  webSite+="<BODY onload='process()'>\n";
  webSite+="<BR>This is the ESP website ...<BR>\n";
  webSite+="Tempo di funzionamento = <A ID='runtime'></A><BR><BR>\n";
 
  webSite+="<INPUT ID='slider' TYPE='range' ONCHANGE='Slider()'><BR>\n";
  webSite+="PWM = <A ID='Sliderval'></A><BR>\n";
  webSite+="NODE = <A ID='NumSlider'></A> <BR>\n";
 
  webSite+="<INPUT ID='slider1' TYPE='range' ONCHANGE='Slider1()'><BR>\n";
  webSite+="PWM = <A ID='Sliderval1'></A><BR>\n";
  webSite+="NODE = <A ID='NumSlider1'></A><BR>\n";

  webSite+="<INPUT ID='slider2' TYPE='range' ONCHANGE='Slider2()'><BR>\n";
  webSite+="PWM = <A ID='Sliderval2'></A><BR>\n";
  webSite+="NODE = <A ID='NumSlider2'></A><BR>\n";

  webSite+="<INPUT ID='slider3' TYPE='range' ONCHANGE='Slider3()'><BR>\n";
  webSite+="PWM = <A ID='Sliderval3'></A><BR>\n";
  webSite+="NODE = <A ID='NumSlider3'></A><BR>\n";

  webSite+="</BODY>\n";
  webSite+="</HTML>\n";
}




 


 

void buildXML(){ String millis2time();
String sensorstring();

  XML="<?xml version='1.0'?>";
  XML+="<xml>";
  XML+="<millistime>";
  XML+=millis2time();
  XML+="</millistime>";
 
  XML+="<sliderval>";
  XML+=String(sliderVal);
  XML+="</sliderval>";
  XML+="<NumSlider>";
  NumSlider=1;
  XML+=String(NumSlider);
  XML+="</NumSlider>";

  XML+="<sliderval1>";
  XML+=String(sliderVal1);
  XML+="</sliderval1>";
  XML+="<NumSlider1>";
  NumSlider1=2;
  XML+=String(NumSlider1);
  XML+="</NumSlider1>";

  XML+="<sliderval2>";
  XML+=String(sliderVal2);
  XML+="</sliderval2>";
  XML+="<NumSlider2>";
  NumSlider2=3;
  XML+=String(NumSlider2);
  XML+="</NumSlider2>";

  XML+="<sliderval3>";
  XML+=String(sliderVal3);
  XML+="</sliderval3>";
  XML+="<NumSlider3>";
  NumSlider3=4;
  XML+=String(NumSlider3);
  XML+="</NumSlider3>";

XML+="<response>";
XML+=sensorstring();
XML+="</response>";
XML+="</xml>";
}


String sensorstring(){
String valuefromserial="";
 
 
while(Serial.available()){
valuefromserial+= Serial.readStringUntil('R');
Serial.println(valuefromserial);
}
return valuefromserial;

}


  String millis2time(){
  String Time="";
  unsigned long ss;
  byte mm,hh;
  ss=millis()/1000;
  hh=ss/3600;
  mm=(ss-hh*3600)/60;
  ss=(ss-hh*3600)-mm*60;
  if(hh<10)Time+="0";
  Time+=(String)hh+":";
  if(mm<10)Time+="0";
  Time+=(String)mm+":";
  if(ss<10)Time+="0";
  Time+=(String)ss;
  return Time;
}

void handleWebsite(){
  buildWebsite();
  server.send(200,"text/html",webSite);
}

void handleXML(){
  buildXML();
  server.send(200,"text/xml",XML);
}

void handleBlinkspeed(){
  sliderVal=server.arg("val").toInt();
  Serial.println(NumSlider);
  Serial.println(sliderVal);
 
  buildXML();
  server.send(200,"text/xml",XML);
}

void handleBlinkspeed1(){
  sliderVal1=server.arg("val1").toInt();
  Serial.println(NumSlider1);
  Serial.println(sliderVal1);
 
  buildXML();
  server.send(200,"text/xml",XML);
}


void handleBlinkspeed2(){
  sliderVal2=server.arg("val2").toInt();
   Serial.println(NumSlider2);
  Serial.println(sliderVal2);
 
  buildXML();
  server.send(200,"text/xml",XML);
}


void handleBlinkspeed3(){
  sliderVal3=server.arg("val3").toInt();
   Serial.println(NumSlider3);
  Serial.println(sliderVal3);
 
  buildXML();
  server.send(200,"text/xml",XML);
}

 


void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid,password);
  while(WiFi.status()!=WL_CONNECTED)delay(500);
  WiFi.mode(WIFI_STA);
  Serial.println("\n\nBOOTING ESP8266 ...");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("Station IP address: ");
  Serial.println(WiFi.localIP());
  server.on("/",handleWebsite);
  server.on("/xml",handleXML);
 
  server.on("/setNumSlider",handleBlinkspeed);
  server.on("/setNumSlider1",handleBlinkspeed1);
  server.on("/setNumSlider2",handleBlinkspeed2);
  server.on("/setNumSlider3",handleBlinkspeed3);
  server.begin();
}
 
void loop() {

  server.handleClient();
 
 }