From 60392e733ebf80e756f9100a88bc3ee33f5579e7 Mon Sep 17 00:00:00 2001
From: "James C (SkinnyBuddah)" <jimmyc.iphone@gmail.com>
Date: Fri, 21 Dec 2018 03:24:29 +0000
Subject: [PATCH] Update Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp

---
 Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp b/Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp
index 4d40d97..ce6e06d 100644
--- a/Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp
+++ b/Arduino/BTCDieselHeater/src/WiFi/mainpage.cpp
@@ -69,6 +69,27 @@ const char* MAIN_PAGE PROGMEM = R"=====(
               case "ErrorState":
                 document.getElementById("ErrorDiv").hidden = heater[key] <= 1;
                 break;
+				case "TempBody":
+				//The threshold levels for each bar to come on are: 21°C, 41°C,61°C, 81°C, 101°C, 121°C
+					if(heater[key] > 20){
+						document.getElementById("TopBar").className = "active21"
+						}
+						if(heater[key] > 41){
+						document.getElementById("TopBar").className = "active41"
+						}
+							if(heater[key] > 61){
+						document.getElementById("TopBar").className = "active61"
+						}
+							if(heater[key] > 20){
+						document.getElementById("TopBar").className = "active81"
+						}
+							if(heater[key] > 101){
+						document.getElementById("TopBar").className = "active101"
+						}
+							if(heater[key] > 121){
+						document.getElementById("TopBar").className = "active121"
+						}
+				break;
               case "Thermostat":
                 if(heater[key] != 0) {
                   document.getElementById("FixedDiv").hidden = true;
@@ -441,10 +462,30 @@ body {
   color: black;
 }
 
-.active {
+.active21 {
+  background-color: #5f9ea0;
+  color: white;
+}
+.active41 {
   background-color: #4CAF50;
   color: white;
 }
+.active61 {
+  background-color: #eeee00;
+  color: white;
+}
+.active81 {
+  background-color: #8b0000;
+  color: white;
+}
+.active101 {
+  background-color: #cd0000;
+  color: white;
+}
+.active121 {
+  background-color: #ff0000;
+  color: white;
+}
 
   input:checked + .slider {
     background-color: #2196F3;
@@ -489,7 +530,7 @@ MainPage {
 
 <!-- Top Navigation Menu -->
 <div class="topnav">
-  <div style="padding-left:30px"><a href="javascript:void(0);" onclick="funcdispHome()" class="active">Chinese Diesel Heater Web Control</a></div>
+  <div id="TopBar" style="padding-left:30px"><a href="javascript:void(0);" onclick="funcdispHome()" class="active21">Chinese Diesel Heater Web Control</a></div>
   <div id="myLinks">
     <a href="javascript:void(0);" onclick="funcdispHome()">Home</a>
     <a href="javascript:void(0);" onclick="funcdispSettings()">Settings</a>