"Drawing/Signature" widget, for use with tablets or phones

Just a way to collect signatures when needed.

something like this
image
image

Creating a custom widget for the GRIST system that allows users to draw their signature on a tablet involves a few key steps. First, you’ll need to identify a suitable Python library for capturing signatures on a touch-enabled device. Then, you’ll have to integrate this library as a custom widget within the GRIST environment. Here’s a general approach to achieve this:

  1. Choose a Python Library for Signature Capture: There are several Python libraries that can be used to capture signatures on a touch screen, such as kivy, which is well-suited for developing multi-touch applications. Another option could be using web-based technologies like HTML5 canvas and integrating them with Python via frameworks like Flask or Django.
  2. Familiarize Yourself with GRIST Custom Widgets: Understand how GRIST supports custom widgets. This will involve diving into GRIST’s documentation and possibly examining some example custom widgets if available.
  3. Develop the Signature Capture Widget:
  • If using a Python library like kivy, you will need to create a widget that captures the touch input and translates it into a signature.
  • If opting for a web-based approach, you could create an HTML5 canvas element for drawing, and then use JavaScript to capture the signature. This frontend would then need to interface with a Python backend.
  1. Integrate the Widget with GRIST:
  • Implement the necessary code to make your signature capture widget compatible with GRIST’s custom widget framework.
  • Ensure the widget can communicate with GRIST’s backend, for instance, to save the signature data.
  1. Test the Widget: Test the widget thoroughly on different tablet devices to ensure compatibility and responsiveness. This includes checking the accuracy and smoothness of the signature capture.
  2. Deployment and User Training: Once your widget is ready and tested, deploy it within your GRIST environment. Provide necessary training or documentation to users for using this new feature.

Remember, the specifics of this process will depend largely on the capabilities and limitations of the GRIST platform, especially in terms of custom widget integration. If GRIST has specific APIs or frameworks for widget development, make sure to utilize them for a smoother integration process.

1 Like

@jperon to the rescue? :smiley:

:wink:

Here is a POC:
https://docs.getgrist.com/dd1Amj8bbHzK/Tests/p/21#a1.s127.r1.c205

As is, it stores the signature as raw data (as understood by signature_pad js lib). It would be trivial to add a button to download it as jpg / png.

It may be re-used by copy / pasting the code in “Open Configuration” within the three-dots menu, and adapting the value of “table” and “column” (lines 19 - 20).

6 Likes

oh my god… what a coding legend. I referenced JPeron 5h ago.

2 hours ago he had a working POC!

So he made a whole working widget in 3h or less…

Please don’t mistake: I had the good part, the visible surface, and only put a bit of glue (50 lines of simple code) on all the good work that was done before. The real legends here are Grist team and all those developpers that make their js libraries available for everyone.

4 Likes

@Rogerio_Penna ,

thanks for having posted this question I was dreaming of that but thought it was not achievable easily.

@jperon → Big thanks to your repetitive suport and job

And thanks to all Grist member also, it’s incredible how Grist open new possibilites

1 Like

@natalie-grist I suppose this one will go into the next Grist News Summary? And probably, after a little more polishment, as an official Widget?

1 Like

This is AMAZING!!! Awesome job to @jperon :tada:

Absolutely! :smile:

2 Likes

that’s hella awesome , magnifique :tada:
I’m curious about how you achieved this.
I attempted to inspect the source code of the widget URL, but I couldn’t find the ‘save’ and ‘clear’ buttons, nor the library you used.

Thanks!
I’m keen on learning how you did it, so I can explore similar techniques in the future.

https://jperon.github.io/grist/Grist-pug-py-widget/

Thank you.

The source of the pug-py widget is here, with the beginning of a documentation:

To see which libs I used, you just have to click on Open configuration (three-dots menu of the widget).