From 40053547f39a277fcd4956866f76aa389c1ef4de Mon Sep 17 00:00:00 2001 From: Peter Shanks Date: Sat, 5 Jan 2019 21:10:57 +1100 Subject: [PATCH] removed non pottery bits (door closed, cooling fan icons) and fixed display to look OK on a phone sized screen --- public/assets/css/picoreflow.css | 62 +++---- public/assets/js/picoreflow.js | 14 +- public/index.html | 301 ++++++++++++++++--------------- 3 files changed, 191 insertions(+), 186 deletions(-) diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css index 8e77db7..31af0d8 100644 --- a/public/assets/css/picoreflow.css +++ b/public/assets/css/picoreflow.css @@ -1,17 +1,17 @@ @font-face{ font-family: "Digi"; - src: url('/picoreflow/assets/fonts/digital-7-webfont.eot'); + src: url('/kilncontroller/assets/fonts/digital-7-webfont.eot'); src: local("Digital 7"), - url('/picoreflow/assets/fonts/digital-7-webfont.woff') format("woff"), - url('/picoreflow/assets/fonts/digital-7-webfont.ttf') format("truetype"); + url('/kilncontroller/assets/fonts/digital-7-webfont.woff') format("woff"), + url('/kilncontroller/assets/fonts/digital-7-webfont.ttf') format("truetype"); } @font-face{ font-family: "Tables"; - src: url('/picoreflow/assets/fonts/tables.eot'); + src: url('/kilncontroller/assets/fonts/tables.eot'); src: local("Tables"), - url('/picoreflow/assets/fonts/tables.woff') format("woff"), - url('/picoreflow/assets/fonts/tables.ttf') format("truetype"); + url('/kilncontroller/assets/fonts/tables.woff') format("woff"), + url('/kilncontroller/assets/fonts/tables.ttf') format("truetype"); } body { @@ -32,6 +32,10 @@ body { box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); } +#graph_container { + height: 300px; +} + .display { display: inline-block; text-align: right; @@ -41,12 +45,12 @@ body { height: 40px; line-height: 40px; vertical-align: middle; - color: #d8d3c5; + color: #42f749; border-color: #000000; } .ds-panel { - background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat; + background: #3F3E3A url('/kilncontroller/assets/images/panel_bg.png') repeat; -moz-box-shadow: inset 0 0 42px 0 #000; -webkit-box-shadow: inset 0 0 42px 0 #000; box-shadow: inset 0 0 42px 0 #000; @@ -59,13 +63,13 @@ body { -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; - background-image: -webkit-gradient(linear,left 0,left 100%,from(#f5f5f5),to(#e8e8e8)); - background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); - background-image: -moz-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); - background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%); + background-image: -webkit-gradient(linear,left 0,left 100%,from(#f5f5f5),to(#3f3e3a)); + background-image: -webkit-linear-gradient(top,#f5f5f5 0,#3f3e3a 100%); + background-image: -moz-linear-gradient(top,#f5f5f5 0,#3f3e3a 100%); + background-image: linear-gradient(to bottom,#f5f5f5 0,#3f3e3a 100%); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#ffe8e8e8',GradientType=0); - height: 18px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#ff3f3e3a',GradientType=0); + /*height: 18px;*/ } .ds-title { @@ -73,18 +77,19 @@ body { font-size: 10px; height: 18px; line-height: 18px; - width: 100px; - border-right: 1px solid #b9b6af; + /* width: 100px; */ + /*border-right: 1px solid #b9b6af;*/ vertical-align: top; text-align: center; - color: #8B8989; + color: #000; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75); } .ds-num { - width: 100px; + /* width: 100px; */ + text-align: center; font-family: "Digi"; - border-right: 1px solid #b9b6af; + /*border-right: 1px solid #b9b6af;*/ white-space: nowrap; text-shadow: 0 0 25px rgba(0, 0, 0, 1); } @@ -94,7 +99,7 @@ body { font-family: "Digi"; font-size: 24px; text-shadow: 0 0 12px rgba(0, 0, 0, 1); - background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat; + background: #3F3E3A url('/kilncontroller/assets/images/panel_bg.png') repeat; -moz-box-shadow: inset 0 0 12px 0 #000; -webkit-box-shadow: inset 0 0 12px 0 #000; box-shadow: inset 0 0 12px 0 #000; @@ -118,7 +123,7 @@ body { text-align: center; color: #1F1E1A; text-shadow: 0 0 5px #000, 0 0 5px #000; - border-left: 1px solid #b9b6af; + /*border-left: 1px solid #b9b6af;*/ height: 40px; width: 42px; display: inline-block; @@ -189,16 +194,7 @@ body { .ds-state { border: none; width: initial; - text-align: center; - width: 168px; - padding: 0; -} - -.ds-state { - border: none; - width: initial; - text-align: center; - width: 210px; + text-align: right; padding: 0; } @@ -237,11 +233,11 @@ body { -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55); box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55); margin-top: 15px; - background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat; + background: #3F3E3A url('/kilncontroller/assets/images/panel_bg.png') repeat; } .panel-heading { - background: #fafafa url('/picoreflow/assets/images/page_bg.png') repeat-x; + background: #fafafa url('/kilncontroller/assets/images/page_bg.png') repeat-x; overflow: hidden; padding: 10px; -webkit-border-top-left-radius: 5px; diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js index f454f1b..2893007 100644 --- a/public/assets/js/picoreflow.js +++ b/public/assets/js/picoreflow.js @@ -454,7 +454,7 @@ $(document).ready(function() { console.log("Status Socket has been opened"); - $.bootstrapGrowl(" Yay
I'm alive", + $.bootstrapGrowl(" Initialising
Give me a minute to get things together", { ele: 'body', // which element to append to type: 'success', // (null, 'info', 'error', 'success') @@ -539,7 +539,7 @@ $(document).ready(function() eta = new Date(left * 1000).toISOString().substr(11, 8); updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100); - $('#state').html('' + eta + ''); + $('#state').html('' + eta + ''); $('#target_temp').html(parseInt(x.target)); @@ -554,10 +554,12 @@ $(document).ready(function() $('#act_temp').html(parseInt(x.temperature)); if (x.heat > 0.5) { $('#heat').addClass("ds-led-heat-active"); } else { $('#heat').removeClass("ds-led-heat-active"); } - if (x.cool > 0.5) { $('#cool').addClass("ds-led-cool-active"); } else { $('#cool').removeClass("ds-led-cool-active"); } - if (x.air > 0.5) { $('#air').addClass("ds-led-air-active"); } else { $('#air').removeClass("ds-led-air-active"); } - if (x.temperature > hazardTemp()) { $('#hazard').addClass("ds-led-hazard-active"); } else { $('#hazard').removeClass("ds-led-hazard-active"); } - if ((x.door == "OPEN") || (x.door == "UNKNOWN")) { $('#door').addClass("ds-led-door-open"); } else { $('#door').removeClass("ds-led-door-open"); } + // the commented out icons below were from the old reflow oven code + // I don't worry about them for my kiln, but you might find a use for them some time + // if (x.cool > 0.5) { $('#cool').addClass("ds-led-cool-active"); } else { $('#cool').removeClass("ds-led-cool-active"); } + // if (x.air > 0.5) { $('#air').addClass("ds-led-air-active"); } else { $('#air').removeClass("ds-led-air-active"); } + // if (x.temperature > hazardTemp()) { $('#hazard').addClass("ds-led-hazard-active"); } else { $('#hazard').removeClass("ds-led-hazard-active"); } + // if ((x.door == "OPEN") || (x.door == "UNKNOWN")) { $('#door').addClass("ds-led-door-open"); } else { $('#door').removeClass("ds-led-door-open"); } state_last = state; diff --git a/public/index.html b/public/index.html index ef33bed..7309e98 100644 --- a/public/index.html +++ b/public/index.html @@ -1,158 +1,165 @@ - - - picoReflow - - - - - - - - - - - - - - - - - - - - - -
-
-
-
Sensor Temp
-
Target Temp
-
Status
-
-
-
-
25°C
-
---°C
-
-
\l[I♨
-
-
-
-
-
- -
+ + picoReflow + + + + + + + + + + + + + + + + + +
+
+
+
Sensor Temp

+
+ 18°C +
+
+
+
Target Temp

+
+ ---°C +
+
+ +
+
Time Remaining

+
+
+
+
+
 

+
+ \ + + + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + +
+
+ + +
+ +
+
+
+
+
-
-
-
-
- - - + -
-
-
-
-
- -