Nick Mudge Ignition Software Consulting & Development

Recently Chris Powell, who I met in the Ignition Chat Room, started writing blog posts about Ignition - giving examples of how to use various functionality.

He wrote a guest post on my blog about Ignition Power Tables.

He recently started his own blog about Ignition. His first posts are about Ignition's Calendar Components and Ignition Template Repeaters.

For a long time there was no officially supported way to create screens dynamically in Ignition. Screens were created up front by designers/programmers by dropping components on windows and then scripting and configuring them.

There was no dynamic creation of components based on current data from a database or other source of information.

This has changed in Ignition. It started with the Template Repeater which was released in Ignition 7.7.0. This component allows an Ignition template to be configured and repeated any number of times. A vertical or horizontal scroll bar is automatically added to the template repeater when there isn't enough space for all templates to fit within the designated space. This is a great component but has various limitations; for example it only allows one template to be repeated in a single direction.

The Template Canvas was released in December 2014 in Ignition 7.7.2. The Template Canvas is the most powerful, most significant single component to be released by Inductive Automation since Ignition itself was released in 2010.

The Template Canvas makes it possible to dynamically create any number of instances of any number of templates. The position, width and height of each template instance can be configured. If there isn't enough space for all template instances to fit within the designated space scroll bars are automatically added - vertical or horizontal or both. Once all templates are displayed on a screen their position and configuration can be changed through Python scripting.

How to Use the Template Canvas

First a Template Canvas is dropped onto an Ignition window. You will see a box of ant track lines. The Template Canvas is a kind of Ignition container and the ant track lines show the dimensions of the Template Canvas. This shows how much space the Template Canvas will use on the window. Change the position and width and height of the Template Canvas as needed.

Templates Property

The Templates property of a Template Canvas is a dataset that contains template instance information. Each row of the dataset specifies a template to use to create a template instance and its position and layout. Populating this property is what creates and positions template instances. Here is a view of a Templates dataset:

There are different ways to populate the Templates property. One way is to use the Template Canvas Customizer. Right click on the Template Canvas in the designer, hover the mouse over Customizers, then choose Template Canvas Customizer. Using this customizer you can select templates to use and the layout and positioning. The Template Canvas Customizer also lets you input values for any template instance parameters. The Template Canvas Customizer is a static upfront way to create the Templates dataset. Using it is a good way to get started with the Template Canvas.

A dynamic way to create the Templates property (and therefor dynamically create template instances and configuration) is to bind a database query to the Templates property.

Python scripting is the most powerful and flexible way to dynamically create a dataset for the Templates property. Python provides many tools and capabilities to analyze and manipulate data and many ways to access sources of data.

Layout and Positioning

There are two ways to position template instances: Absolute Positioning and Layout Positioning.

Absolute Positioning uses absolute x and y coordinates and values for width and height. The x, y, width and height columns in the Templates dataset are used for Absolution Positioning. x and y coordinates need to be calculated for each template instance.

Layout Positioning uses a powerful and easy to use layout manager called MigLayout. The "layout" column in the Templates dataset is used for Layout Positioning. The layout column holds a MigLayout string for each row in the dataset.

Documentation for MigLayout is here: MigLayout QuickStart

Here is a handy MigLayout cheetsheet: MigLayout Cheetsheet.

Initializing Template Instances

By initializing template instances I mean setting any template parameters for each instance. There are a couple ways to do this.

The Template Canvas Templates property can have a column called "parameters". This column holds a string representation of a Python dictionary. Each item in the dictionary contains the name of a template parameter and a value to be set for the template parameter. The Template Canvas Customizer uses the "parameters" column to set parameter values for template instances.

Another way is to use the initializeTemplate extension function on the Template Canvas. Remember an extension function is an editable function on a component that exists to customize it.

The initializeTemplate function is called for each template instance created by the Template Canvas. The initializeTemplate function takes as an argument the template that it is called for. This extension function provides a chance to execute a Python script for each template instance to configure it, set template parameters etc. Each time the Template Canvas Templates property changes the initializeTemplate extension function runs for each template instance.

Template Canvas Video & Demo

I made a Template Canvas demo project and a video that shows how to use the Template Canvas. To see the video and get a copy of the Template Canvas demo project signup for my email list.

Okay you can see the video of the demo project here, and download the demo project here.

You are free to have and use the Template Canvas demo project for your own purposes.

Here's a screen shot of the Template Canvas demo application:

It is common in Ignition to want to copy visual displays, configuration and functionality. For example, if 20 motors are needed on a window create one motor and copy it 19 times.

But later those 20 motor displays will need to be changed. You know it will happen. Someone will request a change to them or you realize how to make them better etc. etc.

In the past you would need to change each motor display individually. In a large project where there are lots of copies of things the amount of work to make changes really adds up.

Ignition templates solve this problem. This is how:

• Something is designed. This is a template.
• The template is used in many places. Each use of a template is called a template instance.
• When it needs to change it is changed in one place one time. All template instances are automatically updated.

Here's a quote from the Ignition User Manual:

Templates are components that can be re-used across many windows. They are designed separately, outside of any window. After being designed, they can be added to any of the windows within a project. The true power of a template is that if you change its design, all uses of that template across all windows will reflect those changes. This gives templates a major advantage over a copy-and-paste style of design.

Different Template Instance, Different Data

The graphics and functionality of each template instance (from the same template) is the same but the data used by each template instance is different.

Example: Motors template is used to create the Motor A template instance. The data from the actual physical Motor A on the plant floor is fed into the Motor A template instance so that it can display that data. The Motor B template instance is fed Motor B data etc.

This is a guest post from Chris Powell.

Recently, Inductive Automation added a new table to their list of components. The name 'Power Table' is not understated. I want to share a few of the features I have found for some of the non-programming background developers out there.

Since the release of Ignition V7.7, Inductive Automation has added Extension Functions to several components. Extension functions are editable functions that exist on components that are used to customize components. Let us go over some of these features as they relate to the power table component.

First, put a power table table on a window. Then select TestData to load the table with data.

You can paste the code from the following sections into each power table extension function to see how it works. I hope this will make your use of power tables faster and easier to implement in your next project.

configureCell Extension Function

I use this feature to highlight each individual cell on each row based on the row's value. With this code, I can change the background color based on that cell's value. You may add custom properties to the power table and access them with 'self.propertyName'. I created the custom property called 'highsp' and used it in line 2. Here is code for this:

    if colName == 'Float Column':
        if value > self.highsp:  
            return {'background' : 'red'}
        elif value < 0.2:
            return {'background' : 'yellow'}
        else:
            return {'background' : self.background}
    elif colName == 'Boolean Column':
        if value == 1:
            return {'background' : '0,125,0'}
        else:
            return {'background' : self.background}
    else:
        return {'background' : self.background}

The only issue I noticed so far is the repaint of the table if you are using dynamic properties. So if my 'highsp' property changed, the table does not repaint. To fix this, add the following code to the propertyChange event handler:

if event.propertyName == 'highsp':
    event.source.parent.repaint()

This will force the table to repaint and you will see the changes.

While we are on the property changed event handler, this is where you will edit the Columns Attributes Data table. You create the entire table because it does not create itself unless you use the Table Customizer. The following code will build the Columns Attributes Data table from scratch each time new data is loaded. Add the following code to the property change event handler.

# Let's create the Column Attributes Data table.
# First, let's set the defaults.
if event.propertyName == 'data':
    name = ''
    dateFormat = 'MMM d, yyyy h:mm a'
    editable = 1
    filterable = 0
    hidden = 0
    horizontalAlignment = '-9'
    label = ''
    numberFormat = '#,##0.##'
    prefix = ''
    sortable = 1
    suffix = ''
    treatAsBoolean = 0
    verticalAlignment = 0
    wrapText = 0
	
    # Now let's get rows loaded in the table.
    rows = []
	
    table = event.newValue
    for k in table.columnNames:
        #Name of the column I want to be different from default.
        if k == 'Int Column': 
            name = k
            # Makes the 'Int Column' hidden.
            newrow = [name, dateFormat, editable, filterable, 1,
            horizontalAlignment, label, numberFormat, prefix,
            sortable, suffix, treatAsBoolean, verticalAlignment,
            wrapText]
        else:
            name = k
            newrow = [name, dateFormat, editable, filterable,
                      hidden, horizontalAlignment, label,
                      numberFormat, prefix, sortable, suffix,
                      treatAsBoolean, verticalAlignment, wrapText]
        rows.append(newrow)
	
    # Build the header
    headers = ["name", "dateFormat", "editable", "filterable",
               "hidden", "horizontalAlignment", "label",
               "numberFormat", "prefix", "sortable", "suffix",
               "treatAsBoolean", "verticalAlignment", "wrapText"]
	
    data = system.dataset.toDataSet(headers, rows)
    event.source.columnAttributesData = data

onCellEdited Extension Function

I mention this section because even if you have 'Editable' selected in the Column Attributes Data, it does not really edit anything. You need to enable this function and uncomment the code. I have added the code below. You also might want to add a call to 'system.db.runPrepUpdate' to send the update back to a database.

import system
self.data = system.dataset.setValue(self.data, rowIndex, colIndex, newValue)