Hello,
Now the oh3 first milestone is out, I wanted to create a topic to share what you can done with the new UI builder.
Don’t hesitate to share yours, and your tips and tricks.
Here’s mine :
Cheers
Hello,
Now the oh3 first milestone is out, I wanted to create a topic to share what you can done with the new UI builder.
Don’t hesitate to share yours, and your tips and tricks.
Here’s mine :
Cheers
Looks promising.
How do you make your icons visible?
I’m also creating my first OH3 UI, but when I enter an icon it stays black.
Hi, I did this to display the temperatures of the hot water for heating and domestic water.
The OH icon doesn’t work well. I need to open an issue on the openhab-webui project.
Now I use the f7 icon set, but they don’t have the dynamic color, I think we can do something directly in the yaml file.
Ho great.
How did you do that? Can you share your widgets code?
I used a background and the f7 square icon and colored it accordingly.
This is the widget for the left one:
uid: boiler_small
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Temperature sensor at top
label: Temp Top
name: item_top
required: false
type: TEXT
- context: item
description: Temperature sensor in the middle
label: Temp Middle
name: item_middle
required: false
type: TEXT
- context: item
description: Temperature sensor at bottom
label: Temp Bottom
name: item_bottom
required: false
type: TEXT
- context: item
description: Switch which shows if heating is on or off
label: Heating on/off
name: item_heat
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2020, 4:57:22 PM
component: f7-card
config:
title: =props.title
slots:
default:
- component: f7-block
config:
style:
min-height: 180px
max-height: 180px
max-width: 120px
min-width: 120px
background: url(/static/boiler.png)
background-size: cover
background-position: right bottom
display: flex
flex-direction: column
align-items: start
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: square_fill
color: '=(items[props.item_top].state.split(".")[0] < 50) ? "blue" : ((items[props.item_top].state.split(".")[0] < 70) ? "orange" : "red")'
size: 60
style:
top: 10px
left: 18px
filter: opacity(50%)
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-right
slots:
default:
- component: oh-link
config:
text: =items[props.item_top].state
color: '=(items[props.item_top].state.split(".")[0] < 50) ? "blue" : ((items[props.item_top].state.split(".")[0] < 70) ? "orange" : "red")'
action: analyzer
actionAnalyzerItems: =[props.item_top]
style:
top: 10px
left: 30px
font-size: 14px
font-weight: bold
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: square_fill
color: '=(items[props.item_middle].state.split(".")[0] < 50) ? "blue" : ((items[props.item_middle].state.split(".")[0] < 70) ? "orange" : "red")'
size: 60
style:
top: 2px
left: 18px
filter: opacity(50%)
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-right
slots:
default:
- component: oh-link
config:
text: =items[props.item_middle].state
color: '=(items[props.item_middle].state.split(".")[0] < 50) ? "blue" : ((items[props.item_middle].state.split(".")[0] < 70) ? "orange" : "red")'
action: analyzer
actionAnalyzerItems: =[props.item_middle]
style:
top: 2px
left: 30px
font-size: 14px
font-weight: bold
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: square_fill
color: '=(items[props.item_bottom].state.split(".")[0] < 50) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 70) ? "orange" : "red")'
size: 60
style:
top: -6px
left: 18px
filter: opacity(50%)
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-right
slots:
default:
- component: oh-link
config:
text: =items[props.item_bottom].state
color: '=(items[props.item_bottom].state.split(".")[0] < 50) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 70) ? "orange" : "red")'
action: analyzer
actionAnalyzerItems: =[props.item_bottom]
style:
top: -6px
left: 30px
font-size: 14px
font-weight: bold
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: flame_fill
color: '=(items[props.item_heat].state === "ON") ? "red" : "gray"'
size: 20
style:
top: -25px
left: 5px
and this for the other:
uid: boiler_2p
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Temperature sensor at top
label: Temp Top
name: item_top
required: false
type: TEXT
- context: item
description: Temperature sensor at bottom
label: Temp Bottom
name: item_bottom
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2020, 4:58:09 PM
component: f7-card
config:
title: =props.title
slots:
default:
- component: f7-block
config:
style:
min-height: 180px
max-height: 180px
max-width: 120px
min-width: 120px
background: url(/static/boiler.png)
background-size: cover
background-position: right bottom
display: flex
flex-direction: column
align-items: start
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: rectangle_fill
color: '=(items[props.item_top].state.split(".")[0] < 40) ? "blue" : ((items[props.item_top].state.split(".")[0] < 50) ? "orange" : "red")'
size: 60
style:
top: 25px
left: 18px
transform: rotate(90deg)
filter: opacity(50%)
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-right
slots:
default:
- component: oh-link
config:
text: =items[props.item_top].state
color: '=(items[props.item_top].state.split(".")[0] < 40) ? "blue" : ((items[props.item_top].state.split(".")[0] < 50) ? "orange" : "red")'
action: analyzer
actionAnalyzerItems: =[props.item_top]
style:
top: 25px
left: 30px
font-size: 14px
font-weight: bold
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-left
slots:
default:
- component: f7-icon
config:
f7: rectangle_fill
color: '=(items[props.item_bottom].state.split(".")[0] < 40) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 50) ? "orange" : "red")'
size: 60
style:
top: 25px
left: 18px
transform: rotate(90deg)
filter: opacity(50%)
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-right
slots:
default:
- component: oh-link
config:
text: =items[props.item_bottom].state
color: '=(items[props.item_bottom].state.split(".")[0] < 40) ? "blue" : ((items[props.item_bottom].state.split(".")[0] < 50) ? "orange" : "red")'
action: analyzer
actionAnalyzerItems: =[props.item_bottom]
style:
top: 25px
left: 30px
font-size: 14px
font-weight: bold
And the background:
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.