Kevin Strain
Published © CC BY

Home Monitor

Monitors inputs from sump level to loss of power, email thru pushingbox as well as website on LAN

IntermediateFull instructions provided10,819
Home Monitor

Things used in this project

Hardware components

Arduino Mega 2560
Arduino Mega 2560
×1
Arduino Ethernet board
×1
4x20 LCD with I2C interface
×1
DHT22 Temperature Sensor
DHT22 Temperature Sensor
×1
DS3231 RTC
×1
HC-SR04 ultrasonic distance
×1
Custom fabricated PCB
OSH Park Custom fabricated PCB
×1

Story

Read more

Schematics

Custom Boards

Interface and annunciator

Code

Arduino code

C/C++
 // Home Monitor code
/*
       ASSIGNMENTS                     arduino       grn led      red led                   interface                annunciator        annunciator
            sensor#      variable      input pin    output pin    output pin    variable    board pin                board red pin      board grn pin
sump level    1                          6,8           18             19          inches    x15-2 to 6, x15-3 to 8      20-1              20-2
flood alarm   2                           28            23            25                    x15-4                       20-3              20-4 
loss of power 3                           30            27            29                    x15-5                       20-5              20-6 
temperature   4            ftemp          5                                       (ftemp,1) x15-1                        
humidity      5            fhumi          5                                       (fhumi,1) x15-1
aux 1         6            aux1           32            31            33                    x15-6                       20-7              20-8
aux 2         7            aux2           34            35            37                    x15-11                      21-1              21-2  
aux 3         8            aux3           36            39            41                    x15-7                       21-3              21-4
aux 4         9            aux4           38            43            45                    x15-8                       21-5              21-6
aux 5        10            aux5           40            47            49                    x15-9                       21-7              21-8
reset                      reset          42                                                x15-10
message inhibit            msginhbt       44                                                x15-12
message led                               17
* must change for wifi shield
           WIRING
VCC to 5V
LCD: SDA pin to pin 21
LCD: SCL pin to pin 20
DHT: DHT pin 1 to VCC
DHT: DHT pin 2 to pin 5 and 10K to VCC
DHT: DHT pin 3 spare
DHT: DHT pin 4 to GND
SR04: SR04 pin trig to pin 8
SR04: SR04 pin echo to pin 6
RTC: SDA pin to pin 21
RTC: SCL pin to pin 20
LOSS OF POWER pin 30
FLOOD ALARM pin 28
MESSAGE LED pin 17

cannot use pins 4, 7, 10, 11, 12, 13 50, 51, 52 and 53 
*/

//       LIBRARIES
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
#include <Wire.h> 
#include <LiquidCrystal_I2C.h>
#include <dht.h>
#include <NewPing.h>
#include <RTClib.h>
#include <RTC_DS3231.h>


// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ   50

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xzz, 0xzz, 0xzz, 0xzz, 0xzz, 0xzz };
IPAddress ip(192, 168, 1, 100);//(10, 9, 9, 12); or (192,168,1,100); IP address, may need to change depending on network
IPAddress gateway(192,168,1,1); //(10,9,9,1): or (192,168,1,1);   not previously used in other sketches MAY HAVE TO REMOVE
IPAddress subnet(255,255,255,0);//  (255,255,255,0); not previously used in other sketches MAY HAVE TO REMOVE
EthernetServer server(1000);  // create a server at port 1000
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

//Your secret DevID from PushingBox.com. You can use multiple DevID  on multiple Pin if you want
char DEVID1[] = "xxxxxxxxxxxxxxxxx";        //Scenario : "this is first alert scenario"   put your DevID here in quotes



//                 DEVICE SETUP

//setup LCD
LiquidCrystal_I2C lcd(0x27,20,4);  // set the LCD address to 0x27 for a 16 chars and 2 line display

//set up DHT22
dht DHT;
#define DHT22_PIN 5

//setup sonar
#define TRIGGER_PIN  8  // Arduino pin tied to trigger pin on the ultrasonic sensor.
#define ECHO_PIN     6  // Arduino pin tied to echo pin on the ultrasonic sensor.
#define MAX_DISTANCE 200 // Maximum distance we want to ping for (in centimeters). Maximum sensor distance is rated at 400-500cm.
NewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE); // NewPing setup of pins and maximum distance.

//setup RTC
RTC_DS3231 RTC;


//Global variables
 
 unsigned long mathtime1 = 0;
 unsigned long mathtime2 = 0;
 unsigned long mathtime3 = 0;
 unsigned long mathtime3a = 0;
 unsigned long mathtime4 = 0;
 String timestring;
 String datestring;
 unsigned int inches;
 float ftemp;
 float fhumi;
 int aux1;
 int aux2;
 int aux3;
 int aux4;
 int aux5;
 int reset;
 int msginhbt = LOW;
 int sensor1 = 0;
 String sensor2 = 0;
 String sensor3 = 0;
 int sensor4 = 0;
 int sensor5 = 0;
 String sensor6 = 0;
 String sensor7 = 0;
 String sensor8 = 0;
 String sensor9 = 0;
 String sensor10 = 0;
 String messagesend;
String sensor1msg;
String sensor2msg;
String sensor3msg;
String sensor6msg;
String sensor7msg;
String sensor8msg;
String sensor9msg;
String sensor10msg;
String msginhbtmsg;
String devid = "xxxxxxxxxxxxxxxxx";
char serverName[] = "api.pushingbox.com";
boolean lastConnected = false;
boolean DEBUG = true; // for troubleshooting pushingbox
boolean DEBUG1 = true; //for troubleshooting website
boolean DEBUG2 = false; //for troubleshooting data

void setup()
{
//             SD CARD OPERATIONS  
  
   // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
//             START SERIAL FOR DEBUGGING    
    Serial.begin(9600);     
    if (DEBUG1){Serial.println("Starting Program..");}
      Ethernet.begin(mac,ip,gateway,subnet);
    if (DEBUG1){Serial.println("Active Server IP: ");Serial.println(Ethernet.localIP());}
    
      server.begin();
      
    // initialize SD card
    if (DEBUG1){Serial.println("Initializing SD card...");}
    if (!SD.begin(4)) {
        if (DEBUG1){Serial.println("ERROR - SD card initialization failed!");}
        return;    // init failed
    }
    if (DEBUG1){Serial.println("SUCCESS - SD card initialized.");}
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        if (DEBUG1){Serial.println("ERROR - Can't find index.htm file!");}
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
 
 
//          INITIALIZE EQUIPMENT 
 
 //initialize web server    
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
  
  // initialize the lcd 
   lcd.init(); 
   
 //initialize the RTC
     Wire.begin();
     RTC.begin();

    if (! RTC.isrunning()) {
        if (DEBUG2){Serial.println("RTC is NOT running!");}
      // following line sets the RTC to the date & time this sketch was compiled
      RTC.adjust(DateTime(__DATE__, __TIME__));
    }
  
    DateTime now = RTC.now();
    DateTime compiled = DateTime(__DATE__, __TIME__);
    if (now.unixtime() < compiled.unixtime()) {
      if (DEBUG2) {Serial.println("RTC is older than compile time!  Updating");}
      RTC.adjust(DateTime(__DATE__, __TIME__));
    } 
  // Print the constant header to the LCD.
  lcd.backlight();
   lcd.setCursor(0,0);    
  lcd.setCursor(0,1);
   lcd.print("Sump Lvl:");
   lcd.setCursor(12,1);
   lcd.print("in");
  lcd.setCursor(0,2);
   lcd.print("Humidity:"); 
  lcd.setCursor(13,2);
   lcd.print(" %");
  lcd.setCursor(0,3);
   lcd.print("Temperature:"); 
  lcd.setCursor(17,3);
   lcd.print("F");
  
//       INPUT PINS

  int ledPinsin[] = {28, 30, 32, 34, 36, 38, 40, 42, 44};
  int ledPinsincnt = 9;
  {
    for (int p=0; p<ledPinsincnt; p++)
    {pinMode (ledPinsin[p], INPUT);
        }
  }

//      OUPUT PINS 

  int ledPinsout[] = {17, 18, 19, 23, 25, 27, 29, 31, 33, 35, 37, 37, 39, 41, 43, 45, 47, 49};
  int ledPinsoutcnt = 18;
   {
    for (int q=0; q<ledPinsoutcnt; q++)
            {  pinMode (ledPinsout[q], OUTPUT);  
               digitalWrite (ledPinsout[q], LOW);
            }
        }
    }

//  HERE WE GO SPORTSFANS
void loop()
{
  //SET THE LED ON THE MESSAGE PUSHBUTTON  
  if (digitalRead(44) == HIGH)  {digitalWrite(17, HIGH);} 
  else {digitalWrite(17,LOW);}
  
  //     SUBROUTINES
timeanddate();
ultrasonicsensor();
dht22();
annunciator();

 //            SETTING STRINGS TO SEND JSONP            
            sensor1 = inches; if (inches<10) {sensor1msg=("_Sump_Alarm_");} else {sensor1msg=("");}
            if (digitalRead(28)) {sensor2=("'FLOOD ALARM'");sensor2msg= ("_Flood_Alarm_");} else {sensor2=("'OK'");sensor2msg=("");}
            if (digitalRead(30)) {sensor3=("'LOSS OF POWER'");sensor3msg= ("_Loss_of_Power_ ");} else {sensor3=("'OK'");sensor3msg=("");}
            sensor4 = (ftemp);
            sensor5 = (fhumi);
            if (digitalRead(32)) {sensor6=("'ALARM'");sensor6msg= ("_Aux1_Alarm_");} else {sensor6=("'OK'");sensor6msg=("");}
            if (digitalRead(34)) {sensor7=("'ALARM'");sensor7msg= ("_Aux2_Alarm_");} else {sensor7=("'OK'");sensor7msg=("");}
            if (digitalRead(36)) {sensor8=("'ALARM'");sensor8msg= ("_Aux3_Alarm_");} else {sensor8=("'OK'");sensor8msg=("");}
            if (digitalRead(38)) {sensor9=("'ALARM'");sensor9msg= ("_Aux4_Alarm_");} else {sensor9=("'OK'");sensor9msg=("");}
            if (digitalRead(40)) {sensor10=("'ALARM'");sensor10msg= ("_Aux5_Alarm_");} else {sensor10=("'OK'");sensor10msg=("");}
            if (digitalRead(44) == HIGH) {msginhbtmsg=("'ON'");} else {msginhbtmsg=("'OFF'");} 
            messagesend = sensor1msg + sensor2msg + sensor3msg + sensor6msg + sensor7msg + sensor8msg + sensor9msg + sensor10msg;
  if (DEBUG2){Serial.println(messagesend);}
  
  
  //    SUBROUTINE
sendmessage();


//   SEND DATA TO WEBSITE
  EthernetClient client = server.available();
  if(client)
  {
    boolean continuous = true;
    String line = "";

    while(client.connected())
    {
      if(client.available()){
        char c = client.read();
        line.concat(c);
  
        if(c == '\n' && continuous)
        {
          client.println("HTTP/1.1 200 OK");
          // IMPORTANT, DO THAT RECEIVE REQUEST THE ARDUINO AJAX AND OTHER SERVER AND NOT JUST LOCAL.
          client.println("Content-Type: text/javascript");
          client.println("Access-Control-Allow-Origin: *");
          client.println();          
         
          int homefront = line.indexOf("?");
                
          if(homefront>-1){     //check if the command came
            homefront     = homefront+6; //get the next character
            int endfront    = homefront+3; //I hope this command 3 characters
            String action    = line.substring(homefront,endfront);//retrieve the value of the command
            
       
            client.print("datas({ sensor1 : ");
            client.print(sensor1);
            client.print(", sensor2 :  ");
            client.print(sensor2);
            client.print(", sensor3 :  ");
            client.print(sensor3);
            client.print(", sensor4 :  ");
            client.print(sensor4);
            client.print(", sensor5 :  ");
            client.print(sensor5);
            client.print(", sensor6 :  ");
            client.print(sensor6);
            client.print(", sensor7 :  ");
            client.print(sensor7);
            client.print(", sensor8 :  ");
            client.print(sensor8);
            client.print(", sensor9 :  ");
            client.print(sensor9);
            client.print(", sensor10 :  ");
            client.print(sensor10);
            client.print(", msgtimer :  ");
            client.print(mathtime3a);
            client.print(", msgonoff :  ");
            client.print(msginhbtmsg);
            
            client.print("})");
            
         }          
          break;
        }
        if(c == '\n') { continuous = true; }
        else if (c != '\r') { continuous = false; }
      }
    }
     delay(1);
     client.stop();
  }
            if (DEBUG1){Serial.print("datas({ sensor1 : ");
            Serial.println(sensor1);
            Serial.print(", sensor2 :  ");
            Serial.println(sensor2);
            Serial.print(", sensor3 :  ");
            Serial.println(sensor3);
            Serial.print(", sensor4 :  ");
            Serial.println(sensor4);
            Serial.print(", sensor5 :  ");
            Serial.println(sensor5);
            Serial.print(", sensor6 :  ");
            Serial.println(sensor6);
            Serial.print(", sensor7 :  ");
            Serial.println(sensor7);
            Serial.print(", sensor8 :  ");
            Serial.println(sensor8);
            Serial.print(", sensor9 :  ");
            Serial.println(sensor9);
            Serial.print(", sensor10 :  ");
            Serial.println(sensor10);
            Serial.print(", msgtimer :  ");
            Serial.println(mathtime3a);
            Serial.print(", msgonoff :  ");
            Serial.print(msginhbtmsg);
            Serial.println("})");}
            
               if (DEBUG1){Serial.print("My Website IP address: "); Serial.println(Ethernet.localIP());}
           
}

void timeanddate(){
//time and date

   DateTime now = RTC.now();
   DateTime future (now.unixtime() - 0);//time correction was at 840

 String hourstring;
 String minutestring;
 String secondstring;
 
   if(future.hour() <10){
      hourstring = '0' +  String(future.hour()) + ':';}
   else { hourstring = String(future.hour()) + ':';}  
   if(future.minute() <10){
      minutestring = '0' + String(future.minute()) + ':';}
   else { minutestring = String(future.minute()) + ':';}   
   if(future.second() <10){
      secondstring = '0' + String(future.second());}
   else { secondstring = String(future.second());}    
  timestring=hourstring + minutestring + secondstring;
 
 String monthstring;
 String daystring;
 String yearstring;

   if(future.month() <10){
     monthstring = '0' + String(future.month()) + '/';}
   else {monthstring = String(future.month()) + '/';}  
   if(future.day() <10){
     daystring = '0' + String(future.day()) + '/';}
   else {daystring = String(future.day()) + '/';}   
   datestring=monthstring + daystring + future.year();
   
  lcd.setCursor(0,0);  
  lcd.print(timestring);  
  lcd.setCursor(10,0);  
  lcd.print(datestring);
  
  mathtime1 = (now.unixtime()); 
return; 
}

void ultrasonicsensor(){
  //ultrasonic sensor
{ 
  unsigned int uS = sonar.ping_median(5); // Send ping, get ping time in microseconds (uS).
   lcd.setCursor(9,1);
   lcd.print("   ");   
   lcd.setCursor(9,1);
   lcd.print(uS / US_ROUNDTRIP_IN); // Convert ping time to distance in cm and print result (0 = outside set distance range)
 inches = (uS / US_ROUNDTRIP_IN);
 sensor1 = inches;
 if (DEBUG2){Serial.print("Distance: ");Serial.println(inches);}
}
return;
}

void dht22(){
//temp and humidity sensor
{
  if ((mathtime1 - mathtime4) >2) { 
   int chk = DHT.read22(DHT22_PIN);
    fhumi= (DHT.humidity);
    ftemp=((DHT.temperature*1.8)+32);
     lcd.setCursor(9,2);
     lcd.print(fhumi, 1);
     lcd.setCursor(12,3);
     lcd.print(ftemp, 1);
     mathtime4 = mathtime1;
 }
   //delay(2000); //2 second delay for readings
   if (DEBUG2){Serial.println("Temperature and Humidity:");}
   if (DEBUG2){Serial.println(ftemp,1);}
   if (DEBUG2){Serial.println(fhumi,1);}
 
}
return;
}


void annunciator() {
  //sump alarm
   if (inches<10) {
    digitalWrite(18, HIGH); digitalWrite(19, HIGH);
  }
  else { digitalWrite(19, LOW);}
//flood alarm
   if (digitalRead(28) == HIGH ) {
    digitalWrite(23, HIGH); digitalWrite(25, HIGH);
  }
  else { digitalWrite(25, LOW);}
//loss of power alarm
if (digitalRead(30) == HIGH ) {
    digitalWrite(27, HIGH); digitalWrite(29, HIGH);
  }
  else { digitalWrite(29, LOW);}
//aux 1 alarm
if (digitalRead(32) == HIGH ) {
    digitalWrite(31, HIGH); digitalWrite(33, HIGH);
  }
  else { digitalWrite(33, LOW);}
//aux 2 alarm
if (digitalRead(34) == HIGH ) {
    digitalWrite(35, HIGH); digitalWrite(37, HIGH);
  }
  else { digitalWrite(37, LOW);}
//aux 3 alarm
if (digitalRead(36) == HIGH ) {
    digitalWrite(39, HIGH); digitalWrite(41, HIGH);
  }
  else { digitalWrite(41, LOW);}
//aux 4 alarm
if (digitalRead(38) == HIGH ) {
    digitalWrite(43, HIGH); digitalWrite(45, HIGH);
  }
  else { digitalWrite(45, LOW);}
//aux 5 alarm
if (digitalRead(40) == HIGH ) {
    digitalWrite(47, HIGH); digitalWrite(49, HIGH);
  }
  else { digitalWrite(49, LOW);}
//reset leds
if (digitalRead(42) == HIGH) {
 int ledPinsout[] = {18, 19, 23, 25, 27, 29, 31, 33, 35, 37, 37, 39, 41, 43, 45, 47, 49};
  int ledPinsoutcnt = 17;
   {
    for (int q=0; q<ledPinsoutcnt; q++)
            {digitalWrite (ledPinsout[q], LOW);
            }
        }
}  
  
  return;
}

// If the website is being viewed, the sendmessage will probably not work due to conflicts. But if you're vieing the website, an email is not needed.
void sendmessage() {
  int zflag = 0;
  int alarmzflag = LOW;
  msginhbt = (digitalRead(44));
  Serial.println(msginhbt);
  if (inches<10 || sensor2 == "'FLOOD ALARM'" || sensor3 == "'LOSS OF POWER'" || sensor6 == "'ALARM'" || sensor7 == "'ALARM'" || sensor8 == "'ALARM'" || sensor9 == "'ALARM'" || sensor10 == "'ALARM'" ){alarmzflag = HIGH;Serial.println("alarmzflag is high");} else {alarmzflag = LOW;}
    {
      if ((alarmzflag == HIGH) && (msginhbt == HIGH) )
          { Serial.println("ALARM IS IN");
            
            zflag = 1;
          }
          else {zflag = 0;}
}
 mathtime3 = mathtime1 - mathtime2;
 mathtime3a = mathtime3 / 60;
 if (mathtime3a > 99999){mathtime3a = 99999;};
if (DEBUG2){Serial.print("MATH TIME 1: ");
Serial.println(mathtime1);
Serial.print("MATH TIME 2: ");
Serial.println(mathtime2);
Serial.print("MATH TIME 3: ");
Serial.println(mathtime3);
Serial.print("ZFLAG: ");
Serial.println(zflag);}
{
      if (zflag == 1 && mathtime3 > 300 ) // change to 300 seconds sends message no more than every 5 minutes
           {mathtime2 = mathtime1;  
            if (DEBUG1){Serial.println("SEND MESSAGE!");}

            EthernetClient client;

                            Serial.println("Ethernet ready");
                            // print the Ethernet board/shield's IP address:
                            Serial.print("My SENDMESSAGE IP address: ");
                            Serial.println(Ethernet.localIP());
                        
  // give the Ethernet shield a second to initialize:
  delay(1000);

if (DEBUG2){Serial.print("incoming value:");Serial.println(messagesend);}

String repel = messagesend;
char room[repel.length()+1];
repel.toCharArray(room,repel.length()+1); 
 if (DEBUG2){Serial.print("This is the value being framed:");Serial.println(room);}
 
client.stop();
  if(DEBUG){Serial.println("connecting...");}

  if (client.connect(serverName, 80)) {
    if(DEBUG){Serial.println("connected");}

    if(DEBUG){Serial.println("sending request");}
    client.print("GET /pushingbox?devid=");
    client.print(devid);
    client.print("&room=");
    if (DEBUG){Serial.print("This is the value being sent:");Serial.println(room);}
    client.print(room);
    client.println(" HTTP/1.1");
    client.print("Host: ");
    client.println(serverName);
    client.println("User-Agent: Arduino");
    client.println();
  } 
  else {
    if(DEBUG){Serial.println("connection failed");}
  }
 }
}   
   return;
}

Website

JavaScript
need to add the js and css files to run this, they reside on the computer you are using. I
<html>
<head>

    <title>Home Monitor</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
	<script language="javascript" type="text/javascript" src="js/gauge.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<script language="javascript" type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
	<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
	<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
    //<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <meta charset="utf-8">
	<script class="code" language="javascript" type="text/javascript">
	

	
	// Charts and gauges objects
	var tempChar, humChar;
	var tempGauge, humGauge;
	
	// Arrays that store datapoints for the two charts
	var tempData = new Array();
	var humData = new Array();
	
	// Create "dummy" data in the past for the two charts
	var startTime = (new Date()).getTime() - 270000;
	for(var i = 0; i < 10; i++) {			
		tempData.push([startTime, 20]);
		humData.push([startTime, 50]);
		startTime += 30000;
	}
	
	// When the document is ready, create objects and fill charts with "dummy" data
	$(document).ready(function() { 

		showCharts();
		showGauges();
	});	
	
	// Function that displays the two charts
	function showCharts() {

		tempChar =  $.jqplot('tempchartdiv', [tempData], {				
			title: 'Sump Level',
			series:[{showMarker:false, lineWidth:1,color:"blue"}],
	 
			axes: {
				xaxis: {
				renderer:$.jqplot.DateAxisRenderer,             
                tickOptions:{ 
                formatString:'%M:%S',
                },
				tickInterval: 15
				},
				yaxis: {
					min: 0,
					max: 30,
					tickInterval: 5,
				}
			}
		});

		humChar =  $.jqplot('humchartdiv', [humData], {				
			title: 'Temperature', 
			series:[{showMarker:false, lineWidth:1,color:"red"}],
			axes: {
				xaxis: {
					renderer:$.jqplot.DateAxisRenderer,
					tickOptions: {
							formatString:'%M:%S'
					},
					tickInterval: 10
				},
				yaxis: {
					min: 0,
					max: 100,
					tickInterval: 10
				}
			}
		});	
	}
	
	// Function that displays the two gauges
	function showGauges() {

		tempGauge = new Gauge({
			renderTo    : 'tempgauge',
			width       : 250,
			height      : 250,
			glow        : true,
			units       : 'in',
			title       : 'Sump Level',
			minValue    : 0,
			maxValue    : 50,
			majorTicks  : ['0','10','20','30','40','50'],
			minorTicks  : 5,
			strokeTicks : false,
			highlights  : [
				{ from : 0,   to : 12, color : 'rgba(50, 255, 61, .70)' },
				{ from : 12, to : 20, color : 'rgba(205, 216, 0, .70)' },
				{ from : 20, to : 50, color : 'rgba(255, 00,  0, .70)' },
			],
			colors      : {
				plate      : '#824E00',
				majorTicks : '#f5f5f5',
				minorTicks : '#ddd',
				title      : '#fff',
				units      : '#000',
				numbers    : '#eee',
				needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
			}
		});

		humGauge = new Gauge({
			renderTo    : 'humgauge',
			width       : 250,
			height      : 250,
			glow        : true,
			units       : 'Deg F',
			title       : 'Temperature',
			minValue    : 0,
			maxValue    : 100,
			majorTicks  : ['0','10','20','30','40','50','60','70','80','90','100'],
			minorTicks  : 5,
			strokeTicks : false,
			highlights  : [
				{ from : 0,   to : 50, color : 'rgba(255, 0,  0, .70)' },
				{ from : 50,   to : 65, color : 'rgba(205, 216, 0, .70)' },
				{ from : 65, to : 80, color : 'rgba(50, 255, 61, .70)' },
				{ from : 80, to : 100, color : 'rgba(255, 0,  0, .70)' },
			],
			colors      : {
				plate      : '#824E00',
				majorTicks : '#f5f5f5',
				minorTicks : '#ddd',
				title      : '#fff',
				units      : '#000',
				numbers    : '#eee',
				needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
			}
		});

		tempGauge.draw();
		humGauge.draw();
	};

	// call the update function every 3 seconds
	setInterval(updateValues, 3000);
	
	// function that retrieves updated data from Arduino and update charts and gauges
	function updateValues() {
	
		var actualTemp;
		var actualHum;
		var gotData = false;
	
		// get data from Arduino, in JSON format and using JSONP to perform a cross-domain call
		$('#status').css({"color":"yellow"});
		$('#status').text("Sending Request...");

		var jqxhr = $.ajax({
			url: 'http://10.9.9.12:1000/?callback=?',
     		dataType: 'jsonp',
			jsonpCallback:'datas'})


			// if the request was successful...
			.done(function(data) { 
				$('#status').css({"color":"green"});
				$('#status').text("Request Received!");
				
				// save retrieved data in two variables and display it on JS console
				actualTemp = 50 - data.sensor1;
				actualHum = data.sensor4;
				console.log("---------- Got new data ----------");
				console.log("Temperature:\t" + actualTemp);
				console.log("Humidity:\t" + actualHum);
				console.log("Sump Level:\t" + data.sensor1);
				console.log("Flood Alarm:\t" + data.sensor2);
				console.log("Loss of Power:\t" + data.sensor3);
				console.log("Temperature:\t" + data.sensor4);
				console.log("Humidity:\t" + data.sensor5);
				console.log("Aux 1:\t" + data.sensor6);
				console.log("Aux 2:\t" + data.sensor7);
				console.log("Aux 3:\t" + data.sensor8);
				console.log("Aux 4:\t" + data.sensor9);
				console.log("Aux 5:\t" + data.sensor10);
						
				console.log("");
				console.log("Updating values...");
		
				// update charts, removing the oldest value		
				var x = (new Date()).getTime();
				if(tempData.length == 100) tempData.shift();
				tempData.push([x, actualTemp]);
				tempChar.series[0].data = tempData;
				tempChar.resetAxesScale();
				tempChar.axes.xaxis.tickInterval = 15;
				tempChar.axes.yaxis.min = 0;
				tempChar.axes.yaxis.max = 50;
				tempChar.replot();

				if(humData.length == 100) humData.shift();
				humData.push([x, actualHum]);
				humChar.series[0].data = humData;
				humChar.resetAxesScale();
				humChar.axes.xaxis.tickInterval = 15;
				humChar.axes.yaxis.min = 0;
				humChar.axes.yaxis.max = 100;
				humChar.replot();

				// update gauges
				tempGauge.setValue(actualTemp);
				humGauge.setValue(actualHum);
				
				console.log("...done!");
				console.log("");
				
			//allows transfer of variables to web page
				var elArduino1 = document.getElementById('sensor1');
				elArduino1.textContent =  data.sensor1;
				
				var elArduino2 = document.getElementById('sensor2');
				elArduino2.textContent =  data.sensor2;
				
				var elArduino3 = document.getElementById('sensor3');
				elArduino3.textContent =  data.sensor3;
				
				var elArduino4 = document.getElementById('sensor4');
				elArduino4.textContent =  data.sensor4;
								
				var elArduino5 = document.getElementById('sensor5');
				elArduino5.textContent =  data.sensor5;
								
				var elArduino6 = document.getElementById('sensor6');
				elArduino6.textContent =  data.sensor6;
								
				var elArduino7 = document.getElementById('sensor7');
				elArduino7.textContent =  data.sensor7;
								
				var elArduino8 = document.getElementById('sensor8');
				elArduino8.textContent =  data.sensor8;
								
				var elArduino9 = document.getElementById('sensor9');
				elArduino9.textContent =  data.sensor9;
								
				var elArduino10 = document.getElementById('sensor10');
				elArduino10.textContent =  data.sensor10;
				
				var elArduino10 = document.getElementById('msgtimer');
				elArduino10.textContent =  data.msgtimer;
			
			})
			
			// if error print it on JS console
			.fail(function() { console.log( "Unable to get new data :("); });
	}
</script>

<!-- clock functions -->	
<script type="text/javascript">
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),ap;
     if(nhour==0){ap=" AM";nhour=12;}
		else if(nhour<12){ap=" AM";}
		else if(nhour==12){ap=" PM";}
		else if(nhour>12){ap=" PM";nhour-=12;}
	if(nyear<1000) nyear+=1900;
	if(nmin<=9) nmin="0"+nmin;
	document.getElementById('clockbox').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+ap+"";
	}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>



</head>

<head>
<style type="text/css">
			.clean { padding: 0; margin: 0;}
		</style>
	</head>
<body>
 <div class="container">
	<div class="row">	
		<div class="page-header">
		  <h1>Home Monitor  <small>Developed by Kevin Strain</small></h1>
		</div>

<!-- text block -->
<style>
.txt_block{
	width: 320px;
    padding: 20px;
    border: 5px solid gray;
    margin: 10;
    background-color:silver}
}
</style>
<div class="txt_block">
			<p>	
				<strong>Date and Time: <span id="clockbox"  ></span></strong>
			</p>
			<p>
				<strong><span style="color:red ;font-size:18px"  >         MUDSHARK INDUSTRIES  </span></strong><br/>
				Changing the World for a better future.</p>
			<p>
				<strong>Status:</strong> <span style="color:black ;font-size:16px" id="status" ></span>
			</p>
	
			<p>
				<strong><span style="color:black ;font-size:20px"  >Sump Level</span></strong>
				Value:<strong> <span style="color:red ;font-size:22px" id="sensor1" ></span> <span style="color:blue; font-size:20px">inches from top</span></strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Flood Alarm</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor2" ></span> </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Power</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor3" ></span> </strong>
			</p>

			<p>
				<strong><span style="color:black ;font-size:20px"  >Temperature</span></strong>
				Value:<strong> <span style="color:red ;font-size:20px" id="sensor4" ></span> <span style="color:blue; font-size:20px"> &#176 F</span></strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Humidity</span></strong>
				Value:<strong> <span style="color:red ;font-size:20px" id="sensor5" ></span> <span style="color:blue; font-size:20px"> %</span></strong>
			</p>

			<p>
				<strong><span style="color:black ;font-size:20px"  >Aux Input 1</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor6" ></span>  </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Aux Input 2</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor7" ></span>  </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Aux Input 3</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor8" ></span> </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Aux Input 4</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor9" ></span>  </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Aux Input 5</span></strong>
				Status:<strong> <span style="color:red ;font-size:20px" id="sensor10" ></span> </strong>
			</p>
			<p>
				<strong><span style="color:black ;font-size:20px"  >Email message sent </span></strong>
				<strong> <span style="color:red ;font-size:20px" id="msgtimer" ></span> <span style="color:blue; font-size:20px"> minutes ago</span></strong>
			</p>


</div>
<!-- drawing charts and gauges -->
    <div style="position:absolute;left:420px; top:100px; height:300px;width:700px;" id="tempchartdiv"></div> 
	<canvas style="position:absolute;left:1140px;top:130px" id="tempgauge"></canvas>
	<div style="position:absolute;left:420px;top:440px;height:300px;width:700px;" id="humchartdiv"></div> 
	<canvas style="position:absolute;left:1140px;top:470px" id="humgauge"></canvas>
	
</body>
</html>

Credits

Kevin Strain

Kevin Strain

3 projects • 12 followers
Nothing special
Thanks to Pushingbox.

Comments