Compass card changing icon based on azimuth

Configuration Frontend
1

Hey there,

I’m trying to tweak my compass card, which is set up to show where the sun is around my house.
What I’d like to do now is to change the icon of the sun to a moon, or the css of the background image, based on the sunrise and sunset time:

image
image712×455 81 KB

(logically, when it’s before sunrise and after sunset, I’d like it to be dark, blue, and if it’s after sunrise and before sunset, then be it as it is now).

I’m sure this is very easy for people with homeassistant experience, but I’m totally lost as on how to approach this…!

Thank you in advance!

2

Try this, I have a number of moon_phase jpg to have the picture show the correct one

type: custom:card-templater
card:
  type: custom:compass-card
  indicator_sensors:
    - sensor: sensor.moon_api
      attribute: moon_azimuth
      indicator:
        type: circle
        color_template: |
          {% if states('sun.sun') == "below_horizon" %}
            black
          {% else %}
            orange
          {% endif %}
        show: true
      state_abbreviation:
        show: false
  value_sensors:
    - sensor: sensor.moon_api
      attribute: moon_altitude
      decimals: 1
      state_value:
        show: true
        color: yellow
  compass:
    circle:
      background_image_template: |
        {% if states('sun.sun') == "below_horizon" %}
          /local/pictures/moon_phases/{{states.sensor.moon_phase.state}}.png
        {% else %}
          /local/pictures/house.jpg
        {% endif %}
      background_opacity: 0.8
    north:
      show: true
    east:
      show: true
    west:
      show: true
    south:
      show: true
entities:
  - entity: sensor.moon_phase
1 Like
3

I missed a few things … like moon AND sun sensor…this is better but do check :slight_smile:
I also a moon_api sensor to get the altitude

type: custom:card-templater
card:
  type: custom:compass-card
  indicator_sensors:
	- sensor_template: |
		{% if states('sun.sun') == "below_horizon" %}
			sensor.moon_phase
		  {% else %}
			sun.sun
		  {% endif %}
	  attribute_template: |
		{% if states('sun.sun') == "below_horizon" %}
		  moon_azimuth
		  {% else %}
			azimuth
		  {% endif %}                  
	  indicator:
		type: circle
		color_template: |
		  {% if states('sun.sun') == "below_horizon" %}
			black
		  {% else %}
			orange
		  {% endif %}
		show: true
	  state_abbreviation:
		show: false
  value_sensors:
	- sensor_template: |
		{% if states('sun.sun') == "below_horizon" %}
			sensor.moon_api
		  {% else %}
			sun.sun
		  {% endif %}
	  attribute_template: |
		{% if states('sun.sun') == "below_horizon" %}
		  moon_altitude
		  {% else %}
			elevation
		  {% endif %}                   
	  decimals: 1
	  state_value:
		show: true
		color: yellow
  compass:
	circle:
	  background_image_template: |
		{% if states('sun.sun') == "below_horizon" %}
		  /local/pictures/moon_phases/{{states.sensor.moon_phase.state}}.png
		{% else %}
		  /local/pictures/house.jpg
		{% endif %}
	  background_opacity: 0.8
	north:
	  show: true
	east:
	  show: true
	west:
	  show: true
	south:
	  show: true
entities:
  - entity: sensor.moon_phase
4

uhm, I’m a bit confused with that code, I’m afraid it isnt working, but most likely due to the moon_api sensor that I have not configured…!

Mind guiding me through the steps I may be missing?
Right now it reads

Cannot read properties of undefined (reading 'attributes')
5

remove this section then

  value_sensors:
	- sensor_template: |
		{% if states('sun.sun') == "below_horizon" %}
			sensor.moon_api
		  {% else %}
			sun.sun
		  {% endif %}
	  attribute_template: |
		{% if states('sun.sun') == "below_horizon" %}
		  moon_altitude
		  {% else %}
			elevation
		  {% endif %}                   
	  decimals: 1
	  state_value:
		show: true
		color: yellow

EDIT, I added moon_api to get the altitude similar as the sun elevation

6

hey @vingerha I’m afraid I still dont have any sensor.moon_api nor I know how to get it from anywhere…
I do have the Moon integration set up, which only provides with sensor.moon_phase, but that’s all…

I’m kind of lost still :confused:

1 Like