# Live readout of time between style classes

**URL:** <https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 1, 2022, 10:45pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736 "2022-10-01T22:45:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 1, 2022, 10:45pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/1 "2022-10-01T22:45:34Z")

</div>

Im looking to have a live readout of the time in seconds between a props style class. Example props.style.classes is 1 then readout on a label, the live accumulated time until props.style.classes is 2 or etc.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 2, 2022, 10:42am UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/2 "2022-10-02T10:42:51Z")

</div>

I don't understand what you mean. Do you have a binding already on the style.classes? If so, what is it? Are you asking for help with a binding on the classes or on the props.text?

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 2, 2022, 12:39pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/3 "2022-10-02T12:39:00Z")

</div>

I have a binding on the style class already. It toggles between 2 classes: green and red. When the style class goes from green to red it opens a pop up and tells the operator the have problem. On that pop up I want to have a label that reads out how long that style class has been red. When the style class changes from red to green it closes the pop up.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 2, 2022, 1:11pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/4 "2022-10-02T13:11:53Z")

</div>

> [@mjohnson0238](#):
>
> I want to have a label that reads out how long that style class has been red.

That seems nuts. Use a proper tag and bind to that, not a binding to a style class.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 2, 2022, 3:28pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/5 "2022-10-02T15:28:15Z")

</div>

I'm with @Transistor here. Obviously, you already have something that triggers the change of style class, that seems reasonable. Why not just use that same trigger for the label?

Add 2 custom properties to the Label. Bind the first to your trigger, and add a change event to that custom prop. In the change event write the current time into the other custom prop.

For example, if you were to name your custom props, Trigger, and LastTriggerTime then you could have an expression binding on the Label that looked something like this:

```auto
if(self.custom.Trigger,secondsBetween(self.custom.LastTriggerTime,now(0)),0)

```

\*Not tested, you may need to through some string conversions in there.

In short, the style classes aren't really intended to do what you're attempting, there are better mechanisms for accomplishing the task.

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 1:30pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/6 "2022-10-03T13:30:53Z")

</div>

I understand, I had to ask.  
SO, I am using banners on the perspective page. Should I create a script on the root of that banner? Like this on the onFocus event:

```auto
def runAction(self, event):
	if self.getChild("root").getChild("411_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '411_breakout_pop')
	if self.getChild("root").getChild("412_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '412_breakout_pop')
	if self.getChild("root").getChild("413_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '413_breakout_pop')
	if self.getChild("root").getChild("414_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '414_breakout_pop')
	if self.getChild("root").getChild("511_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '511_breakout_pop')
	if self.getChild("root").getChild("512_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '512_breakout_pop')
	if self.getChild("root").getChild("513_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '513_breakout_pop')
	if self.getChild("root").getChild("514_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '514_breakout_pop')
	if self.getChild("root").getChild("521_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '521_breakout_pop')
	if self.getChild("root").getChild("522_Label").props.style.classes == 'Stopped':
		system.perspective.openPopup('', '522_breakout_pop')

```

On these pop ups I will have time displaying

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 3, 2022, 2:42pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/7 "2022-10-03T14:42:32Z")

</div>

At the very least I would refactor that to this:

```python
def runAction(self,event):
    for i in ('411','412','413','414','511','512','513','514','521','522'):
        if self.getChild('root').getChild('{}_Label'.format(i)).props.style.classes == 'Stopped':
            system.perspective.openPopup('','{}_breakout_pop'.format(i))
            break

```

I think, you're going to have to explain a little more about what exactly you're trying to accomplish. I don't really understand what the banners have to do with displaying a time (presumably from when an event occurred). That would be done with a binding. If you have multiple labels (as I see you do), then you could store the trigger time in a property on a common container, however, I assume that the triggers are independent of each other so then wouldn't the trigger be unique to the label?

What would the script on the root do?

FYI, if it can be done with an expression, use an expression (as a general rule).

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 2:53pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/8 "2022-10-03T14:53:37Z")

</div>

From these labels on the banner:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/494e5badcea961d653c88a2cfc3ab5165d43e6f7.png)

I want a popup to happen and on that popup have a label that displays accumulated time in that error, like this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbc2bb24ed521f090ddb2dbfd736525c2eb90aeb.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 3, 2022, 2:55pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/9 "2022-10-03T14:55:27Z")

</div>

what code do you use to set the style classes to "Stopped" ?

btw you should probably put those labels in a repeater or something else you'll have so much duplicate code

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 2:56pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/10 "2022-10-03T14:56:44Z")

</div>

I use this:

```auto
if({[default]Phase 1 Extrusion/L51/L51_Spin_Pump_Spd/Pos2}>=12,'Running','Stopped')

```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 3, 2022, 3:00pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/11 "2022-10-03T15:00:49Z")

</div>

Consider moving that comparison to an expression tag, and use a tag change event to capture the timestamp (in a memory tag) when it becomes true. Everything else becomes simple expressions.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 3, 2022, 3:01pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/12 "2022-10-03T15:01:04Z")

</div>

So you have a tag for each popup ?  
Use that instead to compute the time.  
You could use an expression:

```auto
secondsBetween({[default]Phase 1 Extrusion/L51/L51_Spin_Pump_Spd/Pos2.timestamp}, now())

```

I also suggest you take some time to read this:

> **[The XY Problem](https://xyproblem.info/)**
>
> Asking about your attempted solution rather than your actual problem

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 3:10pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/13 "2022-10-03T15:10:01Z")

</div>

Can you call a popup using an expression? or did I read that wrong?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 3, 2022, 3:20pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/14 "2022-10-03T15:20:45Z")

</div>

You read it wrong.

You asked if you should write a script on the 'root' of the banner, similar to what you had written in the supplied script from an onFocus event. Showing a pop up can be done from an expression, using the `runScript()` expression function (I guess that isn't really an expression). That is, however, irrelevant to what I was actually meaning.

I assume that the script you were thinking of writing on the 'root' of the banner would be to calculate the elapsed time, when in reality that can easily be done with an expression once you have the time at which the event occurred.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 3, 2022, 3:23pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/15 "2022-10-03T15:23:40Z")

</div>

We're all talking past each other here.

You have a fundamental disconnect - everyone's telling you (in different ways) that you need to separate your _data_ from your _presentation_.  
Calculations like "how long has a breakout been detected" should live in a _single_ location, and be calculated on the gateway. For a variety of reasons, the easiest place to do that kind of persistent logic that's available to other parts of Ignition is tags.

Once you have a set of tags calculating and displaying this _data_, it's much, much easier to set up the _presentation_ - you just bind your various components to the state of these tags (sometimes with minimal logic).

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 7:20pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/16 "2022-10-03T19:20:15Z")

</div>

I would like to thank everyone here, seriously. I have seen several different way to achieve what I wanted to do. I cleaned up alot my code thank to you all and learned a new trick for what I wanted to achieve.

This:

```auto
if({this.props.style.classes} = 'Breakout',runScript("system.perspective.openPopup('','411_breakout_pop')"),'')

```

allowed me to have a popup execute when a style class changed, from there I had a script onStartup of that popup that wrote to a timer tag that gives me secondsBetween then and now, for fault time.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 3, 2022, 8:33pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/17 "2022-10-03T20:33:18Z")

</div>

> [@mjohnson0238](#):
>
> from there I had a script onStartup of that popup that wrote to a timer tag that gives me secondsBetween then and now, for fault time.

I think you're still mixing up where you're storing your data. What happens when a client only starts up after the tag changes to breakout? Then the popup will open but the seconds between will not be correct. This should _all_ be done in tags

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 3, 2022, 9:09pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/18 "2022-10-03T21:09:21Z")

</div>

understood, thnak you

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 4, 2022, 12:21pm UTC](https://forum.inductiveautomation.com/t/live-readout-of-time-between-style-classes/64736/19 "2022-10-04T12:21:07Z")

</div>

More generally, DO NOT base logic/calculations/triggers on UI elements like styles. It should be the other way around.