Drag and drop

After the GUI pages have been defined, you can add several domotic functions you have earlier defined in PROSOFT in the GUISOFT screen using the easy and user friendly drag and drop concept: drag the domotic functions out of the functions or symbols library and drop them on the preview of the preview area.

Positioning (grid)

To position the different items on the GUI screen, a positioning grid can be used. To activate/show the grid, click the grid icon in the grid toolbar just below the standard toolbar. If the grid is activated the icons you drag onto the GUI screen, will 'snap' to the grid points. The grid can be adjusted to any interval of pixels preferred. Therefore the pixel interval is set in the grid toolbar (standard = 10 pixels).

Edit the GUI Icon

When you have dragged the function out of the functions library, a standard GUI icon is assigned to the function on the GUI preview. However, you can change the icon image settings. Right click the GUI icon in the preview and select 'Edit GUI Icon' from the drop down list. The 'Edit Item' window will appear on the screen.
When you have dragged the symbol out of the symbols library and dropped it on the GUI preview the 'Edit Item' window will appear automatically so you can assign the desired function to the symbol.
In the 'Edit Item' window you can change some properties of the image and/or the function. In the left part of the 'Edit Item' window you can define the appearance settings of the icon. In the right part of the 'Edit Item' window the function of the GUI item can be changed.

Appearance:

'Size & location'

The size of the touch sensitive zone (active zone) of the GUI item is defined by the 'Width' and the 'Height' parameter. Both parameters are defined in pixels. TELETASK advices to set the width and height parameter at 32 pixels for an optimal user friendly finger control on a standard 15' touchscreen (resolution: 1024x768).
The location of the GUI icon describes the place of the GUI icon on the devices screen using the 'X' and 'Y' coordinates.

'Item Text'

Every GUI item can be accompanied by a declarative text. Define both the 'Text location' and the 'text' to add a text to a GUI item.

Text Location: This parameter defines the position of the text around the GUI item.

Text: Enter here the text that appears near the GUI item. By default, the name given in PROSOFT will appear in this field.

'Image'

Every GUI item has a default image. However, you can replace the default image of the GUI item with an image out of the TELETASK image library.

Change Image: Click this button to change the image with an image out of the TELETASK image library.

The 'Change Image' option can also be selected directly from the drop down menu when you right click the GUI Icon.

Scale Image (fill active zone): When this option is checked, the image will be scaled to fit the 'active size'

Fixed Image Size (centred): This option allows you to enter a custom size for the image in pixels. The fixed image size can only have the same or a smaller size than the active size. When the image size is smaller than the active size, the image will be placed in the centre of the active zone/size.

No Image: Select this option when you don't want to display an image for an item (transparent button).

To create GUI+ icons yourself you have to name the gif’s according to a specific pattern:

Most items (lights, devices, ...) have two states "ON" and "OFF". The images for this two states need to be named:

ON status: MyImage-on.gif

OFF status: MyImage-off.gif

For the part "MyImage" you can use your own image name and need to be the same for the on and the off state. The parts "-on.gif" and "-off.gif" need to be exactly like this.
Motors have four states: "Closed", "Closing", "Opened", "Opening". These images need to be named:

"Closed": MyImage-closed.gif

"Closing": MyImage-closing.gif

"Opening": MyImage-opening.gif

"Opened": MyImage-opened.gif

Note: It is also possible to create "ON/OFF" images in the "motors" category. These icons can be used for local moods that you want to display in the motor icon.

Items for Cameras, URLs and ‘Go-To-Page’ only show 1 state (the "ON" state), but there need to be two images in the library, using the "ON" and "OFF" naming convention. You can create an "ON" image, copy it and rename the copy to "-off.gif".

Function:

'Select Function Type'

This option allows you to choose or change the type of function you want to be coupled to the (dragged) GUI Item. You can choose out of different function types:

Standard PROSOFT function: Use this function to make the GUI item to control a specific domotic function on your TELETASK central unit. The function you select needs to be configurated in PROSOFT. Examples: switching a light, activating a motor, change the sensor preset of the heating…

IP-Camera: This function takes the URL of an IP camera's MJPEG file to be displayed on the GUI screen, when you click the GUI item. Follow this link for more instructions on how to add a camera to the project.

URL or Image: Using this function type the GUI item will display a pure html page or an image. The URL in the lower tab page has to be completed and can refer to a location on the Internet (start the URL with 'http:// …') or to an image (start URL with 'file:/// …') which is located on the PC on which the GUI is active.(note 3 times the '/' character, e.g. file:///c:/My documents/image.jpg).

Examples:
https://www.meteo.be/services/widget/.?postcode=9000&nbDay=1&type=6&lang=en-nl
https://image.buienradar.nl/2.0/image/animation/RadarMapRainWebmercatorBE?height=160&width=160&extension=png&renderBackground=True&RenderBranding=true&renderText=True

A dynamic HTML page is only available on the GUI+.

Show chart: Select this to display a Graph about a sensor or an output (Relay, Dimmer, …).

Add the output/sensor, for which you want a Graph, like for normal control of the output. Then edit the item and change the function type to “Show chart”

For a sensor you do not need to explicitly add the chart. If the sensor is added to the GUI you will be able to see the graph (if you want the Graph for a sensor to be ‘default open’).

Start external program: use this function to start an external program inside the GUI+ runtime.

The behavior of this function is largely depending on the external program itself!!!

Go-To GUI Page: Using this function type, the GUI item will switch to another page when it is touched.

'Icon'

Here you can set up the categories under which the GUI item must be visible. The category is chosen by default from the coupled PROSOFT function. Camera's and URL's arrive by default under the 'Camera' icon. The 'Go-To-GUI-Page' arrive by default at the 'All' icon.

!!!!Items of the category 'All' will always be displayed at the ALL category.

'Popup Window'

For some of the function types a 'Control Panel' will be displayed on the screen when you touch the GUI item.
A 'Control Panel' popup appears when the GUI item is defined as a URL or Camera function or when the PROSOFT function is a dimmer, a RGB control, an audio zone or a sensor zone. In the 'Control Panel' popup some function type related information is displayed.

URL/Camera function: the webpage/camera will be displayed on the screen

PROSOFT function type: the control panel displays additional control buttons for the advanced control of the audio system, the dimmer, the heating/cooling system…are displayed.

Normally you will need to touch the GUI item to display this 'Control Panel'. When you want to have the control panel standard on the screen enable the 'Default Open' check box in the 'Popup Window' area. Additionally you can set for Camera's and URL the width and the height of the 'popup window'/ 'control panel'.
In the category 'All' the 'Default Open' items will only appear as icons, unless also the option 'Default open at 'All' view' is marked.

This option is only available in GUI+ (GUI will present 'default open' items always as icons!).

For the 'Default Open' popup a popup position also needs to be entered. For the other pop-up panels this is not mandatory. If you don't set up the position (position = auto); the GUI will choose the most appropriate location.

Only in the GUI+ you can position the not 'default open' panels manually.

Adding items to the GUI