mirror of https://github.com/speeduino/Airbear.git
266 lines
6.9 KiB
JavaScript
266 lines
6.9 KiB
JavaScript
|
|
var gaugeConfig_rpm = {
|
|
type: "radial-gauge",
|
|
width: 400,
|
|
height: 400,
|
|
units: "RPM",
|
|
title: false,
|
|
value: 0,
|
|
minValue: 0,
|
|
maxValue: 9000,
|
|
majorTicks: ["0","1000","2000","3000","4000","5000","6000","7000","8000","9000"],
|
|
minorTicks: 2,
|
|
strokeTicks: false,
|
|
highlights: [
|
|
//{ "from": 0, "to": 5000, "color": "rgba(0,255,0,.15)" },
|
|
{ "from": 5000, "to": 6500, "color": "rgba(255,255,0,.15)" },
|
|
{ "from": 6500, "to": 9000, "color": "rgba(255,30,0,.25)" },
|
|
],
|
|
colorPlate: "#555",
|
|
colorPlateEnd: "#111",
|
|
//colorPlate: "rgba(255, 255, 255, 0)",
|
|
colorMajorTicks: "#f5f5f5",
|
|
colorMinorTicks: "#ddd",
|
|
colorTitle: "#fff",
|
|
colorUnits: "#ccc",
|
|
colorNumbers: "#eee",
|
|
colorNeedleStart: "rgba(240, 128, 128, 1)",
|
|
colorNeedleEnd: "rgba(255, 160, 122, .9)",
|
|
colorBorderOuterEnd: "rgba(255, 160, 122, .5)",
|
|
valueBox: true,
|
|
valueInt: 4,
|
|
valueDec: 0,
|
|
animation: false,
|
|
animationRule: "linear",
|
|
animationDuration: "33", //Must be at most 1000/data frequency
|
|
animatedValue: true,
|
|
fontValue: "Led",
|
|
}
|
|
|
|
var gaugeConfig_rpm2 = {
|
|
type: "radial-gauge",
|
|
width: 400,
|
|
height: 400,
|
|
units: "RPM",
|
|
title: "x100",
|
|
fontTitle: "Orbitron",
|
|
value: 0,
|
|
minValue: 0,
|
|
maxValue: 9000,
|
|
//majorTicks: ["0","1000","2000","3000","4000","5000","6000","7000","8000","9000"],
|
|
majorTicks: ["0","10","20","30","40","50","60","70","80","90"],
|
|
minorTicks: 2,
|
|
strokeTicks: false,
|
|
highlights: [
|
|
//{ "from": 0, "to": 5000, "color": "rgba(0,255,0,.15)" },
|
|
{ "from": 5000, "to": 6500, "color": "rgba(255,255,0,.2)" },
|
|
{ "from": 6500, "to": 9000, "color": "rgba(255,30,0,.5)" },
|
|
],
|
|
colorPlate: "#111",
|
|
colorPlateEnd: "#137",
|
|
colorMajorTicks: "#f5f5f5",
|
|
colorMinorTicks: "#ddd",
|
|
colorTitle: "#fff",
|
|
colorUnits: "#ccc",
|
|
colorNumbers: "#eee",
|
|
colorNeedleStart: "rgba(255, 0, 0, 1)",
|
|
colorNeedleEnd: "rgba(255, 0, 0, .9)",
|
|
colorNeedleShadowDown: "rgba(255, 255, 255, 0.5)",
|
|
colorBorderOuterEnd: "rgba(255, 160, 122, .5)",
|
|
colorBorderInner: "#137",
|
|
colorBorderMiddle: "#137",
|
|
valueBox: true,
|
|
valueInt: 4,
|
|
valueDec: 0,
|
|
animation: false,
|
|
animationRule: "linear",
|
|
animationDuration: "33", //Must be at most 1000/data frequency
|
|
animatedValue: true,
|
|
//fontValue: "Led",
|
|
fontValue: "Orbitron",
|
|
fontUnits: "Orbitron",
|
|
fontNumbers: "Orbitron",
|
|
fontNumbersStyle: "italic",
|
|
fontNumbersSize: 16,
|
|
}
|
|
|
|
var gaugeConfig_linear_generic = {
|
|
type: "linear-gauge",
|
|
width: 275,
|
|
height: 120,
|
|
units: "",
|
|
title: false,
|
|
value: 75,
|
|
valueBox: false,
|
|
minValue: 0,
|
|
maxValue: 100,
|
|
colorPlate: "rgba(255, 255, 255, 0)",
|
|
borderShadowWidth: 0,
|
|
borders: false,
|
|
barBeginCircle: false,
|
|
tickSide: "left",
|
|
numberSide: "left",
|
|
needleSide: "left",
|
|
needleType: "line",
|
|
needleWidth: 4,
|
|
needleStart: -20,
|
|
needleEnd: 160,
|
|
colorNeedle: "rgb(252, 200, 78)",
|
|
colorNeedleEnd: "rgba(252, 200, 78, 0)",
|
|
animation: false,
|
|
animationDuration: 30,
|
|
animationRule: "linear",
|
|
animationTarget: "plate",
|
|
barWidth: 50,
|
|
colorBar: "rgba(255, 255, 255, 0)",
|
|
colorBarProgress: "rgba(26, 49, 110, 1)",
|
|
ticksWidth: 0,
|
|
ticksWidthMinor: 0,
|
|
majorTicksInt: 1,
|
|
highlightsWidth: 0,
|
|
fontNumbersSize: 0,
|
|
}
|
|
|
|
var gaugeConfig_qtrRight = {
|
|
width: 300,
|
|
height: 300,
|
|
units: "C",
|
|
title: "CLT",
|
|
minValue: 0,
|
|
startAngle: 180,
|
|
ticksAngle: 90,
|
|
valueBox: false,
|
|
maxValue: 220,
|
|
majorTicks: [
|
|
"-40",
|
|
"-20",
|
|
"0",
|
|
"20",
|
|
"40",
|
|
"60",
|
|
"80",
|
|
"100",
|
|
"120",
|
|
"140"
|
|
],
|
|
minorTicks: 2,
|
|
strokeTicks: true,
|
|
highlights: [
|
|
{
|
|
"from": 160,
|
|
"to": 220,
|
|
"color": "rgba(200, 50, 50, .75)"
|
|
}
|
|
],
|
|
colorPlate: "rgba(255, 255, 255, 0)",
|
|
borderShadowWidth: 0,
|
|
borders: false,
|
|
needleType: "arrow",
|
|
needleWidth: 2,
|
|
needleCircleSize: 7,
|
|
needleCircleOuter: true,
|
|
needleCircleInner: false,
|
|
//animation: false,
|
|
animationDuration: 15,
|
|
animationRule: "linear",
|
|
valueBox: true,
|
|
};
|
|
|
|
var gaugeConfig_qtrLeft = {
|
|
width: 300,
|
|
height: 300,
|
|
units: "C",
|
|
title: "IAT",
|
|
minValue: 0,
|
|
startAngle: 90,
|
|
ticksAngle: 90,
|
|
barStartPosition: "right",
|
|
valueBox: false,
|
|
maxValue: 90,
|
|
majorTicks:
|
|
[
|
|
"140",
|
|
"120",
|
|
"100",
|
|
"90",
|
|
"70",
|
|
"40",
|
|
"20",
|
|
"0",
|
|
"-20",
|
|
"-40"
|
|
],
|
|
minorTicks: 2,
|
|
strokeTicks: true,
|
|
highlights: [
|
|
{
|
|
"from": 0,
|
|
"to": 25,
|
|
"color": "rgba(200, 50, 50, .75)"
|
|
}
|
|
],
|
|
colorPlate: "rgba(255, 255, 255, 0)",
|
|
borderShadowWidth: 0,
|
|
borders: false,
|
|
needleType: "arrow",
|
|
needleWidth: 2,
|
|
needleCircleSize: 7,
|
|
needleCircleOuter: true,
|
|
needleCircleInner: false,
|
|
//animation: false,
|
|
animationDuration: 15,
|
|
animationRule: "linear",
|
|
valueBox: true,
|
|
};
|
|
|
|
function toggle_fullscreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.body.requestFullscreen();
|
|
document.body.setAttribute("fullscreen","");
|
|
} else {
|
|
document.exitFullscreen();
|
|
document.body.removeAttribute("fullscreen");
|
|
}
|
|
}
|
|
|
|
if (document.fullscreenEnabled) {
|
|
const fullscreen_button = document.createElement("button");
|
|
fullscreen_button.setAttribute('id','fullscreen-button');
|
|
fullscreen_button.addEventListener("click", toggle_fullscreen);
|
|
fullscreen_button.innerHTML = `
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12
|
|
7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6
|
|
11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
|
|
</svg>
|
|
`;
|
|
document.body.appendChild(fullscreen_button);
|
|
}
|
|
|
|
const gauges = [];
|
|
|
|
gauges.push(new RadialGauge(Object.assign( {renderTo: 'gauge1' }, gaugeConfig_rpm2)));
|
|
gauges[0].update({value: 0, maxValue: 9000});
|
|
gauges[0].draw();
|
|
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge2' }, gaugeConfig_linear_generic)));
|
|
gauges[1].update({value: 0, maxValue: 100});
|
|
gauges[1].draw();
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge3' }, gaugeConfig_linear_generic)));
|
|
gauges[2].update({minValue: -40, maxValue: 180});
|
|
gauges[2].draw();
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge4' }, gaugeConfig_linear_generic)));
|
|
gauges[3].draw();
|
|
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge5' }, gaugeConfig_linear_generic)));
|
|
gauges[4].update({tickSide: "right"});
|
|
gauges[4].draw();
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge6' }, gaugeConfig_linear_generic)));
|
|
gauges[5].update({tickSide: "right", maxValue: 250})
|
|
gauges[5].draw();
|
|
gauges.push(new LinearGauge(Object.assign( {renderTo: 'gauge7' }, gaugeConfig_linear_generic)));
|
|
gauges[6].update({tickSide: "right"})
|
|
gauges[6].draw(); |