GUI Design Questions

[e0310912]

Hi all, currently trying to design my Display of Ignition for my project and I have some questions regarding the Design

1. For the pages, is it possible to freely place components and embedded windows without rely in to the alignments since it changes all the components ?

2. Is there an example of how to do a blinking Icon with a simple labelling of the alerts as shown in this Alarm Status Tag Example in 7.9

Not sure what is the customizer style

[matthew.ayre]

Hi @e0310912,

1. If you are looking to freely place components in a view, you will likely need a coordinate view/container. Alternatively, you can use lots of embedded flex containers to get the desired grid layout.

2. Unfortunately, the example you are using is for Vision which is not part of Maker Edition. Maker contains Perspective which was only released in v8.0+. You may find this more useful, but it does not specifically answer your question. Depending on what you are looking to animate, you will likely need to use some form of animation or css styling.

For part 2, have a go and if you get stuck post back here with your example and we can work through it together

[PGriffith]

You can make a 'flashing' style class using animation; see this post:

Internal flash bit

It’s a tiny bit convoluted, but you can just use a style class for this, too: [image] Set the duration appropriately, then add a stop at 49% with the same color as your 0% state. Then add a stop at 50% (and 100%) with the alternate color. The animation will take 1s to transition through all your steps - so half the time, it will be trying to transition from step 0 to step 49 - but since they’re the same, nothing will happen. Then, after 50% of 1s has elapsed, it switches to the 50% style (a…

You can put style classees on the alarm status table by just adding a classes key in the relevant area of the properties:

Alarm status table row styles flashing and static backgrounds based on priorities

Adding a classes key, just like exists on base in your screenshot, should work for individual priorities.

[e0310912]

Hmm, is there a way to program it to switch between 2 styles ?

Like when there is no Active & Unacknowledged Alarm, it just stay normal like plain white then when it receives an Active & Unacknowledged Alarm, it will flash red ?

Maybe a Binding to do that ?

[e0310912]

1. So the coordinate view/container allows such freedom to place containers, been using Embedded Views for most of them and realized there’s always a Scroll bar beside them… making it look quite untidy and unpleasant. I will try that out thank you.

2. Was kind of hoping to make like one label to flash red if there’s an active & unacknowledged alarm, I tried to configure PGriffith Flashing style which works well enough for the flashing effect with animate, but I think I might need it not to be active when there’s no active & unacknowledged alarm

[matthew.ayre]

You can bind the style property of the label based on the alarm status of the tag. Simply remove the flashing style when the alarm is inactive, and then add the style when it is active.

I may be able to produce an example in an hour or so after I’ve put the little one to bed if you think that would be helpful?

[matthew.ayre]

Here's the example I mentioned in the previous post

If that is what you are looking for, here is the binding on the props.style.classes of the label:

Note that my style name was ‘Test’, but you will need to provide the full path if you are using folders.

Here is my style config at 0%

Here is my style config at 100%