Label component used to change key:value property with itself

Ignition
1

I am using version 8.1.28. New to python scripting and all the power it has, trying to teach myself as I go, creating a plant monitoring system.
I have opc tags brought in showing info on our water heaters. I have shown what I want the main display to show for each WH. There are other tags that I want to bring in and diplay on the same "screen" (vent temp, burn cycles & runtime, etc). I want the large temp readout and discription above to change when you click on "next >". I used a label component for this so called button because I prefer the way it looks compared to an actual button component.

My thought was to have a custom porperty change value (DisplayNum:value) when you click on it. Just an integer (0= for main, 1= vent temp, 2= cycles, 3= runtime, and so on). Based on what number is in the key:value pair for that label component, I can then bind the visibility property for the tags to be 'true' or 'false' based on what number is in the next label component.

I figured out in the script console how to have a repeating sequence but when I put that script on the label component I get the error shown.

Any guidance would be appreciated.

Hope this makes sense as to what I'm try to accomplish.

image

image
image1160×670 68.2 KB

2

The problem is with
value = value + 1
value hasn't been declared anywhere and, effectively, doesn't exist.

Instead,

  • Create a custom property on the label. e.g. displayNum : 0.
  • The corrected code should be something like,
self.custom.displayNum = (self.custom.displayNum + 1) % 5

(If it weren't for the modulo operation the line could have been reduced to self.custom.displayNum += 1.)

Use the property selector button on the right of the script editor for error-free selection of the property name.

1 Like
3

Thank you!

4

From the beginning:

For this you'll have to select your label component with the "Next" text and add a custom property with the name you want, under custom click on Add Custom Property, select "Value" then add this custom property.
image

This is where we`ll add the onClick script but we'll change a few things:

#	First we need to get our current value, we can't use
#	value = value + 1 because we didn't even define what the variable 
#	called value is yet.
#	So we grab value from the component's custom property.
	value  = self.custom.DisplayNum +1
	if value > 5:
		#If the value is > 5, we return it to 0
		value = 0
#	Then, after we define what the value will be, we need to pass it back to the 
#	label's custom property
	self.custom.DisplayNum = value

you mean having multiple components on the same position but only show one based on visibility?
If that's your plan, there's a much better way using indirect tag binding, build only one set of components and change the tag paths that they're bound to.
https://docs.inductiveautomation.com/display/DOC81/Tag+Bindings+in+Perspective#TagBindingsinPerspective-IndirectTagBindingMode

If you're new to python and ignition i would highly recommend you to take a look at at least a few of the credential course classes available at https://www.inductiveuniversity.com , they're free and very well explained so at least it would be a good idea to watch the ones about the topic/component you're currently working on.

5

I think you need to initialise this with a numeric value when you create it. Otherwise
value = self.custom.DisplayNum + 1
will give an error when calculating "value" + 1.

1 Like
6

Thanks for your expertise. I got it working the way I wanted. I am going to check out the indirect binding, sounds like a less cumbersome way.

1 Like
7

That's great. Don't forget to mark the answer that helped most as "Solution". That way it shows up on the main index as solved.

8

You're right, otherwise it wouldn't work.

9

I would recommend that instead of defaulting to the Label component, instead, use styling to make the button appear the way you want.

For instance this is a button that has been modified using styles:
image

Styles 
{
  "backgroundColor": "#00D9D9",
  "borderStyle": "solid",
  "color": "#000000",
  "fontFamily": "Arial",
  "fontSize": 14,
  "fontWeight": "normal",
  "borderColor": "#000000",
  "borderBottomRightRadius": 0,
  "borderTopLeftRadius": 0,
  "borderTopRightRadius": 0,
  "borderBottomLeftRadius": 0
}

You should create a Style Class and apply it to all of your buttons that you want to look similar.

I will also say that there is a reason that most buttons look a certain way and that users are accustomed to that look and so changing it might be something you want to give a little more thought. That being said, consistency throughout the application is much more important than consistency with industry standards so, you do you, just make sure you do it everywhere.

Anyway, the reason to do this, is so that you can use the actionPreformed event handler. This way, if you ever need to disable the button, then the event wont fire. A labels click event will fire independent of if the component is disabled or not.

1 Like