Widget "Post ist da"

[atk69]

Hallo peter-pan

hat geklappt
kleiner Korrekturen im Code und in meinem Kopf waren nötig
läuft einwandfrei.
Bei Gelegenheit schaue ich mal, ob ich das blinken noch hinbekomme.

Vielen Dank
Gruss
Andreas

[peter-pan]

Super.
Hier noch mal etwas modifizierter Widget-Code; zum "Spielen", wegen der Grössenverhältnisse, Texte, Formatierung, Hintergrundfarben, etc..

Code: Alles auswählen

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:21:01 PM
component: f7-card
config:
  style:
    background: '=(items[props.dummy].state === "ON") ? "linear-gradient(to top
      right,#FA8072 30%,#00FFFF 60%)" : "linear-gradient(to bottom
      right,darkcyan 0%,turquoise 60%"'
    --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

Das sieht dann so aus:

widget.jpg

Das mit dem Blinken erschliesst sich mir noch nicht so richtig. Aber wenn du was findest, kannst du ja kurz Bescheid geben.

Gruss - Peter

[lenschith]

ich habe mir hier mal ein Widget gebaut, hier blinkt das Badge. Vielleicht nützt dir das was.

Code: Alles auswählen

uid: Kachel_Statusanzeige
tags:
  - action
  - anzeige von infos
  - badge mit infos
  - blink effekt wenn swtich on
  - florianh-widgetset
  - lenschith
props:
  parameters:
    - description: kleiner Titel der Kachel
      label: Title
      name: title
      required: false
      type: TEXT
      groupName: appearance
    - description: Icon neben Titel, z.B. f7:thermometer
      label: Icon
      name: icon
      required: false
      type: TEXT
      groupName: appearance
    - description: Großes openHAB Icon, muss lokal auf dem OH Server liegen
      label: Großes openHAB Icon
      name: bigOhIcon
      required: false
      type: TEXT
      groupName: appearance
    - default: "0.5"
      description: Transparenz großes openHAB Icon
      label: Transparenz
      name: opacity_ohicon
      required: false
      type: TEXT
      groupName: appearance
    - description: in rgba() oder HEX oeder empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      groupName: appearance
    - description: path to image
      label: Background Image
      name: bgimage
      required: false
      type: TEXT
      groupName: appearance
    - context: item
      description: Item das zu überwachen ist, wenn nicht erfüllt blinkt es
      label: Monitoritem
      name: monitoritem
      required: false
      type: TEXT
      groupName: item
    - description: Badge Icon
      label: Icon
      name: badgeicon
      required: false
      type: TEXT
      groupName: badgesettings
    - default: blue
      description: Badge Icon Farbe
      label: Badge Icon Farbe
      name: badgeinfocolor
      required: false
      type: TEXT
      groupName: badgesettings
    - description: Info Badge, das Dauerhaft angezeigt wird mit z.B. Itemwerten
        =(items.TestSwitch.state).replace('ON','Reinigung
        läuft').replace('OFF','')
      label: Info Badge
      name: badgeinfo
      required: false
      type: TEXT
      groupName: badgesettings
    - description: Farbe für das Info Badge, das Dauerhaft angezeigt wird.
      label: Info Badge Farbe
      name: badgeiconcolor
      required: false
      type: TEXT
      groupName: badgesettings
    - default: red
      description: Badge Blink
      label: Blink Color1
      name: blinkcolor1
      required: false
      type: TEXT
      groupName: badgesettings
    - description: Zu überwandender Itemwert für den Alarm, z.B. OPEN
      label: Monitoring
      name: monitor
      required: true
      type: TEXT
      groupName: item
    - description: Label
      label: Label
      name: label
      required: false
      type: TEXT
      groupName: appearance
  parameterGroups:
    - name: appearance
      label: Grundeinstellungen
    - name: item
      label: Überwachungsitem
    - name: action
      context: action
      label: Action settings
      description: Action to perform when the widget is clicked. If trendline &
        analyzer are enabled, only clicks on the left third of the widget
        perform the action.
    - name: badgesettings
      label: Badgesettings
timestamp: Feb 2, 2026, 8:21:38 PM
component: f7-card
config:
  style:
    --blink-color1: =props.blinkcolor1
    --blink-color2: =props.bgcolor
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    background-image: ="linear-gradient(rgba(255,255,255,0.6), rgba(0,0,0,0.2)),
      url(" + props.bgimage + ")"
    background-position: center
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 130px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    overflow: hidden
    padding: 0px
  stylesheet: |
    .myDIV {
      animation: mymove 2s infinite;
    } @keyframes mymove {
      from {background-color: var(--blink-color1);}
      to {background-color: var(--blink-color2);}
    }
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: oh-icon
            config:
              icon: "=props.icon ? props.icon : 'f7:thermometer'"
              style:
                height: 20px
                margin-right: 10px
                top: -5px
                width: 20px
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          left: 17px
          position: absolute
          top: 45px
          width: 100%
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 24px
                font-weight: 400
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                width: "=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'"
              text: "=props.item ? (props.label ? props.label + ' ' +
                (items[props.item].displayState ? items[props.item].displayState
                : items[props.item].state) : (items[props.item].displayState ?
                items[props.item].displayState : items[props.item].state)) :
                (props.label ? props.label : '')"
    - component: f7-block
      config:
        style:
          height: 120px
          left: 15px
          position: absolute
          top: 15px
          width: 100%
      slots:
        default:
          - component: oh-icon
            config:
              icon: =props.bigOhIcon
              style:
                opacity: =props.opacity_ohicon
                position: absolute
                right: 10px
                top: 20px
                width: 80px
              visible: "=(props.bigOhIcon && (props.monitor ==
                items[props.monitoritem].state)) ? true : false"
          - component: oh-link
            config:
              actionPropsParameterGroup: action
              style:
                height: 125px
                left: 0px
                position: absolute
                top: 0px
                width: 100%
              visible: "=props.action ? true : false"
          - component: f7-chip
            config:
              class: myDIV
              iconColor: =props.badgeiconcolor
              iconF7: =props.badgeicon
              iconSize: 50px
              style:
                border-bottom-left-radius: 200px
                border-bottom-right-radius: var(--f7-card-expandable-border-radius)
                border-top-left-radius: 200px
                border-top-right-radius: var(--f7-card-expandable-border-radius)
                font-size: 16px
                height: 130px
                margin: 1px
                opacity: 0.6
                padding-left: 26%
                position: absolute
                right: -2px
                top: 0px
                width: 45%
              visible: "=(props.monitor == items[props.monitoritem].state) ? false : true"
    - component: f7-chip
      config:
        color: =props.badgeinfocolor
        iconF7: info
        style:
          border-bottom-left-radius: 0px
          border-top-left-radius: 0px
          left: 0px
          position: absolute
          top: 280%
        text: =props.badgeinfo

Gruß Lenschi

[peter-pan]

Hallo @lenschith vielen Dank für deinen Ansatz. Ich muss aber erst noch herausfinden was ich in einigen Feldern eingeben kann(muss). Z.B.: Badge Icon, Action, etc.)

Ich habe mich aber im englischen Forum umgehört und natürlich von "JustinG" auch den Lösungsansatz bekommen, der das "Häuschen" um Blinken bringt. Den Thread kann man hier nachlesen

Hier noch mal den überarbeitweten Yaml-Code:

Code: Alles auswählen

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

Viel Spass - Peter

Hier noch ein Snapshot:

widgets.jpg