AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL PIN

Post topics, source code that relate to the Arduino Platform
 Reply

User avatar

AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL PIN

By gianni
- Wed Jun 01, 2016 12:13 pm #48404 Hello everyone.
THE sketch i posted use the library esp8266webserver.h . The job I want my ESP do is to read strings from esp8266 serial port and send outside the ESP8266 serial pin the three sliders amount value separately.
The first part works properly (I can read strings coming from serial pin of the esp8266),
while I have difficulty writing the javascript code (AJAX) for to send slider's value outside the esp8266 serial pin (for example I want to send the string 1/125, where "1" is the number that identifies the slider and 125 is the value of slider).
I thank the members of this Community who through their work have enabled me to realize some projects and I hope that what I have done will be useful for someone .
Here is the Sketch:

Code: Select all



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


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

String XML;
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";


//JavaScript
webpage+="<script type='text/javascript'>\r\n";
webpage+="var xmlHttp=createXmlHttpObject();\r\n";
webpage+="function createXmlHttpObject(){\r\n";
webpage+="if(window.XMLHttpRequest){\r\n";
webpage+="xmlHttp=new XMLHttpRequest();\r\n";
webpage+="}else{\r\n";
webpage+="xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\r\n";
webpage+="}\r\n";
webpage+="return xmlHttp;\r\n";
webpage+="}\r\n";
webpage+="function process(){\r\n";
webpage+="if(xmlHttp.readyState==0 || xmlHttp.readyState==4){\r\n";
webpage+="xmlHttp.open('PUT','xml',true);\r\n";
webpage+="xmlHttp.onreadystatechange=handleServerResponse;\r\n";
webpage+="xmlHttp.send(null);\r\n";
webpage+="}\r\n";
webpage+="setTimeout('process()',100);\r\n";
webpage+="}\r\n";
webpage+="function handleServerResponse(){\r\n";
webpage+="if(xmlHttp.readyState==4 && xmlHttp.status==200){\r\n";
webpage+="xmlResponse=xmlHttp.responseXML;\r\n";
webpage+="xmldoc = xmlResponse.getElementsByTagName('response');\r\n";
webpage+="message = xmldoc[0].firstChild.nodeValue;\r\n";
webpage+="document.getElementById('sensoread').innerHTML=message;\r\n";
webpage+="SerialNum='fromserial';\r\n";
webpage+="document.getElementById(SerialNum).value =message;\r\n";
webpage+="}\r\n";
webpage+="}\r\n";

//Sliders
webpage+="function updateSlider1(sliderAmount1) {\r\n";
webpage+="var sliderDiv1 = document.getElementById('sliderAmount1');\n";
webpage+="sliderDiv1.innerHTML = sliderAmount1;\r\n";;
webpage+="}\r\n";
webpage+="function updateSlider2(sliderAmount2) {\r\n";
webpage+="var sliderDiv2 = document.getElementById('sliderAmount2');\n";
webpage+="sliderDiv2.innerHTML = sliderAmount2;\n";
webpage+="}\r\n";
webpage+="\r\n";
webpage+="function updateSlider3(sliderAmount3) {\n";
webpage+="var sliderDiv3 = document.getElementById('sliderAmount3');\n";
webpage+="sliderDiv3.innerHTML = sliderAmount3;\n";
webpage+="} \n";
webpage+="</SCRIPT>\n";



//webpage
webpage+="</head> \r\n";
webpage+="<BODY onload='process()'>\r\n";
webpage+="Sensoread = <A id='sensoread'></A>\r\n";
webpage+="<tr><td align='center' valign='middle' bgcolor='#272727'><p style='font-style: normal; font-weight: bold; font-size: 40px; color: black;'>TEMPERATURE SENSOR</p> \r\n";
webpage+="<p><input type='text' style='text-align: center; height: 30px; color: orange ; font-size: 40px;background: #272727;' name='NumFromSerial' id='fromserial' value='0'size='8' readonly/>&nbsp;</p>\r\n";
webpage+="</td>&nbsp&nbsp&nbsp <td align='center' valign='middle' bgcolor='#272727'><p style='font-style: normal; font-weight: bold; font-size: 40px; color: black;'>LIGHT DIMMING SLIDER</p> \r\n";
webpage+="\r\n";
webpage+="<tr><input type='hidden' name='pwmslider1' value='1' id='slider1' />\r\n";
webpage+="<input type='range' style='width: 400px; height: 30px;' id='slide' min='0' max='255' value='0' step='1\' onchange='updateSlider1(this.value);'/>&nbsp;</p>\r\n";
webpage+="<p><br><span style='color: orange; font-size: 50px' ; id='sliderAmount1'>0</span>&nbsp;</p></td></tr>\r\n";
webpage+="\r\n";
webpage+="<tr><input type='hidden' name='pwmslider2' value='2' id='slider2' /> \r\n";
webpage+="<input type='range' style='width: 400px; height: 30px;' id='slide' min='0' max='255' value='0' step='1' onchange='updateSlider2(this.value);'/>&nbsp;</p>\r\n";
webpage+="<p><br><span style='color: orange; font-size: 50px' ; id='sliderAmount2'>0</span>&nbsp;</p></td></tr>\r\n";
webpage+="\r\n";
webpage+="<tr><input type='hidden' name='pwmslider3' value='3' id='slider3' /> \r\n";
webpage+="<input type='range' style='width: 400px; height: 30px;' id='slide' min='0' max='255' value='0' step='1' onchange='updateSlider3(this.value);'/>&nbsp;</p>\r\n";
webpage+="<p><br><span style='color: orange; font-size: 50px' ; id='sliderAmount3'>0</span>&nbsp;</p></td></tr> \r\n";
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+="\r\n";
webpage+="</BODY>\r\n";
webpage+="</HTML>\r\n";
}

void buildXML(){
String sensorstring();
XML="<?xml version='1.0'?>";
XML+="<response>";
XML+=sensorstring();
XML+="</response>";
}

String sensorstring(){
String valuefromserial="";


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


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


void handleXML(){
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 ( "/", handlewebpage);
server.on("/xml",handleXML);
server.begin();



}

void loop ()
{

server.handleClient();

}

Code: Select all


Thank you in advance to those who will want to give his help.

Gianni
User avatar

Re: AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL

By gianni
- Mon Jun 13, 2016 2:53 am #49099 Hi All again,
I've found this solution:
Code: Select all #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();
 
}

 


hope it can be useful...
Gianni
 Reply
Return to Arduino