Show Image & Hide Image

Overview

Use Show Image to display image overlays (diagrams, reference photos, safety warnings, instructional graphics) in the training interface. Use Hide Image to remove images when they are no longer needed.

Show Image

When to Use

Display technical diagrams or schematics
Show reference photos of correct procedures
Present safety warning graphics
Display instructional images alongside the 3D scene
Show comparison photos (correct vs. incorrect)

Parameters

Parameter	Type	Required	Description
Image	Asset selection	Yes	Select an image from your asset library, or use the upload button beside the field to add one.
Version	Selection	No	Available after selecting an image. Choose the image version to use from the available versions.
Alt Text	String	No	Describe the image for accessibility. In the browser Trainee App, this text can also appear as a description alongside the image.
Duration (ms)	Number	No	Automatically hide the image after the specified number of milliseconds. Leave unset for no automatic timeout. Enter `0` to remove an existing duration.
Reference Object	Object selection	No	Select a scene object or child object to position the image relative to it.
Position	X, Y, Z	No	The image’s 3D position in meters. With a reference object selected, values are offsets relative to that object or child.
Rotation	X, Y, Z degrees	No	The image’s 3D orientation, relative to the selected reference object or child when one is specified.
Scale	Number	No	Uniform image scale. Default is `1`. With a reference selected, scale is relative to that object; otherwise it uses absolute scale.
Wait Until Complete	Checkbox	No	In the browser Trainee App, enable to wait until the image is closed or automatically hidden before starting the next action. When unchecked, later actions can continue while the image is displayed.

After selecting an image and version, expand Preview to inspect the selected image. Select an image before using Edit in Scene to place it. Expand Position to review the reference object, position, rotation, and scale.

The browser Trainee App displays Show Image as a screen overlay and does not apply its 3D placement settings. Verify scene placement on the target device used for training.

Duration (ms) controls automatic hiding. Wait Until Complete controls when subsequent actions run. In the browser Trainee App, enabling Wait Until Complete with no duration keeps subsequent actions waiting until the trainee closes the image. A configured duration also ends the wait when it expires.

Example: Safety Warning

Action: Show Image
Image: "safety-hazard-icon"

A safety warning image appears in the training interface.

Example: Procedure Reference

Action: Show Image
Image: "valve-assembly-diagram"

A technical diagram showing the correct valve assembly is displayed to guide the learner.

Example: Show a Reference Image for Five Seconds

Add Show Image to the step’s On Entry actions:

Action: Show Image
Image: "valve-assembly-diagram"
Alt Text: "Diagram showing the valve components in assembly order."
Duration (ms): 5000
Wait Until Complete: unchecked

Choose the required Version and check Preview before using the image. The image automatically hides after five seconds unless it is closed or hidden sooner. Later actions can continue while it is displayed because Wait Until Complete is unchecked.

Hide Image

When to Use

Remove reference images after the learner has reviewed them
Clear images before transitioning to the next step
Reset UI state between training phases

Parameters

Parameter	Type	Required	Description
Target Show Image Action	Action selection	No	Select the Show Image action whose image should be hidden. The default, Most recently shown image, hides the image from the most recent Show Image action.

Example: Hide the Most Recent Image

Action: Hide Image
Target Show Image Action: Most recently shown image

The most recently shown image is hidden. Other images retain their existing visibility.

Example: Hide Specific Image

In Hide Image, select the Show Image action that displays the reference diagram under Target Show Image Action. The image displayed by that action is hidden. Other images retain their existing visibility. To hide several images, add a separate Hide Image action for each corresponding Show Image action and select it explicitly.

Best Practices

Use high-quality images

Provide clear, high-resolution images for technical diagrams and reference photos.

Optimize file sizes

Compress images to reduce training file size and improve loading times.

Show in onEntry, hide in onExit

Display images in onEntry and remove them in onExit by selecting the corresponding Target Show Image Action in Hide Image.

Combine with text

Pair Show Image with Show Text for instructions + visual reference.

Test on the target device

Check image readability, display duration, and any scene placement in the Trainee App used by your trainees.

Common Patterns

Instruction + Diagram

State: ComponentAssembly
  onEntry:
    → Show Image (assembly-diagram)
    → Show Text "Follow the diagram. Connect the green wire first."
    → Show Panel (with instructions)

  onExit:
    → Hide Image
    → Hide Text

The learner sees a diagram, text instructions, and a detailed panel — all working together.

Safety Warning and Instructions

State: DangerousProcedure
  onEntry:
    → Show Image (warning-icon)
    → Show Panel (Title: "Safety Warning", Body: "This step involves high voltage. Follow all safety procedures.")

  onExit:
    → Hide Image (Target Show Image Action: the Show Image action above)
    → Hide Panel

The warning image and safety instructions appear when the step starts and are removed when the trainee leaves the step.

Show Text — Display text instructions alongside images
Show Panel — Combine images with text, buttons, and interactive elements

Creator

Workflow

Transitions

Variables

Actions — Training Control

Actions — Step Instructions

Actions — Media Playback

Actions — Object Manipulation

Actions — UI Control

Actions — Speed & Time

Actions — Training Feedback

Actions — Hand & Tool Visualization

Overview

Show Image

When to Use

Parameters

Example: Safety Warning

Example: Procedure Reference

Example: Show a Reference Image for Five Seconds

Hide Image

When to Use

Parameters

Example: Hide the Most Recent Image

Example: Hide Specific Image

Best Practices

Common Patterns

Instruction + Diagram

Safety Warning and Instructions

​Overview

​Show Image

​When to Use

​Parameters

​Example: Safety Warning

​Example: Procedure Reference

​Example: Show a Reference Image for Five Seconds

​Hide Image

​When to Use

​Parameters

​Example: Hide the Most Recent Image

​Example: Hide Specific Image

​Best Practices

​Common Patterns

​Instruction + Diagram

​Safety Warning and Instructions

​Related Actions

Overview

Show Image

When to Use

Parameters

Example: Safety Warning

Example: Procedure Reference

Example: Show a Reference Image for Five Seconds

Hide Image

When to Use

Parameters

Example: Hide the Most Recent Image

Example: Hide Specific Image

Best Practices

Common Patterns

Instruction + Diagram

Safety Warning and Instructions

Related Actions