From 80234fb0dddd6bb2dadaa2d6ff6cf80cf3f7829a Mon Sep 17 00:00:00 2001
From: chrono <chrono@open-resource.org>
Date: Thu, 5 Dec 2013 21:11:43 +0000
Subject: [PATCH] Updated UI status icon display

---
 public/assets/css/picoreflow.css | 6 +++++-
 public/assets/js/picoreflow.js   | 4 ++++
 public/index.html                | 9 +++++----
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css
index 92efe1d..655d9f8 100644
--- a/public/assets/css/picoreflow.css
+++ b/public/assets/css/picoreflow.css
@@ -45,12 +45,16 @@ body {
 }
 
 .ds-led {
+    margin-top: 1px;
+    padding-top: 1px;
     font-family: "NoticeStd";
     font-size: 28px;
     font-weight: 400;
     text-align: center;
     color: #1F1E1A;
-    padding-right: 1px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
 }
 
 #main_status {
diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js
index 8da94d4..75e45ae 100644
--- a/public/assets/js/picoreflow.js
+++ b/public/assets/js/picoreflow.js
@@ -415,8 +415,12 @@ $(document).ready(function()
 
                 $('#act_temp').html(parseInt(x.temperature) + ' \xB0C');
                 $('#heat').css("background-color", (x.heat > 0.5 ? "rgba(233, 28, 0, 0.84)" : "rgba(46, 12, 12, 0.62") );
+                $('#heat').css("box-shadow", (x.heat > 0.5 ? "0 0 5px 0 rgba(233, 28, 0, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em 0 rgba(0,0,0,0.75)") );
                 $('#air').css("background-color", (x.air > 0.5 ? "rgba(240, 199, 67, 0.84)" : "rgba(46, 38, 12, 0.62)") );
+                $('#air').css("box-shadow", (x.air > 0.5 ? "0 0 5px 0 rgba(240, 199, 67, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em 0 rgba(0,0,0,0.75)") );
                 $('#cool').css("background-color", (x.cool > 0.5 ? "rgba(74, 159, 255, 0.84)" : "rgba(12, 28, 46, 0.62)") );
+                $('#cool').css("box-shadow", (x.cool > 0.5 ? "0 0 5px 0 rgba(74, 159, 255, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em 0 rgba(0,0,0,0.75)") );
+
 
                 state_last = state;
 
diff --git a/public/index.html b/public/index.html
index 139d653..fedf089 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,11 +32,12 @@
     <span id="act_temp" class="display ds-num">25 &deg;C</span>
     <span id="target_temp" class="display ds-num" style="color: #75890c">000 &deg;C</span>
     <span id="state" class="display ds-num" style="width: 120px; text-align: center; padding-right:0">Idle</span>
-    <span id="heat" class="display ds-led" style="width: 35px; background: rgba(46, 12, 12, 0.62)">&#110;</span>
-    <span id="air" class="display ds-led" style="width: 35px; background: rgba(46, 38, 12, 0.62)">&#116;</span>
-    <span id="cool" class="display ds-led" style="width: 35px; background: rgba(12, 28, 46, 0.62)">&#44;</span>
+    <span class="display" style="width: 95px; padding-right: 0; text-align: center">
+     <span id="heat" class="ds-led" style="width: 35px; background: rgba(46, 12, 12, 0.62)">&#110;</span>
+     <span id="air" class="ds-led" style="width: 35px; background: rgba(46, 38, 12, 0.62)">&#116;</span>
+     <span id="cool" class="ds-led" style="width: 35px; background: rgba(12, 28, 46, 0.62)">&#44;</span>
+    </span>
    </div>
-
    <div class="clearfix"></div>
 
    <div class="progress progress-striped active" style="margin: 14px; margin-top: 0">