In this section you will learn about user interface: which parts there is, what you can do with that and how to use it. Interface consist of three tabs: Logic Editor, Gui Editor and Preview tool, each do it's special task. You can switch screens in main toolbar.

The Interface Toolbar

At the very top of Page Editor is a toolbar with buttons that let you switch between editor screens:

Logic is where you work on how page behave: program data binding, widgets interoperations and so on,
Gui is WYSIWYG editor, you work on how page looks, it's default screen,
Preview is where to test how page is working.

Interface Toolbar

On the left side is page's name. If you move mouse cursor over name you'll see in tooltip when page was created and edited last time.

The Gui Editor

User interface. Gui tab

Gui is default editor and is what you see when start working on new page. Gui screen consists of next parts:

Shelf Toolbar has main buttons to control page state, and row of all basic widgets.
Breadcrumbs let you manage selection and nesting.
Layout Area is a page layout, here you work how page looks.
Properties Panel allows you setup all properties of selected widget.
Style Manager is where you manage pages styles — a styles you want to apply to same widgets.
Outline helps you navigate through nesting widgets, change widgets order.

Shelf Toolbar

Shelf toolbar serves two goals: to control page state and show basic widgets. State controls in order left to right:

Save clearly, saves page changes. Btw, we have save history up to 5 versions, it's possible to backup previous page state.
Add Widget opens a dialog to add widget. you will see it in details in Layout Area section.
Import means you can import page content. This is a json file with full page content: styles, layout and logic. Button open a dialog where you paste new page content as json text. After import it changes page and saves it.
Export saves current page's state (even unsaved) as json file on your computer. You can import that file in other page, that way you can clone page or share it with coworkers. There is not other way to clone page.
Undo can work with all unsaved changes, unlimited count. undo queue is reset after you save page.
Redo as previous command, can reapply actions that was canceled. If you make any change, all next redo queue is reset.
Lock layout allows you fix widgets and panes position, mouse can't move them anymore.

Shelf Toolbar

After state controls is basic widgets. If they are all not fit at shelf, there is scrolling buttons to see them.

HeatMap

At the end of shelf toolbar (need to scroll there) is two special buttons:

Map points position,
Update points position.

They opens different dialogs serve for HeatMap feature. Shortly, you can make heatmap over you floorplan, or make 3D building heatmap. Respectively, first button lets you initialize points to work with that feature, second — change points. You can learn HeatMap feature in other article.

HeatMap controls

Breadcrumbs

When no widget selected Breadcrumbs shows only one button "Select all" which, as you can guess, selects all widgets.

Breadcrumbs without selection

If something is selected, Breadcrumbs show you next controls:

Deselect button which clears selection.
Duplicate button.
Breadcrumbs itself.
Delete button, deletes selected.

Breadcrumps with selection

Nesting

Widgets can be nested on different levels. It is possible with Pane widget. Breadcrumbs is more useful when you have nested widgets: Pane with widgets, Pane in Pane. If you have selected widget, you can change selection to Pane, contains it (go on level up). If you have selected few widgets in Pane, you can alter selection on same level: choose one of selected widgets.

Layout Area

Layout Area shows you how page would looks, allows to add, remove, move, select and reorder widgets. Mostly widgets never show realtime data — data which can be retrieved by page's logic. But Charts tries run logic to load real data to let you configure plots.

Layout Area

Add Widget dialog

A big red button opens Add Widget dialog. Below dialog caption is tab bar, where you can switch widgets libraries. Initially there is two of them:

Basic — all standart widgets like label, charts and all other (read more at Widgets tour).
Default — is a library of smart widgets. For now contains only PointDisplay.

Add Widget dialog

If user have other libraries, they would be listed in tabs too. Read more at Using Smart Widgets and libraries.

Widget editor

Widget editor is a widget representation with additional abilities. Widget editor has:

resize edges and corners,
toolbar with Duplicate and Remove buttons, and drag holder (dotted area).

Default and selected states

Usually w. editor looks like dashed rectangle around widget. When selected it displays resize controls and toolbar.

Properties Panel

This is where you set up all properties of widgets. You see widget's properties when you have it selected. Here you have access to everything widget has.

At top of panel is property search field. It's useful when you work with charts and grids — they have a lot of properties. Below search field is widget card. It contains widget name and logic representation: if you have used widget in logic, you see link with block name, otherwise you have button to abb widget block in Logic Editor.

Properties Panel

Everything below is properties. For your comfort properties are divided by groups. Every widget has next groups:

Layout — widget position and size. Every widget is visual object, every widget has size and position.
Container Child — how widget fits in container (Pane). Every widget can be child of Pane widget. This properties don't work for widget on root level (not in any Pane).

Other common groups you can meet:

Main — group for input information. Some widgets need to have something to start. Label needs text, gauge needs value, and so on.
Style — many widgets has something to change appearance: background, font size and color, shadow.

Property Editor

This is a row in panel which is supposed to edit one parameter. Mostly it consist of:

caption, which may have help documentation at tooltip,
input field,
actions menu like set default value, make inport, etc.

Variety of input field

Input field can be very different. Simple text field for string value, checkbox for boolean, dropdown for options.

Layout properties additionally have checkbox: it makes Visualytik ignore value, make it "auto". Also, it has units dropdown (%, px, in, etc.).

Some style properties and other ones are complex: instead of one value they have set of nested properties. It has preview display, which opens nested properties by click.

Box shadow property editor

If you take a look at Gauge widget, you will see it has zones property, which is a list of complex values. That editor has buttons to add value, remove it, and property rows are collapsible as other complex properties.

List property editor

Actions

Set default action means you will set initial value to property. Mostly it's some specific value, like "label" or 12 (font-size). "Make inport" means you can make property visible in page's logic to have way to set value programmatically.

Style properties has additional action like "clear". It behaves like auto checkbox in layout properties. Such property haven't any value at all and widget gets value from parent or applied styles. If style property has specific value it can't get value from external style.

Other properties like Image's src have action "Open editor" opens dialog where you can choose image.

Style Manager

By clicking on "Styles" tab you can switch Properties panel on Styles panel. It allows you manage page's styles.

Style Manager

Page style is not something you can apply to page itself. It just styles by their own. But you can choose widget (like label, button, image) and apply style in classes property. That way you can share one style between many widgets, and you don't have to copy style properties between widgets.

At top of panel is style chooser. Where you can switch between already created styles. Button "Apply" bellow saves changes for current style. Bellow are property editors, preview display with text and final css rules. At the end are delete and create style buttons.

Outline

Outline helps with two tasks: reorder widgets and navigate through nesting. It's more helpful when you have fullbleed widgets and other absolute positioned ones, which overlaps and it's hard to select exactly widget you need.

Outline

Top toolbar contains buttons:

move to top — reorder widget to be first in his container: pane or page itself,
move forward — swaps selected widget and next one closest to first position,
move backward — same as previous one, just opposite direction,
move to bottom — inserts selected widget to be last in container,
expand all — expands all panes in Outline to make visible all widgets in each pane,

Last button is more one, opens new controls:

filter — to filter widgets by name, case-sensivity,
select children — selects first child for selected pane.

Pane with children

Drag and drop in Outline

You can reorder widgets with mouse making drag-n-drop actions. Moreover, it's only way to get label from Pane with D&D action in Outline or in Layout Area.

D&D actions behave different with empty and filled panes. When you drag widget over empty pane drop result depends on where is mouse cursor. Drop over left half of pane inserts widget after pane. Drop over right half — adds widget to pane.

Adding widget to Pane

Pane with one or more widget hasn't such behavior. You just choose before which widget to insert.



The Logic Editor

This is the second editor you will often use. On that screen you will program page to do work to load data, change queries, alter data display and so on. Logic editor has dark theme and simpler interface to compare with Gui Editor.

Logic Editor Screen

Logic Editor is a simple IDE for flow-based programming. Yes, to make widgets work you write a program here. It makes editing a bit harder to understand, but it gives you rich possibilities in developing page in return. Something like that you could see in Niagara Ax Workbench and in Sedona Framework.

Logic program consist of blocks and connections. Each block has ports. You set block parameters at inports, and it returns some result at outport. To pass data between blocks you connect outport of one block with inport of another. Also, you can set inport value directly. That's all you need to understand terms of that section. To learn more about how to develop pages read further articles.

Logic Editor Toolbar

Logic Editor Toolbar

Top toolbar contains same state buttons like in Gui tab, but there is few new buttons:

Add note — adds new note among blocks. With notes you can place descriptions for what blocks around do.
Autolayout — is a function to reorder all blocks to have neat schema. That action can move notes at wrong places.
Mass Link — saves your time when you need to connect many blocks with one.
Switch selected — selects blocks connections.
Duplicate... — duplicate wizard with rich set of additional options.

Let's learn how works some of that functions.

Autolayout

That function moves all nodes to form readable and compact layout of blocks depends on connections. It uses KIELER's automatic layout algorithms. To get understand just take to result.
Was this article helpful?
Cancel
Thank you!