@Neeeco good work on the gauge component!
Multiple gauge components
One option to fix this issue is to pass the dom node to the javascript initGauge function.
(the one you’re calling in the form show handler)
instead of using document query selectors to get the target,
your initGauge method might look like
function initGauge(target) {
// rest of method
}
And you’d call it form python like:
def form_show(self, **event_args):
...
self.call_js('initGauge', anvil.js.get_dom_node(self).querySelector("canvas"))
(Adjusting your javascript setHeight accordingly)
You’ll probably need to add arguments for the other attributes too. Rather than using the scoped values like initMinValue.
I’d then consider moving this query selector to the init method like:
def __init__(self, **props):
...
self.canvas_node = anvil.js.get_dom_node(self).querySelector("canvas")
def form_show(self, **event_args):
...
self.call_js("initGauge", self.canvas_node)
(side note - an anvil canvas also works for this component rather than needing to include one in the html)
Script tags
I’d consider moving this script tag into native libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
You’ll be loading this script tag for each custom gauge you have on the screen, which is probably not what you want.
Using JavaScript in Python
Something else to consider is that you could move all your javascript code to python
A simple example might be the height
from anvil.js.window import jQuery as _S
...
@height.setter
def height(self, h):
self._height = h
_S(self.canvas).css("height", h)
But you could do this with all the javascript if you wanted.
Property changes
The way you’ve written the code means you’re creating a new javascript Gauge object on each change of property.
Addressing this for the value property will fix the animation of the gauge as the value changes.
i.e. it will animate from one value to the next, rather than redrawing it and animating from the minimum value
