After a day of work I have been able to progress a little. See the screenshots below. Anybody interested to help/contribute to build a nice UI for lights control together?
I worked a bit further, hereby the result. I made some custom widget to click to taps of a room, a cannot get this working however. Does anybody know how you can make the entire thing in a button? Just like the top buttons for the scenes.
This is exactly the kind of widget I was looking for opening a dimmer in a floorplan but I do not get it to work there. Maybe someone has an idea what the issue is?
First I created a widget called “Dimmer” with the above code in the developer section
Then I create a marker in the floorplan and set the action to “open popup”
I have found when you use f7-card you also need to define a f7-card-content, issues occur if you dont define the content.
The message “Requested content not found” seems to be the clue here.
Have a look at the camera widgets I created to see how you use f7-card-content as all the examples in this thread appear to be missing it including a post from me.
You basically set props for the two items so that the state can be referenced later on in the widget code.
Look at the code for the ‘uid: Card_room_2’ posted earlier in this thread which shows two text items being set, instead of text items set actual items and then build the widget with the components to reference those items.
To control two or more items, you can use a group item, e.g. add all brightness items to be controlled to a group and then control the group item from the widget. You need to define for the group the base member type e.g. switch or dimmer.
To control colors for a group you need to use a dummy color item and the use a rule to make your group follow the dummy. I use this rule
var Dummy = null
rule "Check Color Entre"
when
Item EntreDummyColor received update
then
Dummy = EntreDummyColor.state
sendCommand(Entre1_Color, Dummy.toString)
sendCommand(Entre2_Color, Dummy.toString)
sendCommand(Entre3_Color, Dummy.toString)
end
I have adjusted Aaron2’s widgets (thanks Aaron2) to (i) a widget that only controls brightness, (ii) one that controls brightness, temperature and has a color picker and (iii) one that controls brightness and temperature:
@Aaron2 This looks great. I am new to openHAB, not a programmer and I want to control my dimmers. Thanks for sharing your code but i don’t get how to import is. I work via the GUI of openHAB 3. Created a new page and pasted the YAML code into the page. But i only get errors. Can someone get me started?
Thanks, learning new things every day ! I was able to add it to a page. How do i fill it up with code? is there some kind of reference i can read or learn?
As a first step i want to be albe to switch on the light with that on/off button. is that possible?
Currently there is also a caveat, i use a custom code to swith my dimmer on/off. A push-button/Toggle button. Because if i use a default toggle button. The command is only send once every 2 times. So for example only the ON status is send (and means the same for on and off) The Push-button/toggle code fixes this. But maybe this is confusing by giving that information
Second i would like to control the dimmer of that light.
I designed this for Shelly RGBW which is having just 4 physical channels therefore I have White and Gain to control brightness based on whether I am using it as a ‘normal’ white light or I’m using it with a certain color set.
First of all i needed a ‘boolean’ to decide in which mode I’m in so I created an Item which then I assigned in the model hierarchy to the proper place:
uid: Shelly_RGBW
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Power item for the widget
label: Power
name: power
required: true
type: TEXT
- context: item
description: Color item for the widget
label: Color
name: color
required: true
type: TEXT
- context: item
description: Gain item for the widget
label: Gain
name: gain
required: true
type: TEXT
- context: item
description: White item for the widget
label: White
name: white
required: true
type: TEXT
- context: item
description: Name of the switch for the Color Mode
label: Color Mode
name: colormode
required: true
type: TEXT
parameterGroups: []
timestamp: Feb 16, 2021, 5:18:47 PM
component: f7-card
config:
style:
border-radius: 20px
slots:
content:
- component: f7-row
config:
class:
- justify-content-center
slots:
default:
- component: oh-toggle
config:
item: =props.power
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
margin-top: 10px
left: 0
font-weight: 600
z-index: 99
margin-left: 20px
- component: Label
config:
text: =props.title
- component: oh-button
config:
colorTheme: white
color: white
iconMaterial: more_horiz
iconSize: 20px
action: popup
actionModal: widget:colorpickerPopup
actionModalConfig:
item: =props.color
style:
position: absolute
margin-top: 0px
margin-right: 20px
right: 0
font-weight: 600
z-index: 99
- component: f7-row
config:
class:
- margin-left
- margin-right
- padding-top
style:
margin-top: 10px
slots:
default:
- component: oh-slider
config:
visible: =(items[props.colormode].state === "OFF")
item: =props.white
min: 0
max: 100
unit: "%"
- component: oh-slider
config:
visible: =(items[props.colormode].state === "ON")
item: =props.gain
min: 0
max: 100
unit: "%"
- component: f7-row
config:
class:
- padding
slots:
default:
- component: oh-button
config:
text: Color Mode
fill: '=(items[props.colormode].state === "OFF") ? false : true'
outline: true
action: toggle
actionItem: =props.colormode
actionCommand: ON
actionCommandAlt: OFF
style:
width: 100%
I am pretty new to OH, been using HA for a while now so there might be easier solutions - I’m still exploring. This is my first Widget and along with that I am aware that my UI design skills really suck, but I needed something to be able to control my lights based on Shelly RGBW so here it is. Hope it will be useful for someone