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