Image

This article describes how to configure the Image component and details each of its properties.

The Image component allows you to display graphics within your Squirrel projects. Media types supported include .jpg, .png, .bmp, .gif, etc.

Select Image from the Media category of the component library. Move the mouse cursor over the canvas and click to add an image to your project.

Image Properties

The Image properties consist of two property drawers, a GENERAL drawer, and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

GENERAL

Source image from
- URL – get the image from a web link
- File – load a file from your computer
- Unsplash – search for an image in the Unsplash library

Note that for both URL and Unsplash sources the project must have access to the internet when it is running for the image to be displayed

Image URL – Available only when the URL option is selected in the 'Source image from' property. Type or paste the URL into the property field, or bind to a cell in the spreadsheet that contains the URL of the required image.
Import image – The Import button is only available when the File option is selected in the 'Source image from' property. Click to open the File Explorer window and locate the image source file.
Search – the search box is available when the Unsplash option is chosen, type in a search term and hit return to see a selection of related images, and click on one of the images to insert it into your project.

Opacity – This determines the transparency of the Image component and can be set in 4 different ways:
- Using the opacity slider
- Typing in a value
- Using the spinner buttons (values are adjusted by 10% per click)
- Binding to value in a spreadsheet cell
Resize image to component – Checking this option will constrain the image size to the proportions of the Image component.
Maintain aspect ratio – This option maintains the image’s natural width-to-height ratio (its aspect ratio) as the component is resized, ensuring the image is not distorted by the resize. (This option is only available when “Resize image to component” is selected)

Block mouse events – Checking this option will stop mouse interactions with components covered by the Image component, e.g. a slider component sitting on a layer beneath the image component would not function. A partially covered component may still have some functionality. The option is checked by default.

PreviousMedia NextIcon

Last updated 7 months ago

Image Properties

GENERAL

Source image from

URL – get the image from a web link
File – load a file from your computer
Unsplash – search for an image in the Unsplash library

Note that for both URL and Unsplash sources the project must have access to the internet when it is running for the image to be displayed

Image URL – Available only when the URL option is selected in the 'Source image from' property. Type or paste the URL into the property field, or bind to a cell in the spreadsheet that contains the URL of the required image.

Import image – The Import button is only available when the File option is selected in the 'Source image from' property. Click to open the File Explorer window and locate the image source file.

Search – the search box is available when the Unsplash option is chosen, type in a search term and hit return to see a selection of related images, and click on one of the images to insert it into your project.

Opacity – This determines the transparency of the Image component and can be set in 4 different ways:

Using the opacity slider
Typing in a value
Using the spinner buttons (values are adjusted by 10% per click)
Binding to value in a spreadsheet cell

Resize image to component – Checking this option will constrain the image size to the proportions of the Image component.

Maintain aspect ratio – This option maintains the image’s natural width-to-height ratio (its aspect ratio) as the component is resized, ensuring the image is not distorted by the resize. (This option is only available when “Resize image to component” is selected)

Block mouse events – Checking this option will stop mouse interactions with components covered by the Image component, e.g. a slider component sitting on a layer beneath the image component would not function. A partially covered component may still have some functionality. The option is checked by default.