Added light mode to the UI

Author: ggilestro

smart_incubator/server/static/css/style.css

@@ -249,7 +249,7 @@
       position: relative;
     }
 
-    .data p {
+    .data1 p {
       font-size: 400%;
       line-height: 1em;
       color: #ffffff;
@@ -267,14 +267,26 @@
   }
 
     .temperature {
-#       background: #777;
-        float: left;
-        background-color: rgba (25, 25, 75, 0.5); 
-        padding: 10px;
-        margin: 5px;
-        height: 60px;
+      font-size: 400%;
+      line-height: 1em;
+      color: #ffffff;
+      float: left;
+      background-color: rgba (25, 25, 75, 0.5); 
+      padding: 10px;
+      margin: 5px;
+      height: 60px;
     }
 
+    .light_mode {
+      float: right;
+      font-size: 200%;
+      line-height: 1em;
+      color: #777;
+      height: 56px;
+      width: 56px;
+      margin-bottom: 0px;
+  }
+    
     .temperature:after {
       font-size: 55%;
       vertical-align: baseline;
@@ -284,10 +296,13 @@
     }
 
     .humidity {
-        float: left;
-        padding: 10px;
-        margin: 5px;
-        height: 60px;
+      font-size: 400%;
+      line-height: 1em;
+      color: #ffffff;
+      float: left;
+      padding: 10px;
+      margin: 5px;
+      height: 60px;
     }
 
 

smart_incubator/server/static/js/script.js

@@ -1,30 +1,3 @@
-function loadDashboard(){
-     $.getJSON("/json/all", 
-          function(data) {
-            $.each(data, function(i, item) {
-                
-                is_timestamp = new Date(item.device_time*1000).getTime() > 0;
-                if (is_timestamp) { 
-                    var timestamp = item.device_time;
-                } else {
-                    var k = moment(item.device_time);
-                    var timestamp = (k + k.utcOffset()*60*1000)/1000;
-                }
-               var time = moment(timestamp*1000).format("DD-MM-YYYY HH:mm");                
-                
-                $('#main').append('\
-                    <div class="incubator" id="'+item.inc_id+'">\
-                        <h2><a href="/graph/'+item.inc_id+'/1">Incubator '+item.inc_id+'</a></h2>\
-                        <div class="data">\
-                            <p class="temperature">'+item.temperature+'</p><div class="light"></div></div>\
-                        <div class="data">\
-                            <p class="humidity">'+item.humidity+'</p></div>\
-                        <div class="time"><p>'+time+'</p></div>\
-                        </div>');
-            })
-          }); 
-  }
-
 function loadIncubatorForm(incubator_id){
      $.getJSON("/json/" + incubator_id, 
           function(data) {
@@ -62,6 +35,33 @@ function loadIncubatorForm(incubator_id){
           }); 
   }
 
+function loadDashboard(){
+     $.getJSON("/json/all", 
+          function(data) {
+            $.each(data, function(i, item) {
+                
+                is_timestamp = new Date(item.device_time*1000).getTime() > 0;
+                if (is_timestamp) { 
+                    var timestamp = item.device_time;
+                } else {
+                    var k = moment(item.device_time);
+                    var timestamp = (k + k.utcOffset()*60*1000)/1000;
+                }
+               var time = moment(timestamp*1000).format("DD-MM-YYYY HH:mm");                
+                
+                $('#main').append('\
+                    <div class="incubator" id="'+item.inc_id+'">\
+                        <h2><a href="/graph/'+item.inc_id+'/1">Incubator '+item.inc_id+'</a></h2>\
+                        <div class="data">\
+                            <p class="temperature">'+item.temperature+'</p><span class="light"></span></div>\
+                        <div class="data">\
+                            <p class="humidity">'+item.humidity+'</p><p class="light_mode">_</p></div>\
+                        <div class="time"><p>'+time+'</p></div>\
+                        </div>');
+            })
+          }); 
+  }
+
 
 function refreshDashboard(){
      $.getJSON("/json/all", 
@@ -97,6 +97,10 @@ function refreshDashboard(){
 
             $('#' + item.inc_id).find('.humidity').html(item.humidity);
             $('#' + item.inc_id).find('.humidity').attr('title', item.humidity + " / " + item.set_hum);
+
+            lm = ["DD","LD","LL","DL","MM"]
+            $('#' + item.inc_id).find('.light_mode').html(lm[item.dd_mode]);
+
 
             $('#' + item.inc_id).find('.time').find("p").html(item.device_time);
             $('#' + item.inc_id).find('.time').attr('title', timestamp);