Попытка построить инструмент для парусной лодки с различными датчиками. Посчитались на gauge.mini.js как самый простой способ сделать то, что мне нужно. Остаются две большие проблемы: как динамически обновлять каждый из двух датчиков с разными значениями и как динамически обновлять датчики при изменении отображаемых значений.
Пока ответ будет, предложения для чтения или подходы будути добро пожаловатьЯ в неведении, но не слишком ленив, чтобы изменить это.
Вот что у меня есть:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="gauge.min.js"></script>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>
<input type="text" id="gauge-value" placeholder="put new gauge value here" value="0">
<button onclick="animateGauges()">Animate</button>
<hr>
<div id="top" style="left:500px;top:485px;position:absolute">
<canvas data-type="radial-gauge"
data-width="600"
data-height="600"
data-min-value="0"
data-max-value="360"
data-major-ticks=" , , , , , , , ,"
data-minor-ticks="22"
data-ticks-angle="360"
data-start-angle="180"
data-stroke-ticks="false"
data-highlights="false"
data-color-plate="transparent"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-numbers="#ccc"
data-color-needle="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="false"
data-animated-value="true"
data-value-text-shadow="false"
data-color-circle-inner="transparent"
data-color-needle-circle-outer="#ccc"
data-needle-circle-size="1"
data-needle-circle-outer="true"
data-animation-rule="linear"
data-needle-type="line"
data-needle-start="75"
data-needle-end="99"
data-needle-width="3"
data-borders="true"
data-border-inner-width="0"
data-border-middle-width="0"
data-border-outer-width="10"
data-color-border-outer="#ccc"
data-color-border-outer-end="#ccc"
data-color-needle-shadow-down="#222"
data-border-shadow-width="0"
data-animation-target="needle"
data-title=" "
data-font-title-size="19"
data-color-title="#f5f5f5"
data-animation-duration="1500"
data-value="5"
data-animate-on-init="true"
data-use-min-path="true"
></canvas>
<div id="bottom" style="left:50px;top:50px;position:absolute">
<canvas data-type="radial-gauge"
data-width="500"
data-height="500"
data-min-value="0"
data-max-value="360"
data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
data-minor-ticks="22"
data-ticks-angle="360"
data-start-angle="180"
data-stroke-ticks="false"
data-highlights="false"
data-color-plate="transparent"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-numbers="#ccc"
data-color-needle="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-animated-value="true"
data-value-text-shadow="false"
data-color-circle-inner="transparent"
data-color-needle-circle-outer="#ccc"
data-needle-circle-size="0"
data-needle-circle-outer="false"
data-animation-rule="linear"
data-needle-type="line"
data-needle-start="75"
data-needle-end="99"
data-needle-width="3"
data-borders="true"
data-border-inner-width="0"
data-border-middle-width="0"
data-border-outer-width="10"
data-color-border-outer="#ccc"
data-color-border-outer-end="#ccc"
data-color-needle-shadow-down="#222"
data-border-shadow-width="0"
data-animation-target="plate"
data-units=" "
data-title="WindBreaker"
data-font-title-size="19"
data-color-title="#f5f5f5"
data-animation-duration="1500"
data-value="5"
data-animate-on-init="true"
data-use-min-path="true"
></canvas>
<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}
document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
});
}
});
});
function animateGauges() {
document.gauges.forEach(function(gauge) {
gauge.value = parseFloat(
document.getElementById('gauge-value').value) || 0;
setTimeout(function() {
console.log('new gauge value:' + gauge.value);
}, 1510);
});
}
</script>
</body>
</html>