Light Control Card

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:



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:

11 Likes

Good Work, thanks man!

1 Like