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
