Funduino: 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="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>
</nav>
<div id="sidebar-collapse" class="active col-sm-3 col-lg-2 sidebar">
<ul class="nav menu">

<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: 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: 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>

</ul>

</div>

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

<div class="row">
<A name=Dashboard></A>

</div>



<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="#tab8" data-toggle="tab">Log</a></li>
<li><a href="#tab9" data-toggle="tab">Setting</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;">

<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>
<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>
</div>
</div>
</div>

<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>