In this article 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.

That article is not tutorial and main goal here is not introduce to page editing but get you interface reference.

1. The Interface Toolbar

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

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.

2. The Gui Editor


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

2.1 Shelf Toolbar

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


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:

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.

2.2 Breadcrumbs

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

If something is selected, Breadcrumbs show you next controls:

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.

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

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:


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:


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

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

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

Other common groups you can meet:

Property Editor

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

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.

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.

Actions on property

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.

2.5 Style Manager

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

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.

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

Top toolbar contains buttons:

Last button is more one, opens new controls:

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.

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

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

Section 3.1 introduces you to logic itself. At section 3.2 you will learn some special functions to work with logic blocks. At section 3.3 you will understand basic blocks editing.

3.1 Logic overview

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.

In that example first block Temp points loads some data, which goes from outport grid to inport grid of second block Point 1 . The second block processes data and fires new out value on port record. Last block Get curVal gets new value and can process data too.

That's all you need to understand terms of that section. To learn more about how to develop pages read further articles.

3.2 Logic Editor Toolbar

Top toolbar contains same state buttons like in Gui Editor (like save, import, undo), but there is few new buttons:

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 a look at result.


Algorithms split blocks by its bonds, split not connected blocks on rows. Each row starts from same x position.

Not any page can benefit from relayouting, so don't use that function all the time. Anyway, you always can undo that action.

Mass Link

That function was designed to connect many widgets to one, to avoid monkey work to make each connection between blocks.

For example, you making page shows RTU's points: temperature set point, return temp, fan running and so on, and you have a switcher to change RTU. To implement that you have some block which know current displaying RTU. And you should pass RTU equip id to point searcher blocks, so they can find temp disparge or fan cmd under that equip.

To do that you need to connect blocks together. Select blocks you need to connect.

And click Mass Link button. In a wizard choose direction "one to many", because we have one source block Equip and many points. And choose Equip as source block in list below.


On next screen choose source outport, this is record in our case, and context for targets. And click apply.

And result will be like that.

It was more faster and easier than draw each connection. Imagine you have 15 blocks to connect instead of 4 blocks here.

Switch selected

This is rarely used but handy function, works good in cases like we have reviewed for Mass Link function. Let's take same case. You have connected few points blocks connected to Equip, and now you need to replace Equip block with other one.

Frankly, all you need to do in that case is just remove Equip block and all connections would be deleted too. But let's imagine we want to keep that block for other purposes and just remove connections from it.

That's easy: just select all that blocks and click button "Switch selected" and toy get selected connections only. All you need to do after that — press "delete" button on keyboard.


Duplicate wizard

Duplicate wizard provides you rich options for duplications blocks: you can manage new blocks names and positions, additionally duplicate external connections and set count of copies.

You can open the dialog with button on the toolbar or with shortcuts Ctrl+Shift+d on Windows or ⌘⇧D on Mac OS, select at least one block before.

First line allows you to set count of new duplicates.

At second line you can choose position of new blocks. First option — beside original blocks: new block would be at left bottom corner original one, second new — below first one, making a column.

Second option — free space. It that case new blocks would be at bottom of all logic graph, and keep same relative positions to each other:

Fourth parameter is "Keep labels same". If it unchecked new blocks take names like originals have, but take or increase number on the end. "Add" becomes "Add2", "Add2" becomes "Add3". If parameter is checked new blocks keep same name as original.

Name here is just label for block, system don't mess it up, don't worry about that.

Copy external connections

This is a nice feature when you need to duplicate few connected blocks. Take a look at next example: I have loaded a grid with points and need extract some ones. I have already done work for one point and need to repeat that.

I need to select Point 1 and Get curVal blocks, open duplicate dialog and choose "Copy external connections". And I have it. All I need now is to change index inport value for new points blocks.


That way you don't need Mass Link feature, which could take more actions to get job done.

Default duplicate action

You can duplicate blocks without using Duplicate dialog, using ctrl+d or ⌘+d shortcuts. In that case new blocks get updated name and placed beside.

3.3 Logic Area

Logic area is the black canvas you have seen above, where you create page's internal logic, a program. To edit blocks and connections mostly you will use mouse or touchpad, for some functions you would like to use keyboard.

Unlike the Gui Editor, there is context menu, which allows you make actions without holding mouse buttons pressed, which enhances accessibility.

Add new block

You can add block with Add Block dialog. To open it click red circle "plus" button, click "add" button at toolbar or press Ctrl+A (⌘A) on keyboard.


Dialog has few tabs, which contain different items. Tabs except two first contains usual blocks to build logic, grouped by category. It is regular collections of blocks. First two tabs contains different kind of blocks and they both can be empty. Let's overview all the tabs:

To understand what can do each block at regular collections read Logic Programming Reference, and how to use it together — at pages tutorials.

Widgets

If you have added widgets or smart widgets at Gui tab, you should see here some items, one for each widget. That blocks represent widgets in logic, so you can read or calculate some value and pass it to widget's property.

Once you have added widget's block at canvas, it disappear from the dialog, meaning you can't have two blocks for the same widget.

The dialog generate name for each widget, including widget's type and may be additional name or number. For example, for label with caption "Site Name" it would be Label1 "Site Name" at dialog, and added block would have SiteNameLabel1 name when added to canvas. It helps a lot, so it's recommended to set meaningful captions for all labels and buttons when you add it at Gui Editor.

Components

In Visualytik you have libraries. This is a smart widgets and components you have additionally to bundled widgets and blocks. They are shareable, you can create you library and copy it to another instance of Visualytik (on different project or machine).

Component is like page's logic, just hasn't any GUI and has inports and outports, so you can provide some input to component and get output. In that way component looks like and works as any other block.

Read more about libraries and components at Library tutorials.

Navigation

To navigate in the area you can pan and zoom canvas, both are possible with mouse and touchpad. To pan hold shift key(⇧) and drag canvas with mouse or touchpad. To zoom use mouse wheel or vertical scroll gesture on touchpad.

Selecting

To edit one block or few blocks at one time you need to select it. You can do that in few ways, all with mouse:

When you have block selected, it's icon looks darker, and other blocks look dim. When you have selected few blocks, selection box appears around it.

To deselect blocks just click on free space at canvas.

Drag selection

Like in Gui, there are two types of that kind selection: you can move mouse from right-to-left or left-to-right:

Select connections

You can't select connections with selection rect, but you can by click on it. If you need to select few, keep Ctrl or ⌘ key pressed while you click other connection. Other way to select connections is Switch selected button at toolbar, read more at 3.2 section.

Once you have connection selected only can only delete it, with delete button or using context menu.

Edit blocks

At logic area you can do only two things with block: move or remove it. Block's properties can be edited at Properties Panel, section 3.4.

Move blocks

To move block just drag where you need it. To drag few blocks select it and drag selection box, picking it by any free point.


While you have selected blocks you still can drag one block.

Remove blocks

To remove one block you can select one and press delete or backspace button. To remove few blocks select it and press same key.

Other option is use context menu. Click right mouse button over any block and you will see circle context menu with delete option. That way you can't remove few blocks.

Copy and paste

You can copy and paste blocks with keys Ctrl+C and Ctrl+V (⌘С and ⌘V). You can choose to copy blocks only, connections and initial values would be copied if blocks has it.

When you copy only one block, no connection would be copied. When you copy two blocks connected together, connection would be copied too.

All copied blocks pasted beside original ones. When you paste same blocks few times, each new copy would be shifted to right-down direction.


Other option to make copy is context menu, where is copy and paste commands.

Currently you can't copy blocks between two pages or between browsers.

Duplicate blocks

Duplication works exactly like copy-paste mechanism but triggers for one shortcut: Ctrl+D (⌘D), what makes it more convenient to use. Using shortcut with Shift (⌘⇧D) opens Duplicate dialog, which has a lot of additional functions for duplication. Read more at 3.2 section.

Connections

Connections allow you pass data between blocks. Each connection can connect one outport and one inport. You can't have same connections, which connect same ports of same blocks.

Create connection

To create connection press mouse button on block's port and start drag. A white line will appear. Drag line to another block and release mouse button over desired port. Connection is created.


Other way to create connection is

Also you can generate many connections with Mass Link dialog, read at 3.2 section.

Create connection, method two

That method is more accessible as you don't need to hold mouse buttons pressed.

Call block's context menu, click with right mouse button over block (but not over connection or port, they have different menu). Around menu you see ports: inports at the left, and outports at right.


Click on desired port (menu will go away) and point mouse to desired target port of other block. While you move mouse connection is stick to it like you drag it. Click on target port and connection is created.

Remove connection

To remove one or few connections you need to select it and press delete or backspace button.

You can also delete one connection from it's context menu.

3.4 Properties panel

Properties panel allows you edit block's properties, name and read documentation. When no block selected panel looks empty. This is how panel looks like when you select one block:

At first row is block name. Below is block type and documentation. First name in type is block collection (like data, grid, core, widget), second - exactly type name.

Below name and type is documentation — short text to explain how to use block.

Remaining space is occupied by block's inports. Currently there is not any outports at panel, we have nothing to do with them.

Rename block

To rename block lick on block name at top of panel, it would become text field and type desired name. It applies all time you edit it and doesn't mean any important for logic work.

Names could be same, but it's not recommended, try keep clear logic code.

Initial values

Each block's inport have default value: nothing. It means block doesn't get any input information and seems have nothing to do (but some have). So, by default each inport would have not value, value editor would be empty.

Block may get input information in two ways: to be connected to other block's outport or to have initial value. When block have initials it can start work.

When inport have initial value, you can see it in text field, and see little caption beside block:

Set initial

To set initial value click inport's text field and type text. Text values can be long, so there is big text field to edit:

Other inports use special dialogs to set value. To open it click [...] button and choose "open editor" in dropdown.

Clear value

To totally remove initial value from inport call inport menu and choose "set default". After that block will loose dash and text beside corresponding inport.

Widget's block

Block representing widget looks a bit different. At first, it has widget link: you can click it and application switches to Gui Editor and selects that widget. That way you can get what a label it is.

Widget's block doesn't have initials, inports here just shows widget's properties, and when you edit inports you change properties. As you can see block hasn't any visible initials:

3.5 Shortcuts

Here is all shortcuts you have in Logic Editor in one table. For brevity, "⌘" means command button on Mac OS and Ctrl on PC, ⌫ — backspace or delete, ⇧ — shift. "-" means you haven't option to do that from keyboard only.

Action

Shortcut

Pan- (⇧+drag)
Zoom- (wheel or v. scroll)
Select⌘ + click, drag
UnselectEsc
Move block- (drag)
Add block⌘A
Delete block⌘⌫
Duplicate block⌘D
Multiple duplicate⌘⇧D
Undo⌘Z
Redo⌘⇧Z