Here’s a very simple, but nice looking meter in JavaScript. It’s configurable for a number of uses. There’s no need for any css (styling is by configuration) or additional libraries (it uses Chroma-js), as everything required is packaged up in one module.
Where to get it
Getting started
node
|
1 |
npm install canvas-meter --save |
require it
|
1 |
const CanvasMeter = require ("canvas-meter"); |
script tag
|
1 |
<script src="https://storage.googleapis.com/xliberation.com/canvas-meter/canvas-meter-v1.0.min.js"></script> |
Examples
A speedometer
|
1 |
<span style="font-family: Roboto,arial, sans-serif;">A guitar tuner</span> |
Fine tune your own interactively on Codepen
API
Create a canvas element
|
1 |
<canvas width="300" height="210" id="meter"></canvas> |
Pass it to an instance of the meter
|
1 |
const meter = new CanvasMeter(document.getElementById("meter")); |
Update it when you want
|
1 |
meter.draw(currentValue,lowValue,highValue,idealValue,label); |
Configuration
Most aspects of the meter are configurable.
Defaults
The defaults are for a guitar tuner and look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
let options = { meter: { ramp:[ {stop:0, color:'#F44336'}, {stop:.4,color:'#FFEB3B'}, {stop:.49,color:'#4CAF50'}, {stop:.5,color:'#FFFFFF'}, {stop:.51,color:'#4CAF50'}, {stop:.6,color:'#FFEB3B'}, {stop:1,color:'#F44336'} ], colors: { background:'#212121', label:'#FFFFFF', tickLabel:'#FAFAFA' }, offsets: { ideal:-14, value:-160, label:-36, meter:-20, tickLabel:22, tick:-26, pointer:-12 }, ticks: { major:{ height:12, width:2, count:5 }, minor:{ height:6, width:2, count:3 }, pointer: { height:8, width:28 } }, fonts: { label:'24pt sans', tickLabel:'8pt sans', ideal:'16pt sans', value:'16pt sans', }, formatters: { value:(v) => typeof v===typeof undefined ? "" :`${v.toFixed(1).toString()}hz`, ideal:(v) => typeof v===typeof undefined ? "" : `${v.toFixed(1).toString()}hz`, label:(v) => typeof v===typeof undefined ? "" : `${v.toString()}`, tickLabel:(v) => typeof v===typeof undefined ? "" : `${Math.round(v).toString()}`, }, arc: { size:.8, width:8 } } }; |
Example
Here’s the skin for the speedometer example. Any properties not mentioned here are picked up from default
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const getSpeedoSkin = () => { return { meter:{ offsets:{ tick:8, tickLabel:34, value:0, pointer:44 }, ramp:[ {stop:0, color:'#FFFFFF'}, {stop:.2,color:'#2196F3'}, {stop:.3,color:'#4CAF50'}, {stop:.65,color:'#FFEB3B'}, {stop:1,color:'#F44336'} ], colors:{ background:'#455A64' }, ticks:{ major:{ count:13 }, minor: { count:4, width:1 }, pointer: { height:50, width:8 } }, formatters: { value: function (v) { return Math.round(v.toString())}, ideal: function (v) { return "";} } } }; }; |
Use it like this
|
1 2 |
const meter = new CanvasMeter(document.getElementById("speedo")); meter.setOptions (getSpeedoSkin()); |