Simple Push Button Graphic
Simple? Maybe not.
Last week I received the following email from a subscriber asking what seemed like a very simple question.
“I am new to Wonderware but have 20 years experience with other platforms.
I can’t find anywhere to get good information on symbol creation.
I want a direct action button, with text that changes color based on a tag different from the action tag.
It seems that something so simple is not a standard selection from the toolbox.”
At first glance I thought yes, this is a simple thing but as I examined it and thought about how I might implement such a thing I came to a couple of conclusions.
First, the reason Wonderware doesn’t have such constructions available ready-made is that the power of Archestra is the flexibility which is why a library of Archestra symbols is included with the install, to provide a variety of pre-made symbols for your use.
The other thing I realized was that implementation of a graphic symbol however simple is dependent upon the overall graphic strategy at play in your galaxy. Therefore unfortunately until you have a grasp for that underlying template structure nothing is simple.
What underlying structure am I talking about you might ask?
Archestra graphics symbols are static templates, and while you can certainly use them in a stand alone environment they are designed to complement Archestra objects. So right out the chute the first question has to be is this a standalone Wonderware implementation or is the symbol used with System Platform? The implementation is totally different for each.
I’m assuming this user is asking about a graphic symbol that will be used with an underlying object.
Now, back to the question of underlying structures, the structure I’m referring to is object template structure. Object template structure and screen content delivery have been implemented many different ways, some companies have elected to embed symbols in the object template while others have chosen to create symbols that are not embedded ever, yet others have decided to use both embedded and non embedded symbols and everything in between.
All of this stuff makes a seemingly simple question complicated.
In answer to the person asking this question I am going to present a simple structure for implementation to explain how I would create a simple direct action command button with a text label that changes color based on another input.
Before We Get Started
I will create two versions for this example, version 1 is a direct command button with a Boolean two color option. The second version uses an integer to provide a 4 color option.
Before I describe the implementation of the direct button I am going to explain the method for content delivery to InTouch.
These examples are done in Archestra Version 2014 R1 implementation in other versions may vary. Also, the wizard capability would allow us to make a single symbol capable of having both behaviors, for this example I will keep them separate. If anyone would like to see how these two could be incorporated into a single graphic using wizards let me know.
For these examples I am going to create a “screen” symbol that will be embedded into an InTouch Window, the button symbol will then be “dropped” into the screen graphic and referenced to an object from the IDE.
I will present each example in two sections, a “Graphic Symbol” section and an “Object Template” section. The graphic symbol is created to work hand in glove with an Archestra object, as I said already if you are not using System platform the implementation is going to be slightly different.
Direct Button Two Color
Create a Symbol and name it DirectButtonV1
Create Two Custom Properties (Custom Properties allow for good isolation of the IO reference and is a best practice when building graphic symbols)
Data Type: Boolean | Name: Command | Default Value: me.Command
Data Type: Boolean| Name: LabelColor | Default Value: me.LabelColor
Select the Button graphic from the toolbox and drag into the symbol graphic drawing area of the IDE.
Change the button graphic name to “btnCommand” (it's always a good idea to be descriptive rather than just leaving things default names especially when you return six months from now)
The text property of the button will have something in it, delete that text we are going to create a text animation separately.
Double Click the Button, Add a pushbutton animation and Configure as follows:
States: Boolean | Boolean: Command| Action: Direct| Everything else is default
Select the Text graphic from the toolbox and drag into the symbol graphic drawing area.
Change the name of the text graphic to “txtLabel”.
Double Click the Text graphic, Add a TextStyle animation and configure as follows:
States: Boolean | Color Value On: Dark Blue| Color Value Off: Black| Font On: Arial 14pt Bold| Font Off: Arial 14pt Bold
Create an Object Template from $UserDefined and name it $DirectButtonV1
Create two Boolean Field Attributes
Attribute Name: Command Action| Description: Command | Input Source : me.udaCommand (This will be used for testing normally this is where the reference to your IO reference goes) Everything else is default.
Attribute Name: LabelColor | Description: Label Color Action | Input Source: me.udaLabelColor | Everything else is default.
Create two Boolean UDA’s for test purposes.
Direct Button Multi Color
- Create a Symbol and name it DirectButtonV2
- Create Two Custom Properties (Custom Properties allow for good isolation of the IO reference and is a best practice when building graphic symbols)
- Data Type: Boolean | Name: Command | Default Value: me.Command
- Data Type: Integer| Name: LabelColor | Default Value: me.LabelColor
- Select the Button graphic from the toolbox and drag into the symbol graphic drawing area of the IDE.
- Change the button graphic name to “btnCommand”
- The text property of the button will have something in it, delete that text we are going to create a text animation separately.
- Double Click the Button, Add a pushbutton animation and Configure as follows:
- States: Boolean | Boolean: Command| Action: Direct| Everything else is default
- Select the Text graphic from the toolbox and drag into the symbol graphic drawing area.
- Change the name of the text graphic to “txtLabel”.
- Double Click the Text graphic, Add a TextStyle animation and configure as shown in the figure below:
I hope this has been helpful for understanding implementation of a “simple” button with a label that has color controlled from a separate action source. A video version of this tutorial can be found on my You Tube channel.
Let me know if you receive value from this small tutorial and if you have anything you would like explained or demonstrated please let me know in the comments or email me at firstname.lastname@example.org
Video tutorials on my You Tube channel can be accessed here.
The Free Archestra Programming Mini Course is here.
Step-by-Step Archestra Scripting Guide
Subscribe now to receive FREE Tutorials and Scripting Examples
We will never share or sell your email address.