The App development blog of Simon Monk, CTO of Meme IDE the cross platform development tool for Android, WM and IOS apps. free download from

Tuesday, 20 September 2011

Meme IDE: Sketch Box in v1.13

Version 1.13 of the Meme IDE includes this exciting new feature -- Sketch Box.

This feature can be used to capture signatures drawn on the touch screen with your finger or for annotating existing images.

Android devices generally have a capacitive touch screen that requires the use of a finger or a stubby stylus. As such they require a different approach to signature capture. In particular, they need the whole screen in landscape mode in order to draw a signature by finger.

For this reason, Android has a Sketch Box function rather than a Signature control. The Sketch box is launched by a function call and has a predefined screen layout, with additional options to clear the drawing, accept or reject the drawing. I use the word 'drawing' to indicate that the Sketch Box is useful for more than just capturing a signature.

sketchBox(image, titleText, data, callback);
The first argument is a reference to an image resource that must be added to the resources area of the project. If this is provided then it will be displayed as a background on which annotations can be made. The image must be copied into the resources folder of the project organizer and then a reference to it should be set as a File resource entry.

If you do not require a background image then the para- meter value should be an empty string.
The second argument is the title text that should appear above the signature area.

The third argument will be the initial data for the starting data for the sketch. If this contains the appropriate base64 string then the Sketch Box will contain this initial vector image. Note that this will not be modified, but rather when the callback is invoked (the final argument) then the new vector data will be provided as its argument.
The button labels can be modified by changing the re- source properties.

Similarly, the drawing color for the sketch box is also set using a color resource.
The following example shows a simple call to sketchBox and the corresponding callback function.

function sketchbox_open() 
  sketchBox("", "Sign below", data, "sketchComplete");

function sketchComplete(encoding : String) 
  if (encoding <> "") 
    data = encoding;

This example is typical because it saves the encoding that is received in the callback into the global variable 'data' from which the original vector image was fetched.

Decoding Sketch Book Files
The Signature control and the Sketch Box both encode signatures in an efficient vector format that is base 64 encoded. These signature strings are typically about 500 characters in length.
To decode these strings into jpeg (or other formats), a Java utility is available. Please contact if you find yourself needing to use this.

for more information on 1.13 check the release notes in our forum


No comments:

Post a Comment