Ink Canvas Element

Modified on 2018/08/03 00:59 by Administrator Categorized as Base Elements, Elements, Input Registration
<div style="margin-right: 10px; margin-left: 16px; margin-bottom:10px; float: right; width: 500px; overflow: hidden; height: auto; padding: 0px; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));background: -moz-linear-gradient(top, #fbfbfb, #fafafa);border: 1px dashed #ddd;box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff, 0 0 2px 10px #eee;">
== Summary ==
{s:Element Info Panel
| title=Ink Canvas
| category=Input Registration
| icon=[image|Element Icon|{UP(Ink-Canvas-Element)}Ink-Canvas-Element-Icon.png]
| author= OkazoLab
| addin= Base Layer
| scope= Parent event
| usage= Stimulus screen
| ownsnippets= None
}
== Properties ==
{|
|-
! Name
! Description                              
! Constraints
! Type
! On<br/>runtime<br/>change
|-
| colspan="5" bgcolor="#AADDDDD" | Settings
|-
| Reset On Onset        
| Defines whether the old canvas strokes and text recognition results are reset on the onset of the parent event        
| {s:atNormal}        
| Boolean        
|  
|-
| Normal Tip Mode        
| Specifies the mode of the pointing device as it interacts with the canvas        
| {s:atNormal}        
| enInkC..        
|  
|-
| Inverted Tip Mode        
| Specifies the mode of the inverted pointing device as it interacts with the canvas (e.g. with the inverted tip of a stylus)        
| {s:atNormal}        
| enInkC..        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Drawing Attributes
|-
| Behold Pressure        
| Defines whether the thickness of a rendered stroke changes according the amount of pressure applied (if an input device can report a pressure)        
| {s:atNormal}        
| Boolean        
|  
|-
| Is Highlighter        
| Defines whether the rendered stroke looks like a highlighter (semi-transparent).        
| {s:atNormal}        
| Boolean        
|  
|-
| Pen Size        
| Defines a size of the drawing pen.        
| {s:atNormal}        
| clSize        
|  
|-
| Pen Color        
| Defines a color of the drawing pen.        
| {s:atNormal}        
| stColor        
|  
|-
| Drawn Color        
| Defines a color that highlights the currently drawing stroke. When a stroke is finished, it turns back to the pen color. No highlighting is applied, when the transparent color (0,255,255,255) is selected.        
| {s:atNormal}        
| stColor        
|  
|-
| Smoothing        
| Defines whether Bezier smoothing is used to render strokes.        
| {s:atNormal}        
| Boolean        
|  
|-
| Pen Shape        
| Defines a shape of the drawing pen. Assign 0 for rectangle and 1 for ellipse        
| {s:atNormal}        
| enPenS..        
|  
|-
| Canvas Background        
| Defines the background of the ink canvas.        
| {s:atNormal}        
| stColor        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Actions
|-
| Clear Canvas Now        
| Set to true to clear canvas and erase all collected strokes.        
| {s:atNormal}        
| Boolean        
|  
|-
| Save Ink File Now        
| Assign a fully specified filename to save the current strokes to a file at runtime        
| {s:atRuntimeAction}        
| String        
|  
|-
| Open Ink File Now        
| Assign a fully specified filename to load strokes from a file at runtime. Only the Ink Serialized Format (.isf) files are supported.        
| {s:atRuntimeAction}        
| String        
|  
|-
| Recognize Text Now        
| Runtime command that performs text recognition on the current canvas content. The result is returned via the 'Recognized Text' property.        
| {s:atRuntimeAction}        
| Boolean        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Runtime Status
|-
| Stroke Number        
| Returns a number of drawn strokes        
| {s:atNormal}        
| Int32        
|  
|-
| Recognized Text        
| Return a recognized text in a result of the Recognize Text action        
| {s:atStatus}        
| String        
|  
|-
| Recognition Confidence        
| Return a confidence rank in results of the Recognize Text action        
| {s:atStatus}        
| String        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Visual Appearance
|-
| Alpha Masking        
| Defines, whether the visual content is used to create an opacity mask on the event surface. If masking is on, the content's pixel luminance (or, its inverse) defines transparency within element's viewport. The alpha masking allows, for example, create transparent holes on the event surface.        
| {s:atDesign}        
| Int32        
|  
|-
| AntiAliasing        
| if true, the rendered content will be antialiased for smoother visual appeariance. If false, rendering will be authentic to its source, e.g. a bitmap.        
| {s:atNormal}        
| Boolean        
|  
|-
| Position        
| Defines a position of the rendering viewport on the screen        
| {s:atNormal}        
| clPoint        
|  
|-
| Size        
| Defines a size of the element's rendering viewport on the screen        
| {s:atNormal}        
| clSize        
|  
|-
| Z Order        
| Indicates Z Order of the element on the given event        
| {s:atStatus}        
| Int32        
|  
|-
| Pivot Point        
| Defines alignment of the pivot point (or, element's position) relative to element's rendering area. The pivot point sets the center of element's rotation and scale directions.        
| {s:atNormal}        
| stAlig..        
|  
|-
| Visible        
| Defines whether the element is visible        
| {s:atNormal}        
| Boolean        
|  
|-
| Rotation        
| Rotation angle in degrees        
| {s:atNormal}        
| Double        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Effects
|-
| Transparent Color        
| The color of the original pixels of rendered content that will be set as transparent        
| {s:atNormal}        
| stColor        
|  
|-
| Transparent Tolerance        
| Tolerance ratio for choosing colors that become transparent. Zero means that effect is not applied, 1 denotes that all colors will become trasparent        
| {s:atNormal}        
| Int32        
|  
|-
| Color Mask        
| Produces a multiplicative combination of the original pixels
and the selected mask color (except the alpha channel).
 The effect emulates a look through a colored glass.
 White or transparent mask color dont change the original pixels        
| {s:atNormal}        
| stColor        
|  
|-
| Opacity        
| Opacity of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Contrast        
| Contrast of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Brightness        
| Brightness the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Saturation        
| Saturation of the rendered content        
| {s:atNormal}        
| Double        
|  
|-
| Pixelation        
| Pixelation of the rendered content        
| {s:atNormal}        
| Int32        
|  
|-
| Blurring        
| The radius used in the gaussian blur of rendered content, as a pixel-based factor. The default is 0 which means no blurring.        
| {s:atNormal}        
| Int32        
|  
|-
| Scrambling        
|         
| {s:atNormal}        
| Double        
|  
|-
| Scrambling Grid Size        
| Defines a size of the scrambling grid        
| {s:atNormal}        
| clSize        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Positional Jitter
|-
| Reset Jitter Now        
| Runtime command that resets the positional jitter.        
| {s:atRuntimeAction}        
| Boolean        
|  
|-
| Current Jitter        
| Returns the current jitter        
| {s:atStatus}        
| clPoint        
|  
|-
| Jitter Range        
| Defines a possible range for the random jitter. The range is centered to the position of the element.        
| {s:atNormal}        
| clSize        
|  
|-
| Test Jitter        
| Click to test the current jitter        
| {s:atDesign}        
| Boolean        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Control
|-
| Is Enabled        
| If set to false the element is completely omitted when the experiment is run        
| {s:atDesign}        
| Boolean        
|  
|-
| Title        
| Title of the element        
| {s:atDesign}        
| String        
|  
|-            
|}
== ==
</div>
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
'''Ink Canvas Element''' allows to record and visualize painting strokes made by an participant. <br><br>
{TOC}


== Description ==
The Ink canvas element defines a screen area that receives and displays drawing and writing strokes made by a participant. The strokes can be done with a pen tablet, touchscreen or mouse. The element records explicit statistics of the drawing process, including stroke timing and coordinates/pressure of each dot. (See the demo video below) The element can also recognize handwritten text at request.

== Demo video ==
<iframe width="640" height="480" src="//www.youtube.com/embed/kpf9Jqh_YNg" frameborder="0" allowfullscreen></iframe>

== Snapshots ==
{|
| [imageleft|Experiment Run|{UP(Ink-Canvas-element)}InkCamel_sm.jpg|{UP(Ink-Canvas-element)}InkCamel.png]
| [imageleft|After experiment <br> Picture Stays in InkCanvas|{UP(Ink-Canvas-element)}InkCamel2_sm.jpg|{UP(Ink-Canvas-element)}InkCamel2.png]
|-
| [imageleft|Cat Recognized correctly|{UP(Ink-Canvas-element)}InKCat_sm.jpg|{UP(Ink-Canvas-element)}InKCat.png]
| [imageleft|Recorgnized that user <br> wrote wrong word|{UP(Ink-Canvas-element)}InkHorse_sm.jpg|{UP(Ink-Canvas-element)}InkHorse.png]
|}


== Practical Use ==
=== Creating the Ink Canvas element ===

# Add a new Ink Canvas element to the chosen event.
# Adjust the canvas area either in the event surface editor or via element's Position and Size properties.
# Adjust other properties of the Ink Canvas canvas element. For example, you can define the canvas background, stroke color and different drawing modes.
# Double-click on the canvas area in the event surface editor and try to draw several strokes for testing. Make a double-click again to exit the test mode.
# Write code that resets the canvas, requests text recognition and records drawing results in accordance with a logic of your experiment. To control the element at runtime, create proxy variable for the element's properties.
# Start the experiment. After the onset of the parent event the element becomes functional.

=== Saving the drawing results at runtime ===

# Add a new Ink Canvas element to the chosen event and prepare it as described above.
# Create proxy variables for the following properties: 'Save Ink File Now' and 'Clear Canvas Now'.
# Add the following code in a snippet that is called after a participant completes drawing:
@@
SaveInkFileNow="C:\\Data\\Participant_"+ParticipantCode+"_"+DrawingNumber+".csv";
ClearCanvasNow=true;
@@
This code saves the collected stroke statistics and resets the made drawing. Note that you need to declare and adjust global variables ParticipantCode and DrawingNumber to form an unique file name (you can use other ID variables).

=== Using the Ink Canvas element to recognize handwritten text ===
# Add a new Ink Canvas element to the chosen event and prepare it as described above.
# Create proxy variables for the following properties: 'Recognize Text Now', 'Recognized Text' and 'Recognition Confidence'.
# Add the following code in a snippet that is called after a participant completes writing:
@@
RecognizeTextNow=true;
@@
# Add the following code in a subsequent snippet that is called after (importantly!) the 'RecognizeTextNow' snippet:
@@
string S=RecognizedText; // string S now contains a text recognized by the Ink Canvas;
string C=RecognitionConfidence; // string C now contains one of the confidence ranks, e.g. 'week', 'average', 'strong'
@@
if you try to read the RecognizedText or RecognitionConfidence variables before or simultaneously with the 'RecognizeTextNow=true' command, the results wont be yet updated.

== Notes ==

* When the Ink Canvas element is used in the preview or debug modes, you may see flickering artefacts while doing drawing. Do not worry, these artefacts wont appear, when an experiment is run in he full screen mode.
* When the Ink Canvas element recognizes handwritten text, it considers all strokes made on the canvas from the left-top to the bottom-right. Thus, the recognition result may contain a text sentence, if multiple words are written on the canvas.
* When the Reset On Onset property is set to true, the canvas area (all existing strokes) is cleared on the onset of the parent event.
Meta Keywords:
Meta Description:
Change Comment:
EventIDE Wiki

Navigation¶

Ink Canvas Element
