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
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

NB: The deprecated method WithHash() still exists, but will be removed in the next major version release.

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 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.

Introduction​

Server-Client messages:​

OpenSignatureMessage​

xaml definition​

x:Name="SignatureView"​

Grid Name="SignatureContainer"​

Button Binding​

Signature JSON data​

Client-Server messages:​

OperationSuccessMessage​

OperationFailedMessage​

SignatureAcceptedMessage​

SignatureCancelledMessage​

SignatureWrongFormatMessage​