[OH3] Main UI Examples

Hopefully my last question about my new widget…
(when it’s ready, I will show you)

It’s still my trash-widget.
Now, I will change the color of the widget depends on, which kind of trash will be collected the next time.

Like: When plastic is next, than it should be colored in yellow.
I tried it, but it doesn’t work.

uid: Widget_Cell_Card_Müllabfuhr
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
    - context: item
      description: Item für Beschreibung der nächsten Abholung
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: Datum der nächsten Abholung
      label: Item_Datum
      name: item_date
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 25, 2021, 12:35:30 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    backgroundcolor: '=(items[props.item].state) == "Restmüll (grau) // GEM" ? "green" : "red"'
    #background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item].state
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
               # background: =items[props.item].state == "Restmüll (grau) // GEM" ? "green"
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -45px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item_date].displayState
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px

green and red is just for testing… hm…

Have you tried with just:

backgroundcolor: red

My for f7-badge:

bgColor: '=(items[vars.Prefix + "_Exit1"].state === "ON") ? "green" : "gray"'

EDIT: Just did a test and

background: red

works and makes the background red.

It’s running… jeeze.
It was just “background” not “backgroundcolor”…

I am quoting myself: Always the small things.

thx

Looks nice ! I am very interested in the total result. Also how you “fill” the schedule.

I am not really ready with my Overview-Page, but here is the result right now:

It’s based on the widgets from @Integer (thanks a lot)
“Gemütlich” is an action item. 3 Lamps on
“Verkehr” and “Webcam” opens a pop-up. “Verkehr” will show current gas-prices (with Tankerkönig-Binding) and hopefully in the future current traffic from home to work… (next project)

“Webcam” will show live pictures from my webcams

The grey one is the “Trash-Widget”.
Our local trash-company (I don’t know the correct english wording) has a ICAL Calender to download.
Integrated in my google calender and with the calender-binding it works fine.

Here is the code:

uid: Widget_Cell_Card_Müllabfuhr
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
    - context: item
      description: Item für Beschreibung der nächsten Abholung
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: Datum der nächsten Abholung
      label: Item_Datum
      name: item_date
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 25, 2021, 3:58:15 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background: '=(items[props.item].state) == "Restmüll (grau) // GEM" ? "gray" : (items[props.item].state) == "Altpapier (blau) // GEM" ? "blue" : (items[props.item].state) == "Verpackungen (gelb) // GEM" ? "yellow" : "Bioabfall (braun) // GEM" ? "green" : "Grünschnitt //GEM" ? "green" : "teal"'
    height: 100px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item].state
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -45px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item_date].displayState
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px

cheers

2 Likes

Hello sl4m,
again sorry for the delay.

Here i try to show you my solution for my task implementation.
I tried to keep everything generic and customizable to be able to create tasks for my home from variable sources with varible functions/icons/links/actions.

Im not a very advances OH-user but this solution works for me:

Items:

 // l // Logging Tasks ==========================================================
String                     lTim_Str
String                     lTop_Str
String                     lCol_Str
String                     lTxt_Str
String                     lIco_Str
String                     lAct_Str
String                     lActItm_Str
String                     lActCom_Str
String                     lActTxt_Str
Number                     lDel_Num

Usage of Items: For all tasks, all (for example) Topics are stored in lTop_Str and Semicolon separated → This way i can have a variable amount of tasks, but a fixed number of items

Example for content of lTop_Str:

How to use the items, defined above i share with you my loggingtasks.rules which contains

  1. Create dummy-tasks for debugging and testing
  2. Function which deletes only a certain task (triggert from the button in the task-widget)

loggingtasks.rules:

// ========================================================
// LOGGING TASKS
// ========================================================


rule "LoggingTaskTest"
when
    Item rRule_Str changed to "LoggingTaskTest"
then

    // Define Dummy Arrays
    val String aTim = "21.05.2021;Dienstag;Mittwoch;"
    val String aTop = "Fehler;Abfall;Wetter;"
    val String aTxt = "Heizung - Kreislauf 1 Druck zu hoch;Biomüll;Gewitter;"
    val String aCol = "red;green;yellow;"
    val String aAct = "navigate;NULL;url;"
    val String aActCom = "page:buero;NULL;http://www.weather.com;"
    val String aActItm = "NULL;NULL;NULL;"
    val String aActTxt = "Heizungsdaten;NULL;Gehe zu weather.com;"
    val String aIco = "f7:exclamationmark_circle_fill;f7:archivebox;f7:cloud;" 

    // Set Values
    lTim_Str.sendCommand(aTim)
    lTop_Str.sendCommand(aTop)
    lTxt_Str.sendCommand(aTxt)
    lCol_Str.sendCommand(aCol)
    lAct_Str.sendCommand(aAct)
    lActCom_Str.sendCommand(aActCom)
    lActItm_Str.sendCommand(aActItm)
    lActTxt_Str.sendCommand(aActTxt)
    lIco_Str.sendCommand(aIco)
    lDel_Num.sendCommand(-1)

end


rule "Logging Task Delete"
when
    Item lDel_Num changed
then

    // If a valid item number to delete was set
    if (lDel_Num.state >= 0){

        logInfo("LOGGINGTASK", "Task #" + lDel_Num.state +" erased")

        // Declarate temp Strings
        var String lTim_Str_tmp = ""
        var String lTop_Str_tmp = ""
        var String lCol_Str_tmp = ""
        var String lTxt_Str_tmp = ""
        var String lIco_Str_tmp = ""
        var String lAct_Str_tmp = ""
        var String lActCom_Str_tmp = ""
        var String lActItm_Str_tmp = ""
        var String lActTxt_Str_tmp = ""

        // Get number of items
        var Number len = lTxt_Str.state.toString.split(";").length

        // Set numerator
        var Number i = 0

        // Loop through elements
        while (i< len) {

            // Do not copy the part which is to delete
            if (lDel_Num.state as Number != i){
                
                 // Copy Task if it shall not be deleted
                lTim_Str_tmp = lTim_Str_tmp + lTim_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lTop_Str_tmp = lTop_Str_tmp + lTop_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lCol_Str_tmp = lCol_Str_tmp + lCol_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lTxt_Str_tmp = lTxt_Str_tmp + lTxt_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lIco_Str_tmp = lIco_Str_tmp + lIco_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lAct_Str_tmp = lAct_Str_tmp + lAct_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lActCom_Str_tmp = lActCom_Str_tmp + lActCom_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lActItm_Str_tmp = lActItm_Str_tmp + lActItm_Str.state.toString.split(";").get(i.intValue).toString + ";"
                lActTxt_Str_tmp = lActTxt_Str_tmp + lActTxt_Str.state.toString.split(";").get(i.intValue).toString + ";"
 
           }

            logInfo("LOGGINGTASK", lTim_Str_tmp)
            // Increase numerator
            i = i + 1

        }

        // Update Log Items
        lTim_Str.sendCommand(lTim_Str_tmp)
        lTop_Str.sendCommand(lTop_Str_tmp)
        lCol_Str.sendCommand(lCol_Str_tmp)
        lTxt_Str.sendCommand(lTxt_Str_tmp)
        lIco_Str.sendCommand(lIco_Str_tmp)
        lAct_Str.sendCommand(lAct_Str_tmp)
        lActCom_Str.sendCommand(lActCom_Str_tmp)
        lActItm_Str.sendCommand(lActItm_Str_tmp)
        lActTxt_Str.sendCommand(lActTxt_Str_tmp)


        // Reset Delete Indicator
        lDel_Num.sendCommand(-1)

    }

end

As you may already have seen, i kept these funcions flexible to be able to configure different functions

  • 1st example Task: navigate to page:buero if “Heizungsdaten” is klicked
  • 2nd example Task: no further functions (despite delete)
  • 3rd example Task: forwarding to a url for opening up weather-forcast

And least but not last the page & widget code which will make it clear to you how to use these functions:

"Aufgaben"-page:

config:
  layoutType: responsive
  label: Aufgaben
  visibleTo:
    - role:administrator
    - role:user
  sidebar: true
  order: "0"
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:cLink
                      config:
                        title: Aufgaben
                        link: overview
                        backgroundurl: /static/tasks.jpg
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:listLogTasks
                      config: {}
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:listLogNothingToDo
                      config: {}
masonry: null
grid: []

"listLogTasks"-widget:
(As you see, there are no props to set, due to the fact, that this is a purpose-built widget)

uid: listLogTasks
tags:
  - repeater
  - list
  - log
  - tasks
timestamp: Jun 11, 2021, 6:43:54 AM
component: oh-repeater
config:
  for: int
  sourceType: array
  in: =items["lTim_Str"].state.split(";")
  filter: loop.int
  fragment: true
slots:
  default:
    - component: oh-list-card
      config:
        footer: =items["lTim_Str"].state.split(";")[loop.int_idx]
        accordionList: true
      slots:
        default:
          - component: oh-list-item
            config:
              icon: =items["lIco_Str"].state.split(";")[loop.int_idx]
              title: =items["lTxt_Str"].state.split(";")[loop.int_idx]
              badge: =items["lTop_Str"].state.split(";")[loop.int_idx]
              badgeColor: =items["lCol_Str"].state.split(";")[loop.int_idx]
              iconColor: =items["lCol_Str"].state.split(";")[loop.int_idx]
              accordionItem: true
            slots:
              accordion:
                - component: oh-list-card
                  config:
                    outline: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: Löschen
                          listButton: true
                          color: red
                          action: command
                          actionItem: lDel_Num
                          actionCommand: '=(loop.int_idx == "") ? "0" : loop.int_idx'
          - component: oh-list-item
            config:
              visible: =items["lAct_Str"].state.split(";")[loop.int_idx] == "navigate"
              listButton: true
              title: =items["lActTxt_Str"].state.split(";")[loop.int_idx]
              action: navigate
              actionPage: =items["lActCom_Str"].state.split(";")[loop.int_idx]
          - component: oh-list-item
            config:
              visible: =items["lAct_Str"].state.split(";")[loop.int_idx] == "command"
              listButton: true
              title: =items["lActTxt_Str"].state.split(";")[loop.int_idx]
              action: command
              actionItem: =items["lActItm_Str"].state.split(";")[loop.int_idx]
              actionCommand: =items["lActCom_Str"].state.split(";")[loop.int_idx]
          - component: oh-list-item
            config:
              visible: =items["lAct_Str"].state.split(";")[loop.int_idx] == "rule"
              listButton: true
              title: =items["lActTxt_Str"].state.split(";")[loop.int_idx]
              action: rule
              actionRule: =items["lActCom_Str"].state.split(";")[loop.int_idx]
          - component: oh-list-item
            config:
              visible: =items["lAct_Str"].state.split(";")[loop.int_idx] == "url"
              listButton: true
              title: =items["lActTxt_Str"].state.split(";")[loop.int_idx]
              action: url
              actionUrl: =items["lActCom_Str"].state.split(";")[loop.int_idx]

And here the Widget if all taks are done:

uid: listLogNothingToDo
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 8, 2021, 7:54:01 PM
component: f7-card
config:
  visible: =(items["lTim_Str"].state.split(";").length <= 1)
  class:
    - text-align-center
slots:
  default:
    - component: oh-label-card
      config:
        label: Alles erledigt!
        action: command
        actionItem: rRule_Str
        actionCommand: LoggingTaskTest
    - component: oh-image
      config:
        url: /static/nothingtodo.png

which looks like this :sweat_smile:
(If you click at “Alles erledigt!”, the debug-/test-tasks (from rule-script) will be created)

  • I hope this is what you wanted me to provide
  • For sure some more advanced users than me can give additional tips/improvements for this implementation
  • Mor me its (at the moment) a centralized implementation to bundle taks from random sources

Have fun and if there is something still unclear → I will try do provide more information

2 Likes

Dear SHUred,
Thank you for taking the time and posting this detailed answer.
I will definitely try it in the near future.
Still do have a question: which calendar and which binding did you use to get the events?

Hi,
i did not use any binding for this.

What you see are just example-tasks.
You just have to write a rule for your specific case and add all the necessary strings including a semicolon at the end to all the items.

Im using google calendar, what means that i would use the google calendar binding and execute a rule to add a task to my OH-system.

Hopefully i got your question right

Good evening. Please tell me how can I make the transparency of only the background photo? I have already tried everything,along with the background, the transparency of the content also changes.

I guess the easiest way is to define background image as oh-image and set z-index: 1 for image to place it under every other components (they should have z-index: 2+), then apply a style filter: opacity(60%) to that component. Or may be main widget content should have a style backdrop-filter: opacity(60%), so everything under main content should become transparent. And there are two other options: background-color: transparent and background-color: rgba(0.3). Never tried, so cannot say which way works.

uid: Cell_Temp_Card_2
tags:
  - temperature
  - humidity
  - co
  - motion
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: Background image name
      label: Background image
      name: bg_image_url
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Lightlevel
      name: lightlevel_item
      required: false
      type: TEXT
    - context: item
      label: Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      label: CO
      name: CO_item
      required: false
      type: TEXT
    - context: item
      label: Motion item
      name: motion_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 1, 2021, 2:48:53 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0
    margin: 5
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 150px
    background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
    background-position: down;
    background-repeat: no-repeat;
    background-size: cover
    background-brightness: 60%
    font-size: medium
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
slots:
  content:
    - component: f7-card-header
      config:
        style:
          padding: 0
          margin-top: -15px
          min-height: 30px
          justify-content: flex-start
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 20
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 18px
                margin-left: 5px
    - component: f7-card-content
      config:
        style:
          padding: 0
          margin-top: 5px
          width: 100%
          justify-content: flex-start
      slots:
        default:
          - component: f7-row
            config:
              visible: "=props.temp_item ? true : false"
              style:
                justify-content: flex-start
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: temperature
                    item: =props.temp_item
                    width: 23
                - component: Label
                  config:
                    text: =items[props.temp_item].state
                    style:
                      margin-left: 5px
                      color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "red" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "blue" : "white"'
          - component: f7-row
            config:
              visible: "=props.humidity_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: humidity
                    item: =props.humidity_item
                    width: 23
                    action: analyser
                    actionAnalyzerItems: =props.humidity_item
                - component: Label
                  config:
                    text: =items[props.humidity_item].state
                    style:
                      color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "red" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "white"'
                      margin-left: 5px
          - component: f7-row
            config:
              visible: "=props.lightlevel_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: sun
                    width: 23
                - component: Label
                  config:
                    text: =items[props.lightlevel_item].state
                    style:
                      color: "=(items[props.lightlevel_item].state < 5) ? 'gray' : 'white'"
                      margin-left: 5px
          - component: f7-row
            config:
              visible: "=props.CO_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: carbondioxide
                    width: 23
                - component: Label
                  config:
                    text: =items[props.CO_item].state
                    style:
                      color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow"'
                      margin-left: 5px
          - component: f7-col
            config:
              visible: "=props.motion_item ? true : false"
              style:
                position: absolute
                top: 0px
                right: 0px
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.motion_item].state === 'ON') ? 'mymotion-on' : 'mymotion-off'"
                    width: 30
                - component: Label
                  config:
                    text: =items[props.motion_item].state
          - component: f7-block
            config:
              style:
                visible: "=props.temp_item ? true : false"
                position: absolute
                top: 10px
                left: 10px
                height: 300px
                width: 100%
                z-index: 1
            slots:
              default:
                - component: oh-trend
                  config:
                    trendItem: =props.temp_item
                    trendGradient:
                      - "#d4220f"
                      - "#cc561e"
                      - "#ef8d32"
                      - "#beca5c"
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(60%)
    - component: oh-link
      config:
        actionAnalyzerChartType: day
        action: analyzer
        actionAnalyzerItems: "=props.CO_item ? [props.temp_item, props.humidity_item, props.lightlevel_item, props.CO_item] : (props.lightlevel_item ? [props.temp_item, props.humidity_item, props.lightlevel_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item]))"
        actionAnalyzerCoordSystem: time
        style:
          padding: 0
          position: absolute
          left: 0px
          top: 0px
          height: 100%
          width: 100%
          z-index: 3

Nothing comes out specifically for this widget,both the background and the content change the transparency.

Does anyone know how I can create this “setpoint” widget from this screenshot?

Or does one have the custom widget syntax?

That looks like a standard oh-stepper-item widget.

Thanks but how can I add this?
I have added a setpoint, but it does not show it as stepper item.

Found it, thanks.

You meant something like this:

uid: Cell_Temp_Card_3
tags:
  - temperature
  - humidity
  - co
  - motion
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: Background image name
      label: Background image
      name: bg_image_url
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Lightlevel
      name: lightlevel_item
      required: false
      type: TEXT
    - context: item
      label: Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      label: CO
      name: CO_item
      required: false
      type: TEXT
    - context: item
      label: Motion item
      name: motion_item
      required: false
      type: TEXT
    - context: item
      label: Switch1 item
      name: switch1
      required: false
      type: TEXT
    - context: item
      label: Switch2 item
      name: switch2
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 2, 2021, 11:06:42 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0
    margin: 5
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 150px
    background-position: down;
    background-repeat: no-repeat;
    background-size: cover
    background-brightness: 60%
    font-size: medium
    color: var(--f7-text-color)
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
slots:
  default:
    - component: f7-card-header
      config:
        style:
          padding: 0
          margin: 15px
          min-height: 30px
          justify-content: flex-start
          z-index: 2
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 20
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 18px
                margin-left: 5px
    - component: f7-card-content
      config:
        style:
          padding: 0
          margin: 15px
          width: 100%
          justify-content: flex-start
          align-items: center
          z-index: 2
      slots:
        default:
          - component: f7-row
            config:
              visible: "=props.temp_item ? true : false"
              style:
                justify-content: flex-start
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: temperature
                    item: =props.temp_item
                    width: 23
                - component: Label
                  config:
                    text: =items[props.temp_item].state
                    style:
                      margin-left: 5px
                      color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "red" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "blue" : "white"'
          - component: f7-row
            config:
              visible: "=props.humidity_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: humidity
                    item: =props.humidity_item
                    width: 23
                    action: analyser
                    actionAnalyzerItems: =props.humidity_item
                - component: Label
                  config:
                    text: =items[props.humidity_item].state
                    style:
                      color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "red" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "white"'
                      margin-left: 5px
          - component: f7-row
            config:
              visible: "=props.lightlevel_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: sun
                    width: 23
                - component: Label
                  config:
                    text: =items[props.lightlevel_item].state
                    style:
                      color: "=(items[props.lightlevel_item].state < 5) ? 'gray' : 'white'"
                      margin-left: 5px
          - component: f7-row
            config:
              visible: "=props.CO_item ? true : false"
              style:
                justify-content: flex-start
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: carbondioxide
                    width: 23
                - component: Label
                  config:
                    text: =items[props.CO_item].state
                    style:
                      color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow"'
                      margin-left: 5px
          - component: f7-col
            config:
              visible: "=props.motion_item ? true : false"
              style:
                position: absolute
                top: 0px
                right: 30px
                z-index: 2
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.motion_item].state === 'ON') ? 'mymotion-on' : 'mymotion-off'"
                    width: 30
          - component: f7-col
            config:
              visible: "=props.switch1 ? true : false"
              style:
                position: absolute
                top: 35px
                right: 30px
                z-index: 100
            slots:
              default:
                - component: oh-toggle
                  config:
                    item: =[props.switch1]
          - component: f7-col
            config:
              visible: "=props.switch2 ? true : false"
              style:
                position: absolute
                top: 65px
                right: 30px
                z-index: 100
            slots:
              default:
                - component: oh-toggle
                  config:
                    item: =[props.switch2]
          - component: f7-block
            config:
              style:
                visible: "=props.temp_item ? true : false"
                position: absolute
                top: 10px
                left: 10px
                height: 300px
                width: 100%
                z-index: 2
            slots:
              default:
                - component: oh-trend
                  config:
                    trendItem: =props.temp_item
                    trendGradient:
                      - "#d4220f"
                      - "#cc561e"
                      - "#ef8d32"
                      - "#beca5c"
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(60%)
    - component: oh-link
      config:
        actionAnalyzerChartType: day
        action: analyzer
        actionAnalyzerItems: "=props.CO_item ? [props.temp_item, props.humidity_item, props.lightlevel_item, props.CO_item] : (props.lightlevel_item ? [props.temp_item, props.humidity_item, props.lightlevel_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item]))"
        actionAnalyzerCoordSystem: time
        style:
          padding: 0
          position: absolute
          left: 0px
          top: 0px
          height: 100%
          width: 100%
          z-index: 3
    - component: oh-image
      config:
        url: "=props.bg_image_url ? '/static/' + (props.bg_image_url) : ''"
        style:
          padding: 0
          position: absolute
          left: 0px
          top: 0px
          height: 100%
          width: 100%
          z-index: 1
          border-radius: var(--f7-card-expandable-border-radius)
          filter: opacity(50%)

And maybe-maybe there is a solution like

background: "=props.bg_image_url ? 'filter(url(/static/' + [props.bg_image_url] + '), blur(5px))' : ''"

but I fail to find correct syntax.

Just noticed that you linked ForecastDay4 items to forecastDay3 channels.

Ooo! Thx for the hint! :man_facepalming:

just trying to build a new phone-UI and seeing / learning a lot here.
i proudly present my cell-toggle button :upside_down_face:

image
image

this is my very simple widget (started form cell_card_1 as posted by @Integer and deleted all the things i didn’t need):

uid: Light_Card
tags: []
props:
  parameters:
    - description: Header big sized
      label: Header
      name: header
      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
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 23, 2021, 1:25:42 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 80px
    margin-left: 2px
    margin-right: 2px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: 10px
          left: 15px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 30
              style:
                margin-right: 5px
                color: '=(items[props.item].state == "ON") ? "yellow" : "gray"'
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.item
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          top: 0
          left: 0
          height: 80px
          width: 100%
2 Likes

huh, and i already have a problem with my simple widget…

color: '=(items[props.item].state == "ON") ? "#F4E274" : "gray"'

i’d also like to toggle my dimmer lights with this widget (we don’t really use the dimmer function) and those items don’t have on/off but 0/[somevalue]
is it possible to change the the color line to something like

color: '=(items[props.item].state == "OFF" OR 0) ? "gray" : "#F4E274"'

or do i have to make another widget?