Using "canvas-gauges" npm package with Meteor?

help
1

Hi, I’m new to web development and thought Meteor would be a good starting place as I want reactivity.
I’ve managed to get an Arduino sending data via Mqtt to meteor and the value displayed and updated when changed so happy so far.
How I want to have the data value displayed as a gauge and found the “canvas-gauges” npm package of opensource gauges. Is it possible to use this with Meteor? BTW I’m using the default Blaze.

Thanks
John

2

Hi John, Welcome to the forums!

Almost all npm packages can be used with Meteor and/or Blaze.
Looking at canvas-gauge, I would recommend using the scripting API in onRendered:

<template name="gauge">
  <canvas class="gauge-canvas">
  </canvas>
</template>

import { RadialGauge } from 'canvas-gauges';
Template.gauge.onRendered(function () {
  this.gauge = new RadialGauge({ 
    renderTo: this.find('.gauge-canvas'),
    // All other options here
  });
  this.gauge.draw();
  // An autorun will re-run anytime the queried data changes
  this.autorun(() => {
    const data = Datasource.findOne({ deviceId: 'example' });
    this.gauge.value = data.value;
  })
});

Note: I haven’t tested this, it’s written off my head and from the docs. The docs don’t say how to import in a module, so I took a guess

1 Like
3

thanks for the tips - I will give it a try