[GENERIC] 2x Ninja Temperature/Humidity BETA Dashboard Widget. This widget is currently customized for the 433 MHz temperature/humidity sensors, but has been re-written with "sensor left" and "sensor right" descriptors, making it useful (and easily customizable) for any two sensors you want to graph on the same widget. The value display and grap…

options.js

return {
  "name": "[GENERIC] Temperature/Humidity Widget",
  "deviceMap": [
    { "deviceId": 31, "vendor": 0, "minimum": 1, "maximum": 1 },
    { "deviceId": 30, "vendor": 0, "minimum": 1, "maximum": 1 }
  ],
  "forceDeviceMapGroup": true
}

style.less

/* General column styling */
.column {
  width: 50%;
  height: 100%;
  top: 0%;
  position: relative;
  float: left;
  background: white;
}

/* Left-side label styling (e.g. "Temperature") */
.labelleft {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* Left-side value styling */
.valueleft {
  position: absolute;
  top: 45px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 28px;
  
  .unitsleft {
    font-size: 14px;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: -10px;
  }
  
  .hivaltextleft {
    position: relative;
    display: inline-block;
    color: hsl(20,75%,65%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -15px;
    left: -28px;
    text-align: left;
  }
  
  .lovaltextleft {
    position: relative;
    display: inline-block;
    color: hsl(203,60%,56%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -33px;
    left: 49px;
    text-align: left;
  }
}

/* Right-side label styling (e.g. "Humidity") */
.labelright {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.3);
}

/* Right-side value styling */
.valueright {
  position: absolute;
  top: 45px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 58px;
  
  .unitsright {
    font-size: 14px;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: -10px;
  }
  
  .hivaltextright {
    position: relative;
    display: inline-block;
    color: hsl(20,75%,65%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -15px;
    left: -26px;
    text-align: left;
  }
  
  .lovaltextright {
    position: relative;
    display: inline-block;
    color: hsl(203,60%,56%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -4px;
    left: -89px;
    text-align: left;
  }
}

/* Sparkline styling */
.sparkline {
  position: relative;
  top: 105px;
  width: 90%;
  height: 85px;
  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: 30px;
  }
}

/* Left-side text color */
.sensorleft {
  color: hsl(45,100%,45%);
}

/* Right-side text color */
.sensorright {
  color: hsl(203,60%,56%);
}

view.html

<div class="sensorleft column">
  <div class="labelleft">Temperature</div>
  <div class="valueleft">
    <span class="text"></span>
    <sup class="unitsleft">&deg;F</sup>
    <span class="hivaltextleft"></span>
    <span class="lovaltextleft"></span>
  </div>
  <div class="sparkline"></div>
</div>
<div class="sensorright column">
  <div class="labelright">Humidity</div>
  <div class="valueright">
    <span class="text"></span>
    <sup class="unitsright">%</sup>
    <span class="hivaltextright"></span>
    <span class="lovaltextright"></span>
  </div>
  <div class="sparkline"></div>
</div>

widget.js

/* Define the sparkline sensor graphs */
var sparkSensorRight = element.find(".sensorright .sparkline");
var sparkSensorLeft = element.find(".sensorleft .sparkline");

/* Values from the sensors will be stored in these arrays */
var dataSensorRight = [];
var dataSensorLeft = [];

/* 
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 sparklineOptionsSensorLeft = {
  width: '100%',
  height: '85px',
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  tooltipPrefix: 'Temperature: ',
  tooltipSuffix: '&deg;F',
  fillColor: null,
  lineColor: 'hsl(45,100%,45%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{prefix}}{{y}}{{suffix}}'
};

var sparklineOptionsSensorRight = {
  width: '100%',
  height: '85px',
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  tooltipPrefix: 'Humidity: ',
  tooltipSuffix: '%',
  fillColor: null,
  lineColor: 'hsl(203,60%,56%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{prefix}}{{y}}{{suffix}}'
};

/* Push values to the right-side sensor display */
function SetSensorRight(value) {
  /* Update value */
  element.find(".sensorright .valueright .text").html(value);
  
  /* Update graph */
  dataSensorRight.push(value);
  sparkSensorRight.sparkline(dataSensorRight, sparklineOptionsSensorRight);  
  
  /* Update high/low values */
  element.find(".sensorright .valueright .hivaltextright").html("HI: " + Math.max.apply(null, dataSensorRight));
  element.find(".sensorright .valueright .lovaltextright").html("LO: " + Math.min.apply(null, dataSensorRight));
};

/* Push values to the left-side sensor display */
function SetSensorLeft(value) {
  /* Update value */
  element.find(".sensorleft .valueleft .text").html(value);
  
  /* Update data array for graph */
  dataSensorLeft.push(value);
  
  /* Update graph */
  sparkSensorLeft.sparkline(dataSensorLeft, sparklineOptionsSensorLeft);
  
  /* Update high/low values */
  element.find(".sensorleft .valueleft .hivaltextleft").html("HI: " + Math.max.apply(null, dataSensorLeft));
  element.find(".sensorleft .valueleft .lovaltextleft").html("LO: " + Math.min.apply(null, dataSensorLeft));
};

/* 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) {
    SetSensorRight(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);
      SetSensorLeft(F);
    }
    else if (temperatureType === "C") {
      /* Celsius */
      SetSensorLeft(data.DA)
    }
    else {
      /* Assume fahrenheit - but this should never be reached */
      /* Convert to fahrenheit */
      F = (data.DA * 9 / 5 + 32).toFixed(2);
      SetSensorLeft(F);
    };
  };
};