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:
- 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.
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:
- 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.
2.1 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.
After state controls is basic widgets. If they are all not fit at shelf, there is scrolling buttons to see them.
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.
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:
- Deselect button which clears selection.
- Duplicate button.
- Breadcrumbs itself.
- Delete button, deletes selected.
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:
- 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.
If user have other libraries, they would be listed in tabs too. Read more at Using Smart Widgets and libraries.
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).
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:
- 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.
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.
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.
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:
- 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.
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:
- Add note — adds new note among blocks. With notes you can place descriptions for what blocks around do. Read more at 3.3 section.
- 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.
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.
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.
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 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
⌘+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:
- Widgets contains blocks for widgets we have created at Gui tab.
- Components contains logic sub-program from user's Library.
- Core tab contains blocks which don't use special types, calls to server, this is the most simple blocks.
- Math — contains mathematical functions blocks.
- Data — the most interested tab, they we can get data from SkySpark, subscribe to points and so on.
- Axon — contains helpers to create calls for SkySpark.
- Grid — blocks to retrieve values from grids (which we get from calls to SkySpark).
To understand what can do each block at regular collections read Logic Programming Reference, and how to use it together — at pages tutorials.
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.
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.
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.
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:
- click any block to select it only,
- drag selection rectangle,
- hold Ctrl or ⌘ button and click few blocks to select all of them.
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.
Like in Gui, there are two types of that kind selection: you can move mouse from right-to-left or left-to-right:
- left-to-right — selects only blocks that entirely inside selection rect,
- right-to-left — selects all crossed blocks.
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.
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.
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.
To remove one block you can select one and press
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+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.
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 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.
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.
To remove one or few connections you need to select it and press
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.
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.
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:
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.
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.
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:
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.
|Zoom||- (wheel or v. scroll)|
|Select||⌘ + click, drag|
|Move block||- (drag)|