1 / 1
generate appropriate gauges using gaugeJS and these sensor readings: ``` [ {"label": "CPU1 Temp", "scale": "degrees C", "status": "ok", "current": 37, "lower_critical": 0, "upper_critical": 90, "lower_non_critical": 0, "upper_non_critical": 85, "lower_non_recoverable": 0, "upper_non_recoverable": 90}, {"label": "FAN1", "scale": "RPM", "status": "ok", "current": 3900, "lower_critical": 500, "upper_critical": 25400, "lower_non_critical": 700, "upper_non_critical": 25300, "lower_non_recoverable": 300, "upper_non_recoverable": 25500}, {"label": "12V", "scale": "Volts", "status": "ok", "current": 12.189, "lower_critical": 10.299, "upper_critical": 13.26, "lower_non_critical": 10.74, "upper_non_critical": 12.945, "lower_non_recoverable": 10.173, "upper_non_recoverable": 13.386}, {"label": "Chassis Intru", "scale": "discrete", "status": "0x0000", "current": "0x0", "lower_critical": "na", "upper_critical": "na", "lower_non_critical": "na", "upper_non_critical": "na", "lower_non_recoverable": "na", "upper_non_recoverable": "na"}, {"label": "PS1 Status", "scale": "discrete", "status": "0x0100", "current": "0x1", "lower_critical": "na", "upper_critical": "na", "lower_non_critical": "na", "upper_non_critical": "na", "lower_non_recoverable": "na", "upper_non_recoverable": "na"} ] ```
1 / 1
Sure, here's an example of how to create gauges using GaugeJS library based on the provided sensor readings:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GaugeJS Example</title>
<script src="https://cdn.jsdelivr.net/npm/justgage@1.4.0-rc1/raphael-2.3.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/justgage@1.4.0-rc1/justgage.min.js"></script>
</head>
<body>
<h1>Sensor Readings</h1>
<div id="gauges"></div>
<script>
// Define sensor readings
var sensorReadings = [
{"label": "CPU1 Temp", "scale": "degrees C", "status": "ok", "current": 37, "lower_critical": 0, "upper_critical": 90, "lower_non_critical": 0, "upper_non_critical": 85, "lower_non_recoverable": 0, "upper_non_recoverable": 90},
{"label": "FAN1", "scale": "RPM", "status": "ok", "current": 3900, "lower_critical": 500, "upper_critical": 25400, "lower_non_critical": 700, "upper_non_critical": 25300, "lower_non_recoverable": 300, "upper_non_recoverable": 25500},
{"label": "12V", "scale": "Volts", "status": "ok", "current": 12.189, "lower_critical": 10.299, "upper_critical": 13.26, "lower_non_critical": 10.74, "upper_non_critical": 12.945, "lower_non_recoverable": 10.173, "upper_non_recoverable": 13.386}
];
// Loop through sensor readings and create gauges
for (var i = 0; i < sensorReadings.length; i++) {
var reading = sensorReadings[i];
// Define gauge options
var gaugeOptions = {
min: reading.lower_non_critical,
max: reading.upper_non_critical,
value: reading.current,
title: reading.label + " (" + reading.scale + ")",
label: reading.scale,
gaugeWidthScale: 0.6,
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
strokeWidth: 4,
strokeOpacity: 0.5,
baseLength: 20,
baseWidth: 10,
baseFill: '#9d9da2',
baseStroke: '#6b6b6e',
baseOpacity: 1,
dynamicOptions: true
},
counter: true,
relativeGaugeSize: true,
startAnimationType: 'linear',
startAnimationTime: 1500,
refreshAnimationTime: 1000,
refreshAnimationType: 'linear',
levelColors: [
'#ff0000',
'#ffa500',
'#f9c802',
'#a9d70b',
'#55bf3b'
]
};
// Create gauge
var gauge = new JustGage({
id: "gauge" + i,
options: gaugeOptions
});
// Update gauge value
1 / 1
generate appropriate gauges using gaugeJS and these sensor readings: ``` [ {"label": "CPU1 Temp", "scale": "degrees C", "status": "ok", "current": 37, "lower_critical": 0, "upper_critical": 90, "lower_non_critical": 0, "upper_non_critical": 85, "lower_non_recoverable": 0, "upper_non_recoverable": 90}, {"label": "12V", "scale": "Volts", "status": "ok", "current": 12.189, "lower_critical": 10.299, "upper_critical": 13.26, "lower_non_critical": 10.74, "upper_non_critical": 12.945, "lower_non_recoverable": 10.173, "upper_non_recoverable": 13.386}, {"label": "PS1 Status", "scale": "discrete", "status": "0x0100", "current": "0x1", "lower_critical": "na", "upper_critical": "na", "lower_non_critical": "na", "upper_non_critical": "na", "lower_non_recoverable": "na", "upper_non_recoverable": "na"} ] ```
1 / 1
Sure, here are the appropriate gauges using GaugeJS for the given sensor readings:
- CPU1 Temp Gauge:
html
<div id="cpu-temp-gauge"></div>
javascript
var cpuTempGauge = new Gauge({
renderTo: 'cpu-temp-gauge',
title: 'CPU1 Temp',
units: 'degrees C',
minValue: 0,
maxValue: 90,
majorTicks: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90'],
minorTicks: 5,
highlights: [
{ from: 0, to: 85, color: 'rgba(0, 255, 0, .15)' },
{ from: 85, to: 90, color: 'rgba(255, 0, 0, .25)' }
],
valueFormat: { int: 2, dec: 0 },
value: 37
});
- 12V Voltage Gauge:
html
<div id="voltage-gauge"></div>
javascript
var voltageGauge = new Gauge({
renderTo: 'voltage-gauge',
title: '12V',
units: 'Volts',
minValue: 10.173,
maxValue: 13.386,
majorTicks: ['10.173', '10.74', '11.307', '11.874', '12.441', '13.008', '13.575', '13.386'],
highlights: [
{ from: 10.173, to: 10.74, color: 'rgba(255, 0, 0, .25)' },
{ from: 10.74, to: 12.945, color: 'rgba(0, 255, 0, .15)' },
{ from: 12.945, to: 13.386, color: 'rgba(255, 0, 0, .25)' }
],
valueFormat: { int: 2, dec: 3 },
value: 12.189
});
- PS1 Status Gauge:
html
<div id="ps-status-gauge"></div>
javascript
var psStatusGauge = new Gauge({
renderTo: 'ps-status-gauge',
title: 'PS1 Status',
units: '',
minValue: 0,
maxValue: 1,
majorTicks: ['0', '1'],
highlights: [
{ from: 0, to: 1, color: 'rgba(0, 255, 0, .15)' }
],
valueFormat: { int: 1, dec: 0 },
value: 1
});
Note: The FAN1
sensor reading is not included as it requires a gauge that supports a scale in RPM. GaugeJS does not have an RPM scale by default, so a custom scale would need to be created or a different gauge library would need to be used.