Introduction

Here I'll introduce you Visualytik, what can it do, we create first page and show some data on it.

But at first you need to check you have SkySpark installed and licensed, and Visualytik (extension pod for SkySpark) — too. Also, you need to have any SkySpark project enabled in Visualytik settings. If something is not set up we have instructions for you here.

Run Visualytik
To run visualytik go to project's home page and click Visualytik Icon. You'll see logo with preloader and then after that — Visualytik itself. If you see error message, try to check setup tutorial first.

Main goal of Visualytik

Visualytik is app to create and display dashboards for your data. Dashboards can contain any graphics, show live data as text, gauges, and grids, show histories in grid and charts, support rich interactions with buttons, sliders, inputs and so on. Moreover, Visualytik has flow-based programming, so you can make almost anything in your dashboards.

Visualytik at glance

Visualytik has two areas: main area and side bar. At first time you run Visualytik main area will be empty. It's supposed to show you default dashboard but we haven't any yet. Sidebar shows project's navigation tree and two main applications.



Main area

Visualytik is supposed to show you dashboards for your project. Dashboard is implemented by what we call "page". It's like html page contains widgets to visualise data. It could be grids, charts, gauges, text widgets, and also buttons and switches to control what you see and even update data. So, that pages are supposed to be shown in main area.

Also, in main area will be all other tools: for create and editor pages and to work with libraries of components, and application settings. How to create pages you'll see it in action a bit later.

Sidebar and navigation

Except few buttons main goal of sidebar is navigation in project. In SkySpark you have sites, equips, points and other items. And in sidebar you can see tree structure of current project, it is Navigation Tree.

Sidebar
What means navigation? In previous section you have red about pages — a dashboards, and here — about navigation tree. For each navigation node you can attach page. You can create page for each equip or site or other node; you can use one page for few nodes; and for sure one navigation node c an be attached to few pages.

You wanna see how RTU-1 is doing. You just choose your site, click on RTU-1 node and see in main area page with graphics, charts and all information you need. Wanna check how it was doing yesterday? You may turn Time Machine feature on.

All that possible to create in Page Editor. So, let's create first page.

First page

Before move on, ensure you have project and admin rights in SkySpark. If you still haven't any project, you can generate Demo project in SkySpark.

We will create page to show site's power consumption live data.

At first we will create page in Pages Manager, app where you can create, delete and attach pages to navigation nodes. Then we edit page in Page Editor to create ui and program it to show data. And then in Pages Manager we will attach page to sites, and check how it works.

Creating page
Open Pages Manager by click on "pen" button and create new page, like shown below.



Set page name like "Power consumption" and save it. Then click "Edit" button to open page in Page Editor.



Adding UI
Now we are in Page Editor. This is a most complicated part of Visualytik. Editor has three tabs: logic, gui and preview, gui is default tab, right now you are here.

In gui tab you fill page with widgets which should display data, graphics or be just part of design layout. In logic tab you edit program to make widgets work: show data, send data, change work mode and so on. In preview tab you can check how it works.

Now we are going to fill page with widgets and bind data to them. We make UI and add little program, make page reusable, work with any site with energy site meter.

Making caption
At first we need big caption. Add new label: click red "plus" button and choose "widgets/Label" row. Set text "Power Consumption", set label's font size like 25 in properties panel and draw right label's edge to adjust width.



Making power display
Now we add labels to display site name and kWh value. Like before, add two new labels and place it under the first one. You can change label positions by dragging it. Also it's convenient to set text for label to describe it purpose.



To display realtime data we need to get point from SkySpark and bind it to labels. To do that find kWh point in Navigation Tree, then drag point node over value label.



And Binding Wizard appears. This is gui-way to bind point to widget. In the end the dialog just create little program which you can see in Logic Editor.

At first screen you asked about do you want to bind point by id or by tags. First option means page can display value of that point only. Second option means we can find any point with same tags and it can be point from any site. This is how we make one page work for all sites. So, choose second option.

First screen

On second screen we're choosing tags. Here you need to really know which tags you need. If you set tags wrong, you can find wrong point, or loose point on some site. To ensure you made good choice test tags in SkySpark Folio application. For our example good choice is sensor, siteMeter, energy.

Second screen

On the last screen we are choosing property we bind point's value to. We need "text" option, which is already preselected, so just click Accept button. And after that you will be moved on Logic screen, where we will finish to edit our page.



Programing
We are in Logic Editor. We'll get understanding of how program works, and edit it, make other Label display site name.

Learning what program is doing

Now you should see something like that:



Make zoom-out to see whole logic at this page. You can do that by mouse wheel or use vertical scrolling from touchpad. You can pan view with mouse and pressed shift button. And our program looks like:

Our program

Yes, this is the program, made of blocks, modern flow-based programming. This blocks was created by Binding Wizard, and page hasn't any other blocks yet. Let me introduce you this blocks.

First block is NavRecordSearcher. It searches one record(site, point, everything) in SkySpark by tags. Now it uses tags we have picked up in Binding Wizard: sensor, siteMeter, energy. For usual Demo project there is 4 points with that tags, and block takes first one. But if context is provided the block can find exactly point we need. For sure we will use that feature, but I'll explain it later. As result the block return record id or record itself.

Second block RecordWatcher gets record id and subscribe to it's changes. Every moment point get new curVal value, new name or something else that block gets updated version of point and pass it to next block.

Third block RecordToTags returns some point's field value. Records are different in SkySpark, and may be we want to display curVal, maybe — minValue, maybe — navName. So we need specify what field we need pass to Label.

Fourth block HVal gets number in our case (645kWh e.g.) and returns only digits. If we want to show units too — we can remove HVal block and connect RecordToTags directly to Label block.

Fifth block Label represents label widget itself, so it means we just pass value to text property of the widget. You may notice there is not other widgets blocks. This is made in order to keep logic program cleaner. You always may add widgets blocks here in different ways, you'll see.

You know, let's make Label display digits with units. Click HVal block to select it and press backspace or delete button on keyboard. Then draw new line from RecordToTags out1 port to Label's text one.

Shorter program

Yes, now it's better.

Adding site name
To display site name we need to add other label. Press big circle "+" button at top-right corner and click "site name" label to add it.

Adding site name Label

Drag new block somewhere under first label. Now we need to get site name. In some case we would take other NavRecordSearcher to get site record, then — extract site name. But there is simpler way. Point record already has siteRef field with site id and name. To get it set "siteRef" value for tag2 RecordToTags block's field.

We need extract site name from siteRef to display good looking description. Add new block from Data group: open Add Block Dialog, click Data tab, find and click HRef element.

Adding HRef block

We almost finished it. Connect RecordToTags out2 port with HRef in one and HRef dis — with second label text port. And your program should looks like below:

Final version

Checking results
Let's save our page (ctrl+s or Save button) and check it at preview, clicked by PREVIEW button. And you would see page like below.

Preview page

It's working! Great! As you could notice, this is not Carytown's point. That's alright: we're searching point by tags and that could be point from any site. We will fix it at next step.

Attaching page
Now we are going to attach the page to Navigation nodes (to sites) and then page should work properly.

Don't forget save your page!

Go to Pages Manager (click pen-looking button at left sidebar) and click Assign button (plus in circle).



Here it a lot of stuff. In left column you can see sites and equips of your project. We can assign page to any of them. But we need sites only. Uncheck Equips box, check Select All box and press ASSIGN button. Then close dialog.

Assigning page

Navigation

So, that's all, we made everything. Page is created and attached, now we can check power consumption for every site.

Click on first site. You will see now page in main area, and label will show you correct site name. Check other sites too!

Page at navigation

That's is not all navigation you can do. You can attach few pages on one site or equip, you will can switch pages on top panel. For example first page can show you charts and graphics, other page can show live data and graphics.

Other feature you can make links in one page to another, build your own navigation schema. For example, one page can show you floor ducts plan, and by click on button you can see graphics of one air unit or switch between floors, or go back on site level.

Conclusion
So, we have a fast introducing to how to work with Visualytik. Now you know how to create pages, how to add widgets and display point's data, and how to attach page to navigation nodes. We made basic page, but in future you can learn how to build really complex pages, with charts, links, interactive modes, point overriding and so on.

We have seen almost all Visualytik's screens (except Library Editor), so you have a good picture of what Visualytik is.

Thank you!
Was this article helpful?
Thank you!