Hello,
I am working on a new UI and have a small problem with a Temperature Widget.
As you can see, I use a widget to show temperature, humidity and a trendline.
How could I change the position of the trendline, that these line will start on the left side directly behind “C”…
Code here:
uid: Widget_Dashboard_Büro
props:
parameters:
- description: Location?
label: Prop 1
name: prop1
required: false
type: TEXT
- description: HEX or rgba
label: Backgroundcolor
name: bgcolor
required: false
type: TEXT
- description: Location icon f7
label: f7 icon name
name: icon1
required: false
type: TEXT
- description: Thermostate icon f7
label: f7 icon name
name: icon2
required: false
type: TEXT
- description: Humidity icon f7
label: f7 icon name
name: icon3
required: false
type: TEXT
- context: item
description: A Temperature item to display
label: Item
name: itemTemp
required: false
type: TEXT
- context: item
description: An Humidity item to display
label: Item
name: itemHum
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 28, 2022, 11:18:22 AM
component: f7-card
config:
style:
noShadow: false
class:
- padding
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 8.5em
min-width: 9.5em
max-width: 400px
slots:
content:
- component: f7-block
config:
style:
margin-left: -6px
padding: -1px
display: flex
flex-direction: column
align-items: start
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: =props.icon1
size: 22
class:
- align-self-center
style:
margin-left: -6px
margin-top: 0px
color: black
- component: Label
config:
text: =props.prop1
style:
font-size: 18px
font-weight: 700
margin-left: 05px
margin-top: -1px
color: black
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: =props.icon2
size: 22
style:
top: 5px
left: 0px
color: black
- component: Label
config:
text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '° C'
style:
font-size: 25px
line-height: 1.1
font-weight: 498
margin-left: 20px
margin-top: 0px
color: '=(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 25) ? "red" : "black"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: =props.icon3
size: 22
style:
top: 5px
left: 0px
color: black
- component: Label
config:
text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '% rF'
visible: =props.itemHum !== undefined
style:
top: 5px
left: 0px
margin-left: 20px
margin-top: -4px
font-size: 25px
font-weight: 500
color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 49) ? "orange" : "black"'
- component: f7-row
config:
class:
- float-right
- component: oh-trend
config:
trendItem: =[props.itemTemp]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(70%)
position: absolute
width: 60%
height: 100%
top: 0
left: 150
margin-left:
z-index: 1
- component: oh-link
config:
action: popup
actionModal: page:page_b28d20280f
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
I tried some settings with “width” and “left”, but when I use this, the line will outside the box, when I used it in the UI…
Thanks