Settings background images

Add-ons UIs
1

Hallo,
I’ve seen great projects here in the forum.
Sometimes the background images are sharp and others are out of focus.
Is there a recommendation?
height
width
pixel density (px/in)
file format
UI
Thanks!

2

Hi,

for me

background-size: cover

did the trick - try and play around with it a little!

3

The background-image quality depends on the used image and its resolution - further more it depends on the widget the background is used in - a large widget (with a full-size background-image) will profit from a higher resolution image. (but might also increase loading-times significantly)

If you use the css background-size property with the keyword cover (as suggested by @BobMiles) the image scales as much as needed to cover the whole area. More informations on this property here

Vector images are generally nice to use, as they can be scaled unlimited without loosing any quality whatsoever. But most of the vector images are not as sophisticated as images due to their creation process.

1 Like
4

Many Thanks! I’ve tested a lot and got decent results!
You have to find a compromise between quality and loading time.
Unfortunately you don’t get vector graphics from the camera. :unamused:

Can I use all css properties?

Is it possible to display the images dynamically?
e.g. the current weather symbol of a weather station?

5

True

Generally yes - but no css pseudo-classes.

It depends. If the url doesn’t change, you need a reload to refresh the image. If you have different urls for each weather-symbol, then yes. You could use expressions for that, like:

    - component: oh-image
      config:
        url: "=items.YOURITEM.state === '1' ? '/static/1.svg' : '/static/2.svg'"
6

Thank you!
Can you please explain to me about the dynamic url?
I have no experience with that. Is there a documentation for this?

E.g. I have a location “weather station”. I would like to add a background image to this tile according to the current weather.
I have created an item (Offline_1) and assigned the content of the url to it using a rule.

itemName: Offline_1
command: http://XXX.XXX.XXX.XXX:8080/static/schnee.svg

config:
label: Home Page
locations:

  • component: oh-locations-tab
    config:
    excludedCards:
    slots:
    Office:
    - component: oh-location-card
    config: {}
    Weather:
    - component: oh-location-card
    config:
    invertText: true
    disableBadges: false
    backgroundSize: cover
    backgroundImage: = items.Offline_1.state
    background-size: cover

This works with all graphic formats, even with animated gifs.

But how do I have to program it according to your example?

7

Theres a part for ‘Expressions’ in the UI documentation, where it’s described way better as I would be able to do.

I would recommend you, reading these documentations and try to understand how this could be done. If you need help on a specific command then, a lot of people are willing to help you.

Writing you a ready-to-use expression would only lead to more and more questions over time - hope you understand this. :slight_smile: