Background image on Ink Sketch?

[pselman]

Is it possible to have a back ground image set on the image sketch that the user woudl then "mark up"?

The application I have is for the user to look at a drawing of a child and mark where that child has been injured in the event of an accident.

Thanks

[rostislav]

You can do it like that (past the code to the JS editor of the form):

$('#fd_signature-0').find('canvas').css('background', "url('http://www.w3schools.com/cssref/paper.gif')");
The url would be the address of your picture, fd_signature-0 the id of the signature control (it's automatically assigned, the number at the end is automatically incremented). Note that the background image won't be added to the resulting image that is saved.

[pselman]

Is there anyway to keep the background image and the associated markings? If not we will have to look at say using a pdf template and saving it back or something

[rostislav]

Sure, you can keep the markings. The image that you will use as the background image you will obviously have as well. If you only want to display those markings in the ink sketch control you can keep doing that by applying the background image. If you need to save the image somewhere you can do that and you can compile the two images together via some tool in an automatic way or manually.

[pselman]

I've now got the Ink Sketch control working properly but when I try to look at the Display Form with the Ink Sketch removed and the associated Field added I just get a long data string as opposed to the actual image?

[pselman]

Sorted it. You do not add the multi line text field!

[pselman]

So I now have the signature working but so far using the code above I have not been able to get a background image showing on the Ink Sketch.



When that script is in place it disables the Ink Sketch...

[pselman]

Ok

Got the background showing fine now on the edit form so can quite neatly mark the image up as needed.



However, althought I'm using the same script on the Display form to show the background image in the same way as the Edit form, it is only showing the markings that were made previosuly in edit mode. The background image is not there in Display Mode.

$('#fd_signature-0').find('canvas').css('background', "url('https://Body%20Map.jpg')"); (Full URL not shown)

Can you advise how to resolve this?

[rostislav]

Just for the display form change the JS code to:

$('.inksketch').css('background', "url('http://www.w3schools.com/cssref/paper.gif')");
Where 'inksketch' is a CSS class name that you need to set in Forms Designer for the ink sketch control.

[pselman]

Thank you.

I've set the css class of the Ink Sketch to background in Layout and also Table Cell but cannot get it to show the background image on the display form so far;



$('.inksketch').css('background', "url('https:/SiteAssets/Body%20Map.jpg')");