-->

ESP8266 Community Forum

Open Community Forum for ESP8266, Come share Arduino and IoT (Internet of Things)
https://www.esp8266.com/

AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL PIN

https://www.esp8266.com/viewtopic.php?f=8&t=10224

Page 1 of 1

AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL PIN

PostPosted: Wed Jun 01, 2016 12:13 pm
by gianni
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

Re: AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL

PostPosted: Mon Jun 13, 2016 2:53 am
by gianni
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

Re: AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL

PostPosted: Mon Jun 20, 2016 4:29 am
by maurizze
You should remove your password from the code post. Otherwise nice project you are working on :)

Re: AJAX WEBSERVER SEND SLIDER VALUE OUT ESP8266 SERIAL

PostPosted: Wed Jul 20, 2016 10:06 am
by gianni
Hello,
Yes you are right! It's to late now for to remove it :-)
Thanks! Yes I'm still working on it! Step by step I'm building some interesting thing.
All times are UTC - 5 hours
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/