creates a rectangular box within which the user can draw by using a finger or the device’s stylus to record handwritten data. Common usages for this tag include the capture of client/customer signatures and the input of handwritten text/notations.
In order to use this API you must include the following extension in your build.yml
extensions: ["signature"]
The signature
extension is also included automatically if you specify the following in your build.yml
app_type: "rhoelements"
If you are building a Windows Mobile or Windows CE app with this API, you must set your app_type as “rhoelements” in your build.yml as shown here. |
Be sure to review the JavaScript API Usage guide for important information about using this API in JavaScript.
Be sure to review the Ruby API Usage guide for important information about using this API in Ruby.
Captures the in-line signature area as an image. This function works with a non-modal signature capture area shown inside browser window. All in-line signature capture functions (like this) do not has affect the capture area shown in takeFullScreen (modal full screen capture area).
Parameters
Async Callback Returning Parameters: HASH
Whether a signature was captured or the signature capture area was dismissed (Fullscreen version only). Possible values:‘ok’ or ‘cancel’
If the outputFormat is “image”, this will be the URI of the captured signature image. If the outputFormat is “dataUri”, this will be the DataURI representation of the captured signature image.
If the outputFormat is “image”, this will be the URI of the captured signature image. If the outputFormat is “dataUri”, this will be the DataURI representation of the captured signature image.
Synchronous Return:
Method Access:
Rho.Signature.capture(CallBackHandler callback)
Rho::Signature.capture(CallBackHandler callback)
Clears an in-line capture area. This function works with a non-modal signature capture area shown inside browser window. All in-line signature capture functions (like this) do not has affect to capture area shown in takeFullScreen (modal full screen capture area)
Synchronous Return:
Method Access:
Rho.Signature.clear()
Rho::Signature.clear()
Hides an in-line capture area from view. It clears the inputed signature for in-line signature areas. In a hidden state, a user cannot interact with the signature capture area. This function work with non-modal signature capture area showed inside browser window. All in-line signature capture functions (like this) do not has affect to capture area showed in takeFullScreen (modal full screen capture area)
Synchronous Return:
Method Access:
Rho.Signature.hide()
Rho::Signature.hide()
Signature data is formatted into a series of vectors and returned to the application via this callback function. The received data may not represent the entire signature as the vectors will be sent in batches if the signature is large. A single vector (array entry) contains an X, Y coordinate and the beginning / end of the signature is defined by (65535, 65535). This callback is independent of the callback of the capture method, when specified the callback will be called whenever a ‘pen up’ occurs in the signature box.
Parameters
Async Callback Returning Parameters: HASH
JavaScript array of vectors which represent the signature.
Synchronous Return:
Method Access:
Rho.Signature.setVectorCallback(CallBackHandler callback)
Rho::Signature.setVectorCallback(CallBackHandler callback)
Show in-line signature window. This function works witha non-modal signature capture area shown inside browser window. All in-line signature capture functions (like this) do not has affect the capture area shown in takeFullScreen (modal full screen capture area).
Parameters
Map of signature properties to be set
Valid `properties` for this parameter are the properties avaliable to this API module. Check the property sectionUse already set properties
Synchronous Return:
Method Access:
Rho.Signature.show(HASH propertyMap)
Rho::Signature.show(HASH propertyMap)
Shows a modal window with signature capture area and UI (toolbar with buttons) for cancel / capture and return to main application window. The callback is fired when the signature is closed (when in fullscreen) or when capture is called. In WM/CE, the signature area has visible buttons for ‘clear’, ‘capture’ and ‘cancel’. In Android / iOS, the signature area has images which will behave as buttons for ‘clear’, ‘capture’ and ‘cancel’. This function open modal full screen window, therefore other functions related to in-line signature capture (work with inside browser window area) do not affect the capture window shown by this function.
Parameters
Map of signature properties to be set
Valid `properties` for this parameter are the properties avaliable to this API module. Check the property sectionUse already set properties
Async Callback Returning Parameters: HASH
Whether a signature was captured or the signature capture area was dismissed (Fullscreen version only). Possible values:‘ok’ or ‘cancel’
If the outputFormat is “image”, this will be the URI of the captured signature image. If the outputFormat is “dataUri”, this will be the DataURI representation of the captured signature image.
If the outputFormat is “image”, this will be the URI of the captured signature image. If the outputFormat is “dataUri”, this will be the DataURI representation of the captured signature image.
Synchronous Return:
Method Access:
Rho.Signature.takeFullScreen(HASH propertyMap, CallBackHandler callback)
Rho::Signature.takeFullScreen(HASH propertyMap, CallBackHandler callback)
RGB or ARGB value that sets the background color of the signature capture area.
Default: #FFFFFFFF
Property Access:
Rho.Signature.bgColor
Rho::Signature.bgColor
Shows or hides a border for the rectangular capture area. Not applicable to fullscreen signature capture area.
Default: true
Property Access:
Rho.Signature.border
Rho::Signature.border
Compression format of the image file for the captured signature. In WM/CE, irrespective of setting any format, the output format will be of bitmap type. In WM/CE, when compressionFormat is queried, it will be of bitmap type always.
Possible Values (STRING):
JPEG file format (Not available on WM/CE).
Portable Network Graphics file (Not available on WM/CE).
Bitmap image file (Not available on iOS).
Property Access:
Rho.Signature.compressionFormat
Rho::Signature.compressionFormat
The filename in which to store the signature image, if “image” is used as the outputFormat. The file extension is determined by the compressionFormat used.
Default: signature
Property Access:
Rho.Signature.fileName
Rho::Signature.fileName
The height of the signature capture area in pixels. Not applicable to fullscreen signature capture area.
Default: 150
Property Access:
Rho.Signature.height
Rho::Signature.height
The coordinates in pixels of the left side of the signature capture area. Not applicable to fullscreen signature capture area.
Default: 15
Property Access:
Rho.Signature.left
Rho::Signature.left
The return type of the saved signature capture image.
Default: image
Possible Values (STRING):
Outputs the signature capture image into an image file. The compression method and extension of the image file can be specified in compressionFormat.
Outputs the signature capture image as a DataURI string. (Not available on iOS).
Property Access:
Rho.Signature.outputFormat
Rho::Signature.outputFormat
RGB or ARGB value that sets the color of the stylus pen ink using HTML web colors.
Default: #FF000000
Property Access:
Rho.Signature.penColor
Rho::Signature.penColor
Sets the width of the pen line in pixels. Advised to keep this to 5 or less.
Default: 3
Property Access:
Rho.Signature.penWidth
Rho::Signature.penWidth
The coordinates in pixels of the top side of the signature capture area. Not applicable to fullscreen signature capture area.
Default: 60
Property Access:
Rho.Signature.top
Rho::Signature.top
The width of the signature capture area in pixels. Not applicable to fullscreen signature capture area.
Default: 200
Property Access:
Rho.Signature.width
Rho::Signature.width
In order to capture a signature in full-screen mode you need to
def capture_fullscreen # Invoke signature capture screen and assign callback Rho::Signature.takeFullScreen({}, url_for(:action => :signature_callback)) render :action => :show_signature end def signature_callback # If status is not 'ok', the capture was canceled if @params['status'] == 'ok' # By default, the output format is "image", so the imageUri parameter will contain the relative filename of an image # We must convert that relative filename to an absolute path in order to access the file signature = Rho::Application.expandDatabaseBlobFilePath(@params["imageUri"]) # In our example, we will display the signature as soon as it is captured. # We have a JavaScript function in our page to set the src attribute of an img element and we will call it now # WebView.executeJavascript("updateSignature('#{signature}')") else # if we did not really capture a signature, there is nothing else to do here WebView.navigate(url_for(:action => :index )) end end
In the view, we have an img element to display the captured signature and a JavaScript function to update it
<div data-role="page"> <div data-role="header" data-position="in-line"> <h1>Captured signature</h1> </div> <div data-role="content"> <img id="signature-image" src="<%= @signature %>"> </div> <script type="text/javascript"> function updateSignature(signature) { $("#signature-image").attr('src',signature); } </script> </div>
Several properties affect the appearance of the signature capture functionality. You can set their values before showing the capture interface:
// Change full-screen from true (default) to false // Change background color from white (default) to black // Change pen color from blue (default) to white Rho.Signature.show ({"fullScreen" : false, "bgColor" : "#000000", "penColor" : "#FFFFFF"});
# Change full-screen from true (default) to false # Change background color from white (default) to black # Change pen color from blue (default) to white Rho::Signature.show { :fullScreen => false, :bgColor => "#000000", :penColor => "#FFFFFF" }
By default, the Signature API returns the capture as an image. If you prefer a DataURI representation of the signature, use the “outputFormat” property
Rho.Signature.takeFullScreen({"outputFormat" : "dataUri"}, signature_callback)
Rho::Signature.takeFullScreen({ :outputFormat => "dataUri" }, url_for(:action => :signature_callback))
The signature capture feature can work in two visual modes, Fullscreen and In-line. The fullscreen variant has buttons to capture, clear and cancel the signature capture box, so the methods: "clear", "hide", "capture" don't need to be used. Whereas with the in-line signature capture, there are no such buttons so these will have to be designed into the app itself.
The signature capture area is designed to be set up prior to capturing the signature, as such the following parameters will clear any current signature: "width", "height", "penColor", "bgColor".
In Android, the state of the signature will not be cleared on page navigation whereas in Windows, the state of the signature is cleared.
While using "takeFullScreen" method, if we press Home button and re-launch the application the state won't be persisted in Android platform.