Signature View
Introduction
Use OpenSignatureMessage to start signature capture in a Signature View window.
Server-Client messages:
OpenSignatureMessage
| Message Data | Description |
|---|---|
| SignedDataHash | Hash of the data that will be signed |
| WithDefinition | xaml definition for signature capture window |
| WithConfig | JSON data for signature options |
| WithExtraData | Assigns a dictionary containing additional signature data |
| WithSignedDataHash | hash included in the signature (binding of signature to a document hash) |
| WithFromDocument | boolean value differentiates between direct signature capture and signature capture from a field within a Document View |
| WithBackgroundImage | Optional: image for window background |
Version 2 of the Wacom Ink SDK for multi-display enables additional FSS data to be sent in the integrator.
A dictionary of additional data is set, allowing multiple data entries to be included.
Additional information on this is covered in the API documentation.
xaml definition
A xaml file is used to define the layout of the signature capture window, using the WPF grid format.
In this example buttons are placed in he right hand side of the window: with an area defined for the signature:
SignatureView.xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Wacom.Kiosk.App"
mc:Ignorable="d"
x:Name="SignatureView"
Title="SignatureView" WindowStyle="None" Width="1920" Height="1080">
<Grid>
<!--This container is mandatory-->
<!--TODO ADD IN DOCUMENTATION-->
<Grid Name="SignatureContainer" Background="White">
</Grid>
<Grid Panel.ZIndex="2" HorizontalAlignment="Right" Width="150" Background="Transparent">
<StackPanel Panel.ZIndex="2" Orientation="Vertical" VerticalAlignment="Center">
<Button x:Name="AcceptSignature" Content="AcceptSignature" Width="100" Height="100" BorderThickness="0" HorizontalAlignment="Right" Margin="25,25,25,0" VerticalAlignment="Top">
</Button>
<Button x:Name="CancelSignature" Content="CancelSignature" Width="100" Height="100" BorderThickness="0" HorizontalAlignment="Right" Margin="25,25,25,0" VerticalAlignment="Top">
</Button>
<Button x:Name="ClearSignature" Content="ClearSignature" Width="100" Height="100" BorderThickness="0" HorizontalAlignment="Right" Margin="25,25,25,0" VerticalAlignment="Top">
</Button>
</StackPanel>
</Grid>
</Grid>
</Window>
Generally the xaml content follows the standard WPF grid format for placement. A number of specific entries are detailed below:
x:Name="SignatureView"
The preset name must be included for the signature capture window.
Title="SigantureView" WindowStyle="None" Width="1920" Height="1080"> - specifies the size of the window
Grid Name="SignatureContainer"
The signature area must be included. At runtime the position and size of the area are adjusted according to the signature JSON parameters shown below. The Background attribute can be modified as required for the signature capture window appearance.
Button Binding
The grid section supplies the buttons required by the Client for signature capture:
<Button x:Name="AcceptSignature"
<Button x:Name="CancelSignature"
<Button x:Name="ClearSignature"
The control button names are preset and required to activate the signature capture code in the client tray app. For example, ClearSignature is processed locally by the Client and the Server app is not notified of this action.
The names are preset in the Client app configuration file app_config.json and can be changed if required but must match those used in the signature definition xaml data:
Client app_config.json:
"SignatureViewConfig": {
"ButtonsConfiguration": [
{
"Name": "ClearSignature", // the name expected in the signature definition data
"ButtonAction": "ClearSignature" // identifies the Clear function - clears the current signature data on the tablet
},
{
"Name": "AcceptSignature", // the name expected in the signature definition data
"ButtonAction": "AcceptSignature" // identifies the OK function - completes the signing process and triggers sending SignatureAcceptedMessage
},
{
"Name": "CancelSignature", // the name expected in the signature definition data
"ButtonAction": "CancelSignature" // identifies the Cancel function - cancels the signing process and triggers sending SignatureCancelledMessage
}
]
}
For example, to change the binding of the button from "AcceptSignature" to "SignatureOK" change app_config.json:
{
"Name": "SignatureOK", // the name expected in the signature definition data
"ButtonAction": "AcceptSignature" // identifies the OK function - completes the signing process and triggers sending SignatureAcceptedMessage
},
Then to bind to this action, change DocumentView.xaml:
<Button x:Name="SignatureOK" Content="AcceptSignature" Width="100" Height="100" BorderThickness="0" HorizontalAlignment="Right" Margin="25,25,25,0" `VerticalAlignment="Top"></Button>
Signature JSON data
The behaviour and appearance of signature capture is defined in the supplied signature JSON data. For example:
{
"X": 0, // not used
"Y": 0, // not used
"Width": 1920, // width of signing area with the capture window
"Height": 1080, // height of signing area with the capture window
"AreaPercent": 0.5, // proportion of capture window used for pen input 0.5 = 50%
"PenTrackingType": "Unlimited", // "Unlimited", or "Limited" restricts pen input to the pen input area
"SignatureViewType": "External", // Currently implemented only External
"SignatureFormat": "Fss", // "Fss", "IsoXML" or "IsoBinary" determines the signature data format
"StrokeColor": "#000080" // RGB colour of pen data
}
Optionally:
"EncryptionCertificate": "certificate" // base64 .cer encryption certificate
Optionally:
"Image" : { // signature image parameters
"Width": 500,
"Height": 250,
"DPI ": 300,
"InkWidth": 0.7,
"InkColor": "#000080",
"BackgroundColor": "#FFFFFF",
"Transparent": true
}
A number of specific entries are detailed below:
PenTrackingType: When set as "Limited", pen data is captured only within the pen data area (the white rectangle in the example shown above)
EncryptionCertificate: Supply the certificate in base64 to encrypt the signature. e.g.
signatureConfig.EncryptionCertificate = Convert.ToBase64String(File.ReadAllBytes(textbox_Encryption_Certificate.Text));
When the certificate has been supplied the signature data is encrypted in SignatureAcceptedMessage.
Image: Signature image rendering parameters can be specified in the signature config json file in an optional "Image" setting:
"Image" : {
"Width": 500,
"Height": 250,
"DPI ": 300,
"InkWidth": 0.7,
"InkColor": "#000080",
"BackgroundColor": "#FFFFFF",
"Transparent": true
}
- Width/Height (in pixels) and DPI are alternatives (ie, one or other, rather than both, should be used)
- BackgroundColor & Transparent are likewise mutually exclusive
The default values are as follows:
"Image" : {
"DPI ": 300,
"InkWidth": 0.7,
"InkColor": "#000000",
"BackgroundColor": "#FFFFFF"
}
Client-Server messages:
OperationSuccessMessage
OperationFailedMessage
SignatureAcceptedMessage
| Message Data | Description |
|---|---|
| SignaturePictureBytes | Base64 string containing image data:new SignatureImagePopupWindow(JsonPdfSerializer.ByteArrayToBitmap(msg.SignaturePictureBytes)) |
SignatureCancelledMessage
| Message Data | Description |
|---|---|
| none | The message is sent in response to clicking the Cancel button |
SignatureWrongFormatMessage
| Message Data | Description |
|---|---|
| Message | The message is sent if an error is encountered formatting the SignatureMetadata, e.g. certificate error. The string contains the exception message. |