[IGN-2121]Perspective Notification

Hi,

Is there a way to send notification on the perspective sessions (Like the one below)with a customised text title ... ?
image

regards

2 Likes

Do you have constraints/requirements on this ? Should it be a popup ? a toast ?

I’m thinking that the simplest way to do this would be having a message handler attached to a shared dock. Then all you have to do is send a message, with the notification details in the payload, catch that in the dock’s handler, and use the details to display whatever it is you want to display.

If you don’t already have a shared dock, you can make one that displays on demand, and use system.perspective.openDock() in the message handler. You can also time a system.perspective.closeDock call to close it automatically after a while.

While it’s (I think) the simplest way, it’s also not the prettiest, depending on several things: If you already have docks, it may disrupt your UI, it takes the whole height/width (depending on where you put the dock) of the screen (even if left transparent, you can see the edge of the dock), etc.
There might be ways of mitigating those issues, but I don’t have the time to work it out right now.

If you want to make it prettier, you might want to use a popup. But this will require you to have a component with the message handler in ALL your perspective pages. Or at least all the pages were you want this notification to be received.
The good news is, it can be an invisible component, that you just add everywhere.
How you handle the display of the notification is then up to you.

Have a look at @ryanmclaughlin’s very nicely done Perspective Utility Scripts on the Ignition Exchange. He has popups and status bar solutions with CSS fades and themes for “success” and “fail”, etc.

You could use these in your applications and, as already suggested by Pascal, trigger these with a message handler.

Workarounds aside, this is also something we’re considering exposing first party via a scripting function.

7 Likes

It would be great to trigger the built in notification scheme in that way, not only out of ease of implementation, but to increase consistency in the look and feel from a user standpoint.

1 Like

Hi,

Thanks everyone for the help, i will look at every proposed solution.

@PGriffith : To you have an idea when this could be implemented ?

Regards

No, no timeline to share. It’s still in the “incubating” stage, so it’s not about to get picked up to be worked on, even. If you need this functionality in the short term, I’d proceed with a workaround.

1 Like

Out of curiosity with a workaround, any comments you can make about relevant classes or message structures needed to hack the built in notifications in a module or scripting?

I don’t think you’d have access to what you need, it’s gated behind the SafetyWrapper. From a Perspective component you could theoretically access the NotificationStore, but it’s not currently designed to be general-purpose, so it would look like some other type of notification; I don’t think you can even provide arbitrary text right now.

1 Like

You could mock-up your own timed Popup using theming. The hard part would actually be identifying which page(s) should receive the notification.

1 Like

Darn safety wrappers! Y'all need to enable to reactions plugin so we can dislike anything that mentions a safety wrapper :wink:

(I understand the purpose of them, I just like to complain about them because they make life hard sometimes)

3 Likes

I've resorted to creating a popup with a timed existence (auto-close), and I added a CSS selector into my theme files to get rid of the popup's borders and round its edges:
Make sure the id you open the toast popup with is 'toast':

/* remove the border, add a shadow, and rounded edges to the toast notification popup /*
div#popup-toast {
    border: none;
    box-shadow: 1px 1px 8px 3px #00000040 !important;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    animation: fadeIn 1s;
}
/* remove the blue highlight around the popup /*
div#popup-toast:focus {
    outline: none !important;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
      transform: translateY(25%);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
    }
}

image

Ignore the dumb testing message :slight_smile:

10 Likes

chrome_yYZ9lwaXKG

Here's our version of the same idea (it's not exchange worthy, yet).

17 Likes

wow, that is clean!

1 Like

How do you achieved this?
can you share something?

Well, this:

suggests that it will be shared on the Exchange. I interpret "exchange-worthy" to mean embarrassing hacks have been pruned, along with any proprietary stuff. Sometimes you just have to wait.

1 Like

This.

And this.

The main problem is the component is tightly integrated with our custom theme. While our theme is open-source (pyro-mui-joy),

  1. It doesn’t make sense to release an exchange component that requires a massive theming overhaul.

  2. Removing the theming references is hard.

  3. The current state of the CSS for the hover effects is gross and I’m not putting it out into the world with my name on it lol.

Here’s the general approach, for anyone who wants to try and implement this monstrosity on their own.

  1. Open a full screen popup with a transparent background (toast-context).
  2. In the toast-context, use a flex repeater to display your toast-container instances, which can display an arbitrary view with arbitrary parameters.
  3. Make sure to disable touch events on the toast-context (it’s covering the full screen), but leave it enabled on the toast-containers.
  4. Build a script to add toast-containers as you need new toasts.
  5. Build a script that allows a toast-container to flag itself for deletion.
  6. When a toast-container is flagged for deletion, hide it. When all toast-containers are flagged for deletion, empty the array of toast-containers (this is to prevent thrashing when removing flex repeater instances).
  7. Apply an large amount of CSS in order to get hover and deletion animations (:nth-child() will be your friend).
5 Likes