In this article I'll introduce you widgets you can use for your great pages. You'll know what you can do with it and how to use it.

Widget is a basic elements page consist, it's like bricks. Visualytik has a lot of widgets for any purpose.

Basic widgets

At first let me show you widgets you will use mostly. They are pretty simple.

Label displays text. The most used widget. Any text you display with label. Other widgets can't display text (except button, of course). Also, Label can be used as styled block without text. In Getting started we made page using labels only. And label can be link.
Button is supposed to be clicked by user. Button fires event and you can run any action by that event: change label's text, make one widget invisible, change data call for charts, write new value to point or navigates by link.
Image has only goal — show image. Icons, logos, static graphics and so on. Nothing special here. Also, you can do tw-states graphics, for closed-opened valve, but you need to program it a bit.
Pane is container for widgets, is only widget to construct page layout. Layouting can be not easy, you'll learn it in details in next article.

Data widgets

We already know Label, it is simple data display. But we have more data widgets.

Gauge — is just gauge, good for temperature or pressure. You can make few colored zones to attract attention which value is too bad.
HeatMap is not so simple widget. Shortly, you can draw heatmap for your floor, but that would look better if you have a lot of temperature points. You can read how to work with HeatMap in special tutorial.

Graphics widgets

That widgets allow you make animated graphics. You can make fan, which is rotating, Or on, if it stopped. That can be damper, closed or opened in 0-100% range. Anything. And it's better to convert fans and damper into Smart Widgets, so you can reuse fans in different pages and save your time.

AnalogImage is better for damper. You set list of images, set value and widget shows you closest image to indicate value. For example, you have value in range 0%-100%, 7 images, so widget takes value, let's say 45%, and calculates closet image, that would be image 3.
AnimatedImage is good for fans. You set animations frames and bool value: on or off. If on — widget shows frames in circle. When off — fust first frame.

Interactive widgets

That widgets can serve two purposes: to change something on the page (show or hide smth, switch mode, resize); to commit new data (write point value, change history call).

DatePicker can be used to change history call. For instance, initially charts can shows today data, but user can pick other date, and charts show new data.
NumberInput is a text field and apply button, entered value fires up only after user click button. The widget can write new temperature for point, or change HeatMap's settings, or set rollup interval for history call.
RadioButton allows you give user choice. For example, user can choose type of rollup function for history call. It's possible to use it to write enum values to point. RadioButton fires event when is checked so it's easy to program.
Slider is almost as good as NumberInput, but has min and max values. It fires event after user release it.
ToggleButton is good to change page mode. For instance, you could make page to show live data or history fro specified time, and user can switch behavior with ToggleButton.

Rich data widgets

This is great widgets, they are not so easy to work with, but they paid back with good feature list. We will introduce it in details in further articles.

Charts can show few plots with different types: columns, bool values, usual solid lines, different axis, different types of chart: 2d, 3d, pie and so on. Also two Charts widgets can interact each other.
Grid is not so easy too. It has groups, have point write feature.

Smart Widgets

The best part of widgets is you can build your own smart widgets by combining simple widgets and program it interactions. You can make your libraries of smart widgets and use it in other projects.


So, that's all widgets we have so far. I guess you understand now what you can do with them. Good luck!
Was this article helpful?
Thank you!