What is an Inset?

In simple terms, Inset is a small graphic representation added to a specific step(s) of your project. Insets are useful when drawing additional attention to an area of interest such as safety, warnings or difficult to convey subject matter.

How to add Insets to your project

Using the UI Editor, you can add the following insets to your project step(s), available on the "Content" template:

Image Step Video Audio URL Camera

Follow the specific instructions below to use this feature:

Add Image

1. Transfer/copy the image file to the Asset Library.
2. Go to UI Editor>>Template>>Content.
3. Under “Insets”, choose “Image” for Inset type. You can configure up to four Insets per type.
4. Click “Select image” to choose your image>>confirm.
5. Adjust the height and position using Inset Height and Inset Anchor.
6. Use the “Start Simulation” button at the top of the scene to preview your work.
7. Use the button to remove the current image, if you choose to.

Expected behavior: The image will appear as an Inset on the configured step.

Add Step

1. Transfer/copy the picture file to the Asset Library.
2. Go to UI Editor>>Template>Content.
3. Under “Insets”, choose “Step” for Inset type.
4. Click “Select image” to choose your image>>confirm.
5. Click "Select Step" to choose your desired step>>confirm.
6. Adjust the height and position using Inset Height and Inset Anchor.
7. Use the “Start Simulation” button at the top of the scene to preview your work.
8. Use the button to remove the current image, if you choose to.

Expected behavior - Clicking/tapping the image inset will redirect user to the configured step.

Add Video

1. Transfer/copy your picture and video files to the Asset Library.
2. Go to UI Editor>>Template>>Content.
3. Under “Insets”, choose “Video” for Inset type
4. Click “Select image” to choose a thumbnail image for your video>>confirm.
5. Click “Select Video” to choose your video>>confirm.
6. Adjust the height and position using Inset Height and Inset Anchor.
7. Use the “Start Simulation” button at the top of the scene to preview your work.
8. Use the button to remove the current image/video, if you choose to.

Expected behavior: Clicking/tapping the image inset will launch the video on the configured step.

Add Audio

1. Transfer/copy your picture and audio files to the Asset Library.
2. Go to UI Editor>>Template>>Content.
3. Under “Insets”, choose “Audio” for Inset type
4. Click “Select image” to choose a thumbnail image for your audio>>confirm.
5. Click “Select Audio” to choose your audio>>confirm.
6. Adjust the height and position using Inset Height and Inset Anchor.
7. Use the “Start Simulation” button at the top of the scene to preview your work.
8. Use the button to remove the current image/audio, if you choose to.

Expected behavior: Clicking/tapping the image inset will launch the audio on the configured step.

Add Url

1. Transfer/copy your picture file to the Asset Library.
2. Go to UI Editor>>Template>>Content.
3. Under “Insets”, choose “Url” for Inset type
4. Click “Select image” to choose a thumbnail image for the Url>>confirm.
5. Adjust the height and position using Inset Height and Inset Anchor.
6. Use the button to remove the current image, if you choose to.

Expected behavior: Clicking/tapping the image inset on the WorkLink App will launch the Url (Site) on the configured step. You cannot simulate this behavior on Create.

Add Camera

1. Using the Create menu, add your camera to the desired step(s).
2. Go to UI Editor>>Template>>Content.
3. Under “Insets”, choose “Camera” for Inset type
4. Click “Select Camera” to choose your camera>>confirm.
5. Give your inset a title.
6. Adjust the height and position using Inset Height and Inset Anchor.

Expected behavior: Clicking/tapping the inset will show a live view of the current step from the camera specified. (Refer to the Create menu article to learn how to create a camera)

 

NOTE: Clicking "Invisible" after configuring the Insets makes the insets invisible when viewing the project, it does not remove the added files from your project.