OH3 Widget f7-badge "flash" color?

Setup, Configuration and Use Beginners
, ,
3

Thanks Justin. As usual you pointed me in the right direction. Once I used the correct terminology I was able to find an example to use to get the animation part to flash the colours and your linked example helped me construct a working basic widget as follows:

uid: Test_Colour_Animation
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 22, 2022, 5:39:15 PM
component: f7-page
config:
  stylesheet: >
    .myDIV {
      animation: mymove 1s infinite;
    } @keyframes mymove {
      from {background-color: orange;}
      to {background-color: gray;}
    }
slots:
  default:
    - component: f7-badge
      config:
        class: myDIV
        style:
          border-radius: 20px
          height: 20px
          left: 10px
          position: absolute
          top: 240px
          width: 25px

Giving:

Flasher

Please can you point me in a direction now to be able to base the colour on an expression.

So something like:

bgColor: '=(items.ZonesClosed.state === "ON") ? "orange" : items.PartitionExitDelay.state === "ON") ? *ANIMATION* : "gray"'

I have no idea where do this?

The only other options I can think of is to use 3 x f7-badge with visibility to decide which one is active - just seems too complex?

Thanks