Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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 ToolbarImage RemovedImage Added

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

User interface. Gui tabImage RemovedImage Added


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

...

  • 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 ToolbarImage RemovedImage Added


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

...

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 controlsImage RemovedImage Added

2.2 Breadcrumbs

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

Breadcrumbs without selectionImage RemovedImage Added

If something is selected, Breadcrumbs show you next controls:

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

Breadcrumps with selectionImage RemovedImage Added

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 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 AreaImage RemovedImage Added

Add Widget dialog

...

  • 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 dialogImage RemovedImage Added

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

...

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


Default and selected statesImage RemovedImage Added

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

...

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 PanelImage RemovedImage Added

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

...

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 editorImage RemovedImage Added

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 editorImage RemovedImage Added

Actions on property

...

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

Style ManagerImage RemovedImage Added

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.

...

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.

OutlineImage RemovedImage Added

Top toolbar contains buttons:

...

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

Pane with childrenImage RemovedImage Added

Drag and drop in Outline

...

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 PaneImage RemovedImage Added

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

Prepend label4Image RemovedImage Added

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 ScreenImage RemovedImage Added

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.

Logic partsImage RemovedImage Added

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

Logic Editor ToolbarImage RemovedImage Added

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

...

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.

Layout beforeImage RemovedImage Added

Autolayout resultImage RemovedImage Added


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

...

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

Select blocks to linkImage RemovedImage Added

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.

Choose direction and sourceImage RemovedImage Added


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

Choose portsImage RemovedImage Added

And result will be like that.

New connectionsImage RemovedImage Added

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

...

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.


Selected connectionsImage RemovedImage Added

Duplicate wizard

...

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.

Duplicate wizardImage RemovedImage Added

First line allows you to set count of new duplicates.

...

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:

Free space option for duplicatesImage RemovedImage Added

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.

...

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.

Initial blocks rowImage RemovedImage Added

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.

Copied external_connectionsImage RemovedImage Added


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

...

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.

Add Block dialogImage RemovedImage Added


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 move block just drag where you need it. To drag few blocks select it and drag selection box, picking it by any free point.

Dragging selected blocksImage RemovedImage Added


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

...

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.

Delete option at context menuImage RemovedImage Added

Copy and paste

...

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


Few copies stacked besideImage RemovedImage Added

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

Copy and paste in context menuImage RemovedImage Added

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

...

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.


Dragging new connectionImage RemovedImage Added

Other way to create connection is

...

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.


Image RemovedImage Added

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.

...

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

Connection's context menuImage RemovedImage Added

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:

Image RemovedImage Added

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.

...

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

Inport with valueImage RemovedImage Added

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:

Big text inputImage RemovedImage Added

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

...

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.

Link to widgetImage RemovedImage Added

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:

Image RemovedImage Added

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.

...