Teachers can upload images and modify them to create custom diagrams, references, and other resources.
This widget is a very basic image editor that is built directly into Stile. You can create images and diagrams from scratch using the tools provided, or you can upload your own image and draw/write over the top of it. Text added to the Annotated image will be picked up by autonarration, screen readers, and translators for accessibility.
One of the most common uses of the Annotate image widget you'll see in Stile Lessons are the learning goals. Stile's content team upload a background image (which was created in another program) and then add text over the top of it.
The Annotate image widget is equipped with a toolbar to help you edit an image in a variety of ways.
Click on each of the following tools to jump directly to its section in this article, or continue reading below:
- Undo and redo
- The cursor
- Pen tool
- Shape tool
- Line tool
- Text tool
- Image Uploader
- Layer tools
- Keyboard shortcuts
Undo and redo
The curved arrows on the left end of the toolbar will undo and redo actions. If a mistake is made, e.g. an element is moved off the side of the canvas, click the arrow pointing left to undo the action.
Note: Wait for the canvas to save between each click for best results.
To reverse an 'undo' action, click the right-pointing arrow.
The cursor
The black arrow is a standard cursor tool. Use this to select, resize, rotate, and move elements around the canvas.
Select an element by clicking it with the cursor tool. Drag the square dots on the corners and edges of the bounding box to stretch, squash, enlarge, and shrink the element. Drag the circular dot on top of the element to rotate it.
The pen
The pen tool looks like a texta drawing a curvy line. Use this to draw freehand shapes on the canvas.
Combine this with the line weight and colour options on the right side of the toolbar.
Shapes
The shape tool offers a wide variety of predefined shape elements to choose from. Once the element is drawn with a click-and-drag motion, its size and dimensions can be edited using the bounding box of the element. Combine this with the line weight, line colour, and fill colour options on the right side of the toolbar.
Lines and arrows
The line tool offers a selection of solid and dotted lines as well as arrows. Draw the line or arrow with a click-and-drag motion. To keep the line straight horizontal or vertical, hold the Shift key on the keyboard while drawing. Combine this with the line weight and colour options on the right side of the toolbar.
Text
The text tool allows the teacher to type in the canvas. Click and drag across the canvas to determine the width of the text box. The height of the box will increase as more text is added. Combine this with the font size and colour options on the right side of the toolbar.
Note: Text in this widget will not be automatically narrated. Include an accessibility caption for screen readers when editing the widget! You will see the text box for captions when you are in edit mode.
Image Uploader
The image uploader allows the teacher to add a picture from their device. It can then be moved, scaled, and rotated like any other element.
Note: We recommend you avoid uploading images with a lot of text, such as scans of typed or handwritten pages. Files go through some compression when they are uploaded, so smaller text within uploaded images can become blurry. Additionally, text within images is not accessible.
Layer tools
Each element on the canvas (text box, shape, line, etc.) exists on its own layer. The layer tools can bring an element forward or backward.
- To bring one element forward so it covers another: use the cursor tool, select the element and then click the layer tool with the up arrow. It may need to be clicked more than once to move the element forward more than one layer.
- To move an element back so it appears behind another: use the cursor tool to select the element and then click the layer tool with the down arrow. It may need to be clicked more than once to move the element back more than one layer.
Customize colours and fonts
The line width tool adjusts the thickness of lines, arrows, and shape outlines. Use the cursor tool to select the element to be modified before adjusting the line width.
The line colour tool changes the colour of the line, arrow, or the outline of a shape. The fill colour tool changes the colour of a shape. Use the cursor tool to select the element to be modified before adjusting its colour(s).
The font size tool shrinks and enlarges the text. The font colour tool changes the colour of the text. Select the text to be modified before adjusting its size and colour.
Keyboard Shortcuts
To access a full list of keyboard shortcuts available for working in the widget, click on the canvas (not in a text box!) and then press Shift + ? on your keyboard.
You may also be interested in the following resources: