61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
// var opts = {
|
|
// lines: 12,
|
|
// angle: 0.15,
|
|
// lineWidth: 0.44,
|
|
// pointer: {
|
|
// length: 0.9,
|
|
// strokeWidth: 0.035,
|
|
// color: '#000000'
|
|
// },
|
|
// limitMax: 'false',
|
|
// // percentColors: [[0.0, "#a9d70b" ], [0.50, "#a9d70b"], [1.0, "#a9d70b"]], // !!!!
|
|
// strokeColor: '#E0E0E0',
|
|
// generateGradient: true
|
|
// };
|
|
// var target = document.getElementById('angles');
|
|
// var gauge = new Gauge(target).setOptions(opts);
|
|
// gauge.maxValue = 90;
|
|
// gauge.minValue = -90;
|
|
// gauge.animationSpeed = 5;
|
|
// gauge.set(-75);
|
|
|
|
// https://github.com/bernii/gauge.js/issues/193
|
|
|
|
|
|
var opts = {
|
|
angle: 0, // The span of the gauge arc
|
|
lineWidth: 0.2, // The line thickness
|
|
radiusScale: 0.89, // Relative radius
|
|
pointer: {
|
|
length: 0.54, // // Relative to gauge radius
|
|
strokeWidth: 0.053, // The thickness
|
|
color: '#000000' // Fill color
|
|
},
|
|
limitMax: false, // If false, max value increases automatically if value > maxValue
|
|
limitMin: false, // If true, the min value of the gauge will be fixed
|
|
colorStart: '#6FADCF', // Colors
|
|
colorStop: '#8FC0DA', // just experiment with them
|
|
strokeColor: '#E0E0E0', // to see which ones work best for you
|
|
generateGradient: true,
|
|
highDpiSupport: true, // High resolution support
|
|
staticZones: [
|
|
{strokeStyle: "#00FF00", min: 0, max: 2}, // Greem
|
|
{strokeStyle: "#0000FF", min: 2, max: 3}, // Blue`
|
|
{strokeStyle: "#00FFFF", min: 3, max: 4}, // Yellow
|
|
{strokeStyle: "#FFDD00", min: 4, max: 5}, // Purple
|
|
{strokeStyle: "#FF0000", min: 5, max: 6} // Red
|
|
],
|
|
|
|
};
|
|
var target = document.getElementById('basic'); // your canvas element
|
|
var gaugeboatspeed = new Gauge(target).setOptions(opts); // create sexy gauge!
|
|
gaugeboatspeed.maxValue = 6; // set max gauge value
|
|
gaugeboatspeed.setMinValue(0); // Prefer setter over gauge.minValue = 0
|
|
gaugeboatspeed.animationSpeed = 10; // set animation speed (32 is default value)
|
|
gaugeboatspeed.set(0); // set actual value
|
|
|
|
// Define set_basic(values) so that gauges can be set by metricsgroups
|
|
function set_basic() {
|
|
gaugeboatspeed.set(boatspeed_now);
|
|
}
|