forgot to tell, but i tried to change also that into this:
actionCommand: =props.tArray[Math.min(props.tArray.join('').substring(0,props.tArray.join('').search(props.set_speed_item)).split('=').length,props.tArray.length-1)].split('=')[0]
it switch only from AUTO to SILENCE and from SILENCE to AUTO.
it won’t read other values…this issue seems to come only when i switch from
action: variable
to
action: command
could be this the issue?
That represents only the name of the item. Not the item state. In order to get the item state, you must use items[props.set_speed_item].state. So, that is what must go into the search method:
search(items[props.set_speed_item].state)
oh yes! from test seems to work perfectly! i will test it with real device.
thanks a lot for your support! i was near to set the right item state in code, but i missed “”. thanks a lot again!
Hey @rubenfuser,
that looks really good.
One question:
Do you have an idea how get the footer colored?
When using the inspector of Chrome, the footer seems not to be at the bottom of the widget.
Could you have a look?
Cheers, Nic
Yes i achieved that. I will post the code:
uid: Conditioner Card v2
tags:
- MadeByEvil
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: in rgba() or HEX or empty
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
label: Current Temperature
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature
name: set_temp_item
required: false
type: TEXT
- context: text
description: value=label
label: Array
name: tArray
required: false
type: TEXT
multiple: true
- context: item
label: Set Speed
name: set_speed_item
required: false
type: TEXT
- context: item
label: Power ON/OFF
name: power
required: false
type: TEXT
- context: item
description: Modalità item
label: Modalità
name: heating_item
required: false
type: TEXT
- context: item
description: Trendline item
label: Trendline
name: widgettrend
required: false
type: TEXT
parameterGroups:
- name: widgetAction
context: action
label: Action
description: Action to perform when the element is clicked
timestamp: Aug 6, 2022, 4:09:55 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 200px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -10px
left: 10px
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: -20px
left: 16px
flex-direction: row
slots: {}
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 20px
font-weight: 400
margin-left: 0px
margin-top: 10px
color: '=items[props.temp_item].state >= "22" ? "red" : items[props.temp_item].state <= "20" ? "blue" :"white"'
- component: oh-button
config:
visible: '=items[props.heating_item].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "true" : "false"'
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
style:
position: absolute
top: 40px
right: 0px
height: 33px
background: transparent
z-index: 98
- component: oh-button
config:
visible: '=items[props.heating_item].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "true" : "false"'
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_temp_item
actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
style:
position: absolute
top: 104px
right: 0px
height: 33px
background: transparent
z-index: 98
- component: Label
config:
visible: '=items[props.heating_item].displayState == "Pompa di calore" ? "true" : items[props.heating_item].displayState == "Condizionatore" ? "true" : "false"'
text: '=items[props.set_temp_item].state == "UNDEF" ? " " : items[props.set_temp_item].state'
style:
font-size: 12px
position: absolute
right: 8px
top: 80px
- component: oh-button
config:
visible: "=props.set_speed_item ? true : false"
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
style:
position: absolute
top: 40px
right: 40px
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
visible: "=props.set_speed_item ? true : false"
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.min(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length,props.tArray.length-1)].split('=')[0]
style:
position: absolute
top: 104px
right: 40px
height: 35px
background: transparent
z-index: 98
- component: Label
config:
visible: "=props.set_speed_item ? true : false"
text: "=((items[props.set_speed_item].state) ? props.tArray[props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-1].split('=')[1] : 'Push a button')"
style:
color: red
font-size: 12px
position: absolute
right: 58px
top: 80px
- component: f7-block
config:
style:
position: absolute
top: 50px
left: 15px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
height: 120px
slots:
default:
- component: oh-trend
config:
trendItem: =props.widgettrend
trendGradient:
- "#aa2b1d"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(50%)
position: absolute
width: 80%
height: 100%
top: 0px
left: 15px
z-index: 98
- component: oh-toggle
config:
item: =props.power
color: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "black"'
style:
--f7-toggle-height: 20px
--f7-toggle-width: 40px
font-size: 100%
top: 115px
z-index: 98
- component: oh-button
config:
iconColor: '=items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : "black"'
iconF7: snow
iconSize: 25
action: command
actionItem: =props.heating_item
actionCommand: COOL
style:
position: absolute
top: 165px
left: 25%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
iconColor: '=items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : "black"'
iconF7: flame
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: HEAT
style:
position: absolute
top: 165px
left: 45%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : "black"'
iconF7: drop
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: DEHUMIDIFIER
style:
position: absolute
top: 165px
left: 65%
height: 35px
background: transparent
z-index: 98
- component: oh-button
config:
iconColor: '=items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "black"'
iconF7: wind
iconSize: 20
action: command
actionItem: =props.heating_item
actionCommand: FAN
style:
position: absolute
top: 165px
left: 85%
height: 35px
background: transparent
z-index: 98
- component: f7-card-footer
config:
style:
top: 84px
left: -16px
width: 110%
background: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "#ffffb3" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "#ffc2b3" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "#b3b3ff" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "#ffd9b3" : "#3F3F3F"'
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
This is the widget but not completely finished,but you will find what you need for footer 
Thank you - I played a bit with the code and now it looks almost like Dimitris template.
I tried to get it as responsive as it I could…
@Dimitris: Would you please give it another try?
uid: Temp_Control
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- context: item
label: Actual Temperature for Trendline
name: temp_item
required: false
type: TEXT
- context: item
label: Set Temperature - right arrows
name: set_temp_item
required: false
type: TEXT
- context: text
description: value=label
label: List for left array
name: tArray
required: false
type: TEXT
multiple: true
- context: item
label: Set Speedc-cleft arrows
name: set_speed_item
required: false
type: TEXT
- context: item
label: Power ON/OFF
name: power
required: false
type: TEXT
- context: item
description: Item for selecting the mode
label: Mode item
name: mode_item
required: false
type: TEXT
- context: item
description: Trendline item
label: Trendline
name: widgettrend
required: false
type: TEXT
timestamp: Aug 10, 2022, 9:56:59 PM
component: f7-card
config:
noShadow: false
padding: false
style:
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
--f7-card-header-border-color: transparent
min-width: 90%
stylesheet: >
.card-header:after {
display: none;
}
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: none
slots:
default:
- component: Label
config:
text: =props.title
style:
font-size: 15px
font-weight: 250
- component: f7-card-content
config: {}
slots:
default:
- component: Label
config:
text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
style:
font-size: 20px
font-weight: 400
- component: Label
config:
text: space
style:
font-size: 20px
font-weight: 400
color: transparent
- component: oh-button
config:
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
style:
position: absolute
bottom: 0%
right: 10%
padding-right: 2%
padding-left: 4%
margin-right: 6%
margin-bottom: 1%
height: 35px
background: transparent
z-index: 98
color: grey
- component: oh-button
config:
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
style:
position: absolute
top: 0%
right: 10%
height: 35px
padding-right: 2%
padding-left: 4%
margin-right: 6%
margin-bottom: 1%
background: transparent
z-index: 98
color: "=vars.footercolor === 'lightblue' ? 'lightblue' : =vars.footercolor === 'red' ? 'red' : 'gray'"
- component: Label
config:
text: =vars.footercolor
style:
font-size: 12px
position: absolute
right: 14%
top: 40%
- component: oh-button
config:
visible: "=props.set_speed_item ? true : false"
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_up_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.max(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length-2,0)].split('=')[0]
style:
position: absolute
top: 0%
right: 0%
height: 35px
background: transparent
z-index: 98
padding-right: 0%
padding-left: 4%
margin-right: 3%
margin-bottom: 1%
- component: oh-button
config:
visible: "=props.set_speed_item ? true : false"
iconColor: '=items[props.heating_item].displayState == "Deumidificatore" && items[props.power].state == "ON" ? "yellow" : items[props.heating_item].displayState == "Pompa di calore" && items[props.power].state == "ON" ? "red" : items[props.heating_item].displayState == "Condizionatore" && items[props.power].state == "ON" ? "blue" : items[props.heating_item].displayState == "Ventola" && items[props.power].state == "ON" ? "orange" : "gray"'
iconF7: arrow_down_circle
iconSize: 35
action: command
actionItem: =props.set_speed_item
actionCommand: =props.tArray[Math.min(props.tArray.join('').substring(0,props.tArray.join('').search(items[props.set_speed_item].state)).split('=').length,props.tArray.length-1)].split('=')[0]
style:
position: absolute
bottom: 0%
right: 0%
height: 35px
padding-right: 2%
padding-left: 4%
margin: 1%
background: transparent
z-index: 98
- component: Label
config:
visible: "=props.set_speed_item ? true : false"
text: eee
style:
color: red
font-size: 12px
position: absolute
right: 3.5%
top: 40%
- component: f7-block
config:
style:
position: absolute
top: 50px
left: 15px
width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
height: 120px
slots:
default:
- component: oh-trend
config:
trendItem: =props.widgettrend
trendGradient:
- teal
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(50%)
position: absolute
width: 80%
height: 100%
bottom: 40%
z-index: 98
- component: f7-card-footer
config:
style:
background: "=(vars.footercolor) ? 'rgba(var(--f7-color-' + vars.footercolor + '-rgb), 0.1)' : 'var(--f7-bars-bg-color)'"
border-radius: 0 0 var(--f7-card-expandable-border-radius) var(--f7-card-expandable-border-radius)
slots:
default:
- component: oh-toggle
config:
color: =vars.footercolor || 'gray'
style:
--f7-toggle-height: 25px
--f7-toggle-width: 50px
- component: f7-block
config:
style:
width: 130px
padding: 0
display: flex
justify-content: space-between
slots:
default:
- component: oh-link
config:
iconF7: snow
iconSize: 30
height: 30px
width: 30px
color: "=vars.footercolor === 'lightblue' ? 'lightblue' : 'gray'"
action: variable
actionVariable: footercolor
actionVariableValue: lightblue
- component: oh-link
config:
iconF7: flame
iconSize: 30
height: 30px
width: 30px
color: "=vars.footercolor === 'red' ? 'red' : 'gray'"
action: variable
actionVariable: footercolor
actionVariableValue: red
- component: oh-link
config:
iconF7: wind
iconSize: 30
height: 30px
width: 30px
color: "=vars.footercolor === 'yellow' ? 'yellow' : 'gray'"
action: variable
actionVariable: footercolor
actionVariableValue: yellow
Hey @Aaron2 ,
Did you made any efforts? I postet the last version of the climate widget just a few minutes ago.
Im still in vacations 
I’m sending you JUST a draft. Still, long road. Hope you liked.
Cheers
PS. Yes, I’m working on it!!
HOMEUI.pdf (592.7 KB)
Widgets.pdf (417.5 KB)
Hey there and hey @ysc,
@Dimitris draft for an UI looks - at least for me - really nice.
Is there a chance to implement such an UI? In my opinion this UI contains of 3 nested TAB-Pages.
I tried to create such a page - but it seems, that nested tab pages are not possible.
Do you have a hint for me?
Hi @Nic0205,
Unfortunately not, I was limited on the time to spend last weeks. Apologies!
I will start a new topic later this tonight when I’m back home
I really like the designs and work created, is there any idea on the visibility of the tabs? Maybe we should follow an approach with a Minimal Viable Product, that is relatively simple to create based on the current possibilites. After we have that in production add some more complexity?
Looking forward to hear you idea’s
I will follow this project,and i will test it on iphone device and ipad to report if everything is shown properly!
Hi @Aaron2,
I would prefer this more or less agile approach (MVP), too.
I tried several things, but nested tabs seem not to be possible.
Did you (or anybody here with more coding experience than me) made any progress on this?
Nested tabs are possible with the widget system, but it is very cumbersome and awkward and I’m not sure I’d really recommend it. It looks something like this:
uid: demo:nested_tabs
props:
parameters: []
parameterGroups: []
component: f7-page
config:
style:
padding: 0
tabs: true
slots:
fixed:
- component: f7-tabs
slots:
default:
- component: f7-page-content
config:
id: tab1
style:
padding-top: 38px
tab: true
tabActive: true
slots:
default:
- component: f7-toolbar
config:
position: bottom
tabbar: true
slots:
default:
- component: f7-link
config:
tabLink: "#tab3"
text: "Tab A(1)"
- component: f7-link
config:
tabLink: "#tab4"
text: "Tab B(1)"
- component: f7-tabs
config:
id: tabs
style:
padding-top: 0
slots:
default:
- component: f7-tab
config:
id: tab3
slots:
default:
- component: oh-label-card
config:
title: Content for Tab 1-A
- component: f7-tab
config:
id: tab4
slots:
default:
- component: oh-label-card
config:
title: Content for Tab 1-B
- component: f7-page-content
config:
id: tab2
style:
padding-top: 38px
tab: true
slots:
default:
- component: f7-toolbar
config:
position: bottom
tabbar: true
slots:
default:
- component: f7-link
config:
tabLink: "#tab5"
text: "Tab A(2)"
- component: f7-link
config:
tabLink: "#tab6"
text: "Tab B(2)"
- component: f7-tabs
config:
id: tabsother
style:
padding-top: 0
slots:
default:
- component: f7-tab
config:
id: tab5
slots:
default:
- component: oh-label-card
config:
title: Content for Tab 2-A
- component: f7-tab
config:
id: tab6
slots:
default:
- component: oh-label-card
config:
title: Content for Tab 2-B
- component: f7-toolbar
config:
bottom: true
style:
top: 0
tabbar: true
slots:
default:
- component: f7-link
config:
tabLink: "#tab1"
tabLinkActive: true
text: "Tab #1"
- component: f7-link
config:
tabLink: "#tab2"
text: "Tab #2"
In this case you might find that something more along the lines several different segmental buttons setting variables which determine the visibility of different content blocks would be more effective. This is essentially the same thing as tabs but will give you a little more control over both appearance and function.
Hey @JustinG,
looks really weird - but perhaps we could give it a try.
One probably stupid question:
Could I somehow use custom components instead of the f7-components?
For example:
slots:
default:
- component: Temp_control
Yeah, it does. And it is just somewhat difficult to keep track of. There’s almost certainly a better solution for your use case, I just wanted to make sure you knew this option is technically feasible.
Yep. Within each f7-tab component (where I put the label cards) you can build whatever you like.
Yeah - but is it possible to call a custom-widget in a custom-widget?
For example I created a custom-widget with the uid “Temp_control”.
If I understand it right, I have to put the whole code in the f7-Tab-component. That would end up in a really long code…
What I would to achieve is to call the custom-widget temp_control like any other oh- or f7-component.
Is it possible to call a custom-widget in an other custom-widget?
…progress for widgets:
Widgetsv2.pdf (493.0 KB).
@Nic0205 @ysc @JustinG Now guys -in this very early design stage- i need your feedback: feasibility, directions, rethinking?
Ah, sorry for misunderstanding. Yes, it’s possible. In the component line just add widget: followed by the uid of your widget. For example, I have a widget that displays different other custom widgets depending on the time of day. To show the dinner time custom widget (uid - tod:dinner_page), I put:
- component: widget:tod:dinner_page
Cool - it works!
Is there also a chance to define the props of the “nested” custom-widget somewhere?
Once again: Thank you for helping us newbies ;.)