Last active
December 23, 2015 19:09
-
-
Save bacall213/6680547 to your computer and use it in GitHub Desktop.
[OLD] Ninjablocks 1x1 Temperature/Humidity Dashboard Widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
return { | |
"name": "Temperature/Humidity Widget (1x1)", | |
"deviceMap": [ | |
{ "deviceId": 31, "vendor": 0, "minimum": 1, "maximum": 1 }, //Temperature | |
{ "deviceId": 30, "vendor": 0, "minimum": 1, "maximum": 1 } //Humidity | |
], | |
"forceDeviceMapGroup": true | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* General styling */ | |
background: white; | |
/* Left column styling */ | |
.leftColumn { | |
width: 50%; | |
height: 100%; | |
top: 0%; | |
position: relative; | |
float: left; | |
background: white; | |
} | |
/* Right column styling */ | |
.rightColumn { | |
width: 50%; | |
height: 100%; | |
top: 0%; | |
position: relative; | |
float: left; | |
background: white; | |
} | |
/* Left-side label styling (e.g. "Temperature") */ | |
.leftLabel { | |
position: absolute; | |
top: 95px; | |
width: 100%; | |
text-align: center; | |
color: rgba(0,0,0,0.3); | |
font-size: 1.1em; | |
font-variant:small-caps; | |
font-weight: bold; | |
} | |
/* Left-side value styling */ | |
.leftValue { | |
position: absolute; | |
top: 40px; | |
width: 100%; | |
text-align: left; | |
font-size: 35px; | |
font-weight: bold; | |
left: 18px; | |
color: hsl(45,100%,45%); | |
.leftUnits { | |
font-size: 14px; | |
font-weight: normal; | |
vertical-align: super; | |
position: relative; | |
top: -5px; | |
left: -8px; | |
} | |
.leftHiValText { | |
position: relative; | |
display: block; | |
color: hsl(20,75%,65%); | |
font-weight: bold; | |
font-size: 10px; | |
width: 50px; | |
top: 4px; | |
line-height: 15px; | |
text-align: left; | |
} | |
.leftLoValText { | |
position: relative; | |
display: block; | |
color: hsl(203,60%,56%); | |
font-weight: bold; | |
font-size: 10px; | |
width: 50px; | |
top: 0px; | |
line-height: 15px; | |
text-align: left; | |
} | |
} | |
/* Right-side label styling (e.g. "Humidity") */ | |
.rightLabel { | |
position: absolute; | |
top: 95px; | |
width: 100%; | |
text-align: center; | |
color: rgba(0,0,0,0.3); | |
font-size: 1.1em; | |
font-variant:small-caps; | |
font-weight: bold; | |
} | |
/* Right-side value styling */ | |
.rightValue { | |
position: absolute; | |
top: 40px; | |
width: 100%; | |
text-align: left; | |
font-size: 35px; | |
font-weight: bold; | |
left: 45px; | |
color: hsl(203,60%,56%); | |
.rightUnits { | |
font-size: 14px; | |
font-weight: normal; | |
vertical-align: super; | |
position: relative; | |
top: -5px; | |
left: -8px; | |
} | |
.rightHiValText { | |
position: relative; | |
display: block; | |
color: hsl(20,75%,65%); | |
font-weight: bold; | |
font-size: 10px; | |
width: 50px; | |
top: 4px; | |
line-height: 15px; | |
text-align: left; | |
} | |
.rightLoValText { | |
position: relative; | |
display: block; | |
color: hsl(203,60%,56%); | |
font-weight: bold; | |
font-size: 10px; | |
width: 50px; | |
top: 0px; | |
line-height: 15px; | |
text-align: left; | |
} | |
} | |
/* Left-side sparkline styling */ | |
.leftSparkline { | |
position: relative; | |
top: 120px; | |
width: 90%; | |
height: 80px; | |
margin-left: auto; | |
margin-right: auto; | |
line-height: 30px; | |
border: 1px solid hsl(0,0%,90%); | |
background: hsl(0,0%,95%); | |
canvas { | |
width: 100%; | |
height: 80px; | |
} | |
} | |
/* Right-side sparkline styling */ | |
.rightSparkline { | |
position: relative; | |
top: 120px; | |
width: 90%; | |
height: 80px; | |
margin-left: auto; | |
margin-right: auto; | |
line-height: 30px; | |
border: 1px solid hsl(0,0%,90%); | |
background: hsl(0,0%,95%); | |
canvas { | |
width: 100%; | |
height: 80px; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="leftColumn"> | |
<div class="leftLabel"></div> | |
<div class="leftValue"> | |
<span class="text"></span> | |
<sup class="leftUnits"></sup> | |
<span class="leftHiValText"></span> | |
<span class="leftLoValText"></span> | |
</div> | |
<div class="leftSparkline"></div> | |
</div> | |
<div class="rightColumn"> | |
<div class="rightLabel"></div> | |
<div class="rightValue"> | |
<span class="text"></span> | |
<sup class="rightUnits"></sup> | |
<span class="rightHiValText"></span> | |
<span class="rightLoValText"></span> | |
</div> | |
<div class="rightSparkline"></div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Define the sparkline sensor graphs */ | |
var sparkRightSensor = element.find(".rightSparkline"); | |
var sparkLeftSensor = element.find(".leftSparkline"); | |
/* Values from the sensors will be stored in these arrays */ | |
var dataRightSensor = []; | |
var dataLeftSensor = []; | |
/* | |
Set celsius/fahrenheit - | |
F = Fahrenheit | |
C = Celsius | |
*/ | |
var temperatureType = "F"; | |
/* | |
Sparkline (graph) styling options - | |
chartRangeMinX: Defines the min number of points on the X-axis. This helps set the scale. | |
chartRanageMaxX: Defines the max number of points on the X-axis | |
e.g. 1440 updates = 24 hr/day * 60 min/hr | |
This assumes a data refresh of 1 minute | |
chartRangeMin: Defines the min value for the Y-axis. Undefined on purpose. | |
chartRangeMax: Defines the max on the Y-axis. Undefined on purpose. | |
Humidity should be <= 100% | |
Fahrenheit: 0 - 150 | |
Celsius: -17 ~ 65 | |
Defining a min/max would require tweaking the range for celsius/fahrenheit. | |
Let's just not set min/max Y-axis values. | |
width: Width of the graph data within the "canvas" - | |
This should be 100% unless you're going with a different style. | |
height: Height of the graph data within the "canvas" - | |
This should match the .sparkline "height" variable in the widget CSS. | |
*/ | |
var sparklineOptionsLeftSensor = { | |
width: '100%', | |
height: '80px', | |
chartRangeMinX: 0, | |
chartRangeMaxX: 100, | |
drawNormalOnTop: false, | |
fillColor: null, | |
lineColor: 'hsl(45,100%,45%)', | |
tooltipFormat: '<span style="color: {{color}}">●</span> Temperature: {{y}}°F' | |
}; | |
var sparklineOptionsRightSensor = { | |
width: '100%', | |
height: '80px', | |
chartRangeMinX: 0, //X-axis min value = 0 | |
chartRangeMaxX: 100, //X-axis max value = 100 | |
chartRangeMin: 0, //Y-axis min value = 0 | |
chartRangeMax: 100, //Y-axis max value = 100 (useful for humidity) | |
drawNormalOnTop: false, | |
fillColor: null, | |
lineColor: 'hsl(203,60%,56%)', | |
tooltipFormat: '<span style="color: {{color}}">●</span> Humidity: {{y}}%' | |
}; | |
/* Set label for left sensor */ | |
element.find(".leftColumn .leftLabel").html("Temperature"); | |
/* Set label for right sensor */ | |
element.find(".rightColumn .rightLabel").html("Humidity"); | |
/* Set units for left sensor */ | |
element.find(".leftColumn .leftUnits").html("°F"); | |
/* Set units for right sensor */ | |
element.find(".rightColumn .rightUnits").html("%"); | |
/* Push values to the right-side sensor display */ | |
function SetRightSensor(value) { | |
/* Update value */ | |
element.find(".rightColumn .rightValue .text").html(value); | |
/* Update data array for graph */ | |
dataRightSensor.push(value); | |
/* Update high/low values */ | |
element.find(".rightColumn .rightValue .rightHiValText").html("HI: " + Math.max.apply(null, dataRightSensor)); | |
element.find(".rightColumn .rightValue .rightLoValText").html("LO: " + Math.min.apply(null, dataRightSensor)); | |
}; | |
/* Push values to the left-side sensor display */ | |
function SetLeftSensor(value) { | |
/* Update value */ | |
element.find(".leftColumn .leftValue .text").html(value); | |
/* Update data array for graph */ | |
dataLeftSensor.push(value); | |
/* Update high/low values */ | |
element.find(".leftColumn .leftValue .leftHiValText").html("HI: " + Math.max.apply(null, dataLeftSensor)); | |
element.find(".leftColumn .leftValue .leftLoValText").html("LO: " + Math.min.apply(null, dataLeftSensor)); | |
}; | |
/* Activate our update functions only when new data is received */ | |
scope.onData = function(data) { | |
/* Device ID 30 = 433 MHz humidity sensor */ | |
if (data.D === 30) { | |
SetRightSensor(data.DA); | |
}; | |
/* Device ID 31 = 433 MHz temperature sensor */ | |
if (data.D === 31) { | |
if (temperatureType === "F") { | |
/* Convert to fahrenheit */ | |
F = (data.DA * 9 / 5 + 32).toFixed(2); | |
SetLeftSensor(F); | |
} | |
else if (temperatureType === "C") { | |
/* Celsius */ | |
SetLeftSensor(data.DA) | |
} | |
else { | |
/* Assume fahrenheit - but this should never be reached */ | |
/* Convert to fahrenheit */ | |
F = (data.DA * 9 / 5 + 32).toFixed(2); | |
SetLeftSensor(F); | |
}; | |
}; | |
/* Draw both sparklines each time there's data */ | |
sparkLeftSensor.sparkline(dataLeftSensor, sparklineOptionsLeftSensor); | |
sparkRightSensor.sparkline(dataRightSensor, sparklineOptionsRightSensor); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment