UDSignature - a learning experience

@psDevUK has graciously prioritized my request for an alternative for his whiteboard control, that has pen and export support. Big thanks to you Adam!

Based on: https://github.com/agilgur5/react-signature-canvas

Since he’s a busy man and all, I was hoping someone more capable than me could help me understand some of the stuff going on.

The original react signature canvas supports exporting the content:

toDataURL(mimetype, encoderOptions) : base64string , returns the signature image as a data URL

The signature can also simply be saved with a right click,

How would I go about using Get-UDElement (I assume that’s the one) to programatically grab that Base64 data/Image?

2 Likes

Nice work! This looks awesome!

Implementing Get-UDElement support is something that currently needs to be done per control. I have an issue created to improve the JavaScript API for UD. @AlonGvili has already been doing some work on the guts of UD to make it easier to create custom controls using new React features.

I’ll comment on Adam’s repo with how to do this currently and link back here.

Opened an issue here: https://github.com/psDevUK/UDSignature/issues/2

1 Like

Now on the marketplace:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSignature

I needed this myself for a way for people signing for the form they are submitting. As end-users are wonderful people in all aspects, I could see the whole save as image thing never working…so I finally got round to pimping this component out to be able to save the signature that was saved. I have now published this component on the powershellgallery shout out to @BoSen29 for help on previous projects which enabled me to bind this to UniversalDashboard on this revisit to this component that was originally done in October 2019

UDSignature

Signature component for UniversalDashboard

What is it?

This component allows you to get your end-user to actually sign for something. It has two built in buttons with the component which is the Save and Clear buttons.

How do I obtain this for my dashboard

To get this Powershell module simply launch powershell and run the following command

Install-Module -Name UniversalDashboard.UDSignature 

How do I use it?

It is as simple as installing the module, then using the following command:-

New-UDSignature -Id "Signature"

You will instantly have a canvas you can sign on, pretty simple to use

Parameters

  • BackgroundColor this will set the background colour of the canvas being used this accepts a string
  • Height will set the height of the canvas this accepts an integer
  • Width will set the width of the canvas this accepts an integer
  • PenColor will set the colour of the pen on the canvas being used this accepts as string

How do I save what is being signed?

So I initially built this in October 2019 without support for automatically encoding to base64 string. I have now further developed this component, so that when the save button is pressed this will set the trimmedDataUrl in the state to hold the current signature in a base64 string. As I binded this component to UniversalDashboard on this second attempt you can actually read the value of the base64 string then convert it back to an image and save it. So using this method also prevents the user from saving the end signature in the wrong directory/location. The only downfall is you will have to use another button to read this information, as I saw it, I would be using this on a form which would have it’s own submit button anyway.

   New-UDButton -Id "SigButton" -Text "Info" -OnClick {
                    (Get-UDElement -Id "Signature").Attributes.trimmedDataURL | Out-File C:\UD\sig.txt
                    (get-content C:\UD\sig.txt) -replace 'data:image/png;base64,', '' | Set-Content C:\UD\sig.txt
                    $base64String = (get-content C:\UD\sig.txt)
                    #Convert Base64 to Image
                    $imageBytes = [Convert]::FromBase64String($base64String)
                    $ms = New-Object IO.MemoryStream($imageBytes, 0, $imageBytes.Length)
                    $ms.Write($imageBytes, 0, $imageBytes.Length);
                    $image = [System.Drawing.Image]::FromStream($ms, $true)
                    $image.Save("C:\UD\signature.png")
                }

Complete Demo

Import-Module -Name UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module -Name UniversalDashboard.UDSignature
Get-UDDashboard | Stop-UDDashboard
$init = New-UDEndpointInitialization -Module @("UniversalDashboard.UDSignature")
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDRow -Columns {
            New-UDColumn -size 6 -Endpoint {
                New-UDSignature -Id "Signature" -background '#fff' -height 150 -width 300
                New-UDButton -Id "SigButton" -Text "Info" -OnClick {
                    (Get-UDElement -Id "Signature").Attributes.trimmedDataURL | Out-File C:\ud\sig.txt
                    (get-content C:\UD\sig.txt) -replace 'data:image/png;base64,', '' | Set-Content C:\UD\sig.txt
                    $base64String = (get-content C:\UD\sig.txt)
                    #Convert Base64 to Image
                    $imageBytes = [Convert]::FromBase64String($base64String)
                    $ms = New-Object IO.MemoryStream($imageBytes, 0, $imageBytes.Length)
                    $ms.Write($imageBytes, 0, $imageBytes.Length);
                    $image = [System.Drawing.Image]::FromStream($ms, $true)
                    $image.Save("C:\UD\signature.png")
                }
            }
        }
    } -EndpointInitialization $init
)

Project Page = https://github.com/psDevUK/UDSignature
Powershellgallery Page = https://www.powershellgallery.com/packages/UniversalDashboard.UDSignature/1.0.0

1 Like

Whoah! Inb4 the postal services running UD on their PDA’s! Fancy man!

1 Like

Figured this component needed to make it to the marketplace sooner or later, now I figured out how to do what I am guessing most people will want it for, that is to be able to save the signature entered…ideally would of been nice to do this from a UD button, but JS is still not my strong point, so went with what worked. Can see this being a handy component for anyone using forms in UD.

1 Like

@psDevUK
Hmm…
I cant see how some fancy javascript would improve it?