gristImageMap, show text on images, like on a map

As a sysadmin i often create pictures of a rack and add text to them,
so to have an overview which server is which etc.

For this i often used draw.io or yed.
But since i discovered grist i wanted to have a similar feature in grist,
so that i do not have doubly maintain data (in grist, and on the picture).

So i’ve created a small custom widget that can show text on a background image.
The custom widget is in a very early stage but i’ve learned “commit often, commit early”.
So i wanted to show you this as soon as possible.

You can try the custom widget yourself on the demo document:
https://docs.getgrist.com/4GZYNimabmJJ/gristImageMap

The custom widget repo on github:

3 Likes

The demo document is not working in my test

Looks very cool! You might find this experimental fiddle widget useful, it will allow you to edit and host your widget inside a document:

https://berhalak.github.io/my-widgets/fiddle/index.html

You can also store the image inside a document in the Attachment column and access it from within the widget, here is a sample code and a documentation.

I love the idea. As a newcomer to the IT department, I will definetly use this. Thank you

Please try again, it should work now.

1 Like

Yes this is a good idea, i’ll play with this.

I release version v0.2.0.
I’ve added basic mouse scroll zooming, and “drag to scroll”.
I’ve also made the detail view more useable.
Its still a little buggy.

I will list all version of the plugin on:
https://enthus1ast.github.io/

you can choose a specific version of the plugin by using its direct link, or use the

https://enthus1ast.github.io/gristImageMap/

link, this one will always be the newest version.

Demo: https://docs.getgrist.com/4GZYNimabmJJ/gristImageMap

PS: If you know a good javascript library that does these basic “whiteboard” features,
like zooming, moving, maybe selection/multiselection etc, please let me know.
Currently i use interact.js that does the drag and drop, but i would happily use something (more featurepacked) prebuild.

2 Likes

waouh thanks a lot , looks very interesting :grinning:
there is also maybe these libraries :
Fabric.js Javascript Canvas Library (fabricjs.com)
Konva - JavaScript 2d canvas library (konvajs.org)

1 Like