Ellipse

This article describes the Ellipse component and its properties.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

The Ellipse is a graphical component that can be styled to suit a Squirrel project theme.

Select an Ellipse from the Shapes category of the component library. Move the mouse cursor over the canvas and click to add an ellipse to your project.

Ellipse Properties

The Ellipse properties consist of a STYLING drawer and a DYNAMIC VISIBILITY drawer. This guide will describe the styling properties only; the dynamic visibility properties are generic to each visible component and a separate guide and tutorial on dynamic visibility can be found here.

STYLING

Fill – When checked, the Ellipse will be filled with a color that matches the value entered in the property field. This can be set in 3 ways:
- Clicking the colored rectangle next to the Fill checkbox and using the color picker
- Typing in a color value
- Binding to a color value in a spreadsheet cell
Opacity – This determines the transparency of the Ellipse. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:

Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:
- Color – this determines the color of the shadow
- Opacity – this determines the opacity of the shadow
- X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)
- Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)
- Blur – determines the blur of the shadow
Block mouse events – Checking this option will stop mouse interactions with components positioned on layers beneath the Ellipse, e.g. a slider component sitting on a layer beneath the rectangle would not function. A partially covered component may still have some functionality. This option is unchecked by default which means that components positioned beneath the rectangle will respond to mouse events.

PreviousRectangle NextLine

Last updated 5 months ago

Ellipse Properties

STYLING

Fill – When checked, the Ellipse will be filled with a color that matches the value entered in the property field. This can be set in 3 ways:

Clicking the colored rectangle next to the Fill checkbox and using the color picker
Typing in a color value
Binding to a color value in a spreadsheet cell

Opacity – This determines the transparency of the Ellipse. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:

Effects – Select an option from the dropdown box. The options are none and Drop Shadow. With Drop Shadow selected the following properties appear:

Color – this determines the color of the shadow
Opacity – this determines the opacity of the shadow
X-Offset – determines the horizontal position of the shadow (positive values move to the right, negative values move to the left)
Y-Offset – determines the vertical position of the shadow (positive values move down, negative values move up)
Blur – determines the blur of the shadow

Block mouse events – Checking this option will stop mouse interactions with components positioned on layers beneath the Ellipse, e.g. a slider component sitting on a layer beneath the rectangle would not function. A partially covered component may still have some functionality. This option is unchecked by default which means that components positioned beneath the rectangle will respond to mouse events.