Skip to content

Instantly share code, notes, and snippets.

@bacall213

bacall213/options.js

Last active December 29, 2015 08:29
Show Gist options
  • Save bacall213/7643594 to your computer and use it in GitHub Desktop.
Save bacall213/7643594 to your computer and use it in GitHub Desktop.
Download ZIP
[STABLE, FEATURE INCOMPLETE] Ninjablock Health Widget (CPU/RAM/Disk/Download/Upload) with Server Functions for the Ninjablocks BETA dashboard [Width x 1, Height x 2] [Author: Brian Call] [License: MIT]
Raw
options.js
return {
"name": "Advanced 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} //Sandbox
],
"forceDeviceMapGroup": true
}
Raw
style.less
.debug_left {
display: none;
font-size: 8px;
position: absolute;
top: 425px;
left: 5px;
text-align: left;
}
.debug_right {
display: none;
font-size: 8px;
position: absolute;
top: 425px;
right: 5px;
text-align: right;
}
/* GENERAL */
background: white;
line-height: 1em;
/* Styling for the tooltips
* - Borrowed from jqstooltip from the jquery sparklines plugin
* - Specifically: https://gist.github.com/tim-peterson/2868211
* - Not currently in use - reference for formatting the opentip tooltips
*/
.vTooltip {
position: absolute;
display: none;
z-index: 10000;
background: rgb(0, 0, 0) transparent;
background-color: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
color: white;
white-space: nowrap;
padding: 5px;
border: 1px solid white;
font: 10px arial, san serif;
}
/* 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 33% 0 37%; /* 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 percent of widget width */
margin-left: -33%; /* Set margin to that of -(RightColumnWidth) */
/* color: hsl(45,100%,45%); /* Ninjablocks gold */
/* color: hsl(207, 59%, 50%); /* Blue */
/* color: hsl(184, 59%, 50%); /* Turquoise */
color: hsl(203,60%,56%); /* Ninjablocks blue */
}
.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;
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;
}
}
/**
* BUTTONS
* Style and functionality borrowed from jmanoto's 433MHz widget
* https://gist.github.com/jmanoto
**/
.buttonMessageConfirm, .buttonMessageRestarting {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.buttons {
text-align: center;
padding: 11px;
display: block;
width: 90%;
margin: 0px auto 10px auto;
position: absolute;
top: 375px;
font-family: 'HelveticaNeue-Light', Helvetica;
.confirmRestartButton, .buttonMessageConfirm, .buttonMessageRestarting, .stopRestartButton {
display: none;
}
&.on {
.restartServiceButton, .restartBlockButton {
display: none;
}
.confirmRestartButton, .buttonMessageConfirm, .stopRestartButton {
display: inline-block;
}
}
&.confirmed {
.restartServiceButton, .restartBlockButton, .confirmRestartButton {
display: none;
}
.buttonMessageRestarting, .stopRestartButton {
display: inline-block;
}
}
}
/* Override default button style */
.button {
font-size: 0.85em;
}
/* Override default screen.css button style and don't enlarge cancel button on click */
.button.tiny:active, .tiny .button:active,
.button.tiny.active, .tiny .button.active {
padding: 0px 5px;
}
Raw
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>
<!-- Buttons -->
<div class="buttons">
<a class="button restartServiceButton compact orange-gradient">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
viewBox="0 0 744.09448 720.35999"
height="21" width="21"
style="vertical-align: middle"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<clipPath id="clipPath3897" clipPathUnits="userSpaceOnUse">
<path d="M0,400,400,400,400,0,0,0,0,400z"/>
</clipPath>
<filter id="filter3156" style="color-interpolation-filters:sRGB;">
<feFlood result="flood" flood-color="rgb(0,0,0)" flood-opacity="0.35"/>
<feComposite operator="in" result="composite1" in2="SourceGraphic" in="flood"/>
<feOffset result="offset" dx="0" dy="-28"/>
<feComposite operator="over" result="composite2" in2="offset" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(0,-331.99836)">
<g filter="url(#filter3156)" fill="#FFF">
<path d="m364,52.65625c-168.58125,2.135351-304.5625,139.4746-304.5625,308.5625,0,7.88249,0.294392,15.70358,0.875,23.4375h82.40625c-0.84209-7.97699-1.28125-16.08097-1.28125-24.28125,0-126.23652,102.32598-228.59375,228.5625-228.59375,85.77641,0,160.49748,47.25878,199.59375,117.15625h85.90625c-44.90139-114.90194-156.69147-196.28125-287.5-196.28125-1.3314,0-2.67259-0.01681-4,0zm233.9375,290.5625c0.42001,5.6623,0.625,11.38669,0.625,17.15625,0,126.23652-102.32598,228.5625-228.5625,228.5625-82.82724,0-155.347-44.04629-195.4375-110h-91.84375c46.27094,112.0098,156.55583,190.84375,285.28125,190.84375,170.4193,0,308.5625-138.1432,308.5625-308.5625,0-6.04392-0.18847-12.04199-0.53125-18h-78.09375zm-537,48.5625c0.119027,1.21105,0.242012,2.4181,0.375,3.625-0.132689-1.20221-0.256226-2.41861-0.375-3.625zm7,41.59375c0.458154,1.91237,0.943921,3.82041,1.4375,5.71875-0.495537-1.90205-0.977543-3.80261-1.4375-5.71875zm88.3125,8.0625c0.48729,1.28432,0.9591,2.57062,1.46875,3.84375-0.50892-1.27101-0.98211-2.56159-1.46875-3.84375zm-81.4375,16.125c0.480129,1.46201,0.967455,2.92272,1.46875,4.375-0.502694-1.45472-0.987234-2.91058-1.46875-4.375zm96.625,16.0625c1.01235,1.77135,2.03577,3.54001,3.09375,5.28125-1.05742-1.74032-2.08186-3.51085-3.09375-5.28125z"
transform="translate(0,331.99836)"/>
<path d="m412.7666,386.80499-208.39032,0,104.19516-180.47131z"
transform="matrix(1.1988027,0,-0.079686,1.3403786,222.33524,63.197)"
stroke-dasharray="none" stroke-miterlimit="0" stroke-width="78.5"/>
<path d="m412.7666,386.80499-208.39032,0,104.19516-180.47131z"
transform="matrix(-1.1988027,0,0.09155967,-1.3403786,515.94507,1325.9393)"
stroke-dasharray="none" stroke-miterlimit="0" stroke-width="78.5"/>
<g clip-path="url(#clipPath3897)"
transform="matrix(1.2646872,0,0,-1.1662314,122.16035,1001.9294)">
<g transform="translate(225.1055,278.1846)">
<path d="m0,0c-29.066-0.713-81.282-7.133-88.3,3.077-7.021,10.212-12.319,39.256-0.095,46.372,6.435,3.745,22.057,4.26,31.705,4.848,33.283,2.023,52.322,4.077,84.777,1.096,6.567-0.604,16.03-1.234,18.662-6.001,3.828-6.92,4.133-30.681,0.477-38.414-2.247-4.743-11.079-7.874-16.788-9.067-8.852-1.856-19.938-1.649-30.438-1.911m-9.535-124.462c5.724-11.778,6.873-34.945,17.343-40.742,5.828-3.227,26.18-2.785,30.172,1.904,1.542,1.814,2.696,5.875,2.217,8.789-4.151,25.218-20.43,53.052-24.681,77.962,16.099,2.3,41.518-4.183,46.827,3.813,5.313,7.997,2.043,29.513-8.075,34.294-12.824,6.056-30.946-0.951-45.648,3.63-0.148,1.792-0.684,3.967-0.119,6.093,22.776-0.175,48.626,1.394,54.489,19.064,6.641,20.02,4.02,55.636-6.656,70.625-8.316,11.678-29.632,15.764-47.76,17.105-15.956,1.176-32.743,0.276-48.213-0.926-18.114-1.413-35.979-3.339-51.778-8.416-15.455-4.964-16.532-20.516-17.294-37.692-0.683-15.384,2.584-36.248,7.775-46.229,6.245-11.995,23.109-10.684,37.62-13.32,0.093-3.837,0.109-6.157,0.447-9.532-15.376-1.41-42.743-0.387-49.951-6.785-7.211-6.398-4.263-29.24,5.382-31.96,13.1-3.701,33.062,2.189,44.782,0.061-5.712-19.728-9-37.93-15.045-58.323-2.144-7.235-5.974-14.938-6.21-21.582-0.235-6.611,6.768-8.566,12.105-9.308,7.808-1.083,24.396-0.839,26.946,4.229,5.543,11.015,3.771,25.797,7.755,37.775l27.57-0.529z"
fill-rule="evenodd" fill="#FFF"/>
</g>
<g transform="translate(236.5361,323.1978)">
<path d="m0,0c11.494-0.083,21.7-17.605,13.038-28.136-6.945-8.447-23.203-6.406-29.402-0.657-1.401,1.296-4.326,4.808-4.372,7.351-0.249,13.615,9.243,21.527,20.736,21.442"
fill-rule="evenodd" fill="#FFF"/>
</g>
<g transform="translate(148.9199,300.6787)">
<path d="M0,0c-4.653,19.435,15.283,28.26,26.992,18.731,9.465-7.706,9.864-25.207-1.549-30.514-10.705-4.979-24.942,2.692-25.443,11.783"
fill-rule="evenodd" fill="#FFF"/>
</g>
</g>
</g>
</g>
</svg>
Service
</a>
<a class="button restartBlockButton compact red-gradient">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
viewBox="0 0 744.09448 720.35999"
height="21" width="21"
style="vertical-align: middle"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<clipPath id="clipPath3897" clipPathUnits="userSpaceOnUse">
<path d="M0,400,400,400,400,0,0,0,0,400z"/>
</clipPath>
<filter id="filter3156" style="color-interpolation-filters:sRGB;">
<feFlood result="flood" flood-color="rgb(0,0,0)" flood-opacity="0.35"/>
<feComposite operator="in" result="composite1" in2="SourceGraphic" in="flood"/>
<feOffset result="offset" dx="0" dy="-28"/>
<feComposite operator="over" result="composite2" in2="offset" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(0,-331.99836)">
<g filter="url(#filter3156)" fill="#FFF">
<path d="m364,52.65625c-168.58125,2.135351-304.5625,139.4746-304.5625,308.5625,0,7.88249,0.294392,15.70358,0.875,23.4375h82.40625c-0.84209-7.97699-1.28125-16.08097-1.28125-24.28125,0-126.23652,102.32598-228.59375,228.5625-228.59375,85.77641,0,160.49748,47.25878,199.59375,117.15625h85.90625c-44.90139-114.90194-156.69147-196.28125-287.5-196.28125-1.3314,0-2.67259-0.01681-4,0zm233.9375,290.5625c0.42001,5.6623,0.625,11.38669,0.625,17.15625,0,126.23652-102.32598,228.5625-228.5625,228.5625-82.82724,0-155.347-44.04629-195.4375-110h-91.84375c46.27094,112.0098,156.55583,190.84375,285.28125,190.84375,170.4193,0,308.5625-138.1432,308.5625-308.5625,0-6.04392-0.18847-12.04199-0.53125-18h-78.09375zm-537,48.5625c0.119027,1.21105,0.242012,2.4181,0.375,3.625-0.132689-1.20221-0.256226-2.41861-0.375-3.625zm7,41.59375c0.458154,1.91237,0.943921,3.82041,1.4375,5.71875-0.495537-1.90205-0.977543-3.80261-1.4375-5.71875zm88.3125,8.0625c0.48729,1.28432,0.9591,2.57062,1.46875,3.84375-0.50892-1.27101-0.98211-2.56159-1.46875-3.84375zm-81.4375,16.125c0.480129,1.46201,0.967455,2.92272,1.46875,4.375-0.502694-1.45472-0.987234-2.91058-1.46875-4.375zm96.625,16.0625c1.01235,1.77135,2.03577,3.54001,3.09375,5.28125-1.05742-1.74032-2.08186-3.51085-3.09375-5.28125z"
transform="translate(0,331.99836)"/>
<path d="m412.7666,386.80499-208.39032,0,104.19516-180.47131z"
transform="matrix(1.1988027,0,-0.079686,1.3403786,222.33524,63.197)"
stroke-dasharray="none" stroke-miterlimit="0" stroke-width="78.5"/>
<path d="m412.7666,386.80499-208.39032,0,104.19516-180.47131z"
transform="matrix(-1.1988027,0,0.09155967,-1.3403786,515.94507,1325.9393)"
stroke-dasharray="none" stroke-miterlimit="0" stroke-width="78.5"/>
<g clip-path="url(#clipPath3897)"
transform="matrix(1.2646872,0,0,-1.1662314,122.16035,1001.9294)">
<g transform="translate(225.1055,278.1846)">
<path d="m0,0c-29.066-0.713-81.282-7.133-88.3,3.077-7.021,10.212-12.319,39.256-0.095,46.372,6.435,3.745,22.057,4.26,31.705,4.848,33.283,2.023,52.322,4.077,84.777,1.096,6.567-0.604,16.03-1.234,18.662-6.001,3.828-6.92,4.133-30.681,0.477-38.414-2.247-4.743-11.079-7.874-16.788-9.067-8.852-1.856-19.938-1.649-30.438-1.911m-9.535-124.462c5.724-11.778,6.873-34.945,17.343-40.742,5.828-3.227,26.18-2.785,30.172,1.904,1.542,1.814,2.696,5.875,2.217,8.789-4.151,25.218-20.43,53.052-24.681,77.962,16.099,2.3,41.518-4.183,46.827,3.813,5.313,7.997,2.043,29.513-8.075,34.294-12.824,6.056-30.946-0.951-45.648,3.63-0.148,1.792-0.684,3.967-0.119,6.093,22.776-0.175,48.626,1.394,54.489,19.064,6.641,20.02,4.02,55.636-6.656,70.625-8.316,11.678-29.632,15.764-47.76,17.105-15.956,1.176-32.743,0.276-48.213-0.926-18.114-1.413-35.979-3.339-51.778-8.416-15.455-4.964-16.532-20.516-17.294-37.692-0.683-15.384,2.584-36.248,7.775-46.229,6.245-11.995,23.109-10.684,37.62-13.32,0.093-3.837,0.109-6.157,0.447-9.532-15.376-1.41-42.743-0.387-49.951-6.785-7.211-6.398-4.263-29.24,5.382-31.96,13.1-3.701,33.062,2.189,44.782,0.061-5.712-19.728-9-37.93-15.045-58.323-2.144-7.235-5.974-14.938-6.21-21.582-0.235-6.611,6.768-8.566,12.105-9.308,7.808-1.083,24.396-0.839,26.946,4.229,5.543,11.015,3.771,25.797,7.755,37.775l27.57-0.529z"
fill-rule="evenodd" fill="#FFF"/>
</g>
<g transform="translate(236.5361,323.1978)">
<path d="m0,0c11.494-0.083,21.7-17.605,13.038-28.136-6.945-8.447-23.203-6.406-29.402-0.657-1.401,1.296-4.326,4.808-4.372,7.351-0.249,13.615,9.243,21.527,20.736,21.442"
fill-rule="evenodd" fill="#FFF"/>
</g>
<g transform="translate(148.9199,300.6787)">
<path d="M0,0c-4.653,19.435,15.283,28.26,26.992,18.731,9.465-7.706,9.864-25.207-1.549-30.514-10.705-4.979-24.942,2.692-25.443,11.783"
fill-rule="evenodd" fill="#FFF"/>
</g>
</g>
</g>
</g>
</svg>
Block
</a>
<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>
<!-- DEBUG -->
<span class="debug_left">DEBUG-LEFT</span>
<span class="debug_right">DEBUG-RIGHT</span>
</div>
Raw
widget.js
/**
* Define the relevant hostname here:
* Index 0 is the friendly hostname (example hard coded)
* Index 1 is the IP (example hard coded)
*
* TODO: This should be automated
*
**/
var hostname = new Array("ninjablock","abc.def.ghi.jkl");
// Button variables */
var buttons = element.find(".buttons")
var restartServiceButton = element.find(".restartServiceButton");
var restartBlockButton = element.find(".restartBlockButton");
var stopRestartButton = element.find(".stopRestartButton");
var confirmRestartButton = element.find(".confirmRestartButton");
// 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");
// High-Low Text Fields (to minimize the use of element.find(...))
var cpuHiText = element.find(".widget #leftColumn .innertube .value .hiText");
var cpuLoText = element.find(".widget #leftColumn .innertube .value .loText");
var ramHiText = element.find(".widget #contentWrapper #centerColumn .innertube .value .hiText")
var ramLoText = element.find(".widget #contentWrapper #centerColumn .innertube .value .loText")
var diskspaceHiText = element.find(".widget #rightColumn .innertube .value .hiText");
var diskspaceLoText = element.find(".widget #rightColumn .innertube .value .loText");
var netInHiText = element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .hiText");
var netInLoText = element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .loText");
var netOutHiText = element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .hiText");
var netOutLoText = element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .loText");
/**
* 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 opentipCpuHiText = new Opentip(cpuHiText, { style: "normalToolTip" });
var opentipCpuLoText = new Opentip(cpuLoText, { style: "normalToolTip" });
var opentipRamHiText = new Opentip(ramHiText, { style: "normalToolTip" });
var opentipRamLoText = new Opentip(ramLoText, { style: "normalToolTip" });
var opentipDiskspaceHiText = new Opentip(diskspaceHiText, { style: "normalToolTip" });
var opentipDiskspaceLoText = new Opentip(diskspaceLoText, { style: "normalToolTip" });
var opentipNetInHiText = new Opentip(netInHiText, { style: "normalToolTip" });
var opentipNetInLoText = new Opentip(netInLoText, { style: "normalToolTip" });
var opentipNetOutHiText = new Opentip(netOutHiText, { style: "normalToolTip" });
var opentipNetOutLoText = new Opentip(netOutLoText, { style: "normalToolTip" });
// Opentip for the restart service button - use the same base style as the high/low value tooltips to maintain consistency
var opentipRestartButton = new Opentip(restartServiceButton, { style: "normalToolTip" });
opentipRestartButton.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px; font-weight: bold">' +
'Restart service' +
'</span>');
// Opentip for the restart block button - use the same base style as the high/low value tooltips to maintain consistency
var opentipRestartButton = new Opentip(restartBlockButton, { style: "normalToolTip" });
opentipRestartButton.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px; font-weight: bold">' +
'Restart block' +
'</span>');
/**
* VARIABLE: SENSOR DATA ARRAY >> CPU
*/
var dataCPU = [];
var dataCPUHiLo = ({
"high": -1,
"highTime": "",
"low": 999,
"lowTime": ""
});
var dataCPUTimestamps = [];
/**
* VARIABLE: SENSOR DATA ARRAY >> RAM
*/
var dataRAM = [];
var dataRAMHiLo = ({
"high": -1,
"highTime": "",
"low": 999,
"lowTime": ""
});
var dataRAMTimestamps = [];
/**
* VARIABLE: SENSOR DATA ARRAY >> DISK
*/
var dataDiskspace = [];
var dataDiskspaceHiLo = ({
"high": -1,
"highTime": "",
"low": 999,
"lowTime": ""
});
var dataDiskspaceTimestamps = [];
/**
* VARIABLE: SENSOR DATA ARRAY >> DOWNLOAD
*/
var dataNetIn = [];
var dataNetInHiLo = ({
"high": -1,
"highTime": "",
"low": 999,
"lowTime": ""
});
var dataNetInTimestamps = [];
/**
* VARIABLE: SENSOR DATA ARRAY >> UPLOAD
*/
var dataNetOut = [];
var dataNetOutHiLo = ({
"high": -1,
"highTime": "",
"low": 999,
"lowTime": ""
});
var dataNetOutTimestamps = [];
/**
* VARIABLE: Max Array Length
*/
var maxArrayLen = 200;
// 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%)',
tooltipPrefix: ' CPU use: ',
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') +
' @ ' +
dataCPUTimestamps[fields.x] +
'</div>';
},
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%)',
tooltipPrefix: ' RAM use: ',
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') +
' @ ' +
dataRAMTimestamps[fields.x] +
'</div>';
},
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(203,60%,56%)', /* Ninjablocks blue */
/* lineColor: 'hsl(184, 59%, 50%)', /* Turquoise */
tooltipPrefix: ' Disk use: ',
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') +
' @ ' +
dataDiskspaceTimestamps[fields.x] +
'</div>';
},
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%)',
tooltipPrefix: ' Download: ',
tooltipSuffix: ' Kbps',
tooltipFormatter: function(sparkline, options, fields) {
return '<div class="jsqfield"><span style="color: ' +
fields.color +
'">&#9679;</span>' +
options.get('tooltipPrefix') +
fields.y +
options.get('tooltipSuffix') +
' @ ' +
dataNetInTimestamps[fields.x] +
'</div>';
},
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%)',
tooltipPrefix: ' Upload: ',
tooltipSuffix: ' Kbps',
tooltipFormatter: function(sparkline, options, fields) {
return '<div class="jsqfield"><span style="color: ' +
fields.color +
'">&#9679;</span>' +
options.get('tooltipPrefix') +
fields.y +
options.get('tooltipSuffix') +
' @ ' +
dataNetOutTimestamps[fields.x] +
'</div>';
},
disableHiddenCheck: true
};
/**
* 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;
};
// Hours are returned 0-23, so add a "0" at the front if 0-9
if (hours < 10) {
hours = "0" + hours;
};
// 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
return timestamp_type2;
};
/**
* FUNCTION: SetCPU(value, timestamp)
* DESCRIPTION: Update CPU display
*/
function SetCPU(value, timestamp) {
// Update device array
dataCPU.push(value);
// Update timestamp array
dataCPUTimestamps.push(sensor_timestamp(timestamp));
// Check for new high value
if ( Math.max.apply(null, dataCPU) > dataCPUHiLo.high ) {
dataCPUHiLo.high = Math.max.apply(null, dataCPU);
dataCPUHiLo.highTime = timestamp;
};
// Check for new low value
if ( Math.min.apply(null, dataCPU) < dataCPUHiLo.low ) {
dataCPUHiLo.low = Math.min.apply(null, dataCPU);
dataCPUHiLo.lowTime = timestamp;
};
element.find(".widget #leftColumn .innertube .value .text").html(value);
cpuHiText.html("HI: " + dataCPUHiLo.high);
cpuLoText.html("LO: " + dataCPUHiLo.low);
// Clean up the arrays, if necessary
if (dataCPU.length > maxArrayLen || dataCPUTimestamps.length > maxArrayLen) {
dataCPU = dataCPU.slice(dataCPU.length-maxArrayLen,dataCPU.length);
dataCPUTimestamps = dataCPUTimestamps.slice(dataCPUTimestamps.length-maxArrayLen,dataCPUTimestamps.length);
};
};
/**
* FUNCTION: SetRAM(value, timestamp)
* DESCRIPTION: Update RAM display
*/
function SetRAM(value, timestamp) {
// Update device array
dataRAM.push(value);
// Update timestamp array
dataRAMTimestamps.push(sensor_timestamp(timestamp));
// Check for new high value
if ( Math.max.apply(null, dataRAM) > dataRAMHiLo.high ) {
dataRAMHiLo.high = Math.max.apply(null, dataRAM);
dataRAMHiLo.highTime = timestamp;
};
// Check for new low value
if ( Math.min.apply(null, dataRAM) < dataRAMHiLo.low ) {
dataRAMHiLo.low = Math.min.apply(null, dataRAM);
dataRAMHiLo.lowTime = timestamp;
};
element.find(".widget #contentWrapper #centerColumn .innertube .value .text").html(value);
ramHiText.html("HI: " + dataRAMHiLo.high);
ramLoText.html("LO: " + dataRAMHiLo.low);
// Clean up the arrays, if necessary
if (dataRAM.length > maxArrayLen || dataRAMTimestamps.length > maxArrayLen) {
dataRAM = dataRAM.slice(dataRAM.length-maxArrayLen,dataRAM.length);
dataRAMTimestamps = dataRAMTimestamps.slice(dataRAMTimestamps.length-maxArrayLen,dataRAMTimestamps.length);
};
};
/**
* FUNCTION: SetDiskspace(value, timestamp)
* DESCRIPTION: Update Diskspace display
*/
function SetDiskspace(value, timestamp) {
// Update device array
dataDiskspace.push(value);
//Update timestamp array
dataDiskspaceTimestamps.push(sensor_timestamp(timestamp));
// Check for new high value
if ( Math.max.apply(null, dataDiskspace) > dataDiskspaceHiLo.high ) {
dataDiskspaceHiLo.high = Math.max.apply(null, dataDiskspace);
dataDiskspaceHiLo.highTime = timestamp;
};
// Check for new low value
if ( Math.min.apply(null, dataDiskspace) < dataDiskspaceHiLo.low ) {
dataDiskspaceHiLo.low = Math.min.apply(null, dataDiskspace);
dataDiskspaceHiLo.lowTime = timestamp;
};
element.find(".widget #rightColumn .innertube .value .text").html(value);
diskspaceHiText.html("HI: " + dataDiskspaceHiLo.high);
diskspaceLoText.html("LO: " + dataDiskspaceHiLo.low);
// Clean up the arrays, if necessary
if (dataDiskspace.length > maxArrayLen || dataDiskspaceTimestamps.length > maxArrayLen) {
dataDiskspace = dataDiskspace.slice(dataDiskspace.length-maxArrayLen,dataDiskspace.length);
dataDiskspaceTimestamps = dataDiskspaceTimestamps.slice(dataDiskspaceTimestamps.length-maxArrayLen,dataDiskspaceTimestamps.length);
};
};
/**
* FUNCTION: SetNetIn(value, timestamp)
* DESCRIPTION: Update Net In/Download display
*/
function SetNetIn(value, timestamp) {
// Update device array
dataNetIn.push(value);
//Update timestamp array
dataNetInTimestamps.push(sensor_timestamp(timestamp));
// Check for new high value
if ( Math.max.apply(null, dataNetIn) > dataNetInHiLo.high ) {
dataNetInHiLo.high = Math.max.apply(null, dataNetIn);
dataNetInHiLo.highTime = timestamp;
};
// Check for new low value
if ( Math.min.apply(null, dataNetIn) < dataNetInHiLo.low ) {
dataNetInHiLo.low = Math.min.apply(null, dataNetIn);
dataNetInHiLo.lowTime = timestamp;
};
// Net In sensor display elements
element.find(".widget #contentWrapper #secondRowRightCol .innertubeSecondRow .value .text").html(value);
netInHiText.html("HI: " + dataNetInHiLo.high);
netInLoText.html("LO: " + dataNetInHiLo.low);
// Clean up the arrays, if necessary
if (dataNetIn.length > maxArrayLen || dataNetInTimestamps.length > maxArrayLen) {
dataNetIn = dataNetIn.slice(dataNetIn.length-maxArrayLen,dataNetIn.length);
dataNetInTimestamps = dataNetInTimestamps.slice(dataNetInTimestamps.length-maxArrayLen,dataNetInTimestamps.length);
};
};
/**
* FUNCTION: SetNetOut(value, timestamp)
* DESCRIPTION: Update Net Out/Upload display
*/
function SetNetOut(value, timestamp) {
// Update device array
dataNetOut.push(value);
//Update timestamp array
dataNetOutTimestamps.push(sensor_timestamp(timestamp));
// Check for new high value
if ( Math.max.apply(null, dataNetOut) > dataNetOutHiLo.high ) {
dataNetOutHiLo.high = Math.max.apply(null, dataNetOut);
dataNetOutHiLo.highTime = timestamp;
};
// Check for new low value
if ( Math.min.apply(null, dataNetOut) < dataNetOutHiLo.low ) {
dataNetOutHiLo.low = Math.min.apply(null, dataNetOut);
dataNetOutHiLo.lowTime = timestamp;
};
// Net Out sensor display elements
element.find(".widget #contentWrapper #thirdRowRightCol .innertubeThirdRow .value .text").html(value);
netOutHiText.html("HI: " + dataNetOutHiLo.high);
netOutLoText.html("LO: " + dataNetOutHiLo.low);
// Clean up the arrays, if necessary
if (dataNetOut.length > maxArrayLen || dataNetOutTimestamps.length > maxArrayLen) {
dataNetOut = dataNetOut.slice(dataNetOut.length-maxArrayLen,dataNetOut.length);
dataNetOutTimestamps = dataNetOutTimestamps.slice(dataNetOutTimestamps.length-maxArrayLen,dataNetOutTimestamps.length);
};
};
/**
* FUNCTION: (Anonymous) scope.onData
* DESCRIPTION: Update arrays, counters, etc when new data is received
*/
scope.onData = function(data) {
// CPU usage IDs
if (data.D >= 500 && data.D <= 503) {
SetCPU(data.DA, data.timestamp);
};
// RAM usage IDs
if (data.D >= 520 && data.D <= 523) {
SetRAM(data.DA, data.timestamp);
};
// Diskspace ID (still uses generic device ID 2000)
if (data.D == 2000 && data.G == 0) {
var diskVal = data.DA.split('%');
SetDiskspace(diskVal[0], data.timestamp);
};
// 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, data.timestamp);
};
// 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, data.timestamp);
};
// 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);
// 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);
*/
};
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - LEFT DEVICE - HIGH VALUE
*/
cpuHiText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipCpuHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'HI: ' +
dataCPUHiLo.high +
'% @ ' +
sensor_timestamp(dataCPUHiLo.highTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - LEFT DEVICE - LOW VALUE
*/
cpuLoText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipCpuLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'LO: ' +
dataCPUHiLo.low +
'% @ ' +
sensor_timestamp(dataCPUHiLo.lowTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - CENTER DEVICE - HIGH VALUE
*/
ramHiText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipRamHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'HI: ' +
dataRAMHiLo.high +
'% @ ' +
sensor_timestamp(dataRAMHiLo.highTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - CENTER DEVICE - LOW VALUE
*/
ramLoText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipRamLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'LO: ' +
dataRAMHiLo.low +
'% @ ' +
sensor_timestamp(dataRAMHiLo.lowTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - RIGHT DEVICE - HIGH VALUE
*/
diskspaceHiText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipDiskspaceHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'HI: ' +
dataDiskspaceHiLo.high +
'% @ ' +
sensor_timestamp(dataDiskspaceHiLo.highTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 1 - RIGHT DEVICE - LOW VALUE
*/
diskspaceLoText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipDiskspaceLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'LO: ' +
dataDiskspaceHiLo.low +
'% @ ' +
sensor_timestamp(dataDiskspaceHiLo.lowTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 2 - HIGH VALUE
*/
netInHiText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipNetInHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'HI: ' +
dataNetInHiLo.high +
' Kbps @ ' +
sensor_timestamp(dataNetInHiLo.highTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 2 - LOW VALUE
*/
netInLoText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipNetInLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'LO: ' +
dataNetInHiLo.low +
' Kbps @ ' +
sensor_timestamp(dataNetInHiLo.lowTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 3 - HIGH VALUE
*/
netOutHiText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipNetOutHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'HI: ' +
dataNetOutHiLo.high +
' Kbps @ ' +
sensor_timestamp(dataNetOutHiLo.highTime) +
'</span>');
});
/**
* TOOLTIP CONTENT MOUSEOVER HANDLER: ROW 3 - LOW VALUE
*/
netOutLoText.on("mouseover", function() {
// Set the cursor to an arrow ("default")
$(this).css("cursor", "default");
/**
* Opentip: Define contents
*/
opentipNetOutLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' +
'LO: ' +
dataNetOutHiLo.low +
' Kbps @ ' +
sensor_timestamp(dataNetOutHiLo.lowTime) +
'</span>');
});
/**
* BUTTON HANDLER: RESTART SERVICE (onclick functionality)
*/
restartServiceButton.on("click", function() {
buttons.addClass("on");
});
/**
* BUTTON HANDLER: RESTART BLOCK (onclick functionality)
*/
restartBlockButton.on("click", function() {
buttons.addClass("on");
});
/**
* BUTTON HANDLER: CONFIRM BLOCK RESTART ("Yes" button)
*/
confirmRestartButton.on("click", function() {
buttons.removeClass("on");
buttons.addClass("confirmed");
/*
RESTART
Need to interface with node here
`sudo shutdown -r now`
*/
// Restore "Restart" button after x milliseconds
// TODO: A signal needs to be received to reset the button. Using a javascript timer has unpredictable behavior.
//setTimeout(resetTheRestartButton, 5000);
});
/**
* BUTTON HANDLER: CANCEL ("Cancel" button)
*/
stopRestartButton.on("click", function() {
// Stop the restart
stopRestart();
// Reset the interface
resetTheRestartButton();
});
/**
* FUNCTION: resetTheRestartButton()
* DESCRIPTION: Reset the restart button
* CAVEATS: This function handles ONLY the interface resets
*/
function resetTheRestartButton() {
buttons.removeClass("on");
buttons.removeClass("confirmed");
};
/**
* FUNCTION: stopRestart()
* DESCRIPTION: Cancel Restart
* CAVEATS: This function handles ONLY the restart functions; interface resets are handled elsewhere
*/
function stopRestart() {
/*
CANCEL RESTART
Need to interface with node here
`sudo shutdown -c`
*/
};
/**
* WIDGET CONFIG: Title
* DESCRIPTION: Widget title, manually set since none of the shortnames for the associated devices will do
*/
scope.Widget.settings.name = "Health@" + hostname[0];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment