Widget with /flashing/blinking icon

Setup, Configuration and Use Beginners
1
  • Platform information:
    • Hardware: PI5 /8GB
    • openjdk version “21.0.10” 2026-01-20 LTS
      OpenJDK Runtime Environment Temurin-21.0.10+7 (build 21.0.10+7-LTS)
      OpenJDK 64-Bit Server VM Temurin-21.0.10+7 (build 21.0.10+7-LTS, mixed mode, sharing)Java Runtime Environment: which java platform is used and what version
    • openHAB version: 5.1.3 stable
  • Blinking/Flashing Icon

I’m tinkering with a widget that shows me if I have mail in my postbox. If so the Icon should flashing. But as I’m no specialist, my attempts always fail.

The widget-Code is now:

uid: Post_da2
tags: []
props:
  parameters:
    - context: item
      label: Dummy Item
      name: dummy
      required: true
      type: TEXT
    - label: Titel
      name: title
      required: false
  parameterGroups: []
timestamp: Mar 24, 2026, 3:37:09 PM
component: f7-card
config:
  style:
    background: '=(items[props.dummy].state === "ON") ? "linear-gradient(to top
      right,#FA8072 30%,#00FFFF 60%)" : "radial-gradient(circle, lightgreen,
      yellow,#20B2AA 20%, #6fa8dc 60% ,#ffe74c 95%)"'
    --f7-card-header-padding-horizontal: 150px
    --f7-card-header-font-size: 25px
    --f7-card-font-size: 20px
    --f7-card-height: 80px
  stylesheet: |
    .blink-active {
      animation: blinker 1s linear infinite;
    }
    @keyframes blinker {
      50% 
        { opacity: 0;
        }
    } 
  title: =props.title
slots:
  default:
    - component: oh-icon
      config:
        action: command
        actionCommand: "false"
        actionItem: =(props.dummy)
        class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
        icon: '=(items[props.dummy].state === "OFF") ?
          "f7:exclamationmark_triangle_fill" : "f7:house"'
        height: 80
        style:
          color: '=(items[props.dummy].state === "ON") ? "green" : "red"'
          margin-left: 150px
    - component: Label
      config:
        style:
          font-weight: bold
          margin-left: 150px
        text: '=(items[props.dummy].state === "ON") ? "Post da" : "Keine Post"'
    - component: f7-col
      config: {}
      slots:
        default:
          - component: oh-toggle
            config:
              color: blue
              item: =(props.dummy)
              style:
                margin-left: 170px

and it looks like:

widget
widget616×158 16.3 KB

but no Blinking/Flashing, when the postbox is filled.

Any help and hints wanted.

Thanks in advance.

Cheers - Peter

2

This is a subtle one. In fact, your CSS looks like it should be correct. The problem is with your oh-icon. That’s actually one of the few components that doesn’t pass the class property on to the underlying html elements. So, your icon is just never getting the blink-active class.

The quick solution here is just to wrap your icon in a div element and apply the class to that instead:

slots:
  default:
    - component: div
      config:
        class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
      slots:
        default:
          - component: oh-icon
            config:
              action: command
              actionCommand: "false"
              ...rest of config
1 Like
3

Many thx for your solution. Now the widget works fine.

I have read about that “div”-element in other threads of you, but didn’t understand, as sometimes I’m a bit stupid :zany_face: to understand (as I’m 72 :old_man: ). But with your personal tip I brought the widget to do do what I want.

And for others, who want to use/copy the widget, here’s is the Yaml-Code:

uid: Post_da2
tags: []
props:
  parameters:
    - context: item
      label: Dummy Item
      name: dummy
      required: true
      type: TEXT
    - label: Titel
      name: title
      required: false
  parameterGroups: []
timestamp: Mar 25, 2026, 8:57:48 AM
component: f7-card
config:
  style:
    --f7-card-font-size: 20px
    --f7-card-header-font-size: 25px
    --f7-card-header-padding-horizontal: 150px
    --f7-card-height: 80px
    background: '=(items[props.dummy].state === "ON") ? "linear-gradient(to top
      right,#FA8072 30%,#00FFFF 60%)" : "radial-gradient(circle, lightgreen,
      yellow,#20B2AA 20%, #6fa8dc 60% ,#ffe74c 95%)"'
  stylesheet: |
    .blink-active {
      animation: blinker 1s linear infinite;
    }
    @keyframes blinker {
      50% 
        { opacity: 0;
        }
    } 
  title: =props.title
slots:
  default:
    - component: div
      config:
        class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
      slots:
        default:
          - component: oh-icon
            config:
              action: command
              actionCommand: "false"
              actionItem: =(props.dummy)
              class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
              height: 80
              icon: '=(items[props.dummy].state === "OFF") ?
                "f7:exclamationmark_triangle_fill" : "f7:house"'
              style:
                color: '=(items[props.dummy].state === "ON") ? "green" : "red"'
                margin-left: 150px
    - component: Label
      config:
        style:
          font-weight: bold
          margin-left: 150px
        text: '=(items[props.dummy].state === "ON") ? "Post da" : "Keine Post"'
    - component: f7-col
      config: {}
      slots:
        default:
          - component: oh-toggle
            config:
              color: blue
              item: =(props.dummy)
              style:
                margin-left: 170px

One more time again, many thx for your help.

Cheers - Peter