OH-Cell Card and OH-Label Cell Background image

[Mike_s1 (Mike Sk)]

Hello,

I try to set a image as background in a oh-cell and oh label cell.

background-image: url(static/test.jpg)

1. static path = conf/html, right ?

until now, thing is working, can someone help me ? I’m new to OH

Thanks

[JustinG]

The OH cells are specially pre-formatted widgets with several built-in background special functions (for example, the trendline). I don’t think background style parameters are passed to the base element in this case otherwise there could be some pretty common conflicts.

The OH cells, however, do offer a background slot so that you can achieve effects like this. So you want something like:

- component: oh-cell
  config:
    title: This cell has a background image
  slots:
    background:
      - component: oh-image
        config:
          url: '/static/test.jpg'

[Mike_s1 (Mike Sk)]

@JustinG

- component: oh-cell
  config:
    title: This cell has a background image
  slots:
    background:
      - component: oh-image
        config:
          url: '/static/test.jpg'

thank you … I tried but as soon as I save the code, it gets automatically deleted.

[JustinG]

Please show the full code of the page or widget you are trying to build.

[Mike_s1 (Mike Sk)]

sorry if found the error, was my mistake

the slots part was not correct formated, now is work. Thank you so much for your help.

Last question, can i use also a live url as background ?

[JustinG]

@Mike_s1

Last question, can i use also a live url as background ?

You can use any url that points to an image. You can not point to non-image locations. If you have it pointing to an image and that image changes, the widget will not change the background until it is refreshed. See here for more details:

Auto-refresh charts and widgets in MainUI

As people migrate over to OH3 and the MainUI from other UIs, many are surprised to find that MainUI charts are static on a loaded page and won’t refresh unless the page is reloaded. Here I’m providing a fairly simple solution that allows you to set up timed, automatic refreshes for charts on a page (or another widget that you have configured with custom content that doesn’t refresh). When Do Widgets Refresh? So many of the standard widgets and components do respond to changes in item states …

[Mike_s1 (Mike Sk)]

Thank you JustinG for you support !!!

[Mike_s1 (Mike Sk)]

Do you have an idea how I can say the image should only display on label widget but not in the popup window ? thank you

[JustinG]

@Mike_s1

Do you have an idea how I can say the image should only display on label widget but not in the popup window ?

Add

class:
  - card-opened-fade-out

to your oh-image config

 - component: oh-image
   config:
    url: '/static/test.jpg'
    class:
      - card-opened-fade-out

[Mike_s1 (Mike Sk)]

thanks so much for you help … if you not familiar with coding its very difficult …

This the result, thank to you for helping me.