Loading Performance Problems with Perspective bindings

[danielps1818]

Hi!
I'm having performance problems with some binding on some gauges.

I belive that the code that is causing my problems is this one:

	color = system.util.jsonDecode(value.get("color"))
	low = color[0]
	med = color[1]
	good = color[2]

	current = value.get("value")

	if current < int(med.keys()[0]):
		return low.values()[0]
	elif current < int(good.keys()[0]):
		return med.values()[0]
	else:
		return good.values()[0]

The value is a expression structure that comes from 2 custom properties that both are indirect tag paths.
The color tag is an array like this: [{"0":"#cf7911"},{"75":"#ffff00"},{"90":"#58d68d"}].
The value tag is simply a integer value (0-100).

When removing this 4 gauges the page loads in 1-2 seconds, if not removed, it takes about 4-5 seconds.

How could I improve this?
Any help is appreciatted.

If you wanna know about the objective of the code here.

[dkhayes117]

@danielps1818

[{"0":"#cf7911"},{"75":"#ffff00"},{"90":"#58d68d"}]

Numbers are not valid keys for JSON/JS, I would restructure the object like this

[
  {
    "value": 0,
    "color": "#cf7911"
  },
  {
    "value": 75,
    "color": "#ffff00"
  },
  {
    "value": 90,
    "color": "#58d68d"
  }
]

You can use an expression instead of firing up a script

case(True,
	{this.props.value} >= {this.custom.colors[2].value}, {this.custom.colors[2].color},
	{this.props.value} >= {this.custom.colors[1].value}, {this.custom.colors[1].color},
	{this.custom.colors[0].color}
)

[bkarabinchak.psi]

Clever case statement. Good general rule of thumb as @dkhayes117 is hinting at here -expressions are always preferably for speed/effeciency over scripting whenever feasible.

[pturmel]

Do not use system.util.jsonDecode() in performance critical scripts. You should use a Document tag, not a string. Then the actual binding can be an expression instead of a script.

[danielps1818]

Seems to be that the problem was "bigger" than we thought... Is not the script, static simple gauges take about 5 seconds to load.

Help for the feedback guys!
But I had to open a ticket to get it resolved.

[ryan.white]

@danielps1818

static simple gauges take about 5 seconds to load.

The static gauges are a bit notorious for being slow, to the point that many use a script transform on an embedded svg instead.

Perspective, faster page

Okay, I had a bit of free time today, so here is a complete SVG solution. You could do the Label as SVG text as well, or a gauge needle if you wanted, I haven't gone that far. Just a little example of the power of using the Ignition Designer to add SVG elements. I didn't include the label for the example. Note: All of this (outside of the calculations needed to find the points for the shape) was done inside of the designer (yes I can be somewhat of a masochist at times. ). First a s…

I would recommend making the script part of the transform a function in the project library for easy re-use(and to avoid having to import inside of a function).

[lrose]

For what it's worth, I would probably do this differently these days. Utilizing more CSS. Probably wouldn't even need a script transform. I can look into that if needed/wanted.

Something more along the lines of what I did in this thread.

How to add animation by HTML/CSS scripts in Perspective?

Okay, so it took me longer than I wanted (my laptop died), but I finally did get around to completing this, and I have to say I'm pretty pleased with the result. This was a fun exercise and I learned something good along the way. I will give you a disclaimer though, other than a rough idea of what an Azimuth Propeller is, I don't know much else. So for instance, I have no idea what the yellow triangle is supposed to indicate and so I didn't add it. I made some assumptions on how I think the re…

[danielps1818]

Hi guys!

I had a not so great morning. It looked like we have a big problem, and doing tests the only thing that doesn't work are the simple gauges.

I had done test with a lot of different components and configurations, and the only thing that takes the longest to load are the gauges. Those not only take about 4-5 seconds to load, but also delay the other components in the view.

I replace those with other components and the view load in less than a second. Makes no sense to me.

@lrose I'm gonna try to get a simple gauge using css and with the help of your post. I'll tell you how that goes...

Thanks to everyone that helped me!

[danielps1818]

I ended up using this:

Ignition Exchange