Q/A on widget oh-label-cell

Add-ons UIs
1

hi,
playing around with widgets and got following questions:

  1. I can’t figure out how to change the background image of that widget (pic1).
    I tried background-image and backgroundImage on different lines, none is working…
    how does one know which is the correct syntax for changing the image?

  2. the windspeed item is set to %.1f km/h, why is it reported different inside the widget?

    image
    image733×840 26.1 KB

  3. what do the three dots in the top right corner mean (pic1)?
    I configured a pop-up to appear, this works fine as long as I click anywhere an the widget.
    when clicking on the three dots I get a wired mix of the label-cell & weather widget, see pic2

  4. how do I get that widget onto my semantic model home page?

pic1:
image

pic2:

image
image697×689 25.5 KB

 component: oh-label-cell
 config:
   background-image: /static/Haus.jpg
   footer: "='Windspeed: ' + items.localCurrentWindspeed.state"
   action: popup
   actionModal: widget:weather_card
   actionModalConfig: {}
   trendItem: localCurrentApparentTemp
   item: localCurrentApparentTemp
   title: Wetter
   subtitle: "='Humidity: ' + items.localCurrentHumidity.state"
 slots: null
2

Ad 2.
Change items.localCurrentWindspeed.state to items.localCurrentWindspeed.displayState

1 Like
3

many thanks! that solves pt 2
image

4 
config:
  background-image: /static/Haus.jpg
  footer: "='Windspeed: ' + items.localCurrentWindspeed.state"
  expandable: false
  action: popup
  actionModal: widget:weather_card
  actionModalConfig: {}
  trendItem: localCurrentApparentTemp
  item: localCurrentApparentTemp
  title: Wetter
  subtitle: "='Humidity: ' + items.localCurrentHumidity.state"
slots:
  background:
    - component: oh-image
      config:
        url: https://source.unsplash.com/random/rain
        style:
          width: 100%
          height: 100%
          object-fit: cover
  1. use the background slot to put a oh-image like above
  2. cf @smarthomepch’s answer
  3. add expandable: false (unfortunately it’s a f7 parameter so it’s not documented/autocompleted yet)
  4. open the editor for the Overview page, click Add Block, then Add Cells, then choose your personal widget in the menu.
5

ad1) background appears but trendline is gone. is it behind the background picture and how to get it in front?

ad4) hmm, this is not listed as personal widget. I just edited a Label-cell from the standard Library
and I don`t find the Add Block and Cell on the HomePage Layout site:

image
image1009×883 29.9 KB

new question 5: need to change the font color from black to white so I thought I need to overwrite the oh-label-cell defaults with

  style:
     color: white

right in the config part of the component. but for sure it didn’t work. how to change the text color?

thx

6

Did you solve this? I’m running into the same issue.

7

same issue for me, can anyone help us?

thanks a lot!

EDIT: with this code i managed to have the background but not able to resize it:

component: oh-label-cell
config:
  trendItem: LocalWeatherandForecast_VelocitaVento
  trendGradient:
    - red
    - orange
    - yellow
  action: group
  actionGroupPopupItem: eStazioneMeteo
  item: LocalWeatherandForecast_VelocitaVento
  title: Velocità vento
  expandable: false
  trendStrokeWidth: 3px
  icon: f7:wind
  style:
    background: url(/static/Vento.jpg)
    filter: opacity(100%)
    width: 100%
    height: 100%
    top: 0
    left: 0
    z-index: 1
slots: null
8

Change items.localCurrentWindspeed.state to items.localCurrentWindspeed.displayState

I was looking for this. Thanks a lot!