ESP8266 AJAX [SOLVED]

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

User avatar

Re: ESP8266 AJAX [SOLVED]

By insense
- Fri Apr 29, 2016 1:18 pm #46498
martinayotte wrote:... so you need to use it accordingly ...


Can you tell me how?

For example:
Code: Select allconst char web_site[] PROGMEM = R"=====( <!DOCTYPE html> ...)=====";
...
server.send(200, "text/html", web_site);
...
User avatar

Re: ESP8266 AJAX [SOLVED]

By eqsOne
- Wed May 18, 2016 12:49 pm #47611 Thanks Peter for this awesome sketch. Just added this to my ESP/TrinketPro BBQ-Thermomter, which makes the temerature now showing without having to refresh the whole site all the time. This is just freakin' awesome.

Also thanks to martinayotte for the great hint with the C++ syntax for bigger page contents. Makes it so much easier when HTML code remains readable within a sketch.

You guys rock.
User avatar

Re: ESP8266 AJAX [SOLVED]

By gianni
- Fri May 27, 2016 1:19 am #48094 Good morning to everybody,
I found very useful to read this posts.
I'm doing a project with esp8266for to read string from serial and print that on browser using Ajax .
It works great but I would like also to send slider value via Ajax from browser to esp8266 serial port (the number of slider for example: slider1=1 ,slider2=2 and slider3 =3 and the value of each sliders for example 0-255 moving the slider cursor.
The sketch is:

Code: Select all

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Ticker.h>
#include <EEPROM.h>
#include <WiFiUdp.h>
#include "helpers.h"
#include "global.h"
/*
Include the HTML, STYLE and Script "Pages"
*/
#include "Page_Root.h"
#include "Page_Admin.h"
#include "Page_Script.js.h"
#include "Page_Style.css.h"
#include "Page_NTPsettings.h"
#include "Page_Information.h"
#include "Page_General.h"
#include "PAGE_NetworkConfiguration.h"
#include "example.h"


#define ACCESS_POINT_NAME "ESP"
#define ACCESS_POINT_PASSWORD "12345678"
#define AdminTimeOut 180 // Defines the Time in Seconds, when the Admin-Mode will be diabled
String XML;

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 handleXML(){
buildXML();
server.send(200,"text/xml",XML);
}



void setup ( void ) {
EEPROM.begin(512);
Serial.begin(115200);
delay(500);
Serial.println("Starting ES8266");
if (!ReadConfig())
{
// DEFAULT CONFIG
config.ssid = "MYSSID";
config.password = "MYPASSWORD";
config.dhcp = true;
config.IP[0] = 192;config.IP[1] = 168;config.IP[2] = 1;config.IP[3] = 100;
config.Netmask[0] = 255;config.Netmask[1] = 255;config.Netmask[2] = 255;config.Netmask[3] = 0;
config.Gateway[0] = 192;config.Gateway[1] = 168;config.Gateway[2] = 1;config.Gateway[3] = 1;
config.ntpServerName = "0.de.pool.ntp.org";
config.Update_Time_Via_NTP_Every = 0;
config.timezone = -10;
config.daylight = true;
config.DeviceName = "Not Named";
config.AutoTurnOff = false;
config.AutoTurnOn = false;
config.TurnOffHour = 0;
config.TurnOffMinute = 0;
config.TurnOnHour = 0;
config.TurnOnMinute = 0;
WriteConfig();
Serial.println("General config applied");
}


if (AdminEnabled)
{
WiFi.mode(WIFI_AP_STA);
WiFi.softAP( ACCESS_POINT_NAME , ACCESS_POINT_PASSWORD);
}
else
{
WiFi.mode(WIFI_STA);
}

ConfigureWifi();
server.begin();

server.on ( "/", processExample );
server.on("/xml",handleXML);
server.on ( "/favicon.ico", []() { Serial.println("favicon.ico"); server.send ( 200, "text/html", "" ); } );
server.on ( "/admin.html", []() { Serial.println("admin.html"); server.send ( 200, "text/html", PAGE_AdminMainPage ); } );
server.on ( "/config.html", send_network_configuration_html );
server.on ( "/info.html", []() { Serial.println("info.html"); server.send ( 200, "text/html", PAGE_Information ); } );
server.on ( "/ntp.html", send_NTP_configuration_html );
server.on ( "/general.html", send_general_html );
// server.on ( "/example.html", []() { server.send ( 200, "text/html", PAGE_EXAMPLE ); } );
server.on ( "/style.css", []() { Serial.println("style.css"); server.send ( 200, "text/plain", PAGE_Style_css ); } );
server.on ( "/microajax.js", []() { Serial.println("microajax.js"); server.send ( 200, "text/plain", PAGE_microajax_js ); } );
server.on ( "/admin/values", send_network_configuration_values_html );
server.on ( "/admin/connectionstate", send_connection_state_values_html );
server.on ( "/admin/infovalues", send_information_values_html );
server.on ( "/admin/ntpvalues", send_NTP_configuration_values_html );
server.on ( "/admin/generalvalues", send_general_configuration_values_html);
server.on ( "/admin/devicename", send_devicename_value_html);




server.onNotFound ( []() { Serial.println("Page Not Found"); server.send ( 400, "text/html", "Page not Found" ); } );
server.begin();
Serial.println( "HTTP server started" );
tkSecond.attach(1,Second_Tick);
UDPNTPClient.begin(2390); // Port for NTP receive
}


void loop ( void ) {



// }
if (AdminEnabled)
{
if (AdminTimeOutCounter > AdminTimeOut)
{
AdminEnabled = false;
Serial.println("Admin Mode disabled!");
WiFi.mode(WIFI_STA);
}
}
if (config.Update_Time_Via_NTP_Every > 0 )
{
if (cNTP_Update > 5 && firstStart)
{
NTPRefresh();
cNTP_Update =0;
firstStart = false;
}
else if ( cNTP_Update > (config.Update_Time_Via_NTP_Every * 60) )
{

NTPRefresh();
cNTP_Update =0;
}
}

if(DateTime.minute != Minute_Old)
{
Minute_Old = DateTime.minute;
if (config.AutoTurnOn)
{
if (DateTime.hour == config.TurnOnHour && DateTime.minute == config.TurnOnMinute)
{
Serial.println("SwitchON");
}
}


Minute_Old = DateTime.minute;
if (config.AutoTurnOff)
{
if (DateTime.hour == config.TurnOffHour && DateTime.minute == config.TurnOffMinute)
{
Serial.println("SwitchOff");
}
}
}

server.handleClient();



/*
* Your Code here
*/

if (Refresh)
{
Refresh = false;
///Serial.println("Refreshing...");
//Serial.printf("FreeMem:%d %d:%d:%d %d.%d.%d \n",ESP.getFreeHeap() , DateTime.hour,DateTime.minute, DateTime.second, DateTime.year, DateTime.month, DateTime.day);
}
}
Code: Select all



an the java script (Ajax) Html page is:
Code: Select all

#ifndef PAGE_EXAMPLE_H
#define PAGE_EXAMPLE_H
//
// WEB SERVER
//


const char PAGE_example[] PROGMEM = R"=====(

<SCRIPT>
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open('PUT','xml',true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send(null);
}
setTimeout('process()',100);
}
function handleServerResponse(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
xmlResponse=xmlHttp.responseXML;
xmldoc = xmlResponse.getElementsByTagName('response');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById('sensoread').innerHTML=message;

TempNum="Temp0";
document.getElementById(TempNum).value =message;
}
}


function updateSlider1(slideAmount1) {
var sliderDiv = document.getElementById("sliderAmount1");
sliderDiv.innerHTML = slideAmount1;
}

function updateSlider2(slideAmount2) {
var sliderDiv = document.getElementById("sliderAmount2");
sliderDiv.innerHTML = slideAmount2;
}

function updateSlider3(slideAmount3) {
var sliderDiv = document.getElementById("sliderAmount3");
sliderDiv.innerHTML = slideAmount3;
}







</SCRIPT>



<BODY onload='process()'>
Sensoread = <A id='sensoread'></A>
<tr>
<td align="center" valign="middle" bgcolor="#272727"><p style="font-style: normal; font-weight: bold; font-size: 80px; color: black;">TEMPERATURE SENSOR</p>

<p><input type="text" style="text-align: center; height: 80px; color: orange ; font-size: 80px;background: #272727;" name="Temperatura" id="Temp0" value="0" size="8" readonly/>&nbsp;</p></td>

&nbsp
&nbsp
&nbsp



<td align="center" valign="middle" bgcolor="#272727"><p style="font-style: normal; font-weight: bold; font-size: 80px; color: black;">LIGHT DIMMING SLIDER</p>

<tr><input type="hidden" name="pwmslider1" value="1" id="slider1" />
<input type="range" style="width: 700px; height: 30px;" id="slide" min="0" max="255" value="0" step="1" onchange="updateSlider1(this.value);"/>&nbsp;</p>
<p><br><span style="color: orange; font-size: 100px" ; id="sliderAmount1">0</span>&nbsp;</p></td></tr>

<tr><input type="hidden" name="pwmslider2" value="2" id="slider2" />
<input type="range" style="width: 700px; height: 30px;" id="slide" min="0" max="255" value="0" step="1" onchange="updateSlider2(this.value);"/>&nbsp;</p>
<p><br><span style="color: orange; font-size: 100px" ; id="sliderAmount2">0</span>&nbsp;</p></td></tr>

<tr><input type="hidden" name="pwmslider3" value="3" id="slider3" />
<input type="range" style="width: 700px; height: 30px;" id="slide" min="0" max="255" value="0" step="1" onchange="updateSlider3(this.value);"/>&nbsp;</p>
<p><br><span style="color: orange; font-size: 100px" ; id="sliderAmount3">0</span>&nbsp;</p></td></tr>





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

</BODY>
</HTML>

)=====";
#endif

void processExample()
{

server.send ( 200, "text/html", PAGE_example );
}
Code: Select all



I used Jhon Lassen esp webserver configuration sketch and the project discussed here, I want thanks you for your contribute.
So in conclusion I need helps for to build Ajax code (basic Ajax and not jquery or other) and sketch parts for to send dinamically the number of sliders and each value outside esp serial pin. I'm sure it can be useful for many other people
Thanks for your help.

Gianni
 Reply
Return to Arduino