Experimental Ninjablocks Dashboard Widget Code

style.less

/* SENSOR READOUT OPTIONS */
/* Sensor readout */
.value {
  //
  //
  //
  /* CPU high/low value arrows */
  .highValArrow {
    width: 0; 
    height: 0; 
    border-bottom: 8px solid hsl(0, 89%, 70%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    top: 8px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: none;
  }

  .lowValArrow {
    width: 0; 
    height: 0; 
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 8px solid hsl(203,60%,56%);
    top: 9px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: none;
  }
}

view.html

<div class="widget">
  
  <!-- Center column -->
  <div id="contentWrapper">
    <div id="centerColumn">
      <div class="innertube">
        <div class="value">
          <!-- -->
          <sup class="highValArrow"></sup>
          <sup class="lowValArrow"></sup>
          <!-- -->
        </div>
      </div>
    </div>
  </div>
  
  <!-- Left column -->
  <div id="leftColumn">
    <div class="innertube">
      <div class="value">
        <!-- -->
        <sup class="highValArrow"></sup>
        <sup class="lowValArrow"></sup>
        <!-- -->
      </div>
    </div>
  </div>
  
  <!-- Right column -->
  <div id="rightColumn">
    <div class="innertube">
      <div class="value">
        <!-- -->
        <sup class="highValArrow"></sup>
        <sup class="lowValArrow"></sup>
        <!-- -->
      </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">
          <!-- -->
          <sup class="highValArrow"></sup>
          <sup class="lowValArrow"></sup>
          <!-- -->
        </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">
          <!-- -->
          <sup class="highValArrow"></sup>
          <sup class="lowValArrow"></sup>
          <!-- -->
        </div>
      </div>
    </div>
  </div>
  
  <!-- Third row, LEFT column (sparkline) -->
  <div id="thirdRowLeftCol">
    <div class="sparklineNetOut"></div>
  </div>
  
  <!-- Buttons -->  
  <div class="buttons">
    <a class="button restartButton compact orange-gradient">Restart</a>
    <span class="restartBlockTip">Restart this block</span>
    <span class="restartBlockTipArrow"></span>
    <span class="buttonMessageConfirm">Are you sure?</span>
    <a class="button confirmRestartButton compact green-gradient">Yes</a>
    <span class="buttonMessageRestarting">Restarting...</span>
    <a class="button stopRestartButton tiny red-gradient">Cancel</a>
  </div>
  
  <span class="debug_left">DEBUG-LEFT</span>
  <span class="debug_right">DEBUG-RIGHT</span>
</div>

widget.js

// CPU Thresholds
cpuLowT = 50;
cpuHighT = 50;

// RAM Thresholds
ramLowT = 55;
ramHighT = 55;

// Disk Thresholds
diskLowT = 30;
diskHighT = 30;

// Upload Thresholds
uploadLowT = 4;
uploadHighT = 20;

// Download Thresholds
downloadLowT = 4;
downloadHighT = 20;

// Device and unit labels for Row 1, CENTER column
element.find(".widget #contentWrapper #centerColumn .innertube .value .highValArrow").css({ "display":"none", "left":"20px" });
element.find(".widget #contentWrapper #centerColumn .innertube .value .lowValArrow").css({ "display":"none", "left":"20px" });

// Device and unit labels for Row 1, RIGHT column
element.find(".widget #rightColumn .innertube .value .highValArrow").css({ "display":"none", "left":"18px" });
element.find(".widget #rightColumn .innertube .value .lowValArrow").css({ "display":"none", "left":"18px" });

// Device and unit labels for Row 2, RIGHT column
element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .highValArrow").css({ "display":"none", "left":"-30px" });
element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .lowValArrow").css({ "display":"none", "left":"-30px" });

// Device and unit labels for Row 3, RIGHT column
element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .highValArrow").css({ "display":"none", "left":"-30px" });
element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .lowValArrow").css({ "display":"none", "left":"-30px" });


// Update CPU display
function SetCPU(value, timestamp) {
  // Threshold indicators
  if (value < cpuLowT){
    element.find(".widget #leftColumn .innertube .value .highValArrow").css({ "display":"none" });
    element.find(".widget #leftColumn .innertube .value .lowValArrow").css({ "display":"inline-block", "left":"-24px" });
  } else if (value > cpuHighT) {
    element.find(".widget #leftColumn .innertube .value .highValArrow").css({ "display":"inline-block", "left":"-24px" });
    element.find(".widget #leftColumn .innertube .value .lowValArrow").css({ "display":"none" });
  };
};


// Update RAM display
function SetRAM(value, timestamp) {
  // Threshold indicators
  if (value < ramLowT){
    element.find(".widget #contentWrapper #centerColumn .innertube .value .highValArrow").css({ "display":"none" });
    element.find(".widget #contentWrapper #centerColumn .innertube .value .lowValArrow").css({ "display":"inline-block", "left":"-24px" });
  } else if (value > ramHighT) {
    element.find(".widget #contentWrapper #centerColumn .innertube .value .highValArrow").css({ "display":"inline-block", "left":"-24px" });
    element.find(".widget #contentWrapper #centerColumn .innertube .value .lowValArrow").css({ "display":"none" });
  };
};


// Update Diskspace display
function SetDiskspace(value, timestamp) {
  // Threshold indicators
  if (value < diskLowT){
    element.find(".widget #rightColumn .innertube .value .highValArrow").css({ "display":"none" });
    element.find(".widget #rightColumn .innertube .value .lowValArrow").css({ "display":"inline-block", "left":"-24px" });
  } else if (value > diskHighT) {
    element.find(".widget #rightColumn .innertube .value .highValArrow").css({ "display":"inline-block", "left":"-24px" });
    element.find(".widget #rightColumn .innertube .value .lowValArrow").css({ "display":"none" });
  };
};


// Update Net In/Download display
function SetNetIn(value, timestamp) {
  // Threshold indicators
  if (value < downloadLowT){
    element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .highValArrow").css({ "display":"none" });
    element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .lowValArrow").css({ "display":"inline-block", "left":"-45px" });
  } else if (value > downloadHighT) {
    element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .highValArrow").css({ "display":"inline-block", "left":"-45px" });
    element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .lowValArrow").css({ "display":"none" });
  };
};


// Update Net Out/Upload display
function SetNetOut(value, timestamp) {
  // Threshold indicators
  if (value < downloadLowT){
    element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .highValArrow").css({ "display":"none" });
    element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .lowValArrow").css({ "display":"inline-block", "left":"-45px" });
  } else if (value > downloadHighT) {
    element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .highValArrow").css({ "display":"inline-block", "left":"-45px" });
    element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .lowValArrow").css({ "display":"none" });
  };
  
  
// Call appropriate update functions when data is received
scope.onData = function(data) {
  // DEBUG ARRAY SIZES
  /*
   * element.find(".widget .debug_left").html("C: " + dataCPU.length + "/" + dataCPUTimestamps.length + 
   *                                        ", R: " + dataRAM.length + "/" + dataRAMTimestamps.length + 
   *                                        ", D: " + dataDiskspace.length + "/" + dataDiskspaceTimestamps.length + 
   *                                        ", NI: " + dataNetIn.length + "/" + dataNetInTimestamps.length + 
   *                                        ", NO: " + dataNetOut.length + "/" + dataNetOutTimestamps.length);
   */
};