search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
93 stars 27 forks source link

Customize the zoom buttons #47

Closed bartbutenaers closed 4 years ago

bartbutenaers commented 4 years ago

Currently the zoom buttons are out-of-the-box as delivered by the svg-pan-zoom library:

image

However it would be nice to have our own buttons, like in their demo. From their demo source code you see that they implement it like this:

document.getElementById('zoom-out').addEventListener('click', function(ev){
    ev.preventDefault()
    panZoom.zoomOut()
});
document.getElementById('reset').addEventListener('click', function(ev){
    ev.preventDefault()
    panZoom.resetZoom()
}

So the pan and zoom functionality should be controllable via input messages. Then users can show their own dashboard buttons to send zoom input messages.

Apart from that, perhaps we could get the out-of-the-box elements (via getElementById) and customize their appearance a bit. E.g. to match the theme colors of the dashboard, identical to our node-red-contrib-ui-contextmenu node ...

bartbutenaers commented 4 years ago

The new library from tommywil doesn't have those buttons...