Skip to main content

Signature View

Introduction

Use OpenSignatureMessage to start signature capture in a Signature View window.

Server-Client messages:

OpenSignatureMessage

Message DataDescription
SignedDataHashHash of the data that will be signed
WithDefinitionxaml definition for signature capture window
WithConfigJSON data for signature options
WithExtraDataAssigns a dictionary containing additional signature data
WithSignedDataHashhash included in the signature (binding of signature to a document hash)
WithFromDocumentboolean value differentiates between direct signature capture and signature capture from a field within a Document View
WithBackgroundImageOptional: image for window background
info

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:

Signature View

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 DataDescription
SignaturePictureBytesBase64 string containing image data:
new SignatureImagePopupWindow(JsonPdfSerializer.ByteArrayToBitmap(msg.SignaturePictureBytes))

SignatureCancelledMessage

Message DataDescription
noneThe message is sent in response to clicking the Cancel button

SignatureWrongFormatMessage

Message DataDescription
MessageThe message is sent if an error is encountered formatting the SignatureMetadata, e.g. certificate error.
The string contains the exception message.