[OH3] Main UI Examples

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:

  • set the item to read only
  • add “%s” to pattern

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 :grimacing:

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 :wink:

Edit: Found some more options just now :smiley: :crazy_face:

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 :wink:

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 :upside_down_face:

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 :


One of the adjusted popup pages with adjusted cards:

The Homepage also woks on the smartphone wit the OH app:

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.

3 Likes

Thanks!

Nice thread and interesting solutions!
Here’s my current layout, mostly with custom widgets (and some AI object detection tests):

1 Like

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”).

image
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)

image
A blind is shown gray filled when its closed. The lamella / slate position is display with a black arrow.

image
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.
image
image

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.
image

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.
image

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.
image

If item for color temperature is not defined, only toggle switch and brightness slider is displayed.
image

If item for brightness is not defined, only toggle switch is displayed.
image

I use “Cell_Toggle_Card_2” to control two different lights ON/OFF not dimmable
image

The YAML code for the widgets is in the next post

14 Likes

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

18 Likes

@BG56 Please use do not use Quotes for code, but Preformatted text. Thank you.

1 Like

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
```
1 Like