Ninjablock Health Widget (CPU/RAM/Disk/Download/Upload) for the Ninjablocks BETA dashboard (Width x 1, Height x 2) <<>> Author: Brian Call <<>> License: MIT

options.js

return {
  "name": "Ninja Health",
  "deviceMap": [
    { "deviceId": [500,501,502,503], "minimum": 1, "maximum": 1}, //CPU
    { "deviceId": [520,521,522,523], "minimum": 1, "maximum": 1}, //RAM
    { "deviceId": [530,531,532,533], "minimum": 1, "maximum": 1}, //Network In
    { "deviceId": [540,541,542,543], "minimum": 1, "maximum": 1} //Network Out
    { "deviceId": 2000, "minimum": 1, "maximum": 3} //Sanbox
  ],
  "forceDeviceMapGroup": true
}

style.less

/* GENERAL */
background: white;
 
/* LAYOUT */
/* Three column layout from: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/ */
#contentWrapper {
  float: left;
  width: 100%;
}
 
#leftColumn {
  float: left;
  width: 37%; /* Make the left column a little wider for CPU usage: Width of left column in percentage */
  margin-left: -100%;
  /* color: hsl(45,100%,45%); /* Ninjablock gold */
  color: hsl(94,59%,50%); /* Green */
}
 
#centerColumn {
  margin: 0 42% 0 42%; /* Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth */
  color: hsl(45,100%,45%); /* Ninjablock gold */
}
 
#rightColumn {
  float: left;
  width: 33%; /*Width of right column in pixels */
  margin-left: -33%; /* Set margin to that of -(RightColumnWidth) */
  /* color: hsl(45,100%,45%); /* Ninjablock gold */
  /* color: hsl(207, 59%, 50%); /* Blue */
  color: hsl(184, 59%, 50%); /* Turquoise */
}
 
.innertube {
  /* Margins for inner DIV inside each column (to provide padding) - originally 10px */
  /* margin: 0px; */
  margin-top: 0;
  margin-bottom: 0;
  width: 52%;
  margin-left: auto;
  margin-right: auto;
}

/* SECOND ROW LAYOUT */
#secondRowRighttCol {
  margin-left: 56%; /*Set left margin to LeftColumnWidth*/
  float: left;
}

#secondRowLeftCol {
  float: left;
  width: 56%; /*Width of left column*/
  margin-left: -100%; /*Set left margin to -(MainContainerWidth) (originally -840px) */
  color: hsl(242, 0%, 26%); /* Dark Gray */
}

.innertubeSecondRow {
  /* Margins for inner DIV inside each column (to provide padding) - originally 10px */
  /* margin: 0px; */
  margin-top: 0;
  margin-bottom: 0;
  width: 42%;
  margin-left: auto;
}

/* This bring the sensor display down to the right height for the second row */
.innertubeSecondRow .value {
  top: 55px;
}

/* THIRD ROW LAYOUT */
#thirdRowRighttCol {
  margin-left: 56%; /*Set left margin to LeftColumnWidth*/
  float: left;
}

#thirdRowLeftCol {
  float: left;
  width: 56%; /*Width of left column*/
  margin-left: -100%; /*Set left margin to -(MainContainerWidth) (originally -840px) */
  color: hsl(242, 0%, 26%); /* Dark Gray */
}

.innertubeThirdRow {
  /* Margins for inner DIV inside each column (to provide padding) - originally 10px */
  /* margin: 0px; */
  margin-top: 0;
  margin-bottom: 0;
  width: 42%;
  margin-left: auto;
}

/* This bring the sensor display down to the right height for the third row */
.innertubeThirdRow .value {
  top: 70px;
}


/* SENSOR READOUT OPTIONS */
/* Sensor readout */
.value {
  position: relative;
  top: 35px;
  text-align: left;
  /* text-align: center; /* CENTER LAYOUT */
  font-size: 2.2em; /* 25px */
  font-weight: bold;
  left: 0px;
  width: 100%;
  line-height: 1em;
  white-space: nowrap;
  
  /* Unit (e.g. %, Kbps, degF, degC) */
  .units {
    /* font-size: 12px; */
    font-size: 0.50em;
    font-weight: normal;
    vertical-align: 0.8em;
    position: relative;
    top: 0px;
    left: -6px;
  }
  
  /* High value */
  .hiText {
    position: relative;
    display: block;
    /* color: hsl(20,75%,65%); /* Subdued red */
    color: hsl(0, 89%, 70%); /* Brighter red */
    font-weight: bold;
    font-size: 0.38em; /* 10px */
    line-height: 1em;
    /* top: 6px; /* If .value line-height: 0 */
    top: 0px;
    left: 0px;
  }
  
  /* Low value */
  .loText {
    position: relative;
    display: block;
    color: hsl(203,60%,56%); /* Blue */
    font-weight: bold;
    font-size: 0.38em; /* 10px */
    line-height: 1em;
    /* top: 8px; /* If .value line-height: 0 */
    top: 1px;
    left: 0px;
  }
  
  /* Sensor label (e.g. CPU, RAM, Disk, Temp) */
  .label {
    position: relative;
    display: block;
    color: hsl(0,0%,60%); /* Grey */
    font-weight: normal;
    font-size: 0.3em; /* NORMAL LAYOUT */
    line-height: 1em;
    width: 100%;
    /* top: 11px; /* If .value line-height: 0 */
    top: 5px;
  }
}

/* SPARKLINE CSS */
.sparkline {
  clear: both;
  position: relative;
  top: 50px;
  width: 94%;
  float: center;
  margin-left: auto; /* Remove if absolute positioning is used */
  margin-right: auto; /* Remove if absolute positioning is used */
  height: 93px;
  line-height: 1em;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

.sparklineNetIn {
  clear: both;
  position: relative;
  top: 60px;
  width: 94%;
  float: center;
  margin-left: auto; /* Remove if absolute positioning is used */
  height: 64px;
  line-height: 1em;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

.sparklineNetOut {
  clear: both;
  position: relative;
  top: 75px;
  width: 94%;
  float: center;
  margin-left: auto; /* Remove if absolute positioning is used */
  height: 64px;
  line-height: 1em;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

view.html

<div class="widget">
  
  <!-- Center column -->
  <div id="contentWrapper">
    <div id="centerColumn">
      <div class="innertube">
        <div class="value">
          <span class="text"></span>
          <sup class="units"></sup>
          <span class="hiText"></span>
          <span class="loText"></span>
          <span class="label"></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Left column -->
  <div id="leftColumn">
    <div class="innertube">
      <div class="value">
        <span class="text"></span>
        <sup class="units"></sup>
        <span class="hiText"></span>
        <span class="loText"></span>
        <span class="label"></span>
      </div>
    </div>
  </div>
  
  <!-- Right column -->
  <div id="rightColumn">
    <div class="innertube">
      <div class="value">
        <span class="text"></span>
        <sup class="units"></sup>
        <span class="hiText"></span>
        <span class="loText"></span>
        <span class="label"></span>
      </div>
    </div>
  </div>

  <!-- First row sparkline -->
  <div class="sparkline"></div>
  
  <!-- Second row, RIGHT column (data) -->
  <div id="contentWrapper">
    <div id="secondRowRightCol">
      <div class="innertubeSecondRow">
        <div class="value">
          <span class="text"></span>
           <sup class="units"></sup>
          <span class="hiText"></span>
          <span class="loText"></span>
          <span class="label"></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Second row, LEFT column (sparkline) -->
  <div id="secondRowLeftCol">
    <div class="sparklineNetIn"></div>
  </div>
  
  <!-- Third row, RIGHT column (data) -->
  <div id="contentWrapper">
    <div id="thirdRowRightCol">
      <div class="innertubeThirdRow">
        <div class="value">
          <span class="text"></span>
           <sup class="units"></sup>
          <span class="hiText"></span>
          <span class="loText"></span>
          <span class="label"></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Third row, LEFT column (sparkline) -->
  <div id="thirdRowLeftCol">
    <div class="sparklineNetOut"></div>
  </div>
</div>

widget.js

/* Find the sparkline */
var sparkCPU = element.find(".widget .sparkline");
var sparkRAM = element.find(".widget .sparkline");
var sparkDiskspace = element.find(".widget .sparkline");
var sparkNetIn = element.find(".widget #secondRowLeftCol .sparklineNetIn");
var sparkNetOut = element.find(".widget #thirdRowLeftCol .sparklineNetOut");
 
/* Sensor data arrays */
var dataCPU = [];
var dataRAM = [];
var dataDiskspace = [];
var dataNetIn = [];
var dataNetOut = [];
 
/* Device and unit labels for Row 1, LEFT column */
element.find(".widget #leftColumn .innertube .value .label").html("CPU");
element.find(".widget #leftColumn .innertube .value .units").html("%");

/* Device and unit labels for Row 1, CENTER column */
element.find(".widget #contentWrapper #centerColumn .innertube .value .label").html("RAM");
element.find(".widget #contentWrapper #centerColumn .innertube .value .units").html("%");

/* Device and unit labels for Row 1, RIGHT column */
element.find(".widget #rightColumn .innertube .value .label").html("DISK");
element.find(".widget #rightColumn .innertube .value .units").html("%");

/* Device and unit labels for Row 2, RIGHT column */
element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .label").html("DOWNLOAD");
element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .units").html("Kbps");

/* Device and unit labels for Row 3, RIGHT column */
element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .label").html("UPLOAD");
element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .units").html("Kbps");


/* Sparkline options for the CPU graph */
var sparklineOptionsCPU = {
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(94,59%,50%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> CPU use: {{y}}%',
  disableHiddenCheck: true
};

/* Sparkline options for the RAM graph */
var sparklineOptionsRAM = {
  composite: true,
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(45,100%,45%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> RAM use: {{y}}%',
  disableHiddenCheck: true
};

/* Sparkline options for the Diskspace graph */
var sparklineOptionsDiskspace = {
  composite: true,
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(184, 59%, 50%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> Disk use: {{y}}%',
  disableHiddenCheck: true
};

/* Sparkline options for the Inbound Network Activity graph */
var sparklineOptionsNetIn = {
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(242, 0%, 26%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> Download: {{y}} Kbps',
  disableHiddenCheck: true
};

/* Sparkline options for the Outbound Network Activity graph */
var sparklineOptionsNetOut = {
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(242, 0%, 26%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> Upload: {{y}} Kbps',
  disableHiddenCheck: true
};

/* Update CPU display */
function SetCPU(value) {
  dataCPU.push(value);

  element.find(".widget #leftColumn .innertube .value .text").html(value);
  element.find(".widget #leftColumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataCPU));
  element.find(".widget #leftColumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataCPU));
};

/* Update RAM display */
function SetRAM(value) {
  dataRAM.push(value);
  
  element.find(".widget #contentWrapper #centerColumn .innertube .value .text").html(value);
  element.find(".widget #contentWrapper #centerColumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataRAM));
  element.find(".widget #contentWrapper #centerColumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataRAM));
};

/* Update Diskspace display */
function SetDiskspace(value) {
  dataDiskspace.push(value);

  element.find(".widget #rightColumn .innertube .value .text").html(value);
  element.find(".widget #rightColumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataDiskspace));
  element.find(".widget #rightColumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataDiskspace));
};

/* Update Net In/Download display */
function SetNetIn(value) {
  dataNetIn.push(value);
  
  // Net In sensor display elements
  element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .text").html(value);
  element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .hiText").html("HI: " + Math.max.apply(null, dataNetIn));
  element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .loText").html("LO: " + Math.min.apply(null, dataNetIn));
};

/* Update Net Out/Upload display */
function SetNetOut(value) {
  dataNetOut.push(value); 
  
  // Net Out sensor display elements
  element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .text").html(value);
  element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .hiText").html("HI: " + Math.max.apply(null, dataNetOut));
  element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .loText").html("LO: " + Math.min.apply(null, dataNetOut));
};

/* Call appropriate update functions when data is received */
scope.onData = function(data) {
  // CPU usage IDs
  if (data.D >= 500 && data.D <= 503) {
    SetCPU(data.DA);
  };
  
  // RAM usage IDs
  if (data.D >= 520 && data.D <= 523) {
    SetRAM(data.DA);
  };
  
  // Diskspace ID (still uses generic device ID 2000)
  if (data.D == 2000 && data.G == 0) {
    var diskVal = data.DA.split('%');
    SetDiskspace(diskVal[0]);
  };
  
  // Network In/Download IDs (look for either proper device IDs or my sandbox IDs)
  if ((data.D >= 530 && data.D <= 533) || (data.G == 3 && data.D == 2000)) {
    SetNetIn(data.DA);
  }
  
  // Network Out/Download IDs (look for either proper device IDs or my sandbox IDs)
  if ((data.D >=540 && data.D <= 543) || (data.G == 4 && data.D == 2000)) {
    SetNetOut(data.DA);
  }
  
  // Update all of the sparklines onData() instead of inside each set function
  sparkCPU.sparkline(dataCPU, sparklineOptionsCPU);
  sparkRAM.sparkline(dataRAM, sparklineOptionsRAM);
  sparkDiskspace.sparkline(dataDiskspace, sparklineOptionsDiskspace);
  sparkNetIn.sparkline(dataNetIn, sparklineOptionsNetIn);
  sparkNetOut.sparkline(dataNetOut, sparklineOptionsNetOut);
};

/* Widget title, manually set since none of the shortnames for the associated devices will do */
scope.Widget.settings.name = "Health@ninjablock";