[Feature request] card using a background image

[carryonrewardless]

This great card could be enhanced by enabling the selection of an image as a background to the windrose display. An example would be to have the windrose overlay an image of the house (plan view) at the location. Cheers

[aukedejong]

A made the windrose transparent before, for someone who added to card to an picture elements card, if I remember correctly. Maybe you can use that card.

And with card_mod you can set CSS styles. A background-image css?

I don't have much time to work on new features, the coming weeks.

[ildar170975]

Surely may be added by card-mod (background-image); need to use a png image with a transparent bottom part (where a scale is displayed).

[olivierouellet]

The other issue was #12 . The proposed solution was to add this to the card configuration (although I've never used it myself) :

card_mod:
  style: |
    ha-card {
      background-color: transparent
    }

[carryonrewardless]

I have this in my card config but get no background image. The path to the image file is valid.

card_mod:
  style: |
    ha-card {
      background-color: transparent;
      background: url('/local/images/DSC_0718.png');
    }

Tried also with background-image and also without the semi-colons.

[carryonrewardless]

Ok my bad. I had created a /local folder instead of putting it into /www. Now its working fine. Had to select rose lines colours as transparency and opacity parameters were not doing anything.

colors:
  rose_lines: rgb(0,255,0)
  rose_direction_letters: yellow
  rose_percentages: blue
card_mod:
  style: |
    ha-card {
      background-image: url('/local/images/Floorplan.png');
      background-size: 98%;
      background-opacity: 0.2;
    }

Can the rose percentages font size or bolding be selected?

[ildar170975]

need to use a png image with a transparent bottom part (where a scale is displayed).

as it was said earlier.

[aukedejong]

The windbar is also drawn on a canvas, so the text can't be styled with CSS. I'm working on an option to hide the windbar. You can also use Ildars option and make the background higher, so the windbar is drawn under the floor plan.

[ildar170975]

@aukedejong Just some thoughts: can we use TWO canvas elements placed one after one inside an upper container? Then hiding the scale may be achieved by not showing the 2nd canvas. Also, the background image may be selected to the "rose" canvas then:

And please provide one more option - kind of a padding between 2 canvases.

[aukedejong]

That's not the plan. Maybe in the future. It's a bigger change then the one I'm working on now.

Currently the new hide option doesn't draw the windbar.

Also good for performance for lower end devices.

[carryonrewardless]

I created a new image file with 100% transparency at the bottom using LibreOffice Draw. The bottom section was by inserting an additional rectangle area. The main image area was set to 10% transparency but this did not seem to do much. Here is the result.

[ildar170975]

My remark is not about the implementation - - it is about using an image in general. I think the best way is showing a map:

Here is an example for a country house; in case of a city building - same, a map with this building.

card_mod:
  style: |
    canvas {
      background-image: url('/local/images/test/country-plot.png') !important;
      background-size: 100% 100%;
    }

[aukedejong]

I think this one can be closed. It's possible with card_mod to use a background image.

[ildar170975]

@aukedejong I hope anyway one day the "windrose" part will have it's one canvas element - to set an image with not touching the "scale" part.