Building Pages in the OH3 UI: documentation draft (2/3)

When I am using markers in a floorplan they do not follow the zoom level:

normal zoom:

image

zoomed in

even worse when zoom out

image

Note that the floorplan-image as well as the marker-icons are both based on SVGs so they should be able to scale.

However when looking into the built html they automatically get a height and width of 40 which is by the way also mentioned in the dialog box of the marker.

image

I also noticed that this size of 40 (or as configured) is always reset on the icon during zooming to exactly that number but not recomputed based on the zoom level. The definition of the 40,40 setting can be found in the oh-map-marker-class

I even looked at the OH code of the UI and it seems it is based on the leaflet.js-library. Looking around in the code (like map/index.js and oh-map-page.vue) I do see parameters that disallow zoom-animations and zooming at all (noZoomOrDrag, noZoomAnimation, noMarkerZoomAnimation) but nothing that deals with the zoom computation of the markers which leads me to the thinking that this is a behaviour of the the leaflet library itself and may be hard to be changed (which would be a pity)?

Any ideas if this could be fixed ?

In a widget,I want to use a button that opens up an image-item.

So, with a static item, this works:

                - component: oh-button
                  config:
                    title: Reinigungskarte ansehen
                    action: photos
                    actionPhotos:
                      - item: robovac_CleaningMap
                    iconF7: rectangle_3_offgrid_fill
                    iconColor: purple
                    textColor: red

However, I have configured a prefix in the props and use it like that e.g. for other actionItems:

                - component: oh-button
                  config:
                    title: "=('Saugleistung:  '+items[props.prefix+'_ControlFanLevel'].displayState)"
                    text: =items[props.prefix+'_ControlFanLevel'].displayState
                    action: options
                    actionItem: =props.prefix+'_ControlFanLevel'

However, this doesn’t work. I also tried using quotes or extra braces but neither even opens the img browser.

When I use “inspect element” at the button, in either case (even the working one with the static item name) it shows up as [object Object], which confuses me even a bit more:

grafik

Are “- items” handled different than "item: "s?

an obvious issue i see is that the + is at the prefix. I don’t think the system recognise this as a plus, so it should be prefix + with a space between prefix and als after what comes

=props.prefix + ‘_ControlFanLevel’

Your Item should be called „prefix“ in the parameter name.

Is it possible to change the backgound color “white” of a oh-list-card within list item widgets like oh-toggle-item? e.g. transparent

Should have clarified, the example with the other button (ControlFanLevel) works. The one with the photo action doesn’t work. Just to be sure, I tried it with a space

                - component: oh-button
                  config:
                    title: Reinigungskarte ansehen
                    action: photos
                    actionPhotos:
                      - item: =props.prefix + '_CleaningMap'
                    iconF7: rectangle_3_offgrid_fill
                    iconColor: purple
                    textColor: red

and it doesn’t work either.

I confirm, only with the static item this works…

                - component: oh-button
                  config:
                    title: Reinigungskarte ansehen
                    action: photos
                    actionPhotos:
                      - item: DriveWayCam2_Snapshot
#                      - item: '=props.prefix + "_Snapshot"'
#                      - item: =props.prefix + '_Snapshot'
                    actionPhotoBrowserConfig:
                      theme: dark
                      type: popup
                    iconF7: rectangle_3_offgrid_fill
                    iconColor: purple
                    textColor: red

Hey @Daniel_O and @muelli1967

I think you can…
Try this please:

actionPhotos: "='[{\"item\": \"' + props.prefix + '_CleaningMap\"},{\"item\": \"another_plain_item_name\"}]'"

Its kind of an expression and escaping nightmare, but it should work.

2 Likes

Thank you Rainer. While this indeed looks ugly, it works :slight_smile:

Just wondering, is the variables not working for the “-item” Notation a bug?

I wouldn’t see it as a bug, as this JSON array syntax is part of the documentation (or at least part of the editor-tooltip). There might be potential to simplify the syntax for non experienced users - but maybe they wouldn’t use these mechanics anyway…

Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view.

AFAIK the - item: XYZ format is a YAML-specific representation of arrays and just can’t handle expressions as they get parsed differently than the JSON array

Happy to hear, that it works for you!

Yes, I saw the JSON array in the docu before, just didn’t escape it, but tried with single quotes and double quotes mixed, with no chance. Then I discovered that the -item Notation works as well and thought “nice, then you don’t need quotes!” but that didn’t work out and I couldn’t understand why not.

How did you get OH3 running with hyperion.ng?
I do find hyperion as a thing in OH3, but I am not able to get it integrated as equipment/point to actually control my lights. Can you explain me how to do it, or how to debug it?

Does someone know how to hide a block or a widget on smaller screens? I tried 0 percent in the column options as a default width but that is not working.

Edit: To answer my own question: visible: =(device.desktop) == true

can you please tell me how to change the background color from yellow to green?

Thank you

I already told you today to use English language. This is an international community!

Could you please share the HM_Thermostat_Control_Final widget fot the popup?

Due to the fact that HM thermostats are hmm let’s say a little bit special, would you mind posting you items and rules for thermostats as well.

Thanks in advance

sorry I lost track a bit, can you share some more details what you want to see?

Hmm good question. If remeber right you created a widget für homematic thermostats. Could post the full widget and the items and rules. I Think that was my question

uid: widget_f7-card_Temp_V2_Control
tags:
  - homekit-look
  - Soll Tag
  - in use
props:
  parameters:
    - description: Location?
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - description: Thermostate icon f7
      label: f7 icon name
      name: icon1
      required: false
      type: TEXT
    - description: Humidity icon f7
      label: f7 icon name
      name: icon2
      required: false
      type: TEXT
    - context: item
      description: A Temperature item to display
      label: Item
      name: itemTemp
      required: false
      type: TEXT
    - context: item
      description: A Set-Temperature item to display
      label: Item
      name: itemTempSoll
      required: false
      type: TEXT
    - context: item
      description: An Humidity item to display
      label: Item
      name: itemHum
      required: false
      type: TEXT
    - context: item
      description: the valve state
      label: Item
      name: itemValve
      required: false
      type: TEXT
    - context: item
      description: Item for temperature channel
      label: Ambient temperature
      name: itemAmbientTemp
      required: false
      type: TEXT
    - context: item
      description: Item for outdoor temperature channel
      label: Outdoor temperature
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for target temperature channel
      label: Target temperature
      name: itemTargetTemp
      required: true
      type: TEXT
    - context: item
      description: Item for operation mode channel
      label: Operation mode
      name: itemMode
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 23, 2021, 6:29:13 PM
component: f7-card
config:
  expandable: true
  noShadow: false
  class:
    - card-expandable-animate-width
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    background-color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "white" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "white" : "rgba(228,228,228,0.9)"'
    height: 120px
    max-height: 120px
    min-height: 120px
    min-width: 110px
    max-width: 400px
    --f7-card-expandable-tablet-border-radius: 2px
    --f7-card-expandable-margin-horizontal: 5px
    --f7-card-expandable-margin-vertical: 10px
    --webkit-user-select: none
    --moz-user-select: none
    --ms-user-select: none
    display: flex;
    flex-direction: column
    justify-content: space-between
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: -4px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: =props.icon1
                          size: 22
                          class:
                            - align-self-center
                          style:
                            margin-left: -6px
                            margin-top: 0px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                      - component: Label
                        config:
                          text: =props.prop1
                          style:
                            font-size: 14px
                            font-weight: 500
                            margin-left: -4px
                            margin-top: 0px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "black" : "rgb(0,0,0,0.5)"'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                          style:
                            font-size: 40px
                            line-height: 1.1
                            font-weight: 350
                            margin-left: -2px
                            margin-top: 25px
                            color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 22) ? "red" : "black"'
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: arrowshape_turn_up_right
                          size: 16
                          style:
                            opacitiy: 0.5
                            position: absolute
                            top: 0
                            right: 0
                            padding-top: 83px
                            padding-right: 0px
                            z-index: 999
                            color: rgb(0,0,0,0.5)
                      - component: f7-chip
                        config:
                          bgColor: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"'
                          text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0)
                          style:
                            color: white
                            size: 20
                            z-index: 2
                            border-radius: 25px 25px 25px 25px
                            position: absolute
                            top: 8px
                            right: -3px
                            margin-top: -7px
                - component: oh-trend
                  config:
                    trendItem: =[props.itemTemp]
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(30%)
                      position: absolute
                      width: 100%
                      height: 100%
                      top: 0
                      left: 2
                      z-index: 1
                - component: oh-link
                  config:
                    action: popup
                    actionModal: widget:HM_Thermostat_Control_Final
                    actionModalConfig:
                      itemAmbientTemp: =props.itemAmbientTemp
                      itemOutdoorTemp: =props.itemOutdoorTemp
                      itemTargetTemp: =props.itemTargetTemp
                      itemMode: =props.itemMode
                    style:
                      position: absolute
                      width: 100%
                      height: 100%
                      top: 0
                      left: 0
                    class:
                      - card-prevent-open

// import org.eclipse.xtext.xbase.lib.Functions

// val String filename = "heizung-raeume.rules" 

val Number tempHigher = 22.5
val Number tempComfort = 21.0
val Number tempMid = 16.5
val Number tempLower = 16.5
val Number tempChill = 15.0
val Number tempAway = 15.0
val Number tempAwayLonger = 13.0
val Number tempOff = 5.0


//Heizung Auswertung Schnellauswahl (Sitemap)
 
rule "Jana_Zimmer_Heizung Auswertung Schnellauswahl (Sitemap)"
 when
    Item Jana_Zimmer_Preset received command

then {
 
    switch (receivedCommand){
        case 0: Jana_Zimmer_Manu.sendCommand(tempLower)
//      case 1: Jana_Zimmer_Manu.sendCommand(tempComfort)
        case 2: Jana_Zimmer_Manu.sendCommand(tempHigher)
		case 3: Jana_Zimmer_Manu.sendCommand(tempOff)
		case 4: Jana_Zimmer_Manu.sendCommand(tempMid)
		case 1: AutoMode_Jana_Zimmer.sendCommand(ON)
    }
//    Jana_Zimmer_Preset.postUpdate(-1)
}
end

It`s outstanding!
But it seems better to add 10px shift for slider when it uses with stepper.
1

                            - component: oh-slider
                              config:
                                class: '=props.showSlider ? props.showSlider : "display-none"'
                                step: "1"
                                min: =props.minValue
                                max: =props.maxValue
                                item: =props.item                            
                                style:
                                  align-self: flex-end
                                  font-color: yellow
                                  margin-left: 10px

Last line.