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:

7 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

@enthus1ast I’ve been meaning to post my gratitude for this for some time now. I seriously can not even begin to express how helpful this code has been for me! I had literally spent YEARS searching for a small-scale solution to integrate my ‘databases’ with visual mapping with no success.

I regret that I’m not more agile with code, but I’m now motivated to try to hone some skills to see if I can make some tweaks. That being said, I thought you should know that this widget solved a challenge that had been torturing me for a very long time - THANK YOU!

4 Likes