Is there a way for me to have a field act as a drawing canvas?

  • 0
  • 1
  • Question
  • Updated 4 months ago
  • Answered

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple


I found this online to use but I have no idea if its possible to integrate into quickbase or whether quickbase supports html5. I am currently using Quickbase essentials.


I want to have a field where users can draw or mark it and then have it save. Is this possible? 

Photo of Raymond

Raymond

  • 0 Points

Posted 4 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Yes it is possible to do but you have to use script. Once the canvas is rendered you have to convert the canvas the drawing was made on to a dataurl and save the dataurl in a QuickBase field. A dataurl is a specially constructed string that represents an image (eg png / jpeg) without any reference to a actual file. In other words the dataurl string takes the place of an actual file and fully represents the image. You can then construct a formula for the actual image markup like so:

"<img src='" & [dataurl] & "'>

The only think I am not sure about is what limitations the QuickBase essentials plan involves. You should upgade anyways because there isn't anything QuickBase can't do using script.
Photo of Raymond

Raymond

  • 0 Points
According to the site i can use javascript.
I just do not know how to create the canvas in the formula text field. Second thing, how do i implement javascript in the field box.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
I will probably create an example and post it over the weekend. I am not sure what steered you to that particular package but there are hundreds of libraries that allow you to draw on a canvas for every purpose from grabbing a signature to whiteboarding. The ability to convert a canvas to a dataurl is in a feature of the canvas element itself so you can do what I describe in any library that supports drawing on a canvas - and do it within QuickBase to boot.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Canvas To Image - New Record
https://haversineconsulting.quickbase.com/db/bj63jawfi?a=nwr


Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=445

I had to use another library named sketch.js:

Sketch Library
http://intridea.github.io/sketch.js/

The original example created by William Malone was more of a tutorial and had some hardcoded references and other features that did not make it portable. The author of sketch.js actually created his library after being inspired by William Malone's tutorial.

This example could be greatly improved but the main takeaway is that any canvas creation library can be integrated with QuickBase and have the resulting image converted to an image and saved in QuickBase.
Photo of WJL

WJL

  • 102 Points 100 badge 2x thumb
I'm not familiar with touch coding but do you have any ideas on why the canvas clears on touch screen?
Photo of Raymond

Raymond

  • 0 Points
Can this be implemented on Quickbase essentials? Due to budget restrictions I was forced to work with this version of quickbase. The first link is exactly what I would need but I am not sure how to implement. Could you explain a little bit as to how that was created?
Photo of QuickBase Tools

QuickBase Tools

  • 22 Points
Would this help?

https://juicedtech.quickbase.com/db/bhacsb6cf?a=er&rid=3&dfid=10


Just click one of the Sign Off buttons. Obviously used for signatures but could be used for drawing...

Thanks..Todd
Photo of Raymond

Raymond

  • 0 Points
Were you ever able to figure out if this was possible? I see the function that was pasted into the contents section but I have no idea where I would put this. Also I understand I'd need to use script but just not sure how I would do that. Is that a setting? Is it just code Im using?
Photo of Steven

Steven

  • 0 Points
Were you ever able to solve this? I have a remarkably similar situation right now.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Follow the link in the notes field of the pastie for instructions.
Photo of Steven

Steven

  • 0 Points
Did that already and ran your content code, but it didn't run due to syntax errors. (I used parentheses checkers to try and find the error but no avail.)
Photo of Joey Zint

Joey Zint

  • 1,870 Points 1k badge 2x thumb
Dan

I know this is an older post, but could this be expanded to use an image as a back ground and write on top of the image and have that save as a file. And if I were to open the drawing up again, would I be able to see the last edits and add to them

So the premise would be to load a floor plan into a file attachment, open the floor plan and write notes anywhere on the plan that I wanted to and save that.
Photo of Adam Keever

Adam Keever

  • 1,632 Points 1k badge 2x thumb
Looks like the skecth.js library is no longer available. Is it possible to use this technique with Jsignature so it is compatible on mobile?
Photo of Jason

Jason

  • 1,406 Points 1k badge 2x thumb
Has anyone gotten this to work with a touchscreen? I have yet to figure it out.
Photo of Adam Keever

Adam Keever

  • 1,234 Points 1k badge 2x thumb
There are service providers that have script that works just fine, but it is kind of like paying for a song and then paying royalties on the song every month you continue to listen to it. The services (add-ons) that use licensed script require a recurring fee.

There are some open source signature/canvas script libraries, but I have not been able to get them up and functioning on my own due to lack of time available and lack of experience with executing script via Quick Base. 
Photo of WJL

WJL

  • 102 Points 100 badge 2x thumb
Has anybody found the answer to why the canvas clears on touch screen?  I found that using two fingers works but it is not a clear drawing.