Image

Kalipso - Developing - Form - Controls - Type - Image

An Image Button is similar to a Button. In fact, it's an Image with the "Button Effect" property set to "Second Image". Unlike Buttons, Images can display image files. You can change the displayed image in runtime. 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.

It's possible to perform drag-n-drop of an image file ("BMP", "GIF", "PCX", "JPG", "PNG") into an Image Button 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

Tab - General

Common

  • 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.

  • Description - Description of the Control. This Description is for your information only, Kalipso does nothing with it.

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

  • Visible - With this option selected, the control is (or is not) visible.

  • Enabled - With this option selected, the control is (or is not) enabled. It may be visible (previous option), but it may not be enabled. In this case an event associated with the control is not executed

Layout

  • X - x position of the Control from left

  • Y - y position of the Control from top

  • Width - Width of the Control.

  • Height - Height of the Control

In relation to all these layout options, it is possible to set this value in runtime via the “Set Property” Action. You can also retrieve this value in runtime via the “Get Property” Action.

Miscellaneous

When the icon is clicked to add an image, a new window appears for the image to be added. This window is as follows:

The window presents the resources for the project that are in use as icons, images or other resources, in this case, images.

In the central area there is a visualization of the image that we can use in the form. We can add or delete images from the list that appears in this window. In addition, in the upper right corner is a tool that allows you to gradually change the background to better perceive images that have a transparent background or that are white, with a transparent background.

Finally, you can also search for existing images associated with the project.

When choosing the tab to choose icons, the system presents a new window where you can choose system icons divided by categories and / or graphic styles. After choosing, it switches to the base screen of this tab.

  • Recolor - In this area, you can define the colors of the icon based on a predefined palette or by selecting color from an external source.

  • Shapes - With the selected icon, three standard shapes can be assigned to it: square, circle and square with rounded corners. Also the line thickness, the inner padding (these two options in pixels) and the color.

  • Effects - In this area you can use effects on the icon such as rotate, increase / decrease the size and invert.

  • Overlay - In this area, the overlay of images or icons is generated at the level of padding and size.

In the upper right corner you can preview the changes that are being produced in the image in the previous options.

Style

Appearance

  • Background - Background color of the Control. You can set the color for the background.

  • Opacity - Set the percentage of opacity for the background.

  • Button Effect - To give the image a button effect:

    • Automatic - 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.

You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action.

On the right side of the Style section, you can choose templates with pre-defined styles or configurable ones. By clicking on this option, the following style possibilities for the label appear:

  • Styles

    • None

    • Base

    • BackButton

    • Button

    • Circular

    • Icon

    • InvertedButton

Text

  • Font – Font of the displayed Text

  • Size – Font size of the displayed Text

  • Font Color – Font color of the displayed Text and/or select the code in the color picker.

  • Font properties - Set of options where you can choose whether the font is bold, italic or underline

  • Text alignment - You can choose alignment to the left, center or right.

  • Wrap – When active, if the Text doesn't fit the Control in width, it's automatically "broken" into several lines.

  • Ellipsis - When the text is larger than the area of the label the app shows an ellipsis (...) to indicate that there more text that can't be displayed.

Border

  • Border – To set or remove the frame around the Control. When choosing this option, the application allows the following types of border:

    • No – No border is displayed

    • Default - A frame is displayed around the Control

    • Customized Rectangle -

    • Customized Circle -

  • Line - Set the color of the line or select the code in the color picker.

  • 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

  • Borders - Choose which line of borders you want to add (left, right, top, bottom, all around).

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.

Image

  • Mode - Choose the mode to display the image:

    • 100%

    • Stretched

    • Proportionally Stretched

    • Centered

    • Pinch / Zoom

  • Alignment - You can select the desired alignment for the image. When activating the option, the application allows access to a new window where a set of options appear for that same alignment.

Tab - Content

In this tabulation, the application allows a diverse set of contents to be associated with the image.

  • File - By clicking you can directly access a specific file (defined in this area).

  • URL - By clicking you can enter a URL for a location outside the application (for example).

  • Database Table - By clicking you can access data in a specific table (to be indicated on the screen that appears).

  • Expression - By clicking you can associate an expression with the selected control (image). For more information on expressions you can access here.

In each of these four options, the screen changes to show the specific options that allow the execution of what you want.

Tab - Actions

For each control, actions can be associated. For this, with the control selected, it is possible to access this tab and associate an action to the control. For more information on the actions available and how to use them click here.‌‌

Shortcuts‌

  • F2 - Actions

  • F3 - General Properties

PreviousTable (Grid)NextShape

Last updated