Ninjablocks 1x1 Temperature/Humidity Dashboard Widget (Width x 1, Height x 1) (Author: Brian Call) (License: MIT)

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");

/**
 * VARIABLE: SENSOR DATA ARRAY >> RIGHT SENSOR
 */
var dataRightSensor = [];
var dataRightSensorTimestamps = [];
var dataRightSensorHiLo = ({ 
  "high": -1,
  "highTime": "",
  "low": 999,
  "lowTime": ""
});

/**
 * VARIABLE: SENSOR DATA ARRAY >> LEFT SENSOR
 */
var dataLeftSensor = [];
var dataLeftSensorTimestamps = [];
var dataLeftSensorHiLo = ({ 
  "high": -1,
  "highTime": "",
  "low": 999,
  "lowTime": ""
});

/**
  * VARIABLE: Max Array Length
  */
var maxArrayLen = 200;

// High-Low Text Fields (to minimize the use of element.find(...))
var rightHiText =  element.find(".rightColumn .rightValue .rightHiValText")
var rightLoText =  element.find(".rightColumn .rightValue .rightLoValText")
var leftHiText =  element.find(".leftColumn .leftValue .leftHiValText")
var leftLoText =  element.find(".leftColumn .leftValue .leftLoValText")
 
/**
  * Opentip: Options
  */
Opentip.styles.normalToolTip = {
  "extends": "standard",
  stem: true,
  tipJoint: "bottom",
  showOn: "mouseover",
  borderRadius: 0,
  borderWidth: 1,
  borderColor: "#FFFFFF",
  showEffect: "appear",
  hideEffect: "appear",
  showEffectDuration: 0.0,
  hideEffectDuration: 0.0,
  stemBase: 10,
  stemLength: 5,
  background: "rgba(0,0,0,0.6)",
  removeElementsOnHide: true,
  offset: [0, 15],
  escapeContent: false
};
 
/**
  * Opentip: Creation
  */
//var ELEMENT_NAME = element.find("#ELEMENT_NAME");
//var TIP_NAME = new Opentip(TARGET_ELEMENT_NAME, { style: "TIP_STYLE" });
var opentipRightHiText = new Opentip(rightHiText, { style: "normalToolTip" });
var opentipRightLoText = new Opentip(rightLoText, { style: "normalToolTip" });
var opentipLeftHiText = new Opentip(leftHiText, { style: "normalToolTip" });
var opentipLeftLoText = new Opentip(leftLoText, { style: "normalToolTip" });

/* 
 * Set celsius/fahrenheit -
 * F = Fahrenheit
 * C = Celsius
 *
 * NOTE: Used only when a sensor type is set to "Temp"
*/
var temperatureType = "F";

/* 
  * Define your sensor types -
  * Allows logic in onData() to do some of the work for you
  * 
  * Allowable sensor types:
  *  1) "Temp" = Temperature
  *   NOTE: Set "temperatureType" to "F" or "C" to your preference
  *  2) "Humid" = Humidity
  *  3) "SENSOR_TYPE" = SENSOR_DESCRIPTION
*/
var sensorTypeLeft = "Temp";
var sensorTypeRight = "Humid";

/**
  * FUNCTION: sensor_timestamp(timestamp)
  * DESCRIPTION: Convert timestamp provided by driver
  */
function sensor_timestamp(timestamp) {
  var localTime = new Date(timestamp);
  var month = localTime.getMonth() + 1;  // Month is 0-11, add 1 to make it 1-12
  var day = localTime.getDate();
  var year = localTime.getFullYear();
  var hours = localTime.getHours();
  var minutes = localTime.getMinutes();
  var seconds = localTime.getSeconds();
  
  // Months are 1-12, so add "0" in front of 1-9 to conform with ISO 8601
  if (month < 10) {
    month = "0" + month;
  };
  
  // Days are 1-31, so add "0" in front of 1-9 to conform with ISO 8601
  if (day < 10) {
    day = "0" + day;
  };
    
  // Seconds are returned 0-59, so add a "0" at the front if 0-9
  if (seconds < 10) {
    seconds = "0" + seconds;
  };
    
  // Minutes are returns 0-59, so add a "0" at the front if 0-9
  if (minutes < 10) {
    minutes = "0" + minutes;
  };
  
  // Put it together - type 1 = YYYY-MM-DD hh:mm:ss
  var timestamp_type1 = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  
  // Put it together - type 2 = hh:mm:ss (YYY-MM-DD)
  var timestamp_type2 = hours + ":" + minutes + ":" + seconds + " (" + year + "-" + month + "-" + day + ")";
  
  // Put it together - type 3 = hh:mm:ss YYY-MM-DD
  var timestamp_type3 = hours + ":" + minutes + ":" + seconds + " " + year + "-" + month + "-" + day;
  
  // Return timestamp for whatever purpose it's needed for
  return timestamp_type2;
};

/* 
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.
*/

/* 
 * Left sensor definitions (sensorTypeLeft) -
 * Sparkline styling
 * Set units
 * Set labels
*/
switch (sensorTypeLeft) {
  case "Temp":
    var sparklineOptionsLeftSensor = {
      width: '100%',
      height: '80px',
      chartRangeMinX: 0,
      chartRangeMaxX: 100,
      drawNormalOnTop: false,
      fillColor: null,
      lineColor: 'hsl(45,100%,45%)',
      tooltipPrefix: ' Temperature: ',
      tooltipSuffix: '&deg;F',
      tooltipFormatter: function(sparkline, options, fields) {
        return '<div class="jsqfield"><span style="color: ' + 
          fields.color + '">&#9679;</span>' + 
          options.get('tooltipPrefix') + 
          fields.y + 
          options.get('tooltipSuffix') + 
          ' @ ' + 
          dataLeftSensorTimestamps[fields.x] + 
          '</div>';
      }
    };
    
    /* Set label for left sensor */
    element.find(".leftColumn .leftLabel").html("Temperature");
    
    if (temperatureType == "F") {
      /* Set units for left sensor */
      element.find(".leftColumn .leftUnits").html("&deg;F");
      
      /* Set Sparkline tooltip suffix */
      sparklineOptionsLeftSensor.tooltipSuffix = '&deg;F';
    } else if (temperatureType == "C") {
      /* Set units for left sensor */
      element.find(".leftColumn .leftUnits").html("&deg;C");
      
      /* Set Sparkline tooltip suffix */
      sparklineOptionsLeftSensor.tooltipSuffix = '&deg;C';
    };
    
    /* END: Left sensor, case "Temp" */
    break;
  case "Humid":
    var sparklineOptionsLeftSensor = {
      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(45,100%,45%)',
      tooltipPrefix: ' Humidity: ',
      tooltipSuffix: '%',
      tooltipFormatter: function(sparkline, options, fields) {
        return '<div class="jsqfield"><span style="color: ' + 
          fields.color + '">&#9679;</span>' + 
          options.get('tooltipPrefix') + 
          fields.y + 
          options.get('tooltipSuffix') + 
          ' @ ' + 
          dataLeftSensorTimestamps[fields.x] + 
          '</div>';
      }
    };
    
    /* Set label for left sensor */
    element.find(".leftColumn .leftLabel").html("Humidity");
    
    /* Set units for left sensor */
    element.find(".leftColumn .leftUnits").html("%");
    
    /* END: Left sensor, case "Humid" */
    break;
};

/* 
 * Right sensor definitions (sensorTypeRight) -
 * Sparkline styling
 * Set units
 * Set labels
*/
switch (sensorTypeRight) {
  case "Temp":
    var sparklineOptionsRightSensor = {
      width: '100%',
      height: '80px',
      chartRangeMinX: 0,
      chartRangeMaxX: 100,
      drawNormalOnTop: false,
      fillColor: null,
      lineColor: 'hsl(203,60%,56%)',
      tooltipPrefix: ' Temperature: ',
      tooltipSuffix: '&deg;F',
      tooltipFormatter: function(sparkline, options, fields) {
        return '<div class="jsqfield"><span style="color: ' + 
          fields.color + 
          '">&#9679;</span>' + 
          options.get('tooltipPrefix') + 
          fields.y + 
          options.get('tooltipSuffix') + 
          ' @ ' + 
          dataRightSensorTimestamps[fields.x] + 
          '</div>';
      }
    };
    
    /* Set label for right sensor */
    element.find(".rightColumn .rightLabel").html("Temperature");
    
    if (temperatureType == "F") {
      /* Set units for right sensor */
      element.find(".rightColumn .rightUnits").html("&deg;F");
      
      /* Set Sparkline tooltip suffix */
      sparklineOptionsRightSensor.tooltipSuffix = '&deg;F';
    } else if (temperatureType == "C") {
      /* Set units for right sensor */
      element.find(".rightColumn .rightUnits").html("&deg;C");
      
      /* Set Sparkline tooltip suffix */
      sparklineOptionsRightSensor.tooltipSuffix = '&deg;C';
    }
      
    /* END: Right sensor, case "Temp" */
    break;
  case "Humid":
    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%)',
      tooltipPrefix: ' Humidity: ',
      tooltipSuffix: '%',
      tooltipFormatter: function(sparkline, options, fields) {
        return '<div class="jsqfield"><span style="color: ' + 
          fields.color + 
          '">&#9679;</span>' + 
          options.get('tooltipPrefix') + 
          fields.y + 
          options.get('tooltipSuffix') + 
          ' @ ' + 
          dataRightSensorTimestamps[fields.x] + 
          '</div>';
      }
    };
    
    /* Set label for right sensor */
    element.find(".rightColumn .rightLabel").html("Humidity");
    
    /* Set units for right sensor */
    element.find(".rightColumn .rightUnits").html("%");
    
    /* END: Right sensor, case "Humid" */
    break;
};

/* Push values to the right-side sensor display */
function SetRightSensor(value, timestamp) {
  /* Update value */
  element.find(".rightColumn .rightValue .text").html(value);
  
  /* Update data array for graph */
  dataRightSensor.push(value);
  
  /* Update timestamp array */
  dataRightSensorTimestamps.push(sensor_timestamp(timestamp));
  
  // Check for new high value
  if ( Math.max.apply(null, dataRightSensor) > dataRightSensorHiLo.high ) {
    dataRightSensorHiLo.high = Math.max.apply(null, dataRightSensor);
    dataRightSensorHiLo.highTime = timestamp;
  };
  
  // Check for new low value
  if ( Math.min.apply(null, dataRightSensor) < dataRightSensorHiLo.low ) {
    dataRightSensorHiLo.low = Math.min.apply(null, dataRightSensor);
    dataRightSensorHiLo.lowTime = timestamp;
  };
  
  /* Update high/low values */
  rightHiText.html("HI: " + dataRightSensorHiLo.high);
  rightLoText.html("LO: " + dataRightSensorHiLo.low);
  
  // Clean up the arrays, if necessary
  if (dataRightSensor.length > maxArrayLen || dataRightSensorTimestamps.length > maxArrayLen) {
    dataRightSensor = dataRightSensor.slice(dataRightSensor.length-maxArrayLen,dataRightSensor.length);
    dataRightSensorTimestamps = dataRightSensorTimestamps.slice(dataRightSensorTimestamps.length-maxArrayLen,dataRightSensorTimestamps.length);
  };
};

/* Push values to the left-side sensor display */
function SetLeftSensor(value, timestamp) {
  /* Update value */
  element.find(".leftColumn .leftValue .text").html(value);
  
  /* Update data array for graph */
  dataLeftSensor.push(value);
  
  /* Update timestamp array */
  dataLeftSensorTimestamps.push(sensor_timestamp(timestamp));
  
  // Check for new high value
  if ( Math.max.apply(null, dataLeftSensor) > dataLeftSensorHiLo.high ) {
    dataLeftSensorHiLo.high = Math.max.apply(null, dataLeftSensor);
    dataLeftSensorHiLo.highTime = timestamp;
  };
  
  // Check for new low value
  if ( Math.min.apply(null, dataLeftSensor) < dataLeftSensorHiLo.low ) {
    dataLeftSensorHiLo.low = Math.min.apply(null, dataLeftSensor);
    dataLeftSensorHiLo.lowTime = timestamp;
  };
  
  /* Update high/low values */
  leftHiText.html("HI: " + dataLeftSensorHiLo.high);
  leftLoText.html("LO: " + dataLeftSensorHiLo.low);
  
  // Clean up the arrays, if necessary
  if (dataLeftSensor.length > maxArrayLen || dataLeftSensorTimestamps.length > maxArrayLen) {
    dataLeftSensor = dataLeftSensor.slice(dataLeftSensor.length-maxArrayLen,dataLeftSensor.length);
    dataLeftSensorTimestamps = dataLeftSensorTimestamps.slice(dataLeftSensorTimestamps.length-maxArrayLen,dataLeftSensorTimestamps.length);
  };
};

/* 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) {
    if (sensorTypeLeft == "Humid") {
      SetLeftSensor(data.DA, data.timestamp);
    } else if (sensorTypeRight == "Humid") {
      SetRightSensor(data.DA, data.timestamp);
    }
  };
  
  /* Device ID 31 = 433 MHz temperature sensor */
  if (data.D === 31) {
    if (sensorTypeLeft == "Temp") {
      if (temperatureType === "F") {
        /* Convert to fahrenheit */
        F = (data.DA * 9 / 5 + 32).toFixed(2);
  
        SetLeftSensor(F, data.timestamp);
      } else if (temperatureType === "C") {
        /* Celsius */
        
        SetLeftSensor(data.DA, data.timestamp)
      };
    } else if (sensorTypeRight == "Temp") {
      if (temperatureType === "F") {
        /* Convert to fahrenheit */
        F = (data.DA * 9 / 5 + 32).toFixed(2);
          
        SetRightSensor(F, data.timestamp);
      } else if (temperatureType === "C") {
        /* Celsius */
        SetRightSensor(data.DA, data.timestamp)
      };
    };
  };
  
  /* Draw both sparklines each time there's data */
  sparkLeftSensor.sparkline(dataLeftSensor, sparklineOptionsLeftSensor);
  sparkRightSensor.sparkline(dataRightSensor, sparklineOptionsRightSensor);
};

/**
 * TOOLTIP CONTENT MOUSEOVER HANDLER: LEFT DEVICE, HIGH VALUE
 */
leftHiText.on("mouseover", function() { 
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  /**
    * Opentip: Define contents
    */
  if (sensorTypeLeft == "Temp") {
    opentipLeftHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'HI: ' + 
                      dataLeftSensorHiLo.high + 
                      '&deg' + 
                      temperatureType + 
                      ' @ ' + 
                      sensor_timestamp(dataLeftSensorHiLo.highTime) + 
                      '</span>');
  } else if (sensorTypeLeft == "Humid") {
    opentipLeftHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'HI: ' + 
                      dataLeftSensorHiLo.high + 
                      '% @ ' + 
                      sensor_timestamp(dataLeftSensorHiLo.highTime) + 
                      '</span>');
  };
});

/**
 * TOOLTIP CONTENT MOUSEOVER HANDLER: LEFT DEVICE, LOW VALUE
 */
leftLoText.on("mouseover", function() { 
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  /**
    * Opentip: Define contents
    */
  if (sensorTypeLeft == "Temp") {
    opentipLeftLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'LO: ' + 
                      dataLeftSensorHiLo.low + 
                      '&deg' + 
                      temperatureType + 
                      ' @ ' + 
                      sensor_timestamp(dataLeftSensorHiLo.lowTime) + 
                      '</span>');
  } else if (sensorTypeLeft == "Humid") {
    opentipLeftLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'LO: ' + 
                      dataLeftSensorHiLo.low + 
                      '% @ ' + 
                      sensor_timestamp(dataLeftSensorHiLo.lowTime) + 
                      '</span>');
  };
});

/**
 * TOOLTIP CONTENT MOUSEOVER HANDLER: RIGHT DEVICE, HIGH VALUE
 */
rightHiText.on("mouseover", function() { 
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  /**
    * Opentip: Define contents
    */
  if (sensorTypeRight == "Temp") {
    opentipRightHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'HI: ' + 
                      dataRightSensorHiLo.high + 
                      '&deg' + 
                      temperatureType + 
                      ' @ ' + 
                      sensor_timestamp(dataRightSensorHiLo.highTime) + 
                      '</span>');
  } else if (sensorTypeRight == "Humid") {
    opentipRightHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'HI: ' + 
                      dataRightSensorHiLo.high + 
                      '% @ ' + 
                      sensor_timestamp(dataRightSensorHiLo.highTime) + 
                      '</span>');
  };
});

/**
 * TOOLTIP CONTENT MOUSEOVER HANDLER: RIGHT DEVICE, LOW VALUE
 */
rightLoText.on("mouseover", function() { 
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  /**
    * Opentip: Define contents
    */
  if (sensorTypeRight == "Temp") {
    opentipRightLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'LO: ' + 
                      dataRightSensorHiLo.low + 
                      '&deg' + 
                      temperatureType + 
                      ' @ ' + 
                      sensor_timestamp(dataRightSensorHiLo.lowTime) + 
                      '</span>');
  } else if (sensorTypeRight == "Humid") {
    opentipRightLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'LO: ' + 
                      dataRightSensorHiLo.low + 
                      '% @ ' + 
                      sensor_timestamp(dataRightSensorHiLo.lowTime) + 
                      '</span>');
  };
});