hello, im looking for a way to have the possible, to select the icons from various sources. So that I can set icons from OH, f7 and material in the same widget component.
I want to have one component as icon type that handle all icon sources. If i set an icon in the default Widgets, for example the “oh-Label”, there is this possibility.
thanks for help !
It is actually not clear to me what you want to achieve? You can use the prefix f7: or oh: to tell openhab which iconset you want to use. You can even provide your own custom icons by copying to them to the icons folder and then using them via oh: . There is even the possibility to implement own icon sets with custom prefixes but that involves real programming (see here for an example).
So can you provide an example of what you want to achieve?
hi, thanks for the fast respond. If i design Widgets with an Icon- component, i must choose wich component type i like to choose. So, i can choose the “oh-icon” or the “f7-icon”. But i look for a component wich can handle both types of icons (oh and f7).
Examples:
oh-icon
- component: oh-icon
config:
icon: =props.icon || 'lightbulb'
width: 30
style:
position: absolute
top: 0.8em
left: 0.1cm
f7-icon
- component: f7-icon
config:
f7: shuffle
size: 20
color: '=(items[props.echo_shuffel].state === "ON") ? "blue" : ""'
style:
position: relative
left: +7%
Is there “- component: icon”-type who handles the icons of both sources?
I hope you get my problem.
Now I get the idea. The only idea I could think off without digging deeper how standard oh widgets implement that topic (there you can just write the name of the icon to the particular field) would be to have both within the widget and switch them on or off depending what name has been provided through your icon parameter. Sounds more like a workaround though and a bit ugly but would most likely work.
hi, thanks for the idea. Now I made it as you said.
- label: OpenHAB-Icon
name: zeige_1
required: false
type: BOOLEAN
groupName: item_1
....
slots:
default:
- component: oh-icon
config:
icon: =props.icon_1
width: 27
visible: "=props.zeige_1 ? true : false"
- component: f7-icon
config:
f7: =props.icon_1
size: 23
color: '=(items[props.item_1].state === "ON") ? props.color_1 : "gray"'
visible: "=props.zeige_1 ? false : ture"
and for everyone else, here my simple Widget with 3 toggles and the icon Selection. The description is in German.
uid: 3x Toggel
tags: []
props:
parameters:
- label: Überschrift anzeigen
name: zeige_ueber
required: false
type: BOOLEAN
groupName: grundlagen
- context: text
description: A text prop
label: Überschrift
name: head_label
required: false
type: TEXT
groupName: grundlagen
- label: Item 1 anzeigen
name: zeige_toggle_1
required: false
type: BOOLEAN
groupName: item_1
- label: OpenHAB-Icon
name: zeige_1
required: false
type: BOOLEAN
groupName: item_1
- context: item
label: Item 1
name: item_1
required: false
type: TEXT
groupName: item_1
- context: text
label: Beschreibung
name: besch_1
required: false
type: TEXT
groupName: item_1
- context: text
label: Icon
name: icon_1
required: false
type: TEXT
groupName: item_1
- context: text
label: Color
name: color_1
required: false
type: TEXT
groupName: item_1
- label: Item 2 anzeigen
name: zeige_toggle_2
required: false
type: BOOLEAN
groupName: item_2
- label: OpenHAB-Icon
name: zeige_2
required: false
type: BOOLEAN
groupName: item_2
- context: item
label: Item 2
name: item_2
required: false
type: TEXT
groupName: item_2
- context: text
label: Beschreibung
name: besch_2
required: false
type: TEXT
groupName: item_2
- context: text
label: Icon
name: icon_2
required: false
type: TEXT
groupName: item_2
- context: text
label: Color
name: color_2
required: false
type: TEXT
groupName: item_2
- label: Item 3 anzeigen
name: zeige_toggle_3
required: false
type: BOOLEAN
groupName: item_3
- label: OpenHAB-Icon
name: zeige_3
required: false
type: BOOLEAN
groupName: item_3
- context: item
label: Item 3
name: item_3
required: false
type: TEXT
groupName: item_3
- context: text
label: Beschreibung
name: besch_3
required: false
type: TEXT
groupName: item_3
- context: text
label: Icon
name: icon_3
required: false
type: TEXT
groupName: item_3
- context: text
label: Color
name: color_3
required: false
type: TEXT
groupName: item_3
parameterGroups:
- name: grundlagen
label: Grundlagen
- name: item_1
label: Item 1
- name: item_2
label: Item 2
- name: item_3
label: Item 3
timestamp: Aug 30, 2021, 6:32:44 AM
component: f7-card
config:
noShadow: false
class:
- padding
style:
border-radius: 12px
box-shadow: 0px 6px 6px black
slots:
default:
- component: f7-row
config:
visible: "=props.zeige_ueber ? true : false"
slots:
default:
- component: Label
config:
text: =props.head_label
style:
font-weight: 600
font-size: 18px
- component: f7-row
config:
visible: "=props.zeige_toggle_1 ? true : false"
class:
- padding-top
slots:
default:
- component: f7-col
config:
class:
- display-flex
slots:
default:
- component: oh-icon
config:
icon: =props.icon_1
width: 27
visible: "=props.zeige_1 ? true : false"
- component: f7-icon
config:
f7: =props.icon_1
size: 23
color: '=(items[props.item_1].state === "ON") ? props.color_1 : "gray"'
visible: "=props.zeige_1 ? false : ture"
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-start
slots:
default:
- component: Label
config:
text: =props.besch_1
style:
position: absolute
left: 50px
font-weight: 600
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-end
slots:
default:
- component: oh-toggle
config:
item: =props.item_1
color: =props.color_1
- component: f7-row
config:
visible: "=props.zeige_toggle_2 ? true : false"
class:
- padding-top
slots:
default:
- component: f7-col
config:
class:
- display-flex
slots:
default:
- component: oh-icon
config:
icon: =props.icon_2
width: 27
visible: "=props.zeige_2 ? true : false"
- component: f7-icon
config:
f7: =props.icon_2
size: 23
color: '=(items[props.item_2].state === "ON") ? props.color_2 : "gray"'
visible: "=props.zeige_2 ? false : ture"
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-start
slots:
default:
- component: Label
config:
text: =props.besch_2
style:
position: absolute
left: 50px
font-weight: 600
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-end
slots:
default:
- component: oh-toggle
config:
item: =props.item_2
color: =props.color_2
- component: f7-row
config:
visible: "=props.zeige_toggle_3 ? true : false"
class:
- padding-top
slots:
default:
- component: f7-col
config:
class:
- display-flex
slots:
default:
- component: oh-icon
config:
icon: =props.icon_3
width: 27
visible: "=props.zeige_3 ? true : false"
- component: f7-icon
config:
f7: =props.icon_3
size: 23
color: '=(items[props.item_3].state === "ON") ? props.color_3 : "gray"'
visible: "=props.zeige_3 ? false : ture"
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-start
slots:
default:
- component: Label
config:
text: =props.besch_3
style:
position: absolute
left: 50px
font-weight: 600
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-end
slots:
default:
- component: oh-toggle
config:
item: =props.item_3
color: =props.color_3