What is that sun card you are using?
I don’t use it anymore. Search HACS for “sun card”.
The original sun card was deprecated by its developer. Check out this fork:
Any updates on this request? I think thats a great idea also. Be nice to show wind gusts as well.
I know this has come up before. Im really interested in replicating these two graphics. Your compass is pretty close. Is it possible to add more data, perhaps a little smaller to show wind gust, or even wind chill? How about the temp gauge? Do you have anything like that? The color changes with the temp.
Thx
4 Likes
I need a little help here. I downloaded the day per card background png and placed it into my config/www/images folder as day.png. What is the next step to getting the image as a card background?
This works for me
type: custom:compass-card
indicator_sensors:
- sensor: sensor.windrichtung_in_grad
indicator:
type: arrow_inward
color: orange
dynamic_style:
sensor: sensor.windgeschwindigkeit
bands:
- from_value: 0
color: '#039BE5'
- from_value: 25
color: '#0da035'
- from_value: 50
color: '#e0b400'
- from_value: 75
color: '#e45e65'
compass:
circle:
background_image: /local/building.png
background_opacity: 0.5
color: orange
north:
color: green
show: true
south:
show: true
color: green
east:
show: true
color: green
west:
show: true
color: green
language: de
style:
top: 50%
left: 50%
box-shadow: none
background-color: transparent
transform: scale(1,1) translate(-50%,-50%)
card_mod:
style: |
.sensor-1 .measurement {
font-size: 1 em !important;
}
value_sensors:
- sensor: ''
imho, your path should be:
background_image: /local/images/day.png
Using this theme, i can get the dash bachground and the cards to change, but not the background image of the card. What did i forget?
Nothing. The cards are semi-transparent with no card background.
Can be the direction offset an entity? On a boat would be the aft position to the north
Is there a way to make adapt the font size of the readings?
I did a few trials with no success to make the lower gust value smaller
type: custom:compass-card
indicator_sensors:
- sensor: sensor.xyz_vent_direction
indicator:
type: arrow_inward
dynamic_style:
sensor: sensor.xyz_vent_vitesse_moyenne
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 15
color: '#e0b400'
- from_value: 20
color: '#e45e65'
- from_value: 30
color: '#cc00ff'
value_sensors:
- sensor: sensor.xyz_vent_vitesse_moyenne
decimals: 1
- sensor: sensor.xyz_vent_vitesse_rafale
header:
title:
value: Xyz
Cheers
I’m using it for sun and moon. The font is changed with:
card_mod:
style: |
.sensor-0 {
line-height: 54px;
}
.sensor-0 .abbr {
--secondary-text-color: white;
font-size: 24px !important;
}
.sensor-0 .value {
--secondary-text-color: white;
font-size: 24px !important;
}
.sensor-0 .measurement {
--secondary-text-color: white;
font-size: 24px !important;
}
providing this result:
Ok, I didn’t know card_mod was a HACS front end module that you had to install seperate.
In case someone struggles like I did:
Thanks Hope, with your input I could get where I wanted
1 Like
Is the any way to get wind speed with at least one, but preferably two decimals?
@Viking There should be 
Use the YAML config and add the decimals setting to the valuesensor.
value_sensors:
- sensor: sensor.wind_speed
decimals: 2
Thank you, that works 
1 Like
hey @tomvanswam , thanks for helping with this card!
I am trying to have a changing background image based on the value of another sensor (basically, have the shades adapting to the position of the sun).
However, I am struggling to do so, since it seems to refuse to load the image 
This is my code right now:
type: custom:compass-card
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
state_abbreviation:
show: false
language: es
compass:
north:
offset: 110
show: false
circle:
background_image: >
{% set azimuth = state_attr('sun.sun', 'azimuth') | float %} {% if azimuth
< 45 %}
/local/images/home_sun/home1.png
{% elif azimuth < 135 %}
/local/images/home_sun/home2.png
{% elif azimuth < 225 %}
/local/images/home_sun/home3.png
{% elif azimuth < 315 %}
/local/images/home_sun/home4.png
{% else %}
/local/images/home_sun/home5.png
{% endif %}
background_opacity: 0.7
value_sensors:
- sensor: ''
header:
title:
value: Sol
But I am getting:
I have already made sure that the images show if I input the value on the url, so the images are reachable.
Is there any limitation of doing what I want to do? what could I do to work around this?
Thank you!
Hi tom_I, do you think it would be possible to share the background again.
Thanks
No, sorry. I no longer have it. I use card-mod themed linear gradients now.
ha-card.top-level-card {
border: solid 1px var(--primary-text-color);
background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
}
Dynamically changing the image is (not yet) supported.
1 Like