HTML dropdown menu color animation

Apollo

I added a HTML horizontal dropdown menu on the top of the page to navigate to all different process pages.
Would it be possible to do some color animation of the text in this menu if an alarm is active on some page?
Like this it is possible to draw the attention of the operator directly to the correct page.

Can someone give me a hint how to do this, if possible? (the menu is using made of only HTML and CSS.)

Thx & grtz,

Kris

ondrej_severa

Hello Kris,
you have to subscribe for reading the alarms (some boolean signals I guess) on the main page or on every page. This depends on your project structure.
I don't know what kind of HMI you are using (WebBuDi, HMI Designer, or custom) but basically, you have to add

<script>
REX.HMI.init = function(){
  REX.HMI.addItem({alias:"ALARMS", cstring:"task.alarm_block_or_subsytem:parameter"}).on('change',function(itm){
    let index = itm.getValue();
    /* HERE you have to pick the <li> or  other element of you menu*/
    let elem = // Some jQuery or document.queryselector magic
    elem.style.backgroundColor = 'red';
  })
}
</script>

If you are using HMI Designer, you can follow the example 0301-10_Custom_HMI_Component

or you can read Chapter 5 of the HMI manual
BR
Ondrej

Scoobsalamander

Thank you for this solution, unfortunately I don't have the time to try this out at the moment.
It will have to wait until the second part of next week. I'm already happy that there is a possibility to make it work.

Kris