Seite 2 von 2
Re: Widget "Post ist da"
Verfasst: 24. Mär 2026 13:36
von 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
Re: Widget "Post ist da"
Verfasst: 24. Mär 2026 15:31
von 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