Skip to content

Instantly share code, notes, and snippets.

@bacall213
Last active December 23, 2015 19:09
Show Gist options
  • Save bacall213/6680547 to your computer and use it in GitHub Desktop.
Save bacall213/6680547 to your computer and use it in GitHub Desktop.
[OLD] Ninjablocks 1x1 Temperature/Humidity Dashboard Widget
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
}
/* 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;
}
}
<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>
/* 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}}">&#9679;</span> Temperature: {{y}}&deg;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}}">&#9679;</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("&deg;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