Image - Kalipso

Contents Index

Image

An Image is similar to a Button. Unlike Buttons, Images can display image files. You can change the displayed image in runtime. An Image Control can behave like a Button or simply be used to display an image file. You can also link an Image to the Database. An Image can interact with the user through its Events. You should use an Image Control to create a stylish button or to display image files.

Value - Its value is the full path of the displayed Image.

Its possible to perform drag-n-drop of an image file ("BMP", "GIF", "PCX", "JPG", "PNG") into an Image Control to define it. image.
It's also possible to drag-n-drop two images onto an Image Button. The Control will have the Effect = Second Image automatically with the two images assigned by their selected order.

Properties - General

GENERAL

Name – Name of the Control
This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (_).

Text – Text to be displayed in the Control
If you click on

at the right side of this property, you’ll be able to set the value in each Language of the Project.

Description – Description of the Control
This Description is for your information only, Kalipso does nothing with it. If you click on

at the side of this property, you’ll be able to set the value in each Language of the Project.

Plane – Plane of the Form where the Control should be created
Check the Planes chapter for more information.

Width – Width of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action. If you click on

at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

Height – Height of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action. If you click on

at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

From Left – X position of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action. If you click on

at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

From Top – Y position of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action. If you click on

at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

STYLE

Font – Font of the displayed Text

Size – Font size of the displayed Text

Properties – Font properties of the displayed Text

Font Color – Font color of the displayed Text
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action.

Backg. Color – Background color of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action.

Text Pos.– Define the text Position inside the image.

Image Mode - Defines the way the image is displayed when the control's dimension is different from the source file:

100% - The image will be displayed in the original size, from the top left corner of the Control;
Stretched - The image will be stretched to fit the Control;
Proportional Stretched - The image will be stretched, keeping the original proportion, to fit the Control;
Centered - The image will be displayed in the original size, centered in the Control.

Button Effect - To give the image a button effect:

<None> - No effect;
Automatically - Kalipso will give an automatic button effect (the effect depends on the operative system);
Second Image - We are able to use a second image, for example to give the effect of on and off menu.

Transparency - Defines the transparency of the image file:

<None> - No transparency;
First Pixel - The color of the first pixel of the source file will be fully transparent in all the source file;
Image transparency - Uses the source file transparency;
Specify Color - The specified color will be fully transparent in all the source file.
Note: This option is only for Win32 clients. For Android and Win10 clients the option is always "Image Transparency"

Transp. Color - This option is available when Transparency is set to Specify Color. It allows you to select the color to use as transparency.

Text Position - Position of the displayed text.

Advanced Style - When selected, you are able to change several advanced options of the image to manage the individual size and position of the text and image inside the Control.

Border – To set or remove the frame around the Control

None – No border is displayed
Standard – A frame is displayed around the Control
Customized – You're able to to define several parameters regarding the frame to be drawn

Border Color – Color of the frame to be drawn around the Control
Line Thickness – Thickness of the frame to be drawn around the Control
Rounded Corners – Allows to specify how the corners of the frame drawn around the Control should be drawn

No – The corners of the frame drawn around the Control will be 90 degrees (rectangle)

Rounded Tops – Instead of drawing each corner, a semicircle is drawn in each top (left and right)

Specify Radius – Allows you to specify the radius of the semicircle to be draw in each corner of the Control

Radius – Radius of the semicircle to be draw in each corner of the Control

You can activate or deactivate the Border through “Set Property” Action. You can know if it's active or not in runtime via the “Get Property” Action.

Properties - Links

Source – Origin of the data to show in the Image

- File: The path to the file you want to link.
- Database Table: Connect the Image with a Column of a Database Table.
- Expression: Fill the Image with the result of an Expression.

Source: File

File name - Specify the image file name.

Second Image - Case the second image is select you must specify the name here.

File Path - The path to the folder where the image will be. If empty Kalipso will assume they are in the instalation folder.

Source: Database Table

There are two ways of connecting your Image to a Database Table therefore presenting the value of a specific Column.

1 – You can do it by simply defining the "Table" and "Column" properties and then using the "First Record"/"Last Record"/"Next Record"/"Previous Record" and "Refresh"/"Refresh Plane"/"Refresh Control" Actions.

2 – The other way is to implicitly define a "Select" statement. To do so, you have to define the "Table", "Column", "Where the value of" and "It’s equal to" properties then use the Refresh", "Refresh Plane" or "Refresh Control" Action. This way you are telling Kalipso to perform a "Select" statement like this:

Select <Column> from <Table> where <Where the value of> = <It’s equal to>

Source: Expression

Fill the Control with the result of – Expression whom result will be shown in Image Control

Shortcuts

F2 – Actions

F3 – General properties