Types of Performance

• Perceived Performance: How long do pages feel to load, our focus
• Responsiveness: How long between user action and result
• Resource Usage: How much RAM or CPU is being used

Fundamental Principles for Improving Perceived Performance

• Reduce amount of data and calculation
• Reduce layout recalculations
• Reduce initial load actions
• Reduce heavyweight components

Reduce Amount of Data and Calculation

Binding Efficiency

Some binding and transform types are more efficient than others. Make sure you choose the correct type intentionally, especially when you can accomplish the same task with a more efficient type.

Binding Ranking (best to worst)

• Direct tag binding
• Indirect tag binding
• runScript() expression
• tag() expression

Transform Efficiency Ranking (best to worst)

• Format transform
• Map transform
• Expression transform
• Script transform (much slower than others)

Note that transforms always add additional processing time, so runScript() can be a faster way to run a Python script compared to script transforms. Also remember that when reading multiple tag values, using separate custom properties with indirect tag bindings is better than trying to read multiple tags using tag().

Query Efficiency

• Always include a range limiter on queries that select from large tables
  • Time-based or count-based
• Avoid polling
  • Use a refresh button that calls refreshBinding() instead
• Use named queries with caching enabled
• Use database tools to troubleshoot query performance
  • For Microsoft SQL, use execution plan monitoring and event tracing
  • For PostgreSQL, use tools like pgwatch, pgdash, and datadog

Scripting Efficiency

• Focus on reducing use of scripting unless necessary
• Don’t sacrifice readability or maintainability for performance
• Combine tag read/write into one bulk call
• Avoid repeating logic in a loop

Reduce Layout Recalculation

The browser performs reflow operations to set the position and layout of the page. When bindings or scripts alter the layout of your page, this forces the browser to recalculate, which slows down your page. Avoid unnecessary use of bindings that alter page layout, such as:

• Binding that sets the basis property
• Binding that sets the display property
• Binding that sets the instances property of a flex repeater directly
• Binding that alters margin, padding, or border width

Use Persistence to Set Starting Layout

• Change a bound property to “persistent” to save the starting value instead of initializing to null.
• Use persistence to set starting layout.
• Use persistence to avoid red overlays on initial load.

Avoid Excessive Embedded View Nesting

• Avoid nesting more than 3 layers deep
• Pass in tag paths as parameters, then use indirect tag bindings
• Try both with-parent and after-parent loading
• Balance the maintainability of core templates with the performance of fewer nesting layers

Reduce Initial Load Actions

It’s best to limit the amount of actions that your page has to perform when it first loads. The best way to do this is by caching data in tags so it can be calculated on the gateway, instead of the session. This has several key advantages:

• The script only needs to run once on the gateway, instead of once per open session
• The view has instant access to data, so pages load faster
• Scripts run faster in gateway scope

Reduce Use of Heavyweight Components

Some Ignition components import large libraries and can take longer to load the resource. Some key heavy components are the XY Chart, Gauge, and Markdown components. This performance is greatly improved by the use of React 18, introduced in Ignition 8.1.31.

If you have many repeated uses of one item on-screen, you can consider replacing a component with a custom svg. The Ignition exchange has many examples of svg objects to replace Ignition ones.

Slow Example: Built-in Ignition Gauge

Fast Example: DMC’s Lightweight SVG Gauge

Advanced Technique: Analyzing Load Time with Chrome DevTools

Chrome has a built-in DevTools option to help test page responsiveness and loading behavior. This can be used to quantitatively test behavior or compare different variants against each other.

DevTools Basics

• Open your Perspective screen in Chrome and press F12 to open DevTools
• Resize your window to test responsive design across device screen sizes
• Throttle network speeds to simulate a slow connection

How to Open Performance Monitor

1. Open Chrome DevTools
2. Switch the right sidebar to the “Performance” tab
3. Press the circle button to start recording
4. Navigate and perform actions on your page
5. Stop recording

How to Interpret Performance Monitor

How to Hide Loading with Fade-In Animations

Creating a fade-in style can make views feel more premium and hide dreaded pop-in effects. This often feels nicer even when the raw time is longer. Create style classes that animate to change the opacity from 0 to 1, and create multiple classes with different delays.

Fade-in Animation Example

Balance Performance vs Maintainability

Don’t forget that maintainability is even more important than performance. Many performance boosts introduce custom or duplicate code. You should always get user feedback, and THEN consider optimizing.

“Premature optimization is the root of all evil” – Donald Knuth

View or download the complete presentation: Optimizing Load Time in Ignition Perspective

The post DMC Presents at ICC: Optimizing Load Times in Ignition Perspective appeared first on DMC, Inc..

We were excited to share our expertise and hear from others in the community. Below are some notes and takeaways, organized by difficulty of implementation.

Basic

• Avoid nesting embedded views more than three layers deep.
  • For reusable library components, create different versions of the same component without nesting base versions.
  • For buttons, consider using a style class to gain consistency instead of an embedded view.
• Avoid runScript expressions. Call scripts in other ways instead.
• Always include a range limiter on queries that select from large tables.
• Reduce repeated usage of heavyweight components like the XY chart.
• Understand when production environments can be slower than development:
  • HMI/tablet is slower than engineering PC
  • More clients at one time
  • More data in historical records

Intermediate

• If a data script does not depend on user input, move it to a cyclically running gateway script, and store the result as a tag. This reduces performance load for multiple clients and has the added benefit of being visible from gateway diagnostics scripts.
• Use Chrome DevTools (Ctrl+Shift+i) to simulate resizing a window or throttling load speeds.
• Avoid cascading bindings that trigger and retrigger when parameters change: instead, package into a single binding or script.
• Use expression structures instead of separate single expressions when multiple properties need to retrigger a binding.
• Manually trigger updates using refreshBinding() instead of setting polling query bindings.
• Use messages, property change scripts, and events in place of binding script transforms. This benefits visibility and logging capabilities.

Advanced

• For high numbers of repeated objects, consider a custom lightweight visualization:
  • Custom SVG-based charts (see our build-a-thon project from last year.)
  • Use the circle or polygon layers in the Map component to display simple zoom/pannable statuses.
• Experiment with viewing and analyzing the DOM (HTML document object model) using Chrome DevTools. Use Lighthouse to analyze load speeds.

Thanks to everyone that participated in ICC this year! We had a blast and will be back in full force next year for ICC 2024!

Learn more about DMC's Ignition programming expertise and contact us for your next project.

The post Optimizing Load Time in Ignition Perspective: Notes from ICC Table Talks appeared first on DMC, Inc..

Although most Ignition functions work the same across Perspective or Vision, there are some necessary adjustments to work better in a web-friendly environment. This multi-part blog will serve as a guide to setting up dynamic Perspective screens that take full advantage of the powerful new features.

In part 3, we created a template view that controls an enable property and shows a numeric tag. In this part, we will go over how to add parameters to your embedded view, then use those parameters to drive indirect tag bindings. We can then use our parametrized template in a flex repeater to maximize our layout efficiency.

Adding View Parameters

First, we will cover how to add a parameter to a view and change the tag binding based on that parameter. My example project has the following tag structure, where each TemperatureZone folder has an Enable tag and OutputTemp tag. We want the parameter to change which temperature zone the view displays.

First, open the flex container template view we created in part 3. Select the view in the project browser, which will open the view properties in the property editor. Press the blue "Add View Parameter" button to create a new param. Change the param name to "TempZone" and set the value to 1.

Next, we are going to adjust the button text to display the name of the current zone. Select the button and add an expression binding to the "text" property. Add the following expression, which will display the parameter value with the Zone prefix:

Indirect Tag Bindings

Next, we will change our temperature tag binding to an indirect tag binding. If you are creating an indirect binding from scratch the method is the same. Select the temperature label and change the tag binding type from Direct to Indirect. Next, delete the "1" index from the tag path (or whatever index distinguishes your tag folders or UDTs).

Place your cursor where you wish to add the indirect reference (where the 1 used to be), then press the property reference button to the right of the tag path entry box. Find the TempZone parameter in the tree and press Ok to insert the TempZone param. The reference is now shown in both the tag path and the reference list. You will know that you've configured the binding correctly when the Binding Preview shows the tag value, not an error.

(Note: Previous guides did not explicitly cover binding the "enable" custom property to the enable tag. This can be accomplished with an indirect tag binding on the custom property. Don't forget to set the bidirectional checkbox so the property can write back to the tag!)

Configuring Embedded View Parameters and Flex Repeaters

Once you have added a parameter to a view, you can add a value to that parameter on any embedded view instances. Select the embedded view, then find "params" in the property editor. Click "Add Object Member", then find TempZone (input) in the parameters list. Once you add that parameter, it will appear in the parameters list and you can edit the value. Try changing the TempZone param to different values to see how the template reacts.

One of the most common ways to embed templates is the flex repeater. This object works like a flex container, but it creates multiple instances of a single specified view. Drag a flex repeater from the toolbox to the main view.

Next, select the flex repeater and change its path property to the path of the template view. Under instances, click "Add Array Element" and add three instances of the template.

The three instances will appear as array objects under the instances property. Each instance has an instanceStyle and instancePosition, but you will need to add the TempZone parameter. Click the grey plus button by the instance number and add TempZone (input) as a parameter.

Change each TempZone parameter to a different index. The objects inside the template will use that parameter value for display (Zone 1, Zone 2, Zone 3) and for their indirect tag bindings (note the different temperature values).

In this guide, we've learned how to create view parameters, use them to drive indirect bindings, and how to use flex repeaters to efficiently copy embedded views. In the next guide, we'll cover a more advanced flex repeater technique to allow for a variable number of instances.

Learn more about DMC's Ignition expertise.  Contact us to get started on your next HMI, SCADA, or MES project.

See other blogs in this series: Creating Dynamic Ignition Perspective Projects
Part 1: Bindings and Transforms
Part 2: Button Event Actions
Part 3: Embedded Views and Flex Containers
Part 4: View Parameters, Indirect Bindings, and Flex Repeaters
Part 5: Flex Repeaters with Variable Number of Instances (coming soon)
Part 6: Changing Colors and Other Properties (coming soon)

The post Creating Dynamic Ignition Perspective Projects, Part 4: Parameters, Indirect Bindings, and Flex Repeaters appeared first on DMC, Inc..

Although most Ignition functions work the same across Perspective or Vision, there are some adjustments to work better in a web-friendly environment. This multi-part blog will serve as a guide to setting up dynamic Perspective screens that take full advantage of the powerful new features.

In the last two blogs, we created a status display to toggle an enable bit and display a numeric value. In this blog, we will combine those objects into an embedded view and use a flex repeater to create a dynamic layout.

Creating a New Flex View

To create a new view, right click "Views" in the Project Browser then click "New View" In the popup. Be sure to change the root container type to "Flex Container". The root container type cannot be changed once the view is created.

Next, select the view in the project browser and resize it using the width and height properties in the property editor. Change the dimensions to 400x100px.

Next, return to the main view and copy the toggle button, enable display, and numeric value display. Paste these three components into the new view's root container.

The three views line up on top of each other in the flex container, which is not what we want. We need to configure the flex container and object position properties to best display our data.

Configuring the Flex Container

The flex container has many different properties that determine how objects are displayed, the first is the direction. Switch this to "row" to change the orientation of the three objects.

Now our objects are in a row, but they are not the correct size. We want the button, enable, and numeric display to take up different amounts of space. Luckily, there are position properties on each object that can achieve this exact behavior.

Select the button object and find the position properties in the property editor. The basis determines how much space the object "wants" to take up. It can be in percent (%) or pixels (px). Set the button basis to 20%, the enable label basis to 30%, and the numeric label to 50%.

The other parameters are shrink, which decides if the object should shrink if there isn't enough space, and grow, which decides if the object should grow to take up unallocated space. We do not need to adjust these.

After adjusting the basis, each object takes up the allotted percentage of space. There is one final tweak: adding a margin to the button so it is spaced away from the edges and other components. 

Select the button and find the "style" property in the property editor. Press the plus button to add a new style entry. Name it "margin" and set the value to 5px. Alternatively, you can click the style card icon button to graphically view and edit style definitions. 

With a margin on the button, our flex container view looks ready to go! All that's left to do is to add it to our main view.

Embedding in Another View

Embedding views within other views is easy. Just find your desired view in the project browser, then drag it into your current view. Alternatively, you can grab an "Embedded View" object from the toolbox, then set the path parameter to your view's path. The embedded view now acts as a singular object.

In this blog, we learned how to create an embedded view template and add it to another view. In the next blog, we will add parameters to this template so we can create multiple instances to get data from different sources!

Learn more about DMC's Ignition expertise.  Contact us to get started on your next HMI, SCADA, or MES project.

See other blogs in this series: Creating Dynamic Ignition Perspective Projects
Part 1: Bindings and Transforms
Part 2: Button Event Actions
Part 3: Embedded Views and Flex Containers
Part 4: View Parameters, Indirect Bindings, and Flex Repeaters
Part 5: Flex Repeaters with Variable Number of Instances (coming soon)
Part 6: Changing Colors and Other Properties (coming soon)

The post Creating Dynamic Ignition Perspective Projects, Part 3: Embedded Views and Flex Containers appeared first on DMC, Inc..

Although most Ignition functions work the same across Perspective or Vision, there are some adjustments to work better in a web-friendly environment. This multi-part blog will serve as a guide to setting up dynamic Perspective screens that take full advantage of its powerful new features.

In this part, we will cover how to configure button presses to modify properties and tags in Perspective. Using Python scripting can be intimidating at first, but it is a key skill in creating HMI and SCADA systems that can send commands to other systems. This blog will teach you how to use button events to write to component properties and tags.

Example 1: Toggling a Boolean Property

First, we will create a button and use it to toggle the enable/disable custom property that we created in the last Perspective blog. Drag a button from the component toolbox onto your view. Then change its text property to "Toggle Enable"

Right click your button and select "Configure Events" to open the event popup. You can also use the handy shortcut Ctrl+J.

The left-hand list shows all possible button events. Select "onActionPerformed", which is triggered when the button is pressed. Then click the plus icon and add a script action for this event. There are many different actions, but scripts are used for manipulating properties and tags.

The runAction Python script is called when the button is pressed. We are going to write a short script to read the "enable custom property" value, toggle that value, then write back to the property. First, press the property reference button, find the property in the tree, and click Ok to add the reference to your script.

Next, write the following script. The exact reference may change depending on your object names. First, assign the property value to "input". Then, assign "output = not input" to toggle the bit. Finally, assign "output" back to the original property.

To test out your script, enter preview mode by clicking the Play Button icon. This simulates your view as it will run on the Ignition webpage. To exit preview mode and go back to editing, press the button again.

In preview mode, you can press the button to enable and disable the custom property.

Example 2: Incrementing a Numeric Tag

Next, we will learn how to use a button to update a tag value. The core workflow of using a script to manipulate a property is the same, but that property will now be bidirectionally bound to a tag.

Create a new button, rename it "counter", then add a custom property "count" to it. Next, add a tag binding to the custom property and navigate to an integer or float tag on your gateway. Make sure to select the bidirectional checkbox. This makes sure that the property can write back to the tag. For help with these steps, see "Tag Binding" in the previous Prespective blog installment.

Next, we will update the button text to display the current counter value. Add an expression binding to the button's text property. Insert the expression shown in the screenshot below. You can use the property reference button on the right side to find your custom property. 

We will now add a script to manipulate the custom property that is bound to the tag. Like the previous example, create a script action on the button's onActionPerformed event. Next, insert the property reference to your custom property. This script is even simpler than the last. Simply add " += 1 " to the end of your property reference to increment the value by one.

Enter preview mode and click your new button to watch the counter increment on each press. This basic technique of creating a bidirectional tag binding and an event action script can be used for simple and complex behavior. 

Learn more about DMC's Ignition expertise.  Contact us to get started on your next HMI, SCADA, or MES project.

See other blogs in this series: Creating Dynamic Ignition Perspective Projects
Part 1: Bindings and Transforms
Part 2: Button Event Actions
Part 3: Embedded Views and Flex Containers
Part 4: View Parameters, Indirect Bindings, and Flex Repeaters
Part 5: Flex Repeaters with Variable Number of Instances (coming soon)
Part 6: Changing Colors and Other Properties (coming soon)

The post Creating Dynamic Ignition Perspective Projects, Part 2: Button Event Actions appeared first on DMC, Inc..

Although most Ignition functions work the same across Perspective or Vision, there are some necessary adjustments to work better in a web-friendly environment. This multi-part blog will serve as a guide to setting up dynamic Perspective screens that take full advantage of its new powerful features.

To begin this series, we’ll focus on starting a Perspective view and creating bindings to tags and properties. We will then use binding transforms to display that information in the correct format.

Creating a Perspective View and Label Object

The first step of working with Perspective is creating a view. Views serve the same purpose as Vision windows, but they can also be embedded in other views to act like Vision templates. In the project browser, find Perspective/Views and select New View. Give your view a name and keep the container type as a Coordinate Container.

When you open your view, the screen layout will switch to the Perspective view layout. The menu toolbar (1), project browser tree (2), and tag browser (3) are in their usual positions and the central designer panel shows the current view (4). However, the right side of the layout is a bit different. Instead of the Vision property editor in the bottom left, there is the Perspective property editor on the right side. There is also the Perspective component toolbox, which may need to be unhidden by pressing its button.

First, create three label objects by dragging them from the toolbox to the view window. When you click on a label, the property editor will show all the properties of that object. Nearly all the properties can be edited, but for now, note the object name in the meta category and the text property that determines what text is displayed.

Creating a Property Binding

Tag Binding
On the first label, we will create a tag binding to map the “text” property to a numeric tag.

To create a binding, hover your mouse over the left side of the property, then click when you see the greyed-out chain symbol. This will open the Edit Binding Popup.

To create a tag binding, select Tag as the binding type, then click the tag button to the right of the Tag Path input box. This will open a list of tags on the current gateway. I have configured a few sample tags already, but you can use any tags available on your gateway. Find the desired tag in the tag tree and click Ok to bind to that tag.

Property Binding
On our second label, we will create a custom boolean property then bind the “text” attribute to that property.

Select the second label and add a custom property with the blue Add Custom Property button in the property editor. Name it “enabled” and set its value to true.

You can bind to this custom property just as easily as a tag binding. Add a binding to the text property, then select Property as the binding type and click the button to the right of the input box to open the property tree. Find your custom prop in view > root > {label name} > custom > enabled, then click Ok to add the property binding.

Expression Binding
On our third label, we will create an expression binding, which can use Ignition’s Expression language to accomplish a wide variety of calculations.

Create another label and add another binding to the text property. Select the Expression binding type. Type “now()” to return the current date and time, then click Ok to apply the binding to the label.

The three labels you’ve created are now bound to a tag, a property, and an expression. However, these raw values (shown below) are not always what you want to display on your screen. To turn these bindings into more human-readable text, you can use binding transforms.

Using Binding Transforms

Binding transforms take the results of a binding, then manipulate the value to become more useful for your application. This section will show you how to use expression, map, and format transforms.

Expression Transform
Open the binding on the first label’s tag transform and click Add Transform, then select an expression transform. This transform lets you use the binding value as the input to an expression function. Type

'Temperature: ' round({value}) + ' F'

to round the value to the nearest integer and add the label before and after it. You can look at the binding preview at the bottom of the popup to see how your value will be transformed.

Map Transform
We will use a map transform to change the enable/disable boolean to show enabled/disabled as text. Open the boolean property binding and add a Map Transform. Click the plus icon to add new maps for “true” and “false”, then type in the desired text for true and false. The map transform also works for integers and even ranges of numbers!

Format Transform
The format transform is used to display numbers and dates in your desired format. Open the datetime expression binding and add a Format Transform. Select the datetime type and choose your desired datetime format. The preview will show how the date will be displayed on the label.

After we have applied our bindings and transforms, the labels now show tag data in an easy-to-read format.

Learn more about DMC’s Ignition expertise.  Contact us to get started on your next HMI, SCADA, or MES project.
 

The post Creating Dynamic Ignition Perspective Projects, Part One: Bindings and Transforms appeared first on DMC, Inc..