Let's make something useful with heatmap. It has settings we can change at runtime from logic. It is min and max, range and opacity. Min and max is a range where point's value is visible with some color. Value below Min threshold produces invisible heat spot, and values above Max produces maximum hot one. Range means spot size, opacity — how much it's not transparent.

We will expose that properties to user interface, so user can adjust settings. We will get something like image below.

Setting up heatmap

At first, we need heatmap points to show curVals. Create new page and go to Page Editor. Add HeatMap widget and two HeatMapPoint widgets in GUI tab.

And connect two widgets to HeatMap to register it.

Now, let's bind some real data to heatmap widgets. We will make page context-sensitive and attach to equip. That is standart logic pattern and we will not consider it now. So, find two points. First one is discharge, air, temp, sensor. Second one — zoneairtempsensor. Connect points to HeatMapPoint widgets, you should get something like below.

And we will add PointDisplay widgets above HeatMapPoint's ones to show point's names and values. Go back to GUI tab and add two PointDisplay widgets:

Go back to Logic tab. We need to set point id for that widgets. Add widgets in Logic and connect Record Id to each of them. Now logic would look like:

Save page.

Making HeatMap Controller

Now we will create custom component to control HeatMap widget. We could do controls right in the page, but that would be messy. Also I have already made that component for you, you can just import it.

Component is pretty easy. It has only two numeric inputs to set Min and Max, and two sliders to set Range and Opacity. It looks like:

At first create new library (or choose existed one). And create new component, call it "HeatMap Controls". Now you can create component by you own, or import component from text HeatMap-Controls.

Save component and go back to page editor.

Using HeatMap Controls

Now we are almost done. All we need it connect controls and HeatMap widget. Add component from prev step on the page and go into logic. Add controls widget in logic area and bind outports with HeatMap inports:

And out page is ready to use. Now you need to attach page to some equip with needed points and take a look how it works.


  • No labels