Background image on Ink Sketch?

rss

Posted by pselman - Feb 24 ’16 at 12:16

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
    rostislav
    Moderator
    Member for: 6 years 6 months 26 days
    #1 by rostislav Feb 25 ’16 at 06:35

    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
    Member
    Member for: 6 years 24 days
    #2 by pselman Feb 25 ’16 at 06:54

    [#1]:

    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
    rostislav
    Moderator
    Member for: 6 years 6 months 26 days
    #3 by rostislav Feb 25 ’16 at 11:46

    [#2]:

    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
    Member
    Member for: 6 years 24 days
    #4 by pselman Feb 26 ’16 at 10:32

    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
    Member
    Member for: 6 years 24 days
    #5 by pselman Feb 26 ’16 at 10:36

    [#4]: Sorted it. You do not add the multi line text field!

  • pselman
    Member
    Member for: 6 years 24 days
    #6 by pselman Feb 26 ’16 at 10:49

    [#5]:  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
    Member
    Member for: 6 years 24 days
    #7 by pselman Feb 26 ’16 at 07:00

    [#3]: 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
    rostislav
    Moderator
    Member for: 6 years 6 months 26 days
    #8 by rostislav Feb 29 ’16 at 05:42

    [#7]:

    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
    Member
    Member for: 6 years 24 days
    #9 by pselman Feb 29 ’16 at 05:53

    [#8]:

    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')");

  • rostislav
    rostislav
    Moderator
    Member for: 6 years 6 months 26 days
    #10 by rostislav Feb 29 ’16 at 06:04

    [#9]:

    Go to Forms Designer -> Display Form. Click the Ink Sketch control, observe the property panel on the right. Find "Css Class" box. Enter 'inksketch' into it without quotes. Paste the code from my previous post into the JavaScript editor of the form (the Javascript button at the top) as is, only change the url as appropriate.

Displaying 1 to 10 of 16 messages
Previous12