Can’t say if it is a bug, but if you go to thing’s channel tab and click on “+ Add Link to Item” you see the hysterese profile if the channel is a number channel.
Try to unlink and re-link the item. then hysterese should appear.
if you map hysterese profile to a switch item, make sure to add a state description to the item:
otherwise you see “Err” as switch state
Could you please elaborate how you got this done?
Is this in the location tab or on the overview tab and have you created a page for it? Maybe a YAML if you don’t mind 
Thanks in advance!
Correct me if I am wrong, but that looks like the normal Location card.
You achieve this by using the semantic model assigning Equipment and Properties.
I defined my semantic model but I just don’t get the (eg.) number of light in the top part and have no “tabs”.
Ah well, if I build the overview good enough, there is no need 
Edit: Found some more options just now 
You mean the i.e. lightbulb icon etc.? Those are called badges.
The tabs, again, are defined by your defined Equipment (Group of points => Equipment tab) and Properties (single points => Properties tab), there is quite extensive documentation here in the forum that shows how to do it.
I decided to write a Jython (Python 2) rule to update a String item with the wind direction name derived from the actual wind direction Number:angle Item (in my case, returned from OpenWeatherMap):
File location: $OPENHAB_CONF/automation/jsr223/python/personal/
File name: update_wind_direction_name.py
from core.rules import rule
from core.triggers import when
from core.actions import LogAction
from core.actions import Voice
from core.actions import Audio
import pprint
pp = pprint.PrettyPrinter(indent=4)
from java.time import ZonedDateTime
from java.time.format import DateTimeFormatter
from math import floor
rule_init_timestamp = ZonedDateTime.now()
logTitle = "update_wind_direction_name.py@{ts}".format(
ts=rule_init_timestamp.format(DateTimeFormatter.ISO_INSTANT),
)
ruleTimeStamp = " -- (Rule set initialised at {ts})".format(
ts=rule_init_timestamp.format(DateTimeFormatter.ISO_INSTANT),
)
rulePrefix = "Update wind direction name | "
class defaults:
wind_direction_ANGLE_ITEM_NAME="OneCallAPIweatherandforecast_Current_Winddirection"
wind_direction_name_item_NAME="Weather_Current_Wind_Direction_Name"
wind_names_32 = [
"N", "NbE", "NNE", "NEbN", "NE", "NEbE", "ENE", "EbN",
"E", "EbS", "ESE", "SEbE", "SE", "SEbS", "SSE", "SbE",
"S", "SbW", "SSW", "SWbS", "SW", "SWbW", "WSW", "WbS",
"W", "WbN", "WNW", "NWbW", "NW", "NWbN", "NNW", "NbW",
]
@rule("Wind direction changed")
@when("Item {WIND_ANGLE_ITEM} changed".format(
WIND_ANGLE_ITEM=defaults.wind_direction_ANGLE_ITEM_NAME
))
def Rule_WindDirectionChanged(event):
# Note: rule can be triggered by hand
update_wind_direction_name()
# Update the wind direction name item (usually when the wind direction angle item changes):
def update_wind_direction_name():
global logTitle
logPrefix = "update_wind_direction_name(): "
LogAction.logInfo(logTitle, logPrefix + "At the start of rule")
wind_direction_angle_item = itemRegistry.getItem(
defaults.wind_direction_ANGLE_ITEM_NAME
)
wind_direction_name_item = itemRegistry.getItem(
defaults.wind_direction_name_item_NAME
)
if not wind_direction_angle_item:
LogAction.logError(
logTitle, logPrefix + "Cannot find wind direction (angle) item '{item}' in item registry".format(
name=defaults.wind_direction_ANGLE_ITEM_NAME
)
)
return
if not wind_direction_name_item:
LogAction.logError(
logTitle, logPrefix + "Cannot find wind direction (name) item '{item}' in item registry".format(
name=defaults.wind_direction_name_item_NAME
)
)
return
wind_direction_name_value = None
wind_direction_angle = wind_direction_angle_item.state
if isinstance(wind_direction_angle, QuantityType):
"""
Convert wind direction in degrees (0°-360°) into a named wind direction by means of an index.
Since we're producing a 32-point wind rose, 'pure' wind direction names are centred across arcs
spanning 1/32th of a full circle. Or, having equal arcs of 1/64th of a full circle at each side
as mapping intervals. In this logic:
a. North is centred at step 0
b. Scaled wind angles with values between steps -1 and +1 are mapped to north
c. Since wind directions span 2 steps, we must count the intervals at odd nonzero step values
Therefore the index can be computed as follows:
1. Convert a wind direction angle value into 2 * 32 = 64 steps
2. Round down this value to the closest integer
3. Map this value to [0..64[ using modulo (north may yield values ≥64)
4. Convert this value to a 32-step index (use Math.floor as wind name changes at threshold)
5. Look up the wind direction name by means of this index in the wind direction name array
"""
# Get the wind angle in degrees:
wind_angle = wind_direction_angle.doubleValue()
# Scale wind angle from 360° range to 64 step range:
scaled_wind_angle = wind_angle / 360.0 * 2 * 32
# North goes from -1 to +1 hence we add an offset so the index starts at 0, 2, 4...
scaled_wind_angle += 1
# Convert index to 32-step index (use floor - returns float in Python2) and reduce range to [0; 32[:
wind_name_index = int(floor(scaled_wind_angle / 2)) % 32
wind_direction_name_value = defaults.wind_names_32[wind_name_index]
LogAction.logDebug(
logTitle, logPrefix + "Mapped {angle} to index {index} and name '{name}'".format(
angle=wind_angle,
index=wind_name_index,
name=wind_direction_name_value,
)
)
events.postUpdate(
wind_direction_name_item,
wind_direction_name_value
)
You can update the wind direction item name in the rule in the defaults class at the top of the file.
I created my own set of wind direction icons, see:
To make icons dynamic in Moain UI, you must edit the Item, pick default list item widget, tick the show advanced checkbox and tick the now visible Icon depends on state option.
Have fun!
Thanks for the hint! after re-linking the item hysterese appears!
Since I try to implement a few cards based on your code I figured give you something back 
The Items list you posted for the ‘wetter’-card contains 2 times forcastDay3 in the channel config. Being both there in D3 and D4. The card that you posted above it is correct however so maybe it’s already fixed 
For the same card, to convert icons strings to the actual icon names, I use a MAP-file and then use the meta state description to produce the names. If Openweathermap ever decides to add icon ‘states’ you only have to adjust the map file. It is based on post#8 in this topic and works well.
Further I can’t say anything else then you’ve done a great job in creating widgets that are highly flexible. Using the visible option was a great idea! This way, you can use one card for multiple rooms for example without the need that every room has the same equipment (ie. temperature, humidity etc)
Are you able to share the media center YAML? Thanks!
You have a fancy weather station, do you also have a fancy soil moisture measuring device?
Hey Arjan! Yes I’m using the GARDENA irrigation system for my lawn and plants. So there is a new soil moisture sensor which can be located somewhere in the lawn. I’m using the old one.
New one (requires a Gardena Bridge): Gardena smart system Produkte smart Sensor
Thank you again Mike @Integer for your widget examples which have been a good starting point for me to create my widgets according my context by adjusting your widgets. I also found a lot of hints in the OH forum and OH documentation. Thank you to all who have contributed in the OH forum, OH documentation and OH development!
OH3 is a great product and provides a lot more flexibility and possibilities than OH2.
I’m still at the beginning to learn and understand all the new features and how to configure and implement these. It’s still a lot trial and error.
Attached find the result of my approach adjusting the widgets of @Integer according my context.
My homepage with adjusted Card_room_12 from @Integer :
I adjusted the widgets to work with Fibaro rollershutters which have two different items to control the blinds (Jalousien) and blind slats (Jalousielamellen) and to work with different types of lights. My preference is to select between a few options instead moving a slider (therefore I implemented 3 blind slate positions, several predefined colors for color bulbs beside the slider). Right now the the predefined colors are fix set in the widget but I plan to set these with another widget and store the configured colors in items.
I still have challenges with “relative” positioning of components (icons, buttons, …) within a widget. Therefore I have often used “position absolute” in the style definition. Another challenge are the different resolutions of my tablets. One of my 10" tablets have a resolution of 1920x1200 and another 10" tablet has the resolution of 2340x1080. The homepage works fine with the OH app on my smartphone (portrait mode) and 10" tablet with the lower resolution (landscape mode), but on the 10" tablet with the higher resolution the characters and cards are to small (the font size and row high is not adjusted according the screen size).
I also run into limitation with complexity of expressions supported for “icon-F7” in “oh-link”. It seems that “icon-F7” only supports expressions to select two different icons. I wanted to select between three icons and therefor had to override the icons twice (this might also be a limitation of my knowledge).
If you are interested I can share my adjusted widgets.
Thanks!
Nice thread and interesting solutions!
Here’s my current layout, mostly with custom widgets (and some AI object detection tests):
I think, you can use more than two icons by using () in your expressions like =check ? result : (check ? result : (check ? result :alternative))
To all: can i get dynamic icons for temperature and humidity with a code like this
- component: f7-block
config:
visible: "=props.humidity_item ? true : false"
style:
position: absolute
top: 75px
left: 12px
flex-direction: row
display: flex
z-index: 2
slots:
default:
- component: oh-icon
config:
icon: humidity
item: "=props.humidity_item"
width: 18
- component: Label
config:
text: =items[props.humidity_item].state
style:
font-size: 16px
margin-left: 5px
margin-top: 0px
And how can i analyze only temperature or humidity when i click on their icons?
Hi Bernhard,
Very nice widgets. It would be great, you share the YAML code. I’m at the beginning to switch from OH2 to OH3. With some examples it makes easier to find solutions for the own smart home and sharing it too.
Many thanks!
Henry
I found some time over the weekend to describe how I organized my widgets and pages. I designed my own widgets to adjust these to my context and to allow a common design.
I use two pages, one for each floor. The page for the ground floor is the same as the overview page. Four cards “Cell_card_1A” are placed on top of the ground floor page to select several scenes (one of them “All OFF”). The rest of the page is filled with cards “Card_room_12A” to open the page for the different rooms and show the state of several items within the room. The card “Cell_Weather_1” for the weather forecast is also placed on this page.
The state of up to three lights, up to three roller shutters or blinds, one door state, room temperature and room humidity may be displayed on the room card “Card_room_12A” (can be extended). I use absolute positions for the state icons … relative positions might be the better options if you know how to do that (when using “component: oh-link“ instead of “component: f7-chip”).
A light is displayed “filled” when its state is ON. If the brightness of a light can be controlled, it is displayed with a badge with shows the brightness level.
A roller shutter is shown black filled when its closed more than 50%, not filled when its closed less than 50%. A badge is shown when it is not open (1 – 99)
A blind is shown gray filled when its closed. The lamella / slate position is display with a black arrow.
As I use one door sensor only (for the front door) and have no roller shutter in that room, I placed the state of the door at the same position as the first roller shutter (it’s easy to adjust the position if needed). The state open / closed is displayed with open or closed door.
The room temperature (set point in brackets) and room humidity is shown in the buttom line.
The pages for the rooms open as popup when clicking on one of the room cards “Card_room_12A” within the overview page or floor pages.
Within the room pages I mainly use cards with widgets for lights, roller shutters, blinds, temperature and humidity.
I use two different widgets for the roller shutters (Rollläden / Rollos). Widget “Cell_Shutter_Card_1” with the classic buttons UP, STOP, DOWN and widget “Cell_Shutter_Card_1A” with three additional buttons for three positions defined via three parameters of the widget. This is especially helpful for those who have not yet automated the positions of the shutters via sun sensors and rules (remote control vs smart). The state of the roller shutters is displayed as text “offen (open)” if its fully open or “% geschlossen (% closed)” if its partly or totally closed.
To control the blinds (Jalousien) I use the widget “Cell_Shutter_Card_2” with the classic buttons UP, STOP, DOWN and additional three buttons to control three defined positions “open / offen”, “half closed / halb zu”, “closed / zu” of the lamellas / slats (Jalousielamellen) of the blinds. Two different items are used to control the blinds. My experience is that controlling the lamellas with three buttons with predefined lamella positions is easier to control than with a slider.
I use widget “Cell_Light_Color_Card_2” for color lights with sliders for color, saturation and brightness. The widget has additional eight buttons for predefined 8 colors (currently fix set in the widget … I plan to set these with a parameter through another widget). I prefer to use several buttons for predefined colors instead of using the color slider.
Widget “Cell_Light_Card_2” can be used for white lights. One slider is for color temperature (cold – warm) and one for the brightness. Different items are used for ON/OFF, brightness and color temperature. If you use different items for ON/OFF and brightness, you can use a rule to define the brightness level when you switch on.
If item for color temperature is not defined, only toggle switch and brightness slider is displayed.
If item for brightness is not defined, only toggle switch is displayed.
I use “Cell_Toggle_Card_2” to control two different lights ON/OFF not dimmable
The YAML code for the widgets is in the next post
Cell_Card_1A:
uid: Cell_Card_1A
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 on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
- label: Command to send
name: command
required: false
type: TEXT
parameterGroups: []
timestamp: May 14, 2021, 2:45:41 PM
component: f7-card
config:
style:
noShadow: false
class:
- 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: 70px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -15px
left: 16px
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: oh-link
config:
action: command
actionItem: =props.item
style:
position: absolute
top: 0
left: 0
height: 60px
width: 100%
actionPosition: center
actionCommand: =props.command
actionFeedback: Done!
Card_room_12A:
uid: Card_room_12A
tags: []
props:
parameters:
- label: Header
name: text_header
required: false
type: TEXT
- description: icon name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- description: HEX or rgba
label: Backgroundcolor
name: bgcolor
required: false
type: TEXT
- context: item
description: select item for state light1
label: Item
name: status_light1
required: false
type: TEXT
- context: item
description: select item for state light2
label: Item
name: status_light2
required: false
type: TEXT
- context: item
description: select item for state light3
label: Item
name: status_light3
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: select item for set temperature
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for state blind1
label: Item
name: blind1
required: false
type: TEXT
- context: item
description: select item for state blind slats1
label: Item
name: blind_slats1
required: false
type: TEXT
- context: item
description: select item for state blind2
label: Item
name: blind2
required: false
type: TEXT
- context: item
description: select item for state blind slats2
label: Item
name: blind_slats2
required: false
type: TEXT
- context: item
description: select item for state blind3
label: Item
name: blind3
required: false
type: TEXT
- context: item
description: select item for state blind slats3
label: Item
name: blind_slats3
required: false
type: TEXT
- context: item
description: select item for door state(s)
label: Item
name: door_state
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
timestamp: Jun 20, 2021, 6:28:44 PM
component: f7-card
config:
style:
noShadow: false
class:
- 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: 100px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 45px
slots:
default:
- component: Label
config:
text: "=props.text_header ? props.text_header : 'Set Props'"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 5px
slots:
default:
- component: oh-link
config:
visible: "=props.status_light1 ? true : false"
iconF7: "=(items[props.status_light1].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light1].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light1].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
iconSize: 20
iconBadge: "=(items[props.status_light1].state > 0) ? items[props.status_light1].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 50px
visible: "=props.status_light2 ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
iconF7: "=(items[props.status_light2].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light2].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light2].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
iconSize: 20
iconBadge: "=(items[props.status_light2].state > 0) ? items[props.status_light2].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 85px
visible: "=props.status_light3 ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'"
iconF7: "=(items[props.status_light3].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light3].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light3].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' "
iconSize: 20
iconBadge: "=(items[props.status_light3].state > 0) ? items[props.status_light3].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 120px
visible: "=props.blind1 ? true : false"
iconColor: "=(props.blind_slats1) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
iconF7: "=items[props.blind1].state > 50 ? 'app_fill' : 'app'"
iconSize: 24
iconBadge: "=(props.blind_slats1) ? '' : (items[props.blind1].state > 0 ) ? items[props.blind1].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 120px
visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state < 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats1].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'"
iconSize: 24
- component: oh-link
config:
style:
position: absolute
left: 120px
visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state > 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats1].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'"
iconSize: 24
- component: oh-link
config:
style:
position: absolute
left: 155px
visible: "=props.blind2 ? true : false"
iconColor: "=(props.blind_slats2) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
iconF7: "=items[props.blind2].state > 50 ? 'app_fill' : 'app'"
iconSize: 24
iconBadge: "=(props.blind_slats2) ? '' : (items[props.blind2].state > 0 ) ? items[props.blind2].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 155px
visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state < 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats2].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'"
iconSize: 24
- component: oh-link
config:
style:
position: absolute
left: 155px
visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state > 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats2].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'"
iconSize: 24
- component: oh-link
config:
style:
position: absolute
left: 190px
visible: "=props.blind3 ? true : false"
iconColor: "=(props.blind_slats3) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'"
iconF7: "=items[props.blind3].state > 50 ? 'app_fill' : 'app'"
iconSize: 22
iconBadge: "=(props.blind_slats3) ? '' : (items[props.blind3].state > 0 ) ? items[props.blind3].state : ''"
- component: oh-link
config:
style:
position: absolute
left: 190px
visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state < 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats3].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'"
iconSize: 24
- component: oh-link
config:
style:
position: absolute
left: 190px
visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state > 30 ) ? true : false"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(items[props.blind_slats3].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'"
iconSize: 24
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'OPEN' ? 'door-open' : 'door-closed'"
style:
position: absolute
left: 120px
bottom: 0px
height: 24px
visible: "=props.door_state ? true : false"
- component: f7-block
config:
style:
position: absolute
bottom: -50px
left: 5px
slots:
default:
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.temp ? true : false"
text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 18
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
visible: "=props.humidity ? true : false"
text: =items[props.humidity].state + '%'
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 18
- 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"
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 110px
width: 100%
Cell_Shutter_Card_1:
uid: Cell_Shutter_Card_1
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: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Shutter item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 20, 2021, 5:24: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: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
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:
style:
position: absolute
bottom: -15px
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:
style:
position: absolute
bottom: -35px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=(items[props.item].state !== '0' ) ? items[props.item].state + '% geschlossen' : 'offen'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: oh-button
config:
iconColor: red
iconF7: arrow_up_circle
iconSize: 34
action: command
actionItem: =props.item
actionCommand: UP
style:
position: absolute
top: 10px
right: 5px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 28
action: command
actionItem: =props.item
actionCommand: STOP
style:
position: absolute
top: 44px
right: 8px
height: 32px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_down_circle
iconSize: 34
action: command
actionItem: =props.item
actionCommand: DOWN
style:
position: absolute
top: 78px
right: 5px
height: 35px
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"
Cell_Shutter_Card_1A:
uid: Cell_Shutter_Card_1A
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: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: blinds item to control
label: Item
name: item
required: false
type: TEXT
- description: blinds value position 1
label: value pos1
name: value1
required: false
type: TEXT
- description: blinds value position 2
label: value pos2
name: value2
required: false
type: TEXT
- description: blinds value position 3
label: value pos3
name: value3
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 20, 2021, 5:30:13 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: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
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:
style:
position: absolute
bottom: -15px
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:
style:
position: absolute
bottom: -35px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=(items[props.item].state !== '0' ) ? items[props.item].state + '% geschlossen' : 'offen'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: oh-link
config:
iconColor: black
iconF7: equal_square
iconSize: 32
iconBadge: "=props.value1 ? props.value1 : ''"
action: command
actionItem: =props.item
actionCommand: "=props.value1 ? props.value1 : ''"
style:
position: absolute
top: 10px
right: 20px
height: 33px
background: transparent
- component: oh-link
config:
iconColor: gray
iconF7: equal_square_fill
iconSize: 32
iconBadge: "=props.value2 ? props.value2 : ''"
action: command
actionItem: =props.item
actionCommand: "=props.value2 ? props.value2 : ''"
style:
position: absolute
top: 44px
right: 20px
height: 33px
background: transparent
- component: oh-link
config:
iconColor: black
iconF7: equal_square_fill
iconSize: 32
iconBadge: "=props.value3 ? props.value3 : ''"
action: command
actionItem: =props.item
actionCommand: "=props.value3 ? props.value3 : ''"
style:
position: absolute
top: 78px
right: 20px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_up_circle
iconSize: 34
action: command
actionItem: =props.item
actionCommand: UP
style:
position: absolute
top: 10px
right: 48px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 28
action: command
actionItem: =props.item
actionCommand: STOP
style:
position: absolute
top: 44px
right: 50px
height: 32px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_down_circle
iconSize: 34
action: command
actionItem: =props.item
actionCommand: DOWN
style:
position: absolute
top: 78px
right: 48px
height: 35px
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"
Cell_Shutter_Card_2:
uid: Cell_Shutter_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: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: blinds item to control
label: Item
name: blinds
required: false
type: TEXT
- context: item
description: blind slats item to control
label: Item
name: blind_slats
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 20, 2021, 5:32:40 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: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
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:
style:
position: absolute
bottom: -15px
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:
style:
position: absolute
bottom: -35px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=(items[props.blinds].state > 0) ? 'ausgefahren' : 'eingefahren'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -55px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=(items[props.blind_slats].state === '0') ? 'zu' : (items[props.blind_slats].state === '25') ? 'halb zu' : (items[props.blind_slats].state === '50')? 'offen' : '???'"
style:
font-size: 12px
margin-left: 0px
margin-top: 0px
- component: oh-button
config:
iconColor: blue
iconF7: arrow_right_square_fill
iconSize: 32
action: command
actionItem: =props.blind_slats
actionCommand: "50"
style:
position: absolute
top: 10px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: blue
iconF7: arrow_down_right_square_fill
iconSize: 32
action: command
actionItem: =props.blind_slats
actionCommand: "25"
style:
position: absolute
top: 44px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: blue
iconF7: arrow_down_square_fill
iconSize: 32
action: command
actionItem: =props.blind_slats
actionCommand: "0"
style:
position: absolute
top: 78px
right: 0px
height: 33px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_up_circle
iconSize: 34
action: command
actionItem: =props.blinds
actionCommand: UP
style:
position: absolute
top: 10px
right: 38px
height: 35px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 28
action: command
actionItem: =props.blinds
actionCommand: STOP
style:
position: absolute
top: 44px
right: 40px
height: 32px
background: transparent
- component: oh-button
config:
iconColor: red
iconF7: arrow_down_circle
iconSize: 34
action: command
actionItem: =props.blinds
actionCommand: DOWN
style:
position: absolute
top: 78px
right: 38px
height: 35px
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"
Cell_Light_Color_Card_2:
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: May 24, 2021, 2:35:19 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"
Cell_Light_Card_2:
uid: Cell_Light_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
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item brightness
name: item_brightness
required: false
type: TEXT
- context: item
description: Item to control color temperature
label: Item light temperature
name: item_light_temperature
required: false
type: TEXT
parameterGroups: []
timestamp: May 24, 2021, 5:57:07 AM
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: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
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:
style:
position: absolute
top: 50px
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
flex-direction: row
width: 100%
slots:
default:
- component: oh-slider
config:
visible: "=(props.item_light_temperature) ? true : false"
color: red
label: true
min: 0
max: 100
item: =props.item_light_temperature
style:
left: 20px
margin-top: 7px
width: calc(100% - 40px)
--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(215, 226, 255), rgba(224, 238, 238),rgba(255, 215, 44, 0.5),rgba(255, 215, 44, 0.8))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-label-text-color: black
z-index: 99 !important
- component: f7-block
config:
class:
- no-padding
style:
position: absolute
top: 100px
flex-direction: row
width: 100%
slots:
default:
- component: oh-slider
config:
visible: "=(props.item_brightness) ? true : false"
color: red
label: true
item: =props.item_brightness
style:
left: 20px
width: calc(100% - 40px)
--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(113,113,113,0.8), rgba(246,158,81,0.1))
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-label-text-color: black
z-index: 99 !important
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
top: 15px
right: 10px
- 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"
Cell_Toggle_Card_2:
uid: Cell_Toggle_Card_2
tags: []
props:
parameters:
- description: Small title1 on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header1 big sized
label: Header
name: header
required: false
type: TEXT
- description: icon1 name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- context: item
description: Item1 to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- description: Small title2 on top of second half of the card
label: Title2
name: title2
required: false
type: TEXT
- description: Header2 big sized of second half of the card
label: Header2
name: header2
required: false
type: TEXT
- description: icon2 name without ".png", located in static/icons/ folder
label: Icon2
name: iconimage2
required: false
type: TEXT
- context: item
description: Item2 to control on/off
label: Item2
name: item_schalter2
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: Jun 9, 2021, 3:18: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: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
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:
style:
position: absolute
top: 50px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : ''"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
top: 15px
right: 10px
- 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"
- component: Label
config:
text: "=props.title2 ? props.title2 : ''"
style:
position: absolute
font-size: 12px
margin-top: 50px
left: 40px
- component: f7-block
config:
style:
position: absolute
top: 105px
left: 10px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header2 ? props.header2 : ''"
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
- component: oh-toggle
config:
item: =props.item_schalter2
style:
position: absolute
top: 70px
right: 10px
- component: oh-image
config:
url: ='/static/icons/' + props.iconimage2 + '.png'
style:
position: absolute
left: 10px
top: 65px
height: 25px
opacity: 0.7
visible: "=props.iconimage2 ? true : false"
Please let me know if you have questions or problems with the widgets also if and how they work in your context.
I have corrected the formatting of the YAML code - sorry … I learn new things every day … I hope the YAML code is usable now
with OH3.0 I used the following code within the widget to display a icon from folder /etc/openhab/html/icons
- component: oh-image
config:
url: ='static/icons/' + props.iconimage + '.png'
a slash was missing at the beginning of the url. OH3.1 does no longer tolerate that. The relative url has to start with slash
- component: oh-image
config:
url: ='/static/icons/' + props.iconimage + '.png'
If you use my posted widgets you have to adjust the YAML code of these widgets whenever “oh-image” is used. Sorry! I have corrected the code
It will be much more useful to readers of the forum if you use code fences rather than quotes for your YAML code. Code fences will preserve the indentations and in YAML indentations have meaning.
```
code goes here
```