good afternoon
Dear, I am writing to you because I can not solve the problem with my webserver on mega.
problem is linked with the slider: when I open 192.168.1.80 on two different browsers or sheets in the same browser I can not update position of the slider after changing slider value - when I am changing value by changing slider position value from arduino is changing in all browsers like should but the position of slider is not changing in another browser, please support me because I tried milion things and without results. below you can find arduino code and page code.
thank you very much in advance for help
<!DOCTYPE html>
<html>
<head>
<title>Arduino Ajax I/O</title>
<script>
cdn = "";
var LED3_state = 0;
var LED4_state = 0;
function GetArduinoIO() {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// XML file received - contains analog values, switch values and LED states
var count;
// get analog inputs
var num_an = this.responseXML.getElementsByTagName('analog').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("analog")[count].innerHTML =
this.responseXML.getElementsByTagName('analog')[count].childNodes[0].nodeValue;
}
// get switch inputs
var num_an = this.responseXML.getElementsByTagName('switch').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("switches")[count].innerHTML =
this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue;
}
// LED 1
if (this.responseXML.getElementsByTagName('status1')[0].childNodes[0].nodeValue === "on") {
document.LED_form.LED1.checked = true;
}
else {
document.LED_form.LED1.checked = false;
}
// LED 2
if (this.responseXML.getElementsByTagName('status2')[0].childNodes[0].nodeValue === "on") {
document.LED_form.LED2.checked = true;
}
else {
document.LED_form.LED2.checked = false;
}
// LED 3
if (this.responseXML.getElementsByTagName('status3')[0].childNodes[0].nodeValue === "on") {
document.getElementById("LED3").innerHTML = "MC65 is ON";
LED3_state = 1;
}
else {
document.getElementById("LED3").innerHTML = "MC65 is OFF";
LED3_state = 0;
}
// LED 4
if (this.responseXML.getElementsByTagName('status4')[0].childNodes[0].nodeValue === "on") {
document.getElementById("LED4").innerHTML = "MC66 is ON";
LED4_state = 1;
}
else {
document.getElementById("LED4").innerHTML = "MC66 is OFF";
LED4_state = 0;
}
// 63 slider
document.getElementById("r63slider").defaultValue =
this.responseXML.getElementsByTagName('slider')[0].childNodes[0].nodeValue;
document.getElementById("w63sliderin").innerHTML =
this.responseXML.getElementsByTagName('slider')[0].childNodes[0].nodeValue + " s.";
}
}
}
}
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "x" + cdn + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 1500);
cdn = "";
}
// service LEDs when checkbox checked/unchecked
function GetCheck1() {
if (LED_form.LED1.checked) {
cdn = "&mc63s=01";
}
else {
cdn = "&mc63s=00";
}
}
function GetCheck2() {
if (LED_form.LED2.checked) {
cdn = "&mc64s=01";
}
else {
cdn = "&mc64s=00";
}
}
function GetButton1() {
if (LED3_state === 1) {
LED3_state = 0;
cdn = "&mc65s=00";
}
else {
LED3_state = 1;
cdn = "&mc65s=01";
}
}
function GetButton2() {
if (LED4_state === 1) {
LED4_state = 0;
cdn = "&mc66s=00";
}
else {
LED4_state = 1;
cdn = "&mc66s=01";
}
}
function f63time() {
if (document.getElementById("r63slider").value < 10) {
cdn = "&mc63t=0" + document.getElementById("r63slider").value;
}
else if (document.getElementById("r63slider").value < 100) {
cdn = "&mc63t=" + document.getElementById("r63slider").value;
}
}
</script>
<style>
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 210px;
}
h1 {
font-size: 120%;
color: blue;
margin: 0 0 10px 0;
}
h2 {
font-size: 85%;
color: #5734E6;
margin: 5px 0 5px 0;
}
p,
form,
button {
font-size: 80%;
color: #252525;
width: 200px;
}
.small_text {
font-size: 70%;
color: #737373;
}
</style>
</head>
<body onload="GetArduinoIO()">
<h1>Arduino Ajax I/O</h1>
<div class="IO_box">
<h2>Analog Inputs</h2>
<p class="small_text">A0 used by Ethernet shield</p>
<p class="small_text">A1 used by Ethernet shield</p>
<p>A2: <span class="analog">...</span></p>
<p>A3: <span class="analog">...</span></p>
<p>A4: <span class="analog">...</span></p>
<p>A5: <span class="analog">...</span></p>
</div>
<div class="IO_box">
<h2>Switch Inputs</h2>
<p class="small_text">D0: used by serial RX</p>
<p class="small_text">D1: used by serial TX</p>
<p>Switch 1 (D2): <span class="switches">...</span></p>
<p>Switch 2 (D3): <span class="switches">...</span></p>
<p class="small_text">D4: used by Ethernet shield</p>
<p>Switch 3 (D5): <span class="switches">...</span></p>
</div>
<div class="IO_box">
<h2>LEDs Using Checkboxes</h2>
<form id="check_LEDs" name="LED_form">
<input type="checkbox" name="LED1" value="0" onclick="GetCheck1()" />MC63 ON/OFF<br /><br />
<input type="checkbox" name="LED2" value="0" onclick="GetCheck2()" />MC64 ON/OFF<br /><br />
</form>
</div>
<div class="IO_box">
<h2>LEDs Using Buttons</h2>
<button type="button" id="LED3" onclick="GetButton1()">MC65 ON/OFF</button><br /><br />
<button type="button" id="LED4" onclick="GetButton2()">MC66 ON/OFF</button><br /><br />
<p class="small_text">D10 to D13 used by Ethernet shield</p>
</div>
<div class="IO_box">
<h2>Set feeding time</h2>
<label id="w63sliderout"></label>
<input type="range" id="r63slider" min="1" max="99" oninput="f63time()">
<label id="w63sliderin"></label>
</div>
</body>
</html>
arduino code:
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 60
// MAC address from Ethernet shield sticker under board
byte mac[] = {0x90, 0xA2, 0xDA, 0x10, 0xB3, 0x4A};
IPAddress ip(192, 168, 1, 80);
EthernetServer server(80); // create a server at port 80
File webFile; // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
boolean LED_state[4] = {0}; // stores the states of the LEDs
char *maszyny[] = {"mc63", "mc64", "mc65", "mc66", "mc67", "mc68", "mc69", "mc70", "su01", "su02", "su03"};
int m_status[] = {1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0 };
int m_czas[] = {15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 };
char m_extract[5] = {""};
char i_extract = {""};
char v_extract[3] = {""};
String sv_extract = "";
void setup()
{
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
// switches on pins 2, 3 and 5
pinMode(2, INPUT_PULLUP);
pinMode(3, INPUT_PULLUP);
pinMode(5, INPUT_PULLUP);
// LEDs
pinMode(6, OUTPUT);
pinMode(7, OUTPUT);
pinMode(8, OUTPUT);
pinMode(9, OUTPUT);
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
}
void loop()
{
digitalWrite(6, m_status[0]);
digitalWrite(7, m_status[1]);
digitalWrite(8, m_status[2]);
digitalWrite(9, m_status[3]);
EthernetClient client = server.available(); // try to get client
if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// limit the size of the stored received HTTP request
// buffer first part of HTTP request in HTTP_req array (string)
// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
// remainder of header follows below, depending on if
// web page or XML page is requested
// Ajax request - send XML file
if (StrContains(HTTP_req, "x")) {
// send rest of HTTP header
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
SetLEDs();
// send XML file containing input states
XML_response(client);
}
else { // web page request
// send rest of HTTP header
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// send web page
webFile = SD.open("index.htm"); // open web page file
if (webFile) {
while (webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
// zdefiniowanie elementów requesta
for (int i = 0; i < 4; i++) {
m_extract[i] = HTTP_req[7 + i];
}
i_extract = HTTP_req[11];
for (int i = 0; i < 2; i++) {
v_extract[i] = HTTP_req[13 + i];
sv_extract = v_extract;
}
// zdefiniowanie elementów requesta
Serial.println(HTTP_req);
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
// every line of text received from the client ends with \r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
void SetLEDs(void)
{
// define time, status and varialbe
for (int i = 0; i < (sizeof maszyny) / 2; i++) {
if (StrContains(m_extract, maszyny[i]) && i_extract == 't') {
m_czas[i] = sv_extract.toInt();
Serial.println(m_extract);
Serial.println(i_extract);
Serial.println(sv_extract);
Serial.println(m_status[i]);
}
if (StrContains(m_extract, maszyny[i]) && i_extract == 's') {
m_status[i] = sv_extract.toInt();
Serial.println(m_extract);
Serial.println(i_extract);
Serial.println(sv_extract);
Serial.println(m_status[i]);
}
}
}
void XML_response(EthernetClient cl)
{
int analog_val; // stores value read from analog inputs
int count; // used by 'for' loops
int sw_arr[] = {2, 3, 5}; // pins interfaced to switches
cl.print("<?xml version = \"1.0\" ?>");
cl.print("<inputs>");
// read analog inputs
for (count = 2; count <= 5; count++) { // A2 to A5
analog_val = analogRead(count);
cl.print("<analog>");
cl.print(analog_val);
cl.println("</analog>");
}
// read switches
for (count = 0; count < 3; count++) {
cl.print("<switch>");
if (digitalRead(sw_arr[count])) {
cl.print("ON");
}
else {
cl.print("OFF");
}
cl.println("</switch>");
}
// checkbox LED states
// LED1
cl.print("<status1>");
if (m_status[0]) {
cl.print("on");
}
else {
cl.print("off");
}
cl.println("</status1>");
// LED2
cl.print("<status2>");
if (m_status[1]) {
cl.print("on");
}
else {
cl.print("off");
}
cl.println("</status2>");
// button LED states
// LED3
cl.print("<status3>");
if (m_status[2]) {
cl.print("on");
}
else {
cl.print("off");
}
cl.println("</status3>");
// LED4
cl.print("<status4>");
if (m_status[3]) {
cl.print("on");
}
else {
cl.print("off");
}
cl.println("</status4>");
cl.print("<slider>");
cl.print(m_czas[0]);
cl.println("</slider>");
cl.print("</inputs>");
}
// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
See 
