# Timer in Perspective (how to make, step by step)

**URL:** <https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 31, 2019, 9:23pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999 "2019-12-31T21:23:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexey.Chekhovskiy](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@Alexey.Chekhovskiy](https://forum.inductiveautomation.com/u/Alexey.Chekhovskiy)\
**Post date:** [December 31, 2019, 9:23pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/1 "2019-12-31T21:23:53Z")

</div>

Have no idea if it useful for anyone, will try to post.  
In one project have the requirement to make shutdown popup windows by time if it does not use, and of course, extend timer if this window still in use.  
Will start from a simple way, make some object flashing on a page.  
Choice object what you want to flash. On right windows in META properties, you will see **VISIBLE**  
Click on binding this property.  
In binding window choice _EXPRESSION_  
in first binding add

```auto
now(1000) 

```

change 1000ms to interval what you want.  
Click _Add transformation_ button and choice _EXPRESSION_ again  
here is add

```auto
if({this.meta.visible},False, True)

```

Click _OK_. And see how your object flashing.

Let’s make a little bit harder trick. Self-close popup window, by a timer with extending timer if you use the window.  
Make a new window or open window that you use as a popup.  
add to a custom property new property with name **timer**  
do binding for this property.  
In binding window choice _EXPRESSION_  
in first binding add

```auto
now(1000) 

```

Click _Add transformation_ button and choice _SCRIPT_ again  
here is add this code

```auto
	value=self.custom.timer-1
	if value<=0:
		system.perspective.closePopup(self.page.props.pageId)
	return value

```

Now we will configure events for **this window**.  
in _onStartup_ event add a script with this line (10 you can change to whenever second you need)

```auto
self.custom.timer=10 

```

in Mouse events _onClick_ add a script with this line (add this script to keyboard events, you if have text entry or so)

```auto
self.custom.timer=10

```

now you can add any elements to your popup.  
enjoy your automatic close window.  
Let me know if anybody wants publications like this one.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 1, 2020, 6:06am UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/2 "2020-01-01T06:06:42Z")

</div>

> [@Alexey.Chekhovskiy](#):
>
> _transformation_

Hi Alexey  
Thanks for your sharing. Really clever idea. One problem I face with this kind of method is, all script & expression done in server side and the result to back to client. In poor internet connection it make process laggy and have delay (specially for animations). For example I need timer with resolution of 10ms for some kind of animation.  
If we can make some how browser do it it is ideal. like transition and animation in css3.

---

<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:** [January 1, 2020, 4:34pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/3 "2020-01-01T16:34:05Z")

</div>

> [@nader.chinichian](#):
>
> If we can make some how browser do it it is ideal.

Sounds like a job for the SDK. To make your own Perspective component.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 1, 2020, 6:23pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/4 "2020-01-01T18:23:04Z")

</div>

Yes exactly but I need to know Java script, java and know API to do that.  
It’is hard.

---

<div class="post-metadata">

**Author:** ![Alexey.Chekhovskiy](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@Alexey.Chekhovskiy](https://forum.inductiveautomation.com/u/Alexey.Chekhovskiy)\
**Post date:** [January 2, 2020, 4:25pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/5 "2020-01-02T16:25:20Z")

</div>

i can do object what will hold all timers, store data from/to the gateway, probably will do some math on client-side (some type expression for perspective), etc and you can change settings like perspective component from the designer. But the problem is, we will need to set up new components that will have an option to binding to this object. Not sure yet if it is possible to pass binding on JS scripts level with no change on the gateway side, but probably can find some way.  
Technically it will different module to work, and this is a big job.  
I don’t have so much time to do it for free. sorry.

---

<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:** [January 2, 2020, 5:04pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/6 "2020-01-02T17:04:37Z")

</div>

> [@nader.chinichian](#):
>
> For example I need timer with resolution of 10ms for some kind of animation.  
> If we can make some how browser do it it is ideal. like transition and animation in css3.

Worth pointing out that the animation support in style classes is browser-side (it's just emitting CSS). Support for more advanced animations is something I'm heavily pushing for, but it does bring up complications with things in the designer or layout within components (eg, our internal component rotation + your external animation).

---

<div class="post-metadata">

**Author:** ![Alexey.Chekhovskiy](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@Alexey.Chekhovskiy](https://forum.inductiveautomation.com/u/Alexey.Chekhovskiy)\
**Post date:** [January 2, 2020, 5:19pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/7 "2020-01-02T17:19:22Z")

</div>

animation for 10ms, is 100 FPS, out of ideas why it should be need.

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [January 2, 2020, 5:55pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/8 "2020-01-02T17:55:06Z")

</div>

> [@Alexey.Chekhovskiy](#):
>
> animation for 10ms, is 100 FPS, out of ideas why it should be need

That is pretty high resolution. On the other hand, 7-30 fps is a reasonable expectation for fairly smooth animation and requires a resolution of 143..33 ms. Depending on gateway loading and network between it and clients (satellite being a particularly bad case), this can prevent smooth animation relying on gateway side timers.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 3, 2020, 8:19am UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/9 "2020-01-03T08:19:37Z")

</div>

I did this in vision please check the my videos.  
But if you see the css3 animation all those beautiful animation run with that resolution.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 3, 2020, 10:12am UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/10 "2020-01-03T10:12:09Z")

</div>

I believe when user can do anything he like with css3 having drawing tools, rotation,… tools is pointless in perspective. The first thing I do in perspective I bind a null to rotation object to disable it and write my own css code.  
When people start using css3 they get use to it and think like web developer, so the result is awesome and easy.  
Like always I said: we need css3 editor in perspective.

---

<div class="post-metadata">

**Author:** ![Hana\_Bilowit](https://avatars.discourse-cdn.com/v4/letter/h/b4bc9f/32.png) [@Hana\_Bilowit](https://forum.inductiveautomation.com/u/Hana_Bilowit)\
**Post date:** [December 14, 2021, 8:45pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/11 "2021-12-14T20:45:43Z")

</div>

How would you do a button that when another button is pressed this new button only shows up for 10 seconds?

---

<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:** [January 21, 2024, 4:25pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/12 "2024-01-21T16:25:48Z")

</div>

Split this topic on January 21, 2024, 4:25pm UTC

A post was merged into an existing topic: [Icon visible in perspective](https://forum.inductiveautomation.com/t/icon-visible-in-perspective/84536/2)

---

<div class="post-metadata">

**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\
**Post date:** [September 11, 2024, 6:08pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/13 "2024-09-11T18:08:56Z")

</div>

Thanks for sharing this cool idea. However, I ran into a small issue that I wanted to share, as it might help others who use this method.

When I saved my view in the designer while the `custom.timer` property value was less than 0 (due to the timer constantly counting down), the state got saved with that negative value. As a result, the next time I opened the popup, the script transform would run before the `onStartup` event could set the timer back to 10. Since the value was already negative, the script immediately closed the popup before it could even be used.

To avoid this, I simply unchecked the **`Persistent`** option for the `custom.timer` property. This prevents the timer value from being saved along with the view, ensuring that the `onStartup` script has the chance to reset the timer to 10 seconds every time the popup is opened. Now the timer behaves as expected and doesn't close the popup immediately after opening.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d0b24add9c7acfba9c3c032a03b250fae1d9be70.png)

---

<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:** [September 11, 2024, 9:35pm UTC](https://forum.inductiveautomation.com/t/timer-in-perspective-how-to-make-step-by-step/30999/14 "2024-09-11T21:35:29Z")

</div>

Fwiw, the expression shouldn't keep counting down if the value is less than 0. It's a waste of resources continuing to run the now function
