Pass through mouse clicks - Perspective

tl;dr: Ignition 8.1.15, Perspective Module: I'm looking for an elegant way to utilize all of the built-in animations & events (onMouseOver, onActionPerformed, etc) of a button which is NOT in the foreground.

After some searching, I found a similar post with an elegant solution for the Vision module:

Button Events Within Templates - #17 by Kyle_Chase

Operating under the principal that "if something is clickable, it should appear clickable". The pre-canned button appears to contain all of the functionality that I'm looking for (bezel, shadow, animations, etc.). I'm building a series of templates / widgets which have various indicators located on top of said-button. For a motor, there may be alarm indications visible, HOA status (if installed), pump command/status indicators, etc. If operator hovers above or clicks anywhere within the bounds of the widget, the events defined on the button should act as if the button were in the foreground.

I've attempted to utilize / migrate some of the code from the aforementioned link. But, it appears that the canned methods might be reassigning the 'event' object, such that invoking 'event.source' yields the error: object has no attribute 'source'. ?? (Insight here appreciated.)

For testing, I've created a button named btnNav (z-order = back) with an onActionPerformed component event script:

system.perspective.print("Button was Pressed!")

I've added another button in the same view named btnFaux (z-order = front), and would like to translate all actions from this button to btnNav. Any recommendations on code to add to btnFaux events to accomplish my task? Will this method for onActionPerformed also translate to onMouseOver (or onMouseEnter / onMouseLeave)? Other approaches to the same task are appreciated.

Nothing from Vision will translate to Perspective in this area. The underlying technologies are fundamentally completely different, even without the other hurdles (your scripts are running on the gateway, not the local browser session).

My first question is: Why do you feel you need to have two buttons overlaid?
If you want a non-button, clickable thing, that "feels" clickable, just create a style class with appropriate hover and active styles:

1 Like

Thanks for your insight!

Nothing from Vision will translate to Perspective in this area.

Understood, and my ignorance of everything going on in the background is evident. The documentation shows some common-ground between event types, component methods, etc. I suppose I was searching for a Perspective-equivalent to passing events between objects, if one exists, because the Vision-specific solution is among the more elegant I've seen. Instead, "I just want to add a few animations on top of this button" = rethink / redesign the template.

My first question is: Why do you feel you need to have two buttons overlaid?
If you want a non-button, clickable thing, that “feels” clickable, just create a style class with appropriate hover and active styles:

To me, a button-object seems to be the logical place to call a popup & handle animations for an object that looks like a button. Passing from one object to the next seems less-logical, but still retains a straightforward 'button-like' configuration.

My first attempt with Perspective templates was similar to your recommendation above, and sure, it looked-and-functioned enough like a button, but also seemed less-straightforward for those behind me. If this is the preferred method, I'll work to refine my original objects and classes. :+1:

the style pointer-events:none makes the mouse go through it… it also prevents hovers though, so i dont think you want to use it.

And tbh even if it didnt prevent hovers, you still should not do this but style the object itself to look like the button

1 Like