Flex Repeater performance

Ignition Early Access
1

Within a Perspective project we have a number flex repeaters and have found that the delay in displaying the contents can be longer than a good customer experience demands. Typically, a repeater view will have a few strings of text, some icons with path and visibility control and a small photo (50Kb ish). In some cases we need to show 150+ of these in the repeater and this can take 15 seconds on a PC browser with very little being displayed until 10seconds or more, on a iPhone browser, it fails and just repeatedly cycles to the Ignition loading screen.

We have tried sending the JSON as just a single index parameter to the view, letting the view collect the rest of the data individually, sending all the data excluding the photo and the entire dataset (as JSON) including the photo.

We have also collected and preloaded the dataset in the main view and sent it to the repeater using a button. Performance differs slightly but only by a second or two.

We can overcome the issue by limiting the number of views, 20 seems good and then allowing the user to add more as they require but it’s not ideal.

Is there any advice on improving the performance, we can’t do much with the users browsers but we have full control of the server and Ignition instance?

2

Hi Chris,

What sort of display are you trying to achieve using the flex repeater? Are you able to post any images of the current display? (if possible, a project would greatly help). As an alternative, there’s also the Table component that supports subviewing on each row. https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Table.

Thanks,
Alen

3

Hi ayu

Thanks for the info and sorry for the delay in replying, We think we have found the main reason for poor performance.

It would seem that for each and every view, and that includes each view within a flex repeater, if icons are used then the entire icon library is downloaded. So, if a view has a single material icon used then each view will download the material icon SVG that is 286KB, if there are 100 views that’s 28MB

We have made a new icon library using just the icons we need and this is just 2KB, as you can imagine, things are a bit quicker and more responsive.

6 Likes
4

How did you go about making your own icon library? Running in to something similar.

5

amarks

typically, the icon libraries can be found at “C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons”

the libraies are svg files and internally they look like this.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="brightness_3">
			<path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.06 7 9.54 0 4.48-2.94 8.27-7 9.54.95.3 1.95.46 3 .46 5.52 0 10-4.48 10-10S14.52 2 9 2z" />
		</g>
	</svg>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="wb_sunny">
			<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" />
		</g>
	</svg>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="check">
			<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
		</g>
	</svg>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="cancel">
			<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" />
		</g>
	</svg>
</svg>

This has four icons, the format is quite straightforward and easily modified or easy to create from scratch, you can take icons from other libraries and create your own so that you are only using what you need.