Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • keilo 566 posts 1021 karma points
    May 01, 2019 @ 11:37
    keilo
    0

    Signature as Umbraco Form field

    As you know there are many jQuery Signature Pad html5 plugins which allows to take signature of the user on mobile devices.

    An example would be https://www.jqueryscript.net/demo/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas/examples/

    which uses html5 canvas.

    I'm wondering how to incorporate such a feature with Umbraco Forms, as in signature being a field.

    I know it may sound a bit far off, but I wish to get some feedback on how others may approach it with Umbraco Forms integration.

    would appreciate if you can share your ideas. cheers!

  • Stefan Orr 6 posts 76 karma points
    Aug 21, 2020 @ 03:44
    Stefan Orr
    0

    Hey there, did you ever figure this out? I'm having to implement one of these so any details would be helpful. Thanks

  • Naty 11 posts 78 karma points
    Oct 15, 2020 @ 17:24
    Naty
    0

    Hey guys!. Does anyone have news about it?

  • Mov3nforward 117 posts 319 karma points
    Oct 16, 2020 @ 01:05
    Mov3nforward
    0

    Anyone?

  • Matt Cardle 1 post 22 karma points
    Oct 19, 2020 @ 15:11
    Matt Cardle
    1

    I managed to create a custom field type to capture a signature and save it as a data:image/png;base64 string using this javascript library https://github.com/szimek/signature_pad

    I was only asked to determine if this was possible so the code is a very quick rough concept. The javascript and css needs moving out of the field partial view file etc I just threw it in there to test it worked.

    I added a basic field type :-

    using System;
    using Umbraco.Forms.Core.Enums;
    
    namespace Progress.Group.Forms.FieldTypes
    {
        public class Signature : Umbraco.Forms.Core.FieldType
        {
            public Signature()
            {
                this.Id = new Guid("78f429e3-d27d-4696-8028-5c8830d73909");
                this.Name = "Signature";
                this.Description = "Displays a canvas to capture a signature";
                this.Icon = "icon-edit";
                this.SortOrder = 100;
                this.FieldTypeViewName = "FieldType.Signature.cshtml";
                this.DataType = FieldDataType.LongString;
            }
        }
    }
    

    Then the field partial view :-

        @using Umbraco.Forms.Mvc
        @model Umbraco.Forms.Mvc.Models.FieldViewModel
       <!-- The below CSS and JS needs moving out of this file only added here for testing -->  
        @{        Html.AddFormThemeCssFile("~/App_Plugins/UmbracoForms/Assets/signaturepad/signaturepad.css");
        }
        <script src="~/App_Plugins/UmbracoForms/Assets/signaturepad/signaturepad.js"></script>
        <script src="~/App_Plugins/UmbracoForms/Assets/signature.init.js"></script>
        <div id="[email protected]" class="signature-pad">
            <div class="signature-pad--body">
                <canvas></canvas>
            </div>
            <div class="signature-pad--footer">
                <div class="description">Please sign in the box above</div>
                <div class="signature-pad--actions">
                    <div>
                        <button type="button" class="button clear" data-action="clear">Clear</button>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="@Model.Name" id="@Model.Id" class="datepickerfieldshadow" value="" />
        <script>
            signaturePad.init("@Model.Id");
        </script>
    

    Then the signature.init.js file to hook it all up :-

    var signaturePad = (function () {
        'use strict';
    
        function init(fieldId) {
            var wrapper = document.getElementById("signature-pad-" + fieldId);
            var canvas = wrapper.querySelector("canvas");
            var field = document.getElementById(fieldId);
            var clearButton = wrapper.querySelector("[data-action=clear]");
            var signaturePad = new SignaturePad(canvas, {
                // It's Necessary to use an opaque color when saving image as JPEG;
                // this option can be omitted if only saving as PNG or SVG
                backgroundColor: 'rgb(255, 255, 255)',
                onEnd: function () {
                    field.value = signaturePad.toDataURL();
                }
            });
    
            clearButton.addEventListener("click", function (event) {
                signaturePad.clear();
                field.value = "";
            });
        }
    
        return {
            init: init
        };
    }());
    

    You can then convert the saved data:image/png;base64 string back to an image file via a custom workflow or whatever your needs are (I was posting the string to an api which created a PDF from the data with the signature in it).

    Hope this helps

  • Naty 11 posts 78 karma points
    Oct 21, 2020 @ 19:38
    Naty
    0

    Excellent Matt. Thank u for answer.

    I did it a little bit different than u , with this link: https://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html and it works... but i’m still wondering how to render the image in my Email-Template.cshtml.

    First try:

     case "FieldType.Signature.cshtml":
       var value = field.FieldValue;
        <img src="@siteDomain/@value" alt="">
      break;
    

    Second Try:

    case "FieldType.Signature.cshtml":
      <img src="@siteDomain/@field.GetValue()" alt="">
     break;
    

    My partial view :

    @model Umbraco.Forms.Mvc.Models.FieldViewModel
    
    <div class="sigPad" id="smoothed" style="width:404px;">
        <ul class="sigNav">
            <li class="clearButton"><a href="#clear">Limpiar</a></li>
        </ul>
        <div class="sig sigWrapper" style="height:auto;">
            <div class="typed"></div>
            <canvas id="canvas" class="pad" width="400" height="250"></canvas>
            <input id="out" type="hidden" name="output" class="output" value="">
        </div>
    </div>
    
    
    <script src="~/assets/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
            $('#canvas').on('mouseup', function () {
                //  debugger
                var canvas = document.getElementById('canvas');
                var dataURL = canvas.toDataURL();
                var out = document.getElementById('out');
    
                //out.value = dataURL;
                out.value = dataURL;
            });
        });
    
    </script>
    

    Always null :( any idea?

  • keilo 566 posts 1021 karma points
    Oct 26, 2020 @ 10:33
    keilo
    0

    Hey Matt

    Curious which api did you use to create a PDF from the data with the signature in it ?

    I am exploring PDF merge and creation tools, ideally open source, but did not come across one that accepts base64 png to insert image in the API methods.

  • keilo 566 posts 1021 karma points
    Jun 24, 2021 @ 07:09
    keilo
    0

    Hey Naty

    did you figure it out at the end?

Please Sign in or register to post replies

Write your reply to:

Draft