Hello there,
openhabian 5.10.17-v7+ #1421
Release = Raspbian GNU/Linux 10 (buster)
Kernel = Linux 5.10.17-v7+
Platform = Raspberry Pi 3 Model B Rev 1.2
Openhab 3.1.0
I’ve switched to OH3 a few days ago, I found a lot of tutorials and Widgets from other persons.
So I decided to try and error with some.
anyways, I can’t figure out why I can’t change the icon’s
the path telling me its located under /static
So in HTML, there is a Readme.txt which explains, if I can enter my IP/static/picture.png it should be displayed in the browser → that works for me.
So why the icon is not shown up ? it’s a normal .png icon.
Widget:
uid: Cell_Light_Color_Card_2
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: icon name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control on/off
label: Item ON OFF
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control color
label: Item light color
name: item_color
required: false
type: TEXT
parameterGroups: []
timestamp: Jul 1, 2021, 7:45:18 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)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 165px
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-card-content
config:
class:
- display-flex
- flex-direction-column
- justify-content-flex-start
- align-items-left
style:
--f7-color-picker-slider-size: 18px
--f7-color-picker-slider-knob-size: 20px
slots:
default:
- component: f7-row
config:
style:
position: absolute
top: 10px
left: 40px
flex-direction: row
display: flex
slots:
default:
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
class:
- no-padding
style:
position: absolute
top: 40px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
class:
- no-padding
style:
position: absolute
top: 70px
left: 10px
flex-direction: row
width: calc(100% - 100px)
margin-top: 7px
--f7-range-bar-size: 12px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 20px
--f7-range-bar-active-bg-color: transparent
--f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-label-text-color: black
--f7-color-picker-slider-size: 12px
--f7-color-picker-slider-knob-size: 20px
z-index: 99 !important
slots:
default:
- component: oh-colorpicker
config:
color: red
label: true
item: =props.item_color
modules:
- hsb-sliders
- component: oh-toggle
config:
item: =props.item_color
style:
position: absolute
top: 15px
right: 90px
- component: oh-button
config:
iconColor: red
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 0,100,100
style:
position: absolute
top: 10px
right: 35px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: deeporange
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 15,100,100
style:
position: absolute
top: 45px
right: 35px
height: 34px
background: transparent
- component: oh-button
config:
iconColor: orange
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 30,100,100
style:
position: absolute
top: 80px
right: 35px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: yellow
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 60,100,100
style:
position: absolute
top: 115px
right: 35px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: purple
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 300,100,100
style:
position: absolute
top: 10px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: blue
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 240,100,100
style:
position: absolute
top: 45px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: lightblue
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 180,100,100
style:
position: absolute
top: 80px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: green
iconF7: app_fill
iconSize: 34
action: command
actionItem: =props.item_color
actionCommand: 120,100,100
style:
position: absolute
top: 115px
right: 0px
height: 33px
background: transparent
- component: oh-image
config:
url: ='static/icons/' + props.iconimage + '.png'
style:
position: absolute
left: 10px
top: 10px
height: 25px
opacity: 0.7
visible: "=props.iconimage ? true : false"
Config Widget
component: widget:Cell_Light_Color_Card_2
config:
title: Licht
header: Stehlampe
iconimage: idea
item_schalter: TRADFRIGluehlampeWhz_Farbe
item_color: TRADFRIGluehlampeWhz_Farbe
My second Problem is the understanding of the new concept.
I can’t figure out how the Properties inside a widget is created ?
My Concept of the Model is:
→ Floor → room → Sensor → Values is that correct ?
I displayed it here:
summarized:
I can’t figure out, how to get Icons into place
And I can’t figure out, why the properties are not created for the rooms.
If someone can help me with this, I would be thankful