Copied to clipboard

Flag this post as spam?

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


  • keilo 562 posts 1017 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 5 posts 75 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 6 posts 73 karma points
    1 week ago
    Naty
    0

    Hey guys!. Does anyone have news about it?

  • Mov3nforward 83 posts 275 karma points
    7 days ago
    Mov3nforward
    0

    Anyone?

  • Matt Cardle 1 post 21 karma points
    3 days ago
    Matt Cardle
    0

    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="signature-pad-@Model.Id" 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 6 posts 73 karma points
    23 hours ago
    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?

Please Sign in or register to post replies

Write your reply to:

Draft