Logos
March 24, 2021, 4:58pm
1
For my light dimmers it would be ideal to have a list-widget combining a switch with a dimmer. So I took the f7-card widget developed by aaron2
Hereby my result after 2 days of work:
[IMG_3B6988E52329-1] [IMG_90E07EA27418-1]
the code of the widget:
uid: Dimmer
tags: []
props:
parameters:
- context: item
description: An item to control
label: Item
name: dimmeritem
required: false
type: TEXT
timestamp: Dec 29, 2020, 4:29:23 PM
component: f7-card
config:
noShadow: false
class:
- padding
style:
box-shadow: 0px 6px 6px hsl(0,0%,90%)
border-radius: 12px
height: 5em
slots:
default:…
and integrated it in a list widget via textual item config file:
.... { channel="knx:device:bridge:DALI:UG_Fitness_Licht", listWidget="widget:Dimmer"[Item="UG_Fitness_Licht"]}
on the mobile phone this approach works quite nicely, however on the ipad the card does not fully scale to the max width
does anybody has an idea how that could be done.
@rlkoshak : maybe the approach described above could be a way to group your chromecast widgets in one consolidated list-widget (or maybe it is just a too naive and not educated approach)?
NOTE: I will keep this post around for reference but all of these widgets will be migrated to the new Marketplace.
I’ve been creating a bunch of custom list widgets to use as default list widgets on my similar Items. This lets me define the widget only once and keep a consistent look and feel over how the Items are depected and work across the automatically generated cards. I figured I’d share some here as they might be useful.
Once you’ve imported them as a custom widget under Developer Tools…
With a lot trial&error and even more help from @RGroll and @JustinG I managed to achieve something similar which I’m quite happy with and whicht might be helpful for you:
The code is not perfect since I’m still an OH-beginner, but it might be interesting anyway:
component: oh-list-card
config:
noChevron: true
style:
background: linear-gradient(to bottom,#e6e6e6 0%,#8c8c8c 100%)
slots:
default:
- component: f7-list-item
config:
accordionItem: true
slots:
content:
- component: f7-row
config:
class:
- align-items-center
style:
width: 100%
height: 25px
flex-wrap: nowrap
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-row
- align-items-center
- margin-top
- margin-bottom
style:
height: 100%
width: fit-content
min-width: 100px
slots:
default:
- component: oh-button
config:
icon-f7: lightbulb_fill
iconColor: '=(items.AnzahlLampenAn.state === "0") ? "gray" : "yellow"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
- component: oh-label-item
config:
item: AnzahlLampenAn
- component: f7-col
config:
class:
- display-flex
- align-items-center
- justify-content-flex-end
style:
height: 100%
width: 100%
slots:
default:
- component: oh-list-item
config:
title: Alle aus
action: command
listButton: true
actionItem: AlleLichterAus
actionCommand: ON
default:
- component: f7-accordion-content
slots:
default:
- component: oh-repeater
config:
sourceType: array
for: devices
in:
- actionitem: LeuchteHuegross_Farbe
label: AZ-H
- actionitem: LeuchteHueklein_Farbe
label: AZ-E
- actionitem: LeuchteMobil_Farbe
label: SZ-M
- actionitem: LeuchteWohnzimmer_Farbe
label: WZ
- actionitem: EsszimmerTisch_Farbe
label: EZ-T
- actionitem: EsszimmerWein_Farbe
label: EZ-W
- actionitem: EsszimmerKlavier_Farbe
label: EZ-K
- actionitem: Frosch_Farbe
label: EZ-F
slots:
default:
- component: f7-list-item
slots:
content:
- component: f7-row
config:
class:
- align-items-center
style:
width: 100%
height: 25px
flex-wrap: nowrap
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-row
- align-items-center
- margin-top
- margin-bottom
style:
height: 100%
width: fit-content
min-width: 100px
slots:
default:
- component: oh-button
config:
action: command
actionItem: =loop.devices.actionitem
actionCommand: '=(items[loop.devices.actionitem].state.split(",")[2] === "0") ?
items[loop.devices.actionitem].state.split(",")[0]+
"," +
items[loop.devices.actionitem].state.split(",")[1]
+ ",80" :
items[loop.devices.actionitem].state.split(",")[0]
+ "," +
items[loop.devices.actionitem].state.split(",")[1]
+ ",0"'
icon-f7: lightbulb_fill
iconColor: '=(items[loop.devices.actionitem].state.split(",")[2] === "0") ?
"gray" : "yellow"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
- component: oh-button
config:
action: popup
actionModal: widget:Widget_farben
actionModalConfig:
leuchte: =loop.devices.actionitem
text: =loop.devices.label
color: blue
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
- component: f7-col
config:
class:
- display-flex
- align-items-center
style:
height: 100%
width: 100%
slots:
default:
- component: oh-colorpicker
config:
sliderLabel: true
sliderValue: true
item: =loop.devices.actionitem
modules:
- brightness-slider
Since I don’t know (yet) how to work with variables in OH I exported some values to node-red, where I counted the switched-on-lights and exported it back to OH. But I guess it’s quite simple to do that in OH directly.
1 Like
