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	Asset Reference	Yes	Select an image from your asset library (PNG, JPG, SVG supported)

Example: Safety Warning

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

A safety warning image appears in the training interface.

Example: Procedure Reference

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

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

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 Action ID	String	Optional	The ID of a specific Show Image action to hide. Omit to hide all images

Example: Hide All Images

Action: Hide Image

All image overlays disappear.

Example: Hide Specific Image

Action: Hide Image
Target Action ID: "reference-diagram-step-2"

Only the image with ID reference-diagram-step-2 is hidden. Other images remain visible.

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 for clean state transitions.

Combine with text

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

Test on mobile

Verify images are visible and properly positioned on small screens.

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 Before Procedure

State: DangerousProcedure
  onEntry:
    → Show Image (warning-icon)
    → Pause Training (learner must dismiss)
    → Show Text "This step involves high voltage. Follow all safety procedures."
    → Show Panel (safety checklist)

The warning appears first, then the learner must acknowledge before proceeding.

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

⌘I

Creator App

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

Hide Image

When to Use

Parameters

Example: Hide All Images

Example: Hide Specific Image

Best Practices

Common Patterns

Instruction + Diagram

Safety Warning Before Procedure

​Overview

​Show Image

​When to Use

​Parameters

​Example: Safety Warning

​Example: Procedure Reference

​Hide Image

​When to Use

​Parameters

​Example: Hide All Images

​Example: Hide Specific Image

​Best Practices

​Common Patterns

​Instruction + Diagram

​Safety Warning Before Procedure

​Related Actions

Overview

Show Image

When to Use

Parameters

Example: Safety Warning

Example: Procedure Reference

Hide Image

When to Use

Parameters

Example: Hide All Images

Example: Hide Specific Image

Best Practices

Common Patterns

Instruction + Diagram

Safety Warning Before Procedure

Related Actions