ARDUINO AND RASPBERRY PI

GUI Web server
code for Arduino: See below

/*--------------------------------------------------------------
  Program:      eth_websrv_SD_link

  Description:  Arduino web server that serves up a basic web
                page that links to a second page. Clicking the
                link will open the second page. The second page
                links back to the first page.

  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
             
  Software:     Developed using Arduino 1.0.5 software
                Should be compatible with Arduino 1.0 +
             
                Requires index.htm and page2.htm to be on the
                micro SD card in the Ethernet shield micro
                SD card socket.

  References:   - WebServer example by David A. Mellis and
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         2 March 2013
  Modified:     14 June 2013
                - removed use of String class, used too much SRAM
                - added StrClear() and StrContains() functions
                - disable Ethernet chip at startup

  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/
#include "DHT.h"
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ   20
#define DHTPIN 2     // what pin we're connected to
// Uncomment whatever type you're using!
#define DHTTYPE DHT11   // DHT 11
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 137, 1);   // IP address, may need to change depending on network
EthernetServer server(80);       // create a server at port 80

char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0;              // index into HTTP_req buffer
DHT dht(DHTPIN, DHTTYPE);
//String dataTemp = "";
//String dataHumidity = "";
void setup()
{
    // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    pinMode(3, OUTPUT);
    digitalWrite(3, HIGH);
    dht.begin();
    /*delay(10);
    SD.remove("temp.htm");
    delay(10);
    delay(10);
    SD.remove("humidity.htm");
    delay(10);*/
    //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.");

    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
}
//int i=1;
//int j=1;
void loop()
{
  File webFile;                    // handle to files on SD card
  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
                // 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++;
                }
                //Serial.print(c);    // print HTTP request character to serial monitor
                // 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");
                    client.println("Content-Type: text/html");
                    client.println("Connnection: close");
                    client.println();
                    // open requested web page file
                    if (StrContains(HTTP_req, "GET / ")
                                 || StrContains(HTTP_req, "GET /index.htm")) {
                        webFile = SD.open("index.htm");        // open web page file
                    }
                    else if (StrContains(HTTP_req, "GET /temp.htm"))
                    {
                      String dataTemp;
                      int i = (int)dht.readTemperature(); // now i is 3
                      dataTemp += String(i);
                      client.println(dataTemp);
                    }
                    else if (StrContains(HTTP_req, "GET /humidity.htm"))
                    {
                      String dataHumidity;
                      int j = (int)dht.readHumidity(); // now i is 3
                      dataHumidity += String(j);
                      client.println(dataHumidity);
                    }
                 
                    // send web page to client
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read());
                        }
                        webFile.close();
                    }
                    // reset buffer index and all buffer elements to 0
                    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)
}

// 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;
}


/////////////////////////////////end code Arduino/////////////////




Code for Web Server:See Below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Network-Dashboard</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">${demo.css}</style>
<!--<link href="http://localhost/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/css/datepicker3.css" rel="stylesheet">
<link href="http://localhost/css/styles.css" rel="stylesheet">-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>

<script type="text/javascript">
var temperature='0';
var humidity='0';
var converage='0';
var countT='0';
var countH='0';
var UpperErrorLimitTemperature='0';
var LowerErrorLimitTemperature='0';
var UpperErrorLimitHumidity='0';
var LowerErrorLimitHumidity='0';
var text="<table border='1'>"+"<td style=width:450px>"+"Date"+"</td>"+"<td style=width:100px>"+"Temperature"+"</td>"+"<td style=width:100px>"+"Humidity"+"</td>"+"<td style=width:100px>"+"Converage"+"</td>"+"</table>";
//temperature=(Math.random()*100);
function loadXMLDoctemperature()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
temperature=xmlhttp.responseText;
converage='100';
countT='0';
//alert(xmlhttp.responseText);
}else{
countT++;
if(countT==10)
{
countT='0';
converage='100';
//temperature='40';
}
}
}
xmlhttp.open("GET","http://192.168.137.1/temp.htm",true);
xmlhttp.send(null);
//alert(xmlhttp.responseText);
//temperature= Math.random()*100;
}
function loadXMLDochumidity()
{
    var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
humidity=xmlhttp.responseText;
converage='100';
countH='0';
//alert(xmlhttp.responseText);
}else{
countH++;
if(countH==1)
{
countH='0';
converage='100';
//humidity='50';
}
}
}
xmlhttp.open("GET","http://192.168.137.1/humidity.htm",true);
xmlhttp.send();
//humidity= Math.random()*100;
}
function loadXMLDoctemperature()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
temperature=xmlhttp.responseText;
converage='100';
countT='0';
//alert(xmlhttp.responseText);
}else{
countT++;
if(countT==1)
{
countT='0';
converage='100';
temperature='40';
}
}
}
xmlhttp.open("GET","http://192.168.137.2/temp.htm",true);
xmlhttp.send(null);
//alert(xmlhttp.responseText);
//temperature= Math.random()*100;
}
function loadXMLDochumidity()
{
    var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
humidity=xmlhttp.responseText;
converage='100';
countH='0';
//alert(xmlhttp.responseText);
}else{
countH++;
if(countH==1)
{
countH='0';
converage='100';
humidity='50';
}
}
}
xmlhttp.open("GET","http://192.168.137.2/humidity.htm",true);
xmlhttp.send();
//humidity= Math.random()*100;
}
$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
$('#container1').highcharts(
{
chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Temperature'
        },
        pane: {
            startAngle: -150,
            endAngle: 90,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#fff']
                    ]
                }//,
                //borderWidth: 0,
                //outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#fff'],
                        [1, '#FFF']
                    ]
                }//,
                //borderWidth: 1,
                //outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#fff'//,
                //borderWidth: 0,
                //outerRadius: '105%',
                //innerRadius: '103%'
            }]
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 5,
            minorTickPosition: 'inside',
            minorTickColor: '#000',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#000',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: '℃'
            },
            plotBands: [{
                from: 0,
                to: 30,
                color: '#00ff00' // green
            }, {
                from: 0,
                to: 0,
                color: '#DDDF0D' // yellow
            }, {
                from: 30,
                to: 100,
                color: '#ff0000' // red
            }]
        },
        series: [{
            name: 'Temperature',
            data: [100],
            tooltip: {
                valueSuffix: '℃'
            }
        }]
},
        // Add some life
        function (chart) {
            if (!chart.renderer.forExport) {
                setInterval(function () {
//loadXMLDoctemperature();
//loadXMLDochumidity();
var ComparatorTemperature;
var a = parseInt(temperature,10);
$("#VarTemperature").text(a.toFixed(2)+"  ℃");
if(a<30&&a>0)
{
ComparatorTemperature='<td class="btn btn-success">✔</td>';
}else{
ComparatorTemperature='<td class="btn btn-danger">✘</td>';
}
$("#ComparatorTemperature").html(ComparatorTemperature);

                    var point = chart.series[0].points[0],
                        newVal,
                        inc = 0;//parseInt(temperature,10);//Math.round((Math.random() - 0.5) * 20);
                    newVal = point.y + inc;
                    if (newVal < 0 || newVal > 100) {
                        newVal = point.y - inc;
                    }
                    point.update(parseInt(temperature,10));
//yAxis(from: parseInt(UpperErrorLimitTemperature,10),to: 125,color: '#ff0000'); // red);
                }, 1000);
            }
        }
);//end function.
$('#container2').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Humidity'
        },
        pane: {
            startAngle: -150,
            endAngle: 90,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                }//,
                //borderWidth: 0,
                //outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                }//,
                //borderWidth: 1,
                //outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#fff'//,
                //borderWidth: 0,
                //outerRadius: '105%',
                //innerRadius: '103%'
            }]
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 90,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 5,
            minorTickPosition: 'inside',
            minorTickColor: '#000',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#000',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: '%'
            },
            plotBands: [{
                from: 60,
                to: 90,
                color: '#00ff00' // green
            }, {
                from: 0,
                to: 0,
                color: '#DDDF0D' // yellow
            }, {
                from: 0,
                to: 60,
                color: '#ff0000' // red
            }]
        },
        series: [{
            name: 'Humidity',
            data: [90],
            tooltip: {
                valueSuffix: ' %'
            }
        }]
},
        // Add some life
        function (chart) {
            if (!chart.renderer.forExport) {
                setInterval(function () {
//loadXMLDochumidity();
var ComparatorHumidity;
b = parseInt(humidity,10);
$("#VarHumidity").text(b.toFixed(2)+" %");
if(b>60&&b>20)
{
ComparatorHumidity='<td class="btn btn-success">✔</td>';
}else{
ComparatorHumidity='<td class="btn btn-danger">✘</td>';
}
$("#ComparatorHumidity").html(ComparatorHumidity);

                    var point = chart.series[0].points[0],
                        newVal,
                        inc = 0;//Math.round((Math.random() - 0.5) * 20);
                    newVal = point.y + inc;
                    if (newVal < 0 || newVal > 200) {
                        newVal = point.y - inc;
                    }
                    point.update(parseInt(humidity,10));
                }, 1000);
            }
        });//end function.
$('#container3').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Coverage'
        },
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                }//,
                //borderWidth: 0,
                //outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                }//,
                //borderWidth: 1,
                //outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#fff'//,
                //borderWidth: 0,
                //outerRadius: '105%',
                //innerRadius: '103%'
            }]
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 5,
            minorTickPosition: 'inside',
            minorTickColor: '#000',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#000',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: '%'
            },
            plotBands: [{
                from: 90,
                to: 100,
                color: '#00ff00' // green55BF3B
            }, {
                from: 0,
                to: 0,
                color: '#DDDF0D' // yellow
            }, {
                from: 0,
                to: 90,
                color: '#ff0000' // redDF5353
            }]
        },
        series: [{
            name: 'Coverage',
            data: [100],
            tooltip: {
                valueSuffix: ' %'
            }
        }]
},
        // Add some life
        function (chart) {
            if (!chart.renderer.forExport) {
                setInterval(function () {
//loadXMLDoctemperature();
//loadXMLDochumidity();
var ComparatorConverage;
var c = parseInt(converage,10);
$("#VarConverage").text(c.toFixed(2)+" %");
if(c>=100)
{
ComparatorConverage='<td class="btn btn-success">✔</td>';
}else{
ComparatorConverage='<td class="btn btn-danger">✘</td>';
}
$("#ComparatorConverage").html(ComparatorConverage);

                    var point = chart.series[0].points[0],
                        newVal,
                        inc = 0;//Math.round((Math.random() - 0.5) * 20);
                    newVal = point.y + inc;
                    if (newVal < 0 || newVal > 200) {
                        newVal = point.y - inc;
                    }
                    point.update(parseInt(converage,10));
                }, 1000);
            }
        });//end function.


$('#container4').highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                     
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
setInterval(
function() {
var checkerror='0';
       loadXMLDoctemperature();
if(temperature>'30')
{
checkerror=temperature;
}
var x = (new Date()).getTime(), // current time
y = parseInt(temperature,10);
z = parseInt(checkerror,10);
//text +="<table border='1'><td style=width:450px>"+new Date().toString()+"</td><td style=width:100px>"+temperature+"</td><td style=width:100px>"+humidity+"</td><td style=width:100px>"+"x"+"</td></table>";
//document.getElementById("demo").innerHTML = text;
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 90000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Temperature',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 90000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 90000,
y : 0
});
}
return data;
})()
} ]
});//End function..
$('#container5').highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                     
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
setInterval(
function() {
var checkerror='0';
       loadXMLDochumidity();
if(humidity<'60')
{
checkerror=humidity;
}
var x = (new Date()).getTime(), // current time
y = parseInt(humidity,10);
z = parseInt(checkerror,10);
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 90000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Temperature',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 90000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 90000,
y : 0
});
}
return data;
})()
} ]
});//End Function
$('#container6')
.highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                     
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
setInterval(
function() {
var checkerror='0';
       loadXMLDoctemperature();
if(temperature>'30')
{
checkerror=temperature;
}
var x = (new Date()).getTime(), // current time
y = parseInt(temperature,10);
z = parseInt(checkerror,10);
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 600000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Temperature',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 600000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 600000,
y : 0
});
}
return data;
})()
} ]
});
$('#container7')
.highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                 
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
var checkerror='0';
setInterval(
function() {
           loadXMLDochumidity();
if(humidity<'60')
{
checkerror=humidity;
}else{
checkerror='0';
}
var x = (new Date()).getTime(), // current time
//y = parseInt(temperature,10);
//z = parseInt(humidity,10);
y = parseInt(humidity,10);
z = parseInt(checkerror,10);
//y = Math.random();
//z = Math.random();
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 600000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Humidity',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 600000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 600000,
y : 0
});
}
return data;
})()
} ]

});//End Function
$('#container8')
.highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                     
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
setInterval(
function() {
var checkerror='0';
       loadXMLDoctemperature();
if(temperature>'30')
{
checkerror=temperature;
}
var x = (new Date()).getTime(), // current time
y = parseInt(temperature,10);
z = parseInt(checkerror,10);
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 3600000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Temperature',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 3600000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 3600000,
y : 0
});
}
return data;
})()
} ]
});
$('#container9')
.highcharts(
{
chart : {
type : 'area',
//animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
                                                 
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
var checkerror='0';
setInterval(
function() {
           loadXMLDochumidity();
if(humidity<'60')
{
checkerror=humidity;
}else{
checkerror='0';
}
var x = (new Date()).getTime(), // current time
//y = parseInt(temperature,10);
//z = parseInt(humidity,10);
y = parseInt(humidity,10);
z = parseInt(checkerror,10);
//y = Math.random();
//z = Math.random();
series.addPoint([x,y ],false,true);
series2.addPoint([x,z ],true,true);
}, 3600000);
}
}
},
title : {
text : ''
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'+ this.series.name+ '</b><br/>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+ '<br/>'+ Highcharts.numberFormat(this.y,2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Humidity',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 3600000,
y : 0
});
}
return data;
})()
},
{
name : 'Error',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -999; i <= 0; i++) {
data
.push({
x : time
+ i
* 3600000,
y : 0
});
}
return data;
})()
} ]

});//End Function

});
 
});
function FunctionUELTemp() {
UpperErrorLimitTemperature = document.getElementById("UELTempText").value;
UpperErrorLimitTemperature='30';
document.getElementById("UELTempShow").innerHTML = UpperErrorLimitTemperature;
}
</script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><span>ระบบตรวจสอบ</span>บนเครือข่าย</a>
<ul class="user-menu">
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon"></span>♟ผู้ใช้งาน <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-user"></span> Profile</a></li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div id="sidebar-collapse" class="active col-sm-3 col-lg-2 sidebar">
<ul class="nav menu">
<!--<li class=""><a href="index.html"><b>۩ Home</b></a></li>
<a href="#">
<li class="parent">≡ โรงเรือนที่ 1<span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span></a>
<ul class="children collapse" id="sub-item-1">

<li>
<div class="row">
<a class="" href="#Temperature">
<table border ="0" bordercolor = "#000" >
<tr>
<td id="VarTemperature"style="width: 75px;"></td>
<td id="ComparatorTemperature"style="width: 40px;"></td>
<td>Temperature</td>
</tr>
</table>
</a>
</div>
</li>
<li>
<div class="row">
<a class="" href="#Humidity">
<table border ="0" bordercolor = "#000" >
 <tr>
 <td id="VarHumidity"style="width: 75px;"></td>
 <td id="ComparatorHumidity" style="width: 40px; "></td>
 <td >Humidity</td>
 </tr>
</table>
</a>
</div>
</li>
<li>
<div class="row">
<a class="" href="#converage">
<table border ="0" bordercolor = "#000" >
 <tr>
 <td id="VarConverage"style="width: 75px;"></td>
 <td id="ComparatorConverage"style="width: 40px;"></td>
 <td >Converage</td>
 </tr>
</table>
</a>
</div>
</li>
<li>
<div class="row"></div>
</li>
</ul>
</li>-->
<li >
<a class="">
<td style="width: 80px"><B><FONT COLOR=black>ห้องที่ 1</FONT></B></td>
</a>
</li>
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">อุณหภูมิ</td>
<td id="ComparatorTemperature"style="width: 80px"></td>
<td id="VarTemperature"style="width: 80px"></td>
</tr>
</table>
</a>
</li>
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">ความชื้น</td>
<td id="ComparatorHumidity" style="width: 80px "></td>
<td id="VarHumidity"style="width: 80px"></td>
</tr>
</table>
</a>
</li>
<!--<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 90px">เชื่อมต่อ</td>
<td id="ComparatorConverage" style="width: 80px"></td>
<td id="VarConverage" style="width: 80px"></td>
</tr>
</table>
</a>
</li>-->
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">แสง</td>
<td id=""style="width: 80px"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>
<!--<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">กรด-ด่าง</td>
<td id=""style="width: 80px;"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>-->
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">ออกซิเจน</td>
<td id=""style="width: 80px;"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>
<li >
<a class="">
<td style="width: 80px"><B><FONT COLOR=black>ห้องที่ 2</FONT></B></td>
</a>
</li>
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">อุณหภูมิ</td>
<td id="ComparatorTemperature"style="width: 80px"></td>
<td id="VarTemperature"style="width: 80px"></td>
</tr>
</table>
</a>
</li>
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">ความชื้น</td>
<td id="ComparatorHumidity" style="width: 80px "></td>
<td id="VarHumidity"style="width: 80px"></td>
</tr>
</table>
</a>
</li>
<!--<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 90px">เชื่อมต่อ</td>
<td id="ComparatorConverage" style="width: 80px"></td>
<td id="VarConverage" style="width: 80px"></td>
</tr>
</table>
</a>
</li>-->
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">แสง</td>
<td id=""style="width: 80px"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>
<!--<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">กรด-ด่าง</td>
<td id=""style="width: 80px;"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>-->
<li >
<a class="">
<table border ="0" bordercolor = "#000" >
<tr>
<td style="width: 80px">ออกซิเจน</td>
<td id=""style="width: 80px;"></td>
<td id=""style="width: 80px;"></td>
</tr>
</table>
</a>
</li>
<!--<li ><a href="charts.html"><span></span>▣ Charts</a></li>
<li ><a><span></span>▥ Reports</a></li>
<li ><a><span></span>▦ Logs</a></li>
<li c><a><span></span>✲ Setup</a></li>
<li role="presentation" class="divider"></li>
<li><a><span></span>Login Page</a></li>-->
</ul>
<!--<div class="attribution">Template by <a href="http://www.medialoot.com/item/lumino-admin-bootstrap-template/">Medialoot</a></div>-->
</div><!--/.sidebar -->

<div class="col-sm-9 col-sm-offset- col-lg-10 col-lg-offset-2 main">

<div class="row">
<A name=Dashboard></A>
<!--<div class="col-lg-1">
<h1 class="page-header">Dashboard</h1>
</div>-->
</div><!--/.row-->

<!--<div class="row">
<ol class="breadcrumb">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
<li class="active">Dashboard</li>
</ol>
</div>/.row-->


<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body tabs">
<ul class="nav nav-pills">

<li class="active"><a href="#tab2" data-toggle="tab">1 วัน</a></li>
<li><a href="#tab3" data-toggle="tab">7 วัน</a></li>
<li><a href="#tab4" data-toggle="tab">1 เดือน</a></li>
<li><a href="#tab1" data-toggle="tab">ภาพรวม</a></li>
<!--<li><a href="#tab5" data-toggle="tab">2 Days</a></li>
<li><a href="#tab6" data-toggle="tab">30 Days</a></li>
<li><a href="#tab7" data-toggle="tab">365 Days</a></li>-->
<li><a href="#tab8" data-toggle="tab">Log</a></li>
<li><a href="#tab9" data-toggle="tab">Setting</a></li>
<!--<li><a href="#tab10" data-toggle="tab">Notifications</a></li>
<li><a href="#tab11" data-toggle="tab">History</a></li>-->
</ul>
<div class="tab-content">

<div class="tab-pane fade in active" id="tab2" style="height: 450px;">
<div id="container4" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- อุณหภูมิ  ℃</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=30℃</td><td>ต่ำสุด=ไม่มี</td><td>รอบเช็ค=90วินาที</td></table></div>
<div id="container5" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- ความชื้น %</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=ไม่มี</td><td>ต่ำสุด=60%</td><td>รอบเช็ค=90วินาที</td></table></div>
</div>
<div class="tab-pane fade" id="tab3" style="height: 450px;">
<div id="container6" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- อุณหภูมิ ℃</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=30℃</td><td>ต่ำสุด=ไม่มี</td><td>รอบเช็ค=10นาที</td></table></div>
<div id="container7" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- ความชื้น %</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=ไม่มี</td><td>ต่ำสุด=60%</td><td>รอบเช็ค=10นาที</td></table></div>
</div>
<div class="tab-pane fade" id="tab4" style="height: 450px;">
<div id="container8" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- อุณหภูมิ ℃</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=30℃</td><td>ต่ำสุด=ไม่มี</td><td>รอบเช็ค=1ชั่วโมง</td></table></div>
<div id="container9" style="min-width: 78%; height: 140px; margin: 0 auto"></div>
<div><table border='1' BGCOLOR='#FF0000'><td><FONT COLOR=#8085e9> -●- ความชื้น %</FONT></td><td><FONT COLOR=#f45b5b> -◆- ปัญหา</FONT></td><td>สูงสุด=ไม่มี</td><td>ต่ำสุด=60%</td><td>รอบเช็ค=1ชั่วโมง</td></table></div>
</div>
<div class="tab-pane fade " id="tab1" style="width: 30%; height: 450px;">
<!--<h4>Live Gharp</h4>-->
<table border ="0" bordercolor = "#000" >
 <tr>
 <td id="container1" style="min-width: 26%; height: 300px; margin: 0 auto"></td>
 <td id="container2" style="min-width: 26%; height: 300px; margin: 0 auto"></td>
 <td id="container3" style="min-width: 26%; height: 300px; margin: 0 auto"></td>
 </tr>
</table>
</div>
<div class="tab-pane fade" id="tab8">
<!--<div><p id="demo"></p></div>-->
</div>
<div class="tab-pane fade" id="tab9">
Upper Error Limit Temperature = <input type="number" id="UELTempText" value="30"><button onclick="FunctionUELTemp()">Set</button>
<p>Status Upper Error Limit Temperature =<b id="UELTempShow"></b></p>
<p></p>
<p>Live Graph = 60s</p>
<p>2 Days = 5 Minute</p>
<p>30 Days = 1 Hour</p>
<p>365 Days = 1 Day</p>
</div>
</div>
</div>
</div><!--/.panel-->
</div><!--/.col-->
</div><!---->
</div>
<!--<script src="http://localhost/js/jquery-1.11.2.js"></script>
<script src="http://localhost/js/bootstrap.min.js"></script>
<script src="http://localhost/js/chart.min.js"></script>
<script src="http://localhost/js/chart-data.js"></script>
<script src="http://localhost/js/easypiechart.js"></script>
<script src="http://localhost/js/easypiechart-data.js"></script>
<script src="http://localhost/js/bootstrap-datepicker.js"></script>
<script src="http://localhost/js/highcharts.js"></script>
<script src="http://localhost/js/highcharts-more.js"></script>
<script src="http://localhost/js/modules/exporting.js"></script>-->
<script src="js/jquery-1.12.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>
<script>
$('#calendar').datepicker({
});

!function ($) {
   $(document).on("click","ul.nav li.parent > a > span.icon", function(){        
       $(this).find('em:first').toggleClass("glyphicon-minus");    
   });
   $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);

$(window).on('resize', function () {
 if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
})
$(window).on('resize', function () {
 if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
})

</script>
<script>
Highcharts.theme = {
    colors: ["#8085e9", "#f45b5b", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee","#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
   // General
    background2: '#E0E0E8'
 
    };
    // Apply the theme
    Highcharts.setOptions(Highcharts.theme);
    </script>

</body>

</html>