Light Control Card

Add-on Marketplace UI Widgets
,
1

winux_lightcard
winux_lightcard694×254 11.7 KB

winux_lightcard

A widget suited for lights and dimmer items.

  • The whole area acts as dimmer control. Nice for touch displays.
  • Fully customizable in the widget configuration screen. All colors can be changed.
    See pictures below.
  • The switch can be either horizontal or vertical.
  • Color Templates added.

Default look:
1_default_yellow

The quick paste configs below can be applied like this:
quickpastemanual
Feel free to also post your configs in yaml code fences below.
It’s a nice way to quickly apply, store and share different looks.

Purple (quick paste config):

  bgcolorON: rgba(70, 0, 70, 1)
  switchONbgcolor: rgba(170, 0, 170, 1)
  sliderbgcolor: rgb(120, 0, 120, 1)
  switchorientation: false
  bgcolorOFF: rgba(28, 28, 29, 1)
  switchOFFbgcolor: rgba(20, 20, 20, 1)
  switchhandleOFFcolor: rgba(40, 40, 40, 1)
  switchhandleONcolor: rgba(240, 210, 240, 1)
  sliderlabelbgcolor: rgba(170, 0, 170, 0.5)
  devicefontcolor: rgba(240, 210, 240, 1)
  dimmerlabelfontcolor: rgba(240, 210, 240, 1)

2_purple

Orange (quick paste config):

  bgcolorON: rgba(100, 34, 7, 1)
  bgcolorOFF: rgba(28, 28, 29, 1)
  switchONbgcolor: rgba(100, 55, 0, 1)
  switchOFFbgcolor: rgba(20, 20, 20, 1)
  switchhandleONcolor: rgb(255,69,0)
  switchhandleOFFcolor: rgba(40, 40, 40, 1)
  sliderbgcolor: rgba(200, 85, 0, 0.5)
  switchorientation: true
  sliderlabelbgcolor: rgba(100, 45, 0, 0.6)

3_orange

Mintgreen (quick paste config):

  bgcolorON: rgba(0,71,31,1)
  sliderbgcolor: rgb(0, 153, 66)
  switchorientation: false
  sliderlabelbgcolor: rgba(0, 110, 48, 1)
  switchONbgcolor: rgb(0, 212, 92)

4_mintgreen

Red (quick paste config):

  bgcolorON: rgba(225,0,0,0.1)
  sliderbgcolor: rgba(225,0,0,0.5)
  switchorientation: true
  switchONbgcolor: rgba(170,0,0,0.3)
  bgcolorOFF: rgba(50,0,0,0.1)
  switchhandleONcolor: rgba(245,0,0,1)
  switchhandleOFFcolor: rgba(245,0,0,0.1)
  switchOFFbgcolor: rgba(30,0,0,1)
  sliderlabelbgcolor: rgba(225,0,0,0.3)

5_red

Blue (quick paste config):

  bgcolorON: rgba(0,50,235,0.2)
  sliderbgcolor: rgba(0,50,235,0.5)
  switchorientation: false
  switchhandleONcolor: rgba(200,200,255,1)
  switchONbgcolor: rgba(0,25,155,1)
  bgcolorOFF: rgba(0,25,135,0.1)
  switchOFFbgcolor: rgba(0,0,80,1)
  sliderlabelbgcolor: rgba(0,25,100,0.7)
  switchhandleOFFcolor: rgba(150,150,255,0.2)

6_blue

White (quick paste config):

  bgcolorOFF: rgba(60, 60, 60, 0.8)
  bgcolorON: rgba(100, 100, 100, 0.8)
  sliderbgcolor: rgba(250, 250, 250, 0.7)
  switchorientation: false
  switchOFFbgcolor: rgba(70,70,70,1)
  sliderlabelbgcolor: rgba(255, 255, 255, 0.3)
  switchhandleOFFcolor: rgba(30, 30, 30, 1)
  switchhandleONcolor: rgba(245, 225, 0, 1)
  switchONbgcolor: rgba(140,140,140,1)
  devicefontcolor: rgba(20,20,20,1)
  roomfontcolor: rgba(25,25,25,0.8)
  dimmerlabelfontcolor: rgba(50,50,50,1)

7_white

Udated configuration screen:

1
1631×630 8.1 KB

2
2631×630 10.1 KB

3
3630×629 8.91 KB

Changelog

Version 0.2

  • Text color config added in the config screen.
  • Config restructured.
  • Many typos fixed and hopefully added some new ones :smiley:
  • Color configs added. See Above.

Version 0.1

  • initial release

Resources

uid: winux_lightcard
tags:
  - light
  - switch
  - dimmer
  - madebywinux
props:
  parameters:
    - description: Item Name
      name: itemname
      required: true
      type: TEXT
      groupName: labeling
    - description: Room Name
      name: roomname
      required: false
      type: TEXT
      groupName: labeling
    - context: item
      description: Switch Item
      label: Item
      name: switchitem
      required: false
      type: TEXT
      groupName: items
    - context: item
      description: Dimmer Item
      label: Item
      name: dimmeritem
      required: false
      type: TEXT
      groupName: items
    - description: Icon name (Dynamic icons are supported)
      name: icon
      required: false
      type: TEXT
      groupName: icons
    - description: OFF = Horizontal orientation | ON = Vertical orientation.
      label: Vertical toggle orientation.
      name: switchorientation
      required: false
      type: BOOLEAN
      groupName: items
    - description: Card background color | "ON" state
      name: bgcolorON
      required: false
      type: TEXT
      groupName: facecolors
    - description: Card background color | "OFF" state
      name: bgcolorOFF
      required: false
      type: TEXT
      groupName: facecolors
    - description: Switch backround color | "ON" state
      name: switchONbgcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Switch background color | "OFF" state
      name: switchOFFbgcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Switch handle color | "ON" state
      name: switchhandleONcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Switch handle color | "OFF" state
      name: switchhandleOFFcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Slider Color
      name: sliderbgcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Slider label background color (dimmervalue background)
      name: sliderlabelbgcolor
      required: false
      type: TEXT
      groupName: facecolors
    - description: Font color device name.
      name: devicefontcolor
      required: false
      type: TEXT
      groupName: fontcolors
    - description: Font color room name.
      name: roomfontcolor
      required: false
      type: TEXT
      groupName: fontcolors
    - description: Label font color (dimmervalue).
      name: dimmerlabelfontcolor
      required: false
      type: TEXT
      groupName: fontcolors
  parameterGroups:
    - name: labeling
      label: Name definitions
      description: Please enter a name for device and location.
    - name: icons
      label: Icon names.
      description: Please enter an icon name, e.g., lightbulb. Move (dynamic) icons into the conf/icons/classic/ directory.
    - name: items
      label: Widget Items
    - name: facecolors
      label: Face Colors
      description: Please enter color informations for the indivual face elements. No value = default widget element color. Use values like rgba(250, 0, 0, 1) for red or simply use the color name, e.g., red,blue,pink.
    - name: fontcolors
      label: Font/Text Colors
      description: Please enter color values for the indivual text element. No value = default widget text color.
timestamp: Oct 29, 2022, 4:42:57 AM
component: f7-card
config:
  style:
    background: '=items[props.switchitem].state == "ON" && !props.bgcolorOFF  && !props.bgcolorON ? "rgba(255, 255, 0, 0.1)" : items[props.switchitem].state == "OFF" && !props.bgcolorOFF  && !props.bgcolorON ? "rgba(28,28,29,1)" : items[props.switchitem].state == "ON" && props.bgcolorOFF && props.bgcolorON ? props.bgcolorON : items[props.switchitem].state == "OFF" && props.bgcolorOFF && props.bgcolorON ? props.bgcolorOFF : items[props.switchitem].state == "OFF" && !props.bgcolorOFF && props.bgcolorON ? "rgba(28,28,29,1)" : items[props.switchitem].state == "OFF" && props.bgcolorOFF && !props.bgcolorON ? props.bgcolorOFF : items[props.switchitem].state == "ON" && !props.bgcolorOFF && props.bgcolorON ? props.bgcolorON : items[props.switchitem].state == "ON" && props.bgcolorOFF && !props.bgcolorON ? "rgba(255, 255, 0, 0.1)" : props.bgcolorOFF'
    border-radius: 20px
    max-height: 100px
    min-height: 100px
    overflow: hidden
    position: relative
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              width: 100
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.dimmeritem
                    label: true
                    max: 100
                    min: 0
                    releaseOnly: true
                    scale: false
                    step: 1
                    style:
                      --f7-range-bar-active-bg-color: '=props.sliderbgcolor ? props.sliderbgcolor : "rgba(255,240,0,0.5)"'
                      --f7-range-bar-bg-color: '=!items[props.switchitem].state == "ON" ? "transparent" : "transparent"'
                      --f7-range-bar-border-radius: 20px
                      --f7-range-bar-size: 100px
                      --f7-range-knob-color: transparent
                      --f7-range-knob-size: 0px
                      --f7-range-label-bg-color: '=!props.sliderlabelbgcolor == "" ? props.sliderlabelbgcolor : "rgba(150,150,0,0.7)"'
                      --f7-range-label-border-radius: 5px
                      --f7-range-label-font-size: 25px
                      --f7-range-label-font-weight: 400
                      --f7-range-label-padding: 0px 2px
                      --f7-range-label-size: 40px
                      --f7-range-label-text-color: '=props.dimmerlabelfontcolor ? props.dimmerlabelfontcolor : "rgba(255,255,255,0.9)"'
                      height: 100px
                      position: relative
                      width: 100%
                    unit: "%"
                    visible: "=props.dimmeritem ? true : false"
                - component: oh-toggle
                  config:
                    class:
                      - '=props.switchorientation ? "large-vertical-toggle" : ""'
                    item: =props.switchitem
                    style:
                      --f7-theme-color: '=props.switchONbgcolor ? props.switchONbgcolor : "rgba(255,204,0,1)"'
                      --f7-toggle-border-color: rgba(0,0,0,0.5)
                      --f7-toggle-handle-color: '=items[props.switchitem].state == "OFF" && !props.switchhandleOFFcolor  ? "rgba(60,60,60,1)" : items[props.switchitem].state == "OFF" && props.switchhandleOFFcolor ? props.switchhandleOFFcolor : items[props.switchitem].state == "ON" && !props.switchhandleONcolor  ? "rgba(255,255,255,1)" : items[props.switchitem].state == "ON" && props.switchhandleONcolor ? props.switchhandleONcolor : items[props.switchitem].state == "OFF" && !props.switchhandleOFFcolor && !props.switchhandleONcolor ? "rgba(60,60,60,1)" : items[props.switchitem].state == "ON" && !props.switchhandleOFFcolor && !props.switchhandleONcolor ? "rgba(255,255,0,1)" : ""'
                      --f7-toggle-height: '=props.switchorientation ? "20px" : "40px"'
                      --f7-toggle-inactive-color: '=props.switchOFFbgcolor ? props.switchOFFbgcolor : "rgba(20,20,20,1)"'
                      --f7-toggle-width: '=props.switchorientation ? "40px" : "80px"'
                      position: absolute
                      right: 2%
                      top: '=props.switchorientation ? "calc(50% - 10px)" : "calc(50% - 20px)"'
                    visible: "=props.switchitem ? true : false"
          - component: f7-row
            config:
              style:
                overflow: hidden
                pointer-events: none
                position: absolute
                text-overflow: ellipse
                top: calc(50% - 29px)
                user-select: none
                white-space: nowrap
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      left: 2%
                      position: relative
                  slots:
                    default:
                      - component: f7-row
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  min-width: 50px
                                width: 10
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: 54
                                      icon: '=props.icon ? props.icon : "lightbulb"'
                                      state: "=props.dimmeritem ? items[props.dimmeritem].state : items[props.switchitem].state"
                                      style:
                                        left: calc(50% - 27px)
                                        pointer-events: none
                                        top: calc(50% - 27px)
                                        user-select: none
                            - component: f7-col
                              config:
                                width: 40
                              slots:
                                default:
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            id: itemdescfooter
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: '=props.devicefontcolor ? props.devicefontcolor : "rgba(255,255,255,0.9)"'
                                                    font-size: 30px
                                                    font-weight: 400
                                                    left: 0
                                                    line-height: 30px
                                                    padding: 0px
                                                    text-shadow: 0px 2px 15px rgba(0, 0, 0,0.2)
                                                    user-select: none
                                                    mix-blend-mode: brighten
                                                  text: '=props.itemname ? props.itemname : "Bitte Namen eingeben."'
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            id: itemdescfooter
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: '=props.roomfontcolor ? props.roomfontcolor : "rgba(200,200,200,0.6)"'
                                                    font-size: 16px
                                                    left: 0
                                                    line-height: 16px
                                                    padding: 2px
                                                    pointer-events: none
                                                    text-shadow: 0px 0px 10px rgba(0, 0, 0,0.2)
                                                    user-select: none
                                                    mix-blend-mode: brighten
                                                  text: '=props.roomname ? props.roomname : "Bitte Raumname (location) eintragen."'
                            - component: f7-col
                              config:
                                id: spacer
                                width: 50
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: rgba(250,250,250,0.6)
                                        font-size: 25px
                                        left: 0
                                        line-height: 50px
                                        pointer-events: none
                                        text-align: left
                                        text-shadow: 2px 2px 5px rgba(0,0,0,0.2)
                                        user-select: none

Direct download: winux_lightcard.yaml rev 0.2

If you like what you see and want support further development, feel free to donate a coffee or some food :wink:

paypal
paypal1776×1776 88.2 KB

20 Likes
2

Good Work, thanks man!

1 Like
3

Hi,
I really like your widgets and I started with a remix for my Philips Hue lights - therefore it should support a button for scenes and a colorpicker. I took the code from the Philips Hue widget and started integrating, but unfortunatly the clicks on the colorpickers and the scene button do not work. Please give me a hint how to solve this issue. Here is the thread about that: Hue Widget Design Support

Thanks in advance and your good work!
Br Thomas

4

Hello, i’m glad you like it. Color select is not in yet because i like the simplicity and i didn’t want to clutter up the design that much. I thought about switch mode that will change the dimmer slider to a hue slider so one can change the color temperature (eg. warm to cold white). Maybe i can adapt that idea to also work for a color slider while keeping the desing simple. I have to look into it and i already have a little todo list of small tweaks and improvements that i will add at some point in time. If you create a swichgroup item containing the lights you want to be grouped and a dimmergroup item containing the respective dimmers, then set those 2 items in the config it should work. There is no meta info yet on how many lights and so on but the basics work.
Sorry, me a little slow at the moment because i’m kinda busy. I also just saw that Justin helped you already, nice of him. Cheers. :wink:

5

Hi,
your work looks really great! I was wondering if you had considered applying the same approach to the list item widget?

3 Likes
6

Heya, thx. I will look into it and added it to the todo list.

1 Like
7

Hi @winux, really great work. Like @PetrNemec I’d love to use it in an list item widget.

8

A very nice widget!
Is there an easy way to change the height of the widegt(smaller). So only change one entry? If no, which parameters must all be changed?

9

Hi guys, i will bring an update at some point after Openhab 4.0 is released.
Please don’t hesitate to improve or extend the widget if you like it. The code is above and it’s provided for free. If you want to help and improve it feel free to post the changes and i will update the topic when the time comes. If you can’t wait and want to have custom stuff being done then there is always the option to donate and tip the creator, this might speed up things ;).

@HolBaum5
The width of the widget will always be the width of the parent element you attach it to.
So if you watch the gif animation on top where i explain the quick paste config, look for “column options” in that menu flyout. You can configure all the widths of the parent element for different device/browser resolutions over there.
For the height change Line 120-121:

    max-height: 100px
    min-height: 100px

The rest of the elements need to be updated to the changes accordingly. Sorry, i don’t have more time at the moment to explain it all but i’m sure you will figure it out ;).

Have fun!

10

Hi,

i am really grateful for this widget, i was searching for days for something like that.
I would like to add a Label to the Switch(oh-toggle) is that in anyway possible?
Thanks

11

sure, i will add an option to disable/enable the button state display as text in the next update. If added it to the list. I’m using colors as feedback for the states, that’s why it’s not in there yet. But you are right, it’s good to have that as an option for color blind ppl and so on.

12

Thanks sounds good.
I would like to try on my own if you have a tipp where to start.
I can then share my code for everybody.

13

First… awesome work! Thanks for that widget. I have build it into my openHAB Overview page and everything is working like a charm. The only thing is, the widget is not visible in the iOS App. I am using the latest TestFlight Version and also, I am on the latest openHAB stable Version 4.0.2.

Can someone test, if the widget is shown in iOS?

14

i cannot acomplish light purple bgcolor of a dimmer it’s always black, double check it and everythink is pasted ok ? can you check your code?