Overview

The Drawing Tool enables you and your users to draw on the entire screen or within the bounds of specific images. While performing this free drawing you can change your brush width and color, enabling your drawings to contain a mix of different strokes.

Additionally, on Windows PCs, the resulting marked-up scene or image can be saved to a snapshot that can then attached to an email, saved to the local file system or saved to a USB drive.

NOTE: Intuiface does not differentiate between a finger and a stylus. They are treated equally.

Turning on the Drawing Tool feature

The drawing tool can be associated with any Scene or Image asset. There are two ways to make the drawing tool available in a running experience:

1) Select the Show drawing tools property in the Properties panel (Tools Section) for the desired scene or image:

• The advantage of this option is that the drawing tool is always available at runtime, accessed by pressing a visible drawing tool button. This button's location is configurable for the scene, predefined for the image.
• The disadvantage is that the drawing tool button is always visible.

2) Trigger the Turn drawing mode on action for the desired scene or image (click to zoom):

• The advantage of this option is that the drawing mode can be turned on by any action, (such as a button press) and will work without displaying the drawing tool button or toolbar.
• The disadvantage is that you are limited to one brush stroke. The stroke (width and color) can be changed through use of the Change stroke action but this still requires the design of buttons, etc. that will trigger the stroke change.

Using the drawing tool

If the Turn drawing mode on action was called, the running experience is automatically placed into drawing mode, eliminating the need to click the drawing tools button.

If the image or scene has its **Show drawing tools" property selected, the drawing tools button will be visible in a running experience. For scenes, the button will always be visible and its onscreen location is determined by the settings you've specified in the Properties panel. For images, the button becomes visible when the associated image is tapped and its placement is automatically determined by Composer.

Selecting the drawing tools button opens the Drawing Tools panel.

1. Undo (the last action) and Redo (cancel the last undo)
   
2. Select pen width from the list of widths you selected in the Properties panel
   
3. Select pen color from the list of colors you selected in the Properties panel
   
4. Turn on erase mode. See next section for details
   
5. Take snapshot. See section below for details

Choose any combination of pen width and color then draw on the screen. At any time you can erase drawings or take a snapshot.

Using the eraser

To use the eraser, select the Eraser icon in the Drawing Tool panel and then choose the type of eraser.

There are three types of erasers:

1. Erase stroke   tap a line and the entire line disappears. This is the first eraser option in the Drawing Tool panel.
   
2. Erase area   tap a line and a circular area of pixels are removed. Three Composer-defined pixel areas are available and these are represented by the second through fourth eraser options in the Drawing Tool panel.
   
3. Erase all lines   selection of this option automatically removes all annotation. This is the last eraser option in the Drawing Tools panel.

You can undo any or all past erase actions by clicking the Undo button.

Drawing Tool properties

The following applies to both the scene and Image Asset except where noted.

• Show drawing tools   if true, a button will be displayed in the image at runtime (or preview) so that the user will be able to open the drawing tools.
• Available colors   add, delete, reorder and modify the colors that will be available in the drawing palette at runtime.
• Available widths   add, delete, reorder and modify the stroke widths that will be available in the drawing palette at runtime. You are limited to a maximum of 4 widths in the drawing tool.
• Show drawing grid   if selected, a grid will be displayed when the drawing mode is activated
• Show drawing mode label   if selected, text will be displayed on the upper left corner of the image while in drawing mode.
• Drawing mode label text   text that will be displayed in the upper left corner of the image, while in drawing mode, if the previous option is selected.
• Erase All label text   confirmation text displayed after the user presses the Erase all button in the drawing palette while in drawing mode.
• Drawing mode mask   set color and transparency of the overlay displayed while in drawing mode
• Drawing tool location, X   (only for the scene) defines the X coordinate for the upper-left corner of the Drawing Tools button and panel
• Drawing tool location, Y   (only for the scene) defines the Y coordinate for the upper-left corner of the Drawing Tools button and panel
• Drawing tool icon width   (only for the scene) defines the width of the Drawing Tools button
• Drawing tool icon height   (only for the scene) defines the height of the Drawing Tools button

Drawing Tool actions

The following can be found in the Drawing actions category for both the scene and Image Asset. For more about triggers and actions, see this page.

• Redo   repeats the last stroke or erasure
• Undo   undoes the last stroke
• Change pen color   select a new color for the pen from the list of colors predefined in the Properties panel for the associated scene or image
• Change pen width &nsbp; select a new pen width from the list of widths predefined in the Properties panel for the associated scene or image
• Change stroke   select a new pen width and color from the list of widths and colors predefined in the Properties panel for this scene or image
• Turn Drawing Mode on   all touches on the target scene or image will now result in a pen stroke. The stroke color and width will be the first color and width found in the Properties panel for this scene or image - unless the Change Stroke action has been used. See above.
• Turn Drawing Mode off   turns off Drawing Mode
• Change eraser   change the type of eraser
• Erase all drawings   erases all drawings in the scene or image
• Turn Erase Mode off   turns off Erase Mode
• Turn Erase Mode on   all touches on the target scene or image will erase according to the latest eraser setting.

NOTE: When using the action Turn Drawing Mode on with a scene whose Show drawing tools property is not selected in the Properties panel, there is no touch-related method for turning off Drawing Mode. The entire screen will be covered by the drawing mask. In this scenario, the only way to exit out of Drawing Mode is through the use of an inactivity or simple timer to call the action Turn Drawing Mode off. To avoid this issue, make sure the scene's Show drawing tools property is selected in the Properties panel. This will ensure the drawing tool palette is visible while in Drawing Mode.

Save a drawing for use outside of Intuiface

To save a drawing, take a snapshot of the drawing and then use the "Snapshot is taken" trigger to do any of the following:

• email the snapshot as an attachment,
• save a copy of the snapshot to the local file system
• save a copy of the snapshot to a USB key.

See this article for details about use of the "Snapshot is taken" trigger.

NOTE: By default the snapshot will create an item on the Scene. You can disable/enable this feature in the Scene Properties behavior tab.

 

Limitations

• Drawing tools icon will not be shown on assets nested in collections, even if the property is enabled. As a work around, you could create a button that will trigger the Turn Drawing Mode on/off actions.
  
• Except for Composer and Player on Windows, Drawing Tool Actions: Turn Drawing mode on/off  are not supported.
• When enabled on image assets, if the image's container is not the same size as the image (Fill Behavior - Fit), drawing will be possible on the entire container's size.