Today we are going to take Ignition from Inductive Automation to the next level. Keep reading to see how it is done.
Fundamental concepts are great. You need a solid foundation and understanding of them to build a great system. You might even be able to build some cool technology if you take the Elon Musk approach of first principles above all else. No complaints there from the Corso crew.
If you are on our website, you aren’t looking for first principles. You have your bases covered and you want to take things to the next level. You want to radically shift how you do business, shake up the competition with access to information they can only dream of utilizing, or put simply, you just want to go Boss Mode on your industry.
We’re here to help. We are going to share some of our secrets and show you how use our Boss Mode Methodology so you can get a leg up on day one with Corso Systems on the team. Don’t worry we aren’t going to share any of your secrets. These are things that we use as standards for all of our customers. When we work together, we will push things even further when we understand exactly what you need.
Ignition Color Palettes
This week’s Boss Mode post is an invaluable part of our toolkit on Inductive Automation’s Ignition platform. While not a complex thing to implement, it is the correct and not immediately obvious solution to a problem we run into on a regular basis. What colors do you want to use on your screens?
We have a couple of discussions on almost every project. One is alarming, the other is what colors indicate running, stopped, alarm, fault, etc. Alarming is its own post for another time.
A lot of times this discussion is started with the High Performance HMI methodology. This is an excellent book, and has many great ideas to make HMI screens more palatable. The problem with High Performance HMI standards is they are decidedly un-sexy. They don’t make for good marketing materials, so many people frown on them when they compare them to the sales demo. If a customer is on board with High Performance HMI there is less discussion to be had, we are focused on the majority of projects who don’t require or want High Performance graphics and want to see color on the screen.
Welcome to the Dark Side
The easiest demonstration of this concept is the idea of toggling a light/dark theme on a single project in Ignition. Maybe you have a screen outside and need to show different graphics when the sun is shining to reduce the effect of glare, or want to reduce strain on operators eyes at night time by using a warmer set of colors and only want to support one project.
The first step to using color palettes is to create Client Tags. Our typical structure is to create a “Colors” folder, folders for the specific themes below this and the different operational area folders as needed. You also need to create a tag to define the active theme. All of these tags will be string datatypes.
Prepare Your Palette
Once you have your folder structure populate each folder with tags, and give them hex code values for the colors you want to use for each color. The more granular you are at this point the better. For this example we will focus on the Text folder. We will have colors for primary, secondary, and inactive text in our system. The major difference between light and dark themes here is the primary text colors for each theme.
Also notice the “Background” tag for each theme. This will be used to define the background color of every window in the application. For this example, light has a background color of white, and dark has a background color of black. The primary text colors in each theme are the opposite color for the most contrast.
For each of the colors you want to use you will need to pick a color, and enter its hex code value for the tag value. In our text example this is where the #ffffff and #000000 come from. You can easily generate hex codes using tools online, with an image manipulation program, or even from Ignition’s color picker tool. Just enter the hex code preceded by a #. Pro-Tip, if you want to change the transparency level for a color your hex code will be 8 digits long instead of 6 with the last 2 defining the transparency. Try this in the Ignition color picker to get an idea of what values to use.
Once you have tags in place to handle color mappings, the next step is to utilize property bindings to use the tags for colors on the screen.
The Ties that Bind
Time to put the pieces together and see how this works in practice. If you have a window you would like to use please follow along and map your bindings accordingly, if not we will create a new window and demonstrate how to go full Boss Mode.
Create a new window, add a dropdown, and a couple of label components to the screen. For the dropdown map the dataset to include the names of your theme folders, in our case Light and Dark.
First add a property change script to the dropdown to update the active theme value when we change the dropdown. In a real-world example this may be done through an admin interface, or as part of a login screen.
Next we will bind to the Background color property of the Root Container, then to the foreground color property of each label.
One option is to use an Indirect Tag binding. For this purpose, instead use an Expression binding. The main reason is if you are doing a lot of bindings you can’t copy/paste bindings on an Indirect Tag binding and this will add the amount of time you spend in the binding window.
For the root container, here is the expression binding, both with the original tag path, and the tag path for the active theme based on the dropdown selection.
With these two bindings in place if you change the selected theme in the dropdown it will change the background color of your window!
Let’s do the same thing on the foreground binding for the labels (primary color shown, similar for secondary and inactive), and see the results:
First the Light Theme:
Then the Dark Theme:
With a simple example covered, it is time to take it to the next level. This is easy to do, update bindings on your components and set your theme tag up to be on your way.
Here is an example of a slightly more complicated screen with different themes Bill put together for this post:
Why Should I Care About This?
The reason we care about this is it makes our lives easy. When we go to Customer A and they want to have motors show red when stopped and green when running we change the value of the Operation\Stopped and Operation\Running client tags and our entire application is updated at one time. When we go to another customer and they want to see gray is stopped and white is running, we make the same 2 tag changes and we are done.
Same thing if they want to have their buttons be cornflower blue.
Contrast this to doing this without color palettes, now we need to go in and update the color on every component, and every animation. This gets to be extremely time consuming. No complaints if you want to spend the time doing that, however we would rather spend our time doing really awesome stuff and finding even more ways to go Boss Mode on our projects.
*You don’t have to be a boss to go Boss Mode.
Items to note:
- You manage Client tags in the designer. Each project has its own client tags. If you have multiple projects using the same client tags you will need to manage these. We will show you how to manage this using our Boss Mode Methodology in a future post.
- You can’t bind all color-based properties, so there will be some cases where you need to manually map things. Don’t worry, our Boss Mode Methodology will help you here too.
- If you use an image to pull hex codes from customer materials, you may not get an exact match. If getting the right color is critical, get the values from your customer or designer.
- There are plenty of online hex code generators. You can also pull them from Ignition’s color tool accessible via any of the color binding options.
- Yes, there are other ways to generate colors in Ignition. We do a lot of web-based projects and hex codes are easier to type out. Same concept applies if you want to go RGB, color names, etc.