Platform information:
Hardware: x86_64/8GB/
openhab/openhab:4.1.2
Java Runtime Environment: java-17-openjdk-amd64
openHAB version: 4.1.2
In a widget i want to represent a number Item but the widget needs a String item.
Is there some conversion pattern to use in the ui page?
Curious, for a widget there’s no problem to display a number as text,
Is it a custom widget and you have the code available?
Hello,
it is the widget widget_HeatingCSS_2-0-0
I want to set i.e. the example mode item with the heating valve state (Number - Percent)
uid: widget_HeatingCSS_2-0-0
tags: []
props:
parameters:
- context: item
description: Item to control
label: Setpoint Item
name: setPointItem
required: true
type: TEXT
groupName: mainItems
- context: item
label: Item for current temperature
name: currentPointItem
required: true
type: TEXT
groupName: mainItems
- context: item
description: Humidity Item [Number-Item]
label: Humidity Item
name: humItem
required: false
type: TEXT
groupName: mainItems
- description: eg. living room
label: location and widget identifier
name: location
required: true
type: TEXT
groupName: generalSettings
- description: Minimum value
label: minTemp
name: minTemp
required: true
type: TEXT
groupName: generalSettings
- description: Maximum value
label: maxTemp
name: maxTemp
required: true
groupName: generalSettings
- description: Visual size of the control in px (default 400px), without a size the design is responsive
label: size [px]
name: size
required: false
type: TEXT
groupName: generalSettings
- description: Control item unit eg °C
label: unit
name: unit
required: false
type: TEXT
groupName: generalSettings
advanced: true
- context: item
description: Heating Mode Item [String-Item]
label: Heating Mode Item
name: heatingModeItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Heating mode strings as array eg. AUTO,MANU,OFF. The string will be send to the Heating-Mode-Item [String-Item]
label: Heating Mode Array
name: heatingModeArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Example Mode Item [String-Item] (eg. State of heating valve)
label: Example Mode Item
name: exampleModeItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Example Mode Strings as Array eg. OFF,ON,BOOST. The string will be send to the Example-Mode-Item [String-Item]
label: Example Mode Array
name: exampleModeArray
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Valve/Alarm Item [Switch-Item] (eg. State of heating valve) for Animation in the center of the widget
label: Valve Item
name: valveItem
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Extension Item 1 eg. Battery-State [Number-Item]
label: Extension Item 1
name: extensionItem1
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Choose the F7-Icons for the Extension Item 1 as Array. -> <battery_100,battery_25,battery_0>. 1st Icon = Value > 75, 2nd Icon = Value > 25, 3th Icon = Value < 25
label: Extension Item 1 F7-Icon
name: extensionItem1Icon
required: false
type: TEXT
groupName: extensionItems
advanced: true
- context: item
description: Extension Item 2 eg. Battery-State [Number-Item]
label: Extension Item 2
name: extensionItem2
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: Choose the F7-Icons for the Extension Item 2 F7-Icon as Array. -> <battery_100,battery_25,battery_0>. 1st Icon = Value > 75, 2nd Icon = Value > 25, 3th Icon = Value < 25
label: F7-Icon for the Extension Item 2
name: extensionItem2Icon
required: false
type: TEXT
groupName: extensionItems
advanced: true
- description: URL or path to a Image (if you use a local img eg. -> http://local-IP-Adress:8080/static/folder/img.svg )
label: URL or path to image
name: imgUrl
required: false
type: TEXT
groupName: moreDesign
advanced: true
- description: eg. default 1em
label: Custom font-size current&set-point marker
name: fontSizeMarker
required: false
type: TEXT
groupName: fonts
advanced: true
- description: eg. default 2em
label: Custom font-Size center
name: fontSizeCenter
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default 1em for eg. Living Room
label: Custom font-size location label
name: fontSizeLocation
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default eg. 1.8em
label: Custom font-Size buttons
name: fontSizeButtons
required: false
type: TEXT
groupName: fonts
advanced: true
- description: default 1em for Heating-Label in bottom of the widget
label: Custom font-Size footer
name: fontSizeFooter
required: false
type: TEXT
groupName: fonts
advanced: true
- label: Main-Color Thermostat
name: colorThermostat
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color control ring
name: colorControlRing
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color buttons
name: colorButton
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color center
name: colorCenter
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color Typo
name: colorTypo
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color setPoint Marker
name: colorSetMarker
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color currentPoint Marker
name: colorCurrentMarker
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color bar linear gradient startPoint
name: colorBarStartPoint
required: false
type: TEXT
groupName: colors
advanced: true
- label: Color bar linear gradient endPoint
name: colorBarEndPoint
required: false
type: TEXT
groupName: colors
advanced: true
- description: Control if the Chart is visible
label: Chart Swtich
name: chartSwitch
required: false
type: BOOLEAN
groupName: chartSettings
- description: currently not possible -> The minimun value of axis. (eg. 10.5)
label: yAxis min
name: yAxisMin
required: false
type: TEXT
groupName: chartSettings
advanced: true
- description: currently not possible -> The maximum value of axis. (eg. 30.5)
label: yAxis max
name: yAxisMax
required: false
type: TEXT
groupName: chartSettings
advanced: true
parameterGroups:
- name: mainItems
label: Main Items (setpoint-temperature, current temperature, humidity)
- name: advancedItems
label: Advanced Items (Battery-State, ...)
- name: generalSettings
label: General Settings
- name: extensionItems
label: Extension Items
- name: moreDesign
label: More Design Options
- name: colors
label: Color Settings
- name: fonts
label: Font Settings
- name: chartSettings
label: Chart Settings
timestamp: Mar 29, 2024, 10:11:22 PM
component: f7-card
config:
stylesheet: >
.mylink {
#background-color: blue !important;
animation-name: example;
animation-duration: 4s;
} .mylink#####:hover {
text-decoration: underline !important;
transform: scale(1.5);
transition: 0.3s all;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.thermostat {
flex-shrink: 0;
--f7-block-margin-vertical: 0px;
--f7-block-padding-vertical: 0px;
--f7-block-padding-horizontal: 0px;
padding-left: 0px;
border-radius: 50%;
box-sizing: content-box;
border: 2px solid rgb(64, 60, 77);
}
.thermostat .bar {
margin-top: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
} .thermostat .bar .inner_bar {
margin-top: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
z-index: 4 !important;
} .thermostat .bar .inner_bar .block {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 50%;
transform: translate(-50%);
}
title: "=(props.location) ? 'Klima ' + props.location : ''"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- justify-content-center
resizable-absolute: true
resizableFixed: true
slots:
default:
- component: f7-block
config:
class: thermostat
style:
background: "=props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)'"
padding-top: "=props.size ? props.size + 'px': '100%'"
width: "=props.size ? Number(props.size)+'px' : '100%'"
slots:
default:
- component: f7-block
config:
class: bar
style:
height: "=props.size ? (Number(props.size)*0.89) +'px' : '89%'"
width: "=props.size ? (Number(props.size)*0.89) +'px' : '89%'"
slots:
default:
- component: f7-block
config:
class: inner_bar
style:
background-color: "=props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)'"
height: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
width: "=props.size ? (Number(props.size)*0.86) +'px' : '97%'"
slots:
default:
- component: f7-block
config:
style:
background: "='conic-gradient(transparent 0deg 160deg, ' + (props.colorThermostat ? props.colorThermostat : 'var(--f7-toggle-inactive-color)') + ' 160deg 200deg, transparent 200deg 360deg)'"
bottom: "=props.size ? '-7px' : '-7px'"
- component: f7-block
config:
class: hold left
style:
background-color: rgb(58, 55, 73)
border-radius: 100%
clip-path: "=props.size ? 'inset(0px 0px 0px ' + (Number(props.size)*0.89/2) + 'px)' : 'inset(0% 0% 0% 50%)'"
height: 100%
margin-top: 0px
position: absolute
width: 100%
slots:
default:
- component: f7-block
config:
class: fill fill1
style:
background: "=props.colorBarStartPoint && props.colorBarEndPoint ? '-webkit-linear-gradient(top, ' + props.colorBarEndPoint + ' 20%,' + props.colorBarEndPoint + ' 100%)' : '-webkit-linear-gradient(top, rgb(255, 73, 0) 20%,rgb(255, 73, 0) 100%)'"
border-radius: 100%
clip-path: "=props.size ? 'inset(0px ' + (Number(props.size)*0.89/2) + 'px 0px 0px)' : 'inset(0% 50% 0% 0%)'"
height: 100%
margin-top: 0px
position: absolute
transform: "=(items[props.setPointItem].state.split(' ')[0] >= (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp)) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : (items[props.setPointItem].state.split(' ')[0] > Number(props.maxTemp)) ? 'rotate(180deg)' : '')"
transition: transform 0.6s
width: 100%
z-index: 1 !important
- component: f7-block
config:
class: hold right
style:
background-color: rgb(58, 55, 73)
border-radius: 100%
clip-path: "=props.size ? 'inset(0px 0px 0px ' + (Number(props.size)*0.89/2) + 'px)' : 'inset(0% 0% 0% 50%)'"
height: 100%
margin-top: 0px
position: absolute
transform: rotate(180deg)
width: 100%
z-index: 3 !important
slots:
default:
- component: f7-block
config:
class: fill
style:
animation: right 1s linear both
border-radius: 100%
height: 100%
margin-top: 0px
position: absolute
transition: transform 0.6s
width: 100%
z-index: 3 !important
- component: f7-block
config:
class: fill fill2
style:
background: "=props.colorBarStartPoint && props.colorBarEndPoint ? '-webkit-linear-gradient(top, ' + props.colorBarEndPoint + ' 40%,' + props.colorBarStartPoint + ' 100%)' : '-webkit-linear-gradient(top, rgb(255, 73, 0) 40%,rgb(255, 158, 35) 100%)'"
border-radius: 50%
clip-path: "=props.size ? 'inset(0px '+ (Number(props.size)*0.89/2) + 'px 0px 0px)' : 'inset(0% 50% 0% 0%)'"
height: 100%
margin-top: 0px
position: absolute
transform: "=(items[props.setPointItem].state.split(' ')[0] <= (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp)) && items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) ? 'rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))+20)+'deg)' : (items[props.setPointItem].state.split(' ')[0] > (((Number(props.maxTemp) - Number(props.minTemp)) / 2) + Number(props.minTemp))) ? 'rotate(180deg)' : '')"
width: 100%
z-index: 3 !important
- component: f7-block
config:
class: span
style:
bottom: 0px
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
font-size: "=props.fontSizeFooter ? props.fontSizeFooter : '1em'"
font-weight: "=props.size ? (Number(props.size)*2) +'px' : 'calc(var(--f7-list-item-title-font-weight)*2)'"
margin-top: 0px
position: absolute
text-align: center
text-transform: uppercase
width: "=props.size ? (Number(props.size)*0.89) +'px' : '100%'"
z-index: 99 !important
slots:
default:
- component: Label
config:
text: Heating
- component: f7-block
config:
class: shadow
style:
animation: shadow 1.4s ease-out both
height: 86%
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: "=(items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.0625) +'px' : '6.25%'"
slots:
default:
- component: f7-block
config:
class: shadow-cube
style:
box-shadow: "=props.size ? '0 0 ' + (Number(props.size)*0.1125) +'px ' + (Number(props.size)*0.0325) + 'px ' + (props.colorSetMarker ? props.colorSetMarker : 'rgba(255, 158, 35, 0.5)'): '0 0 45px 13px rgba(255, 158, 35, 0.5)'"
height: 0px
margin-top: 0px
position: absolute
top: 0
width: "=props.size ? (Number(props.size)*0.0625) +'px' : '100%'"
- component: f7-block
config:
class: markerContainer
style:
height: 100%
left: 50%
margin-top: 0px
opacity: 1
pointer-events: none
position: absolute
text-align: center
top: 50%
transform: "=(items[props.currentPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.currentPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.currentPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.1) +'px' : '10%'"
z-index: 99 !important
slots:
default:
- component: f7-block
config:
class: markerCurrent
style:
background: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150, 243)'"
border-radius: 0% 50% 50% 50%
box-shadow: 0 0 5px 1px rgb(48, 46, 56)
height: "=props.size ? (Number(props.size)*0.1) +'px' : ''"
left: 50%
margin-top: 0px
padding-top: "=props.size ? '' : '100%'"
position: absolute
top: "=props.size ? (Number(props.size)*0.14) +'px' : '15%'"
transform: translate(-50%,-50%) rotate(45deg)
width: "=props.size ? (Number(props.size)*0.1) +'px' : '100%'"
slots:
default:
- component: f7-block
config:
class: number
style:
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%) rotate(-45deg)
slots:
default:
- component: Label
config:
style:
color: white
font-size: "=props.fontSizeMarker ? props.fontSizeMarker : '1em'"
font-weight: bold
text: =Math.round(items[props.currentPointItem].state.split(' ')[0] * 10) / 10
- component: f7-block
config:
class: markerContainer
style:
height: 100%
left: 50%
margin-top: 0px
opacity: 1
pointer-events: none
position: absolute
text-align: center
top: 50%
transform: "=(items[props.setPointItem].state.split(' ')[0] >= Number(props.minTemp) && items[props.setPointItem].state.split(' ')[0] <= Number(props.maxTemp) ? 'translate(-50%, -50%) rotate('+(320/(Number(props.maxTemp)-Number(props.minTemp))*(items[props.setPointItem].state.split(' ')[0]-Number(props.minTemp))-160)+'deg)' : 'translate(-50%, -50%) rotate(0deg)')"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.1) +'px' : '10%'"
z-index: 99 !important
slots:
default:
- component: f7-block
config:
class: markerSet
style:
background: "=props.colorSetMarker ? props.colorSetMarker : 'rgb(230, 74, 25)'"
border-radius: 50% 50% 50% 0
box-shadow: 0 0 5px 1px rgb(48, 46, 56)
height: "=props.size ? (Number(props.size)*0.1) +'px' : ''"
left: 50%
margin-top: 0px
padding-top: "=props.size ? '' : '100%'"
position: absolute
top: "=props.size ? (Number(props.size)*Number(-0.0125)) +'px': '-2%'"
transform: translate(-50%,-50%) rotate(-45deg)
width: "=props.size ? (Number(props.size)*0.1) +'px' : '100%'"
z-index: 100 !important
slots:
default:
- component: f7-block
config:
class: number
style:
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%) rotate(45deg)
slots:
default:
- component: Label
config:
style:
color: white
font-size: "=props.fontSizeMarker ? props.fontSizeMarker : '1em'"
font-weight: bold
text: =Math.round(items[props.setPointItem].state.split(' ')[0] * 10) / 10
- component: f7-block
config:
class: center
style:
background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
border-radius: 50%
box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
height: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
slots:
default:
- component: f7-swiper
config:
pagination: true
params:
direction: horizontal
mousewheel: true
slidesPerView: 1
scrollbar: false
style:
border-radius: 50%
height: 100%
left: 50%
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: f7-swiper-slide
config:
style:
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
class: page
style:
background: transparent
border-radius: 50%
height: 100%
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.heatingModeItem ? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
opacity: 1
position: absolute
text-align: center
top: 50%
transform: "=props.exampleModeItem ? 'translate(-50%, -50%) rotate(30deg)' : 'translate(-50%, -50%)'"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.15) +'px' : '15%'"
z-index: 99 !important
slots:
default:
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverHeatingMode'
style:
bottom: 0%
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-icon
config:
f7: "=props.heatingModeItem ? (items[props.heatingModeItem].state == props.heatingModeArray.split(',')[0] ? 'hand_raised' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[1] ? 'arrow_2_squarepath' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[2] ? 'airplane' : 'thermometer') : ''"
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-popover
config:
class: =props.location + ' popoverHeatingMode'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.heatingModeArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.heatingModeItem ? props.heatingModeItem : ''"
active: "=props.heatingModeItem ? (items[props.heatingModeItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: f7-block
config:
class: buttonContainer
style:
display: "=props.exampleModeItem ? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
opacity: 1
position: absolute
text-align: center
top: 50%
transform: "=props.heatingModeItem ? 'translate(-50%, -50%) rotate(-30deg)' : 'translate(-50%, -50%)'"
transition: 0.7s ease
width: "=props.size ? (Number(props.size)*0.15) +'px' : '15%'"
z-index: 99 !important
slots:
default:
- component: oh-button
config:
popoverOpen: ='.' + props.location + '.popoverExampleMode'
style:
bottom: 0%
color: "=props.colorButton ? props.colorButton + ' !important': ''"
height: 20%
left: 50%
position: absolute
transform: translate(-50%)
width: 100%
slots:
default:
- component: f7-icon
config:
f7: wrench
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-popover
config:
class: =props.location + ' popoverExampleMode'
slots:
default:
- component: f7-card
config:
action: variable
actionVariable: myVar
actionVariableValue: success
class:
- popover-close
clearVariable: true
noShadow: true
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-repeater
config:
containerStyle:
width: 100%
for: buttonlabel
in: =props.exampleModeArray.split(",")
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =loop.buttonlabel
actionItem: "=props.exampleModeItem ? props.exampleModeItem : ''"
active: "=props.exampleModeItem ? (items[props.exampleModeItem].state === loop.buttonlabel ? true : false) : ''"
class: margin
color: "=props.colorButton ? props.colorButton : ''"
outline: true
text: =loop.buttonlabel
- component: oh-button
config:
action: command
actionCommand: "=Number(items[props.setPointItem].state.split(' ')[0]) > Number(props.minTemp) ? Number(items[props.setPointItem].state.split(' ')[0]) - 0.5 : ''"
actionItem: =props.setPointItem
style:
color: "=props.colorButton ? props.colorButton : ''"
height: 50%
left: 10%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 30%
slots:
default:
- component: f7-icon
config:
f7: arrow_turn_left_down
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: oh-button
config:
action: command
actionCommand: "=Number(items[props.setPointItem].state.split(' ')[0]) < Number(props.maxTemp) ? Number(items[props.setPointItem].state.split(' ')[0]) + 0.5 : ''"
actionItem: =props.setPointItem
style:
color: "=props.colorButton ? props.colorButton : ''"
height: 50%
left: 90%
margin-top: 0px
position: relative
top: 50%
transform: translate(-50%, -50%)
width: 30%
slots:
default:
- component: f7-icon
config:
f7: arrow_turn_right_up
style:
font-size: "=props.fontSizeButtons ? props.fontSizeButtons : '2em'"
margin-top: auto
position: absolute
top: 50%
transform: translate(-50%, -50%)
- component: f7-block
config:
class: valveAnimation
style:
animation: skeleton-effect-fade 2s linear infinite
background: "=props.colorSetMarker ? 'radial-gradient(' + props.colorSetMarker +' 30%, transparent 50%)' : 'radial-gradient(var(--f7-theme-color) 30%, transparent 50%)'"
border-radius: 50%
display: "=(props.valveItem && items[props.valveItem].state == 'ON' )? '' : 'none'"
height: 100%
left: 50%
margin-top: 0px
pointer-events: none
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
z-index: -100 !important
- component: f7-block
config:
class: small
style:
animation: bound-in-small 0.6s ease forwards
background: "=props.colorCenter ? props.colorCenter : 'rgb(248, 249, 250)'"
border-radius: 50%
box-shadow: 0px 5px 10px 5px rgba(96, 93, 111,0.19)
height: "=props.size ? (Number(props.size)*0.375) +'px' : '57.6%'"
left: 50%
margin-top: 0px
position: absolute
text-align: center
top: 50%
transform: translate(-50%, -50%)
width: "=props.size ? (Number(props.size)*0.375) +'px' : '57.6%'"
z-index: 100 !important
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
font-size: "=props.fontSizeLocation ? props.fontSizeLocation : '1em'"
font-weight: 300
left: 50%
margin-top: 10%
transform: translate(-50%)
slots:
default:
- component: Label
config:
text: =props.location
- component: f7-swiper
config:
params:
autoplay:
delay: 1500
disableOnInteraction: false
direction: vertical
mousewheel: true
slidesPerView: 1
scrollbar: false
style:
border-radius: 50%
height: 100%
left: 50%
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: f7-swiper-slide
config:
style:
display: "=props.humItem ? '' : 'none'"
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
display: flex
font-size: "=props.fontSizeCenter ? props.fontSizeCenter : '2em'"
font-weight: 300
left: 50%
margin-top: 0
position: absolute
top: 50%
transform: translate(-50%,-50%)
slots:
default:
- component: Label
config:
text: =items[props.humItem].state
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
text: =items[props.humItem].displayState.split(' ')[1]
- component: f7-swiper-slide
config:
style:
display: "=props.currentPointItem ? '' : 'none'"
slots:
default:
- component: f7-block
config:
class: heat
style:
color: "=props.colorTypo ? props.colorTypo : 'rgb(87, 84, 95)'"
display: flex
font-size: "=props.fontSizeCenter ? props.fontSizeCenter : '2em'"
font-weight: 300
left: 50%
margin-top: 0
position: absolute
top: 50%
transform: translate(-50%,-50%)
slots:
default:
- component: Label
config:
text: =Number(items[props.currentPointItem].state).toFixed(1)
- component: Label
config:
style:
font-size: "=props.fontSizeCenter ? 'calc(' + props.fontSizeCenter + ' * 0.2 )' : '0.6em'"
vertical-align: top
text: "=props.unit ? props.unit : items[props.currentPointItem].displayState.split(' ')[1]"
- component: oh-image
config:
style:
bottom: 5%
left: 50%
position: absolute
transform: translate(-50%)
width: 40%
url: "=props.imgUrl ? props.imgUrl : 'https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/7d388a86c95471f89b1bb911d96d7609a3e3a059.svg'"
- component: f7-swiper-slide
config:
style:
display: "=props.chartSwitch ? '' : 'none'"
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
class: page
style:
background: transparent
border-radius: 50%
height: 100%
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: oh-chart
config:
height: 100%
period: 12h
periodVisible: false
slots:
grid:
- component: oh-chart-grid
config:
borderWidth: 0
height: 60%
left: 15%
right: 15%
show: true
top: 20%
series:
- component: oh-time-series
config:
data:
name: istTemp
gridIndex: 0
item: "=props.currentPointItem ? props.currentPointItem : ''"
lineStyle:
color: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150, 243)'"
markPoint:
data:
- name: Höchsttemperatur
type: max
- name: Tiefsttemperatur
type: min
itemStyle:
color: "=props.colorCurrentMarker ? props.colorCurrentMarker : 'rgb(33, 150, 243)'"
name: Ist Temp. Indoor
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: "=props.setPointItem ? props.setPointItem : ''"
lineStyle:
color: "=props.colorSetMarker ? props.colorSetMarker : 'rgb(230, 74, 25)'"
name: Soll Temp. Indoor
step: end
type: line
xAxisIndex: 0
yAxisIndex: 0
title:
- component: oh-chart-title
config:
bottom: 10%
left: center
text: 12h
textStyle:
fontSize: 1em
fontWeight: normal
xAxis:
- component: oh-time-axis
config:
axisLabel:
show: false
axisLine:
onZero: true
axisPointer:
label:
show: false
axisTick:
show: false
boundaryGap: false
gridIndex: 0
name: Uhrzeit
show: true
yAxis:
- component: oh-value-axis
config:
axisLabel:
formatter: "{value} °C"
gridIndex: 0
max: auto
min: auto
name: Temperatur
nameGap: 45
nameLocation: center
show: false
- component: f7-swiper-slide
config:
style:
display: "=(props.extensionItem1 || props.extensionItem2)? '' : 'none'"
height: 100%
width: 100%
slots:
default:
- component: f7-block
config:
class: page
style:
background: transparent
border-radius: 50%
font-size: "=props.fontSizeLocation ? props.fontSizeLocation : '1em'"
height: 100%
left: 50%
margin-top: 0px
position: absolute
top: 50%
transform: translate(-50%, -50%)
width: 100%
slots:
default:
- component: Label
config:
style:
margin-bottom: 5%
margin-top: 5%
text-align: center
text: Extension Items
- component: oh-repeater
config:
for: i
rangeStart: "=props.extensionItem1 ? Number(1) : (!props.extensionItem1 && props.extensionItem2) ? Number(2) : ''"
rangeStop: "=(props.extensionItem1 && props.extensionItem2) ? Number(2) : (props.extensionItem1 && !props.extensionItem2) ? Number(1) : Number(2)"
sourceType: range
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
flex-flow: row wrap
justify-content: space-evenly
padding: 0 5% 0 5%
slots:
default:
- component: f7-icon
config:
color: '=(Number.parseInt(items[props["extensionItem" + loop.i]].state) > 75) ? "green" : (Number.parseInt(items[props["extensionItem" + loop.i]].state) > 25) ? "yellow" : "red"'
f7: '=props["extensionItem" + loop.i + "Icon"] ? ((Number.parseInt(items[props["extensionItem" + loop.i]].state) > 75) ? props["extensionItem" + loop.i + "Icon"].split(",")[0] : (Number.parseInt(items[props["extensionItem" + loop.i]].state) > 25) ? props["extensionItem" + loop.i + "Icon"].split(",")[1] : props["extensionItem" + loop.i + "Icon"].split(",")[2]) : "clear"'
size: 2em
style:
line-height: 2
min-width: 40px
- component: f7-badge
config:
color: '=(Number.parseInt(items[props["extensionItem" + loop.i]].state) > 75) ? "green" : (Number.parseInt(items[props["extensionItem" + loop.i]].state) > 25) ? "yellow" : "red"'
style:
font-size: 1em
line-height: 3
margin: 0 5px 0 5px
min-width: 30px
slots:
default:
- component: Label
config:
text: =items[props["extensionItem" + loop.i]]
Widgets only ever see the state of the Item as text.
But individual widgets sometimes expect the states of Items to meet certain requirements. It appears this widget expects the heatingModeItem to only ever have a state from one of the values in the heatingModeArray property.
If you want this widget to work differently from written, you’ll have to find and replace the expressions that use these properties to show what you want to see instead of how it was originally developed.
isn’t it possible to use a conversion like numberItem.toString()?
The state of the Item is already a String.
The problem is how the widget uses those Strings. If you search through the code you will see the lines where it is used:
...
display: "=props.heatingModeItem ? '' : 'none'"
...
f7: "=props.heatingModeItem ? (items[props.heatingModeItem].state == props.heatingModeArray.split(',')[0] ? 'hand_raised' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[1] ? 'arrow_2_squarepath' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[2] ? 'airplane' : 'thermometer') : ''"
...
f7: "=props.heatingModeItem ? (items[props.heatingModeItem].state == props.heatingModeArray.split(',')[0] ? 'hand_raised' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[1] ? 'arrow_2_squarepath' : items[props.heatingModeItem].state == props.heatingModeArray.split(',')[2] ? 'airplane' : 'thermometer') : ''"
And so on.
It’s not that it’s a String Item verses a Number Item. In the widget it sees the Number as a String anyway. In fact, if you needed to do math with number from a Number Item in a widget, you’d have to parse it into a float first because all the widget gets is a String.
The problem is how the state of this Item is used. You’ll need to change these expressions to show the information the way you want to show it.
I think you are getting thrown off by the fact that the description of this property calls for a string item. This is not a hard restriction here. This is just a hint about the way this widget was originally constructed. The author had this particular information in a string item. I have not looked through all 1000+ lines of this widget, and I don’t use it myself so I’m not too familiar with its construction, but I do know that the original version is old enough that it came before item type information was even available in the widget expressions so I’m fairly certainly it doesn’t even engage in some obscure item type checking in the expressions where this property is used. So the short of it is, as others have said, you can use whatever item you want for this property.
What you do have to think about is how using a different item type might change the expressions where this is used (it might not actually change them at all, for all I know). That’s what the others have been saying. If there are places in the widget where the state of this “Example Mode Item” is compared to a string such as 'Standby' or if the item receives a command such as STOP then putting in a number type item will be useless until you change that particular expression to match the state types and values of the item you are using.
Thousand thanks you for your great support!
I changed the widget:
text: =items[props.currentPointItem].state.split(’ ')[0].substring(0, 4)
Now it works.
best
Heiko