[OLD] Ninjablocks 1x1 Temperature/Humidity Dashboard Widget

options.js

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
}

style.less

/* 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;
  }
}

view.html

<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>

widget.js

/* 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);
};