Work with the Drawing Tool
Table of Contents
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.
NOTE: IntuiFace does not differentiate between a finger and a stylus. They are treated equally.
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.
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.
- Undo (the last action) and Redo (cancel the last undo)
- Select pen width from the list of widths you selected in the Properties panel
- Select pen color from the list of colors you selected in the Properties panel
- Turn on erase mode. See next section for details
- 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.
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:
- Erase stroke tap a line and the entire line disappears. This is the first eraser option in the Drawing Tool panel.
- 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.
- 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.
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
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.
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.
- Experience Tips and Tricks
- Getting Answers To Your IntuiFace Questions
- Tip of the Month: Little Known Features of IntuiFace
- Tip of the Month: Experience Design Choices to Optimize Performance
- Tip of the Month: Using Out-of-the-Box Interface Assets to Incorporate Real-time Information
- View all (8 more)