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

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

now(1000) 

change 1000ms to interval what you want.
Click Add transformation button and choice EXPRESSION again
here is add

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

now(1000) 

Click Add transformation button and choice SCRIPT again
here is add this code

	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)

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)

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.

6 Likes

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.

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

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

1 Like

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.

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).

1 Like

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.

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.

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.

3 Likes

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

A post was merged into an existing topic: Icon visible in perspective

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.

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

1 Like