ich habe ein vorhanden Widget aus dem englischsprachigen Forum angepasst. Im Ziel wollte ich die Kerninfos eines Raums darstellen.
Auf dem iPhone sieht auch alles super aus (rechts oben):
Am Rechner sieht es aber total verschoben aus:
Code ist folgender:
Code: Alles auswählen
uid: Cell_Card_1a_small
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Header
name: text_header
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: Anz Fenster
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: select item for set temperature
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for blinds group (SUM)
label: Item
name: blinds_closed
required: false
type: TEXT
- context: item
description: select item for windows(s)
label: Item
name: windows
required: false
type: TEXT
- context: item
description: select item for numbers of windows
label: Item
name: windows_numbers
required: false
type: TEXT
timestamp: Apr 20, 2022, 9:23:14 AM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
class:
- padding: 0px
height: 100px
margin-left: 5px
margin-right: 5px
noShadow: false
slots:
content:
- component: f7-block
config:
style:
left: 20px
position: absolute
top: -30%
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 17
style:
margin-right: -10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 15px
margin-left: 30px
margin-top: -20px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
bottom: -230%
left: 16px
position: absolute
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 16px
font-size: 10px
left: 35%
text: =items[props.status].state + '/' + Math.trunc(items[props.status_anz].state,0)
visible: =items[props.status_anz].state <> 0
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
text: "=items[props.door_state].state === 'ON' ? '' : ''"
visible: "=props.door_state ? true : false"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 15%
font-size: 10px
left: -34%
top: 5px
text: =items[props.windows].state + '/' + Math.trunc(items[props.windows_numbers].state,0)
visible: =items[props.windows_numbers].state > 0
slots:
media:
- component: oh-icon
config:
icon: window-open
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
font-size: 10px
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
left: 35%
top: -23px
text: =Math.trunc(items[props.blinds].state,0) + '/' + Math.trunc(items[props.windows_numbers].state,0)
visible: =items[props.windows_numbers].state > 0
slots:
media:
- component: oh-icon
config:
icon: "=(Number(items[props.blinds].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
height: 18px
- component: f7-block
config:
style:
bottom: -125%
left: 16px
position: absolute
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
visible: "=props.temp ? true : false"
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 10px
font-size: 10px
text: =items[props.humidity].state
visible: "=props.humidity ? true : false"
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
style:
height: 110px
left: 0px
position: absolute
top: 0px
width: 100%