Custom-card fold-entity-row shows transparent background

Configuration Frontend
1

using the fold-entity-row card to cleanup the fronted a bit, i cant find any suggestion how to have the card show the regular whit background the regular card have:

44
44424×501 20.7 KB

and

24

using this code:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Sun - Light
    entities:
      - binary_sensor.sun_up
      - sensor.solar_angle
      - sensor.sun_state
      - sensor.nextsunrise
      - sensor.nextsunset
      - sensor.sunset_offset
      - sensor.length_of_day_factor
      - sensor.circadian_light

not sure what other options are available for type:, but taking that out errors out it is not defined :wink:

please have a look how I could re-establish the regular background?
thanks

2

found it… needs to be in another card:

  - type: custom:vertical-stack-in-card
    cards:
      - type: glance
        title: Zon - Maan
        show_header_toggle: false
        entities:
          - sun.sun
          - sensor.moon
          - sensor.season

      - type: entities
        title: Sun and Day settings
        show_header_toggle: false
        entities:
          - type: custom:fold-entity-row
            head:
              type: section
              label: Sun & light
            entities:
              - binary_sensor.sun_up
              - sensor.solar_angle
              - sensor.sun_state
              - sensor.nextsunrise
              - sensor.nextsunset
              - sensor.sunset_offset
              - sensor.length_of_day_factor
              - sensor.circadian_light
          - type: custom:fold-entity-row
            head:
              type: section
              label: Day & night
            entities:
              - sensor.dag_nacht
              - sensor.day_phase
              - sensor.part_of_day
              - sensor.period_of_day
              - sensor.day_night
              - sensor.dayofyear
              - sensor.weekofyear

cool.

3

Out of interest, what are componenet/device are using to obtain all those (except sun.sun of course) sensors?

4

those are mostly template sensors. Anyone you are interested in in particular?

5

yes I like all the sun & light ones

6

what the heck, here’s my full package Day & Time :wink:

##########################################################################################
# Package Day, Time
##########################################################################################

homeassistant:
  customize:

    sensor.time_template:
      icon: mdi:clock
    sensor.weekofyear:
      icon: mdi:calendar-range
    sensor.dayofyear:
      icon: mdi:calendar-today
    sensor.nextsunrise:
      icon: mdi:weather-sunset-up
    sensor.nextsunset:
      icon: mdi:weather-sunset-down
    sensor.solar_angle:
      icon: mdi:format-rotate-90
    sensor.length_of_day_factor:
      icon: mdi:altimeter
    sensor.circadian_light:
      icon: mdi:theme-light-dark

    sensor.sunset_offset:
      icon: mdi:weather-sunset-down
    sensor.sunrise_offset:
      icon: mdi:weather-sunset-up

    binary_sensor.workday_sensor:
      state_card_mode: badges

    sensor.season:
      templates:
        friendly_name_template: return state
        icon: >
          if (state === 'spring') return 'mdi:flower';
          if (state === 'summer') return 'mdi:sunglasses';
          if (state === 'autumn') return 'mdi:leaf';
          if (state === 'winter') return 'mdi:snowflake';
          return 'mdi:cloud';
        icon_color: >
          if (state === 'spring') return 'green';
          if (state === 'summer') return 'yellow';
          if (state === 'autumn') return 'orange';
          if (state === 'winter') return 'blue';
          return 'grey';
#        _stateDisplay: >
#          function capitalizeFirstLetter(string) {return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();}
#          string = state;
#          return capitalizeFirstLetter(string);

    sun.sun:
      templates:
        icon: >
          if (state =='above_horizon') return 'mdi:weather-sunny';
          return 'mdi:weather-night';

#    sensor.moon:
#      templates:
#        _stateDisplay: >
#          function capitalizeFirstLetter(string) {return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();}
#          string = state.replace('_',' ');
#          return capitalizeFirstLetter(string);

    sensor.translated_weekday:
      icon: mdi:calendar-today

    sensor.vandaag:
      icon: mdi:calendar-today

    sensor.days_current_month:
      icon: mdi:calendar-today
    sensor.remaining_days:
      icon: mdi:calendar-today
    sensor.past_days:
      icon: mdi:calendar-today
##########################################################################################
# Sun
# see https://github.com/pnbruckner/homeassistant-config/blob/53fe1dff32a36a84a4efdbb87b72387d4ce5f091/docs/sun.md
##########################################################################################

sun:
  monitored_conditions:
    - azimuth
    - elevation
    - next_dawn
    - next_dusk
    - next_midnight
    - next_noon
    - daylight
    - next_daylight
    - prev_daylight
    - sunrise
    - sunset
  scan_interval:
    minutes: 1
##########################################################################################
# Sensors
##########################################################################################

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'time_date'
#      - 'beat'

  - platform: season
    type: astronomical

  - platform: moon
##########################################################################################
# Template Sensor
# https://home-assistant.io/components/sensor.template/
##########################################################################################
  - platform: template
    sensors:
      utc_offset:
        friendly_name: Utc offset
        entity_id: sensor.time
        value_template: >
          {{ now().utcoffset().total_seconds()/3600 }}
        icon_template: >
          mdi:numeric-{{ states('sensor.utc_offset')|int|abs }}

      season_name:
        friendly_name_template: >
          {{ states('sensor.season_name')}}
        value_template: >
          {{ states('sensor.season').capitalize() }}
        entity_picture_template: >
          {% set state = states('sensor.season') %}
          {{ '/local/weather/season/{}.png'.format(state) }}

      moon_phases:
        friendly_name_template: >
          {{states('sensor.moon_phases')}}
        value_template: >
          {{states('sensor.moon').capitalize().replace('_',' ')}}
        entity_picture_template: >
          {% set state = states('sensor.moon_phases') %}
          {{ '/local/weather/moonphases/{}.jpg'.format(state).replace(' ','_')|lower }}

#          {% set state = states('sensor.moon') %}
#          {{ '/local/weather/moonphases/{}.jpg'.format(state) }}

      length_of_day_factor:
        friendly_name: 'Length of day' # factor for circadian light calculation'
        value_template: >
          {% set daylength = ( (as_timestamp(state_attr('sun.sun','next_setting')) - 
                                as_timestamp(state_attr('sun.sun','next_rising')) ) / 
                                 3600) + 24 %}
              {{ ((daylength*-0.0063616)+0.11131) | round(5) }}

      circadian_light:
        friendly_name: 'Circadian light'
        unit_of_measurement: 'mired'
        value_template: >
          {% if is_state('sun.sun' , 'above_horizon') %}
            {{ ((states('sensor.length_of_day_factor') | float) * 
               ((state_attr('sun.sun','azimuth') )-180)**2 + 175) | round }}
          {% elif (as_timestamp(state_attr('sun.sun','next_dusk'))) - 
                  (as_timestamp(state_attr('sun.sun','next_setting'))) < 0 or 
                  (as_timestamp(state_attr('sun.sun','next_rising'))) -
                  (as_timestamp(state_attr('sun.sun','next_dawn'))) < 0 %}
            350
          {% else %}
            390
          {% endif %}

      day_night:
        friendly_name: 'Day/Night'
        value_template: >
          {% if is_state('sun.sun', 'above_horizon') %} Day
          {% else %} Night
          {% endif %}
        entity_picture_template: >
          {% if is_state('sun.sun', 'above_horizon') %} /local/weather/day.png
          {% else %} /local/weather/night.png
          {% endif %}

      dag_nacht:
        friendly_name: 'Dag/Nacht'
        value_template: >
          {% if is_state('sun.sun', 'above_horizon') %} Day
          {% else %} Night
          {% endif %}
        entity_picture_template: >
          {% if is_state('sun.sun', 'above_horizon') %} /local/weather/animated/day.svg
          {% else %} /local/weather/animated/night.svg
          {% endif %}

      day_phase:
        friendly_name: 'Day Phase'
        entity_id: sensor.time
        value_template: >
          {% if now() > now().replace(hour=6).replace(minute=0).replace(second=0) and
                now() < now().replace(hour=12).replace(minute=0).replace(second=0) %}
          Morning
          {% elif states('sun.sun') == 'above_horizon' or 
              now() > now().replace(hour=12).replace(minute=0).replace(second=0) and
              now() < now().replace(hour=18).replace(minute=0).replace(second=0) %}
          Day
          {% elif states('sun.sun') == 'below_horizon' or 
              now() >  now().replace(hour=18).replace(minute=0).replace(second=0) and
              now() < now().replace(hour=23).replace(minute=59).replace(second=59) %}
          Evening
          {% else %}
          Night
          {% endif %}
        icon_template: >
          {% if is_state('sensor.day_phase','Morning') %} mdi:weather-sunset-up
          {% elif is_state('sensor.day_phase','Day') %} mdi:weather-sunny
          {% elif is_state('sensor.day_phase','Evening') %} mdi:weather-sunset-down
          {% else %} mdi:weather-night
          {% endif %}

      dag_deel:
        friendly_name: 'Dag deel'
        entity_id: sensor.time
        value_template: >
          {% if now() > now().replace(hour=6).replace(minute=0).replace(second=0) and
                now() < now().replace(hour=12).replace(minute=0).replace(second=0) %}
          Morgen
          {% elif states('sun.sun') == 'above_horizon' or 
              now() > now().replace(hour=12).replace(minute=0).replace(second=0) and
              now() < now().replace(hour=18).replace(minute=0).replace(second=0) %}
          Dag
          {% elif states('sun.sun') == 'below_horizon' or 
              now() >  now().replace(hour=18).replace(minute=0).replace(second=0) and
              now() < now().replace(hour=23).replace(minute=59).replace(second=59) %}
          Avond
          {% else %}
          Nacht
          {% endif %}
        icon_template: >
          {% if is_state('sensor.dag_deel','Morgen') %} mdi:weather-sunset-up
          {% elif is_state('sensor.dag_deel','Dag') %} mdi:weather-sunny
          {% elif is_state('sensor.dag_deel','Avond') %} mdi:weather-sunset-down
          {% else %} mdi:weather-night
          {% endif %}

      period_of_day:
        friendly_name: 'Period of the day'
        value_template: >
          {% if (as_timestamp(state_attr('sun.sun','next_dusk'))) - 
                (as_timestamp(state_attr('sun.sun','next_setting'))) < 0 %} Dusk
          {% elif (as_timestamp(state_attr('sun.sun','next_rising'))) - 
                  (as_timestamp(state_attr('sun.sun','next_dawn'))) < 0 %} Dawn
          {% elif (state_attr('sun.sun', 'elevation')) < 0 %} Night
          {% else %} Day
          {% endif %}
        icon_template: >
          {% if is_state('sensor.period_of_day','Dusk') %} mdi:weather-sunset-down
          {% elif is_state('sensor.period_of_day','Dawn') %} mdi:weather-sunset-up
          {% elif is_state('sensor.period_of_day','Night') %} mdi:weather-night
          {% else %} mdi:weather-sunny
          {% endif %}

#https://community.home-assistant.io/t/more-precise-time-for-morning-day-evening-and-night/78716/7?u=mariusthvdb
      part_of_day:
        friendly_name: 'Part of Day'
        entity_id: sensor.time
        value_template: >
          {% set hour = now().hour %}
          {% if hour in range(0, 6) %} Night
          {% elif hour in range(6, 12) %} Morning
          {% elif hour in range(12, 18) %} Afternoon
          {% else %} Evening
          {% endif %}
        icon_template: >
          {% if is_state('sensor.part_of_day','Midnight') %} mdi:weather-night
          {% elif is_state('sensor.part_of_day','Morning') %} mdi:weather-sunset-up
          {% elif is_state('sensor.part_of_day','Afternoon') %} mdi:weather-sunny
          {% else %} mdi:weather-sunset-down
          {% endif %}

      solar_angle:
        friendly_name: 'Sun Angle'
        unit_of_measurement: '°'
        value_template: >
          {{ '%+.1f'|format(state_attr('sun.sun','elevation')) }}

      sun_state:
        friendly_name: 'Sun State'
        value_template: >
          {% if is_state('sun.sun', 'above_horizon') %} Up
          {% else %} Down
          {% endif %}
        icon_template: >
          {% if is_state('sensor.sun_state', 'Up') %} mdi:weather-sunny
          {% else %} mdi:weather-night
          {% endif %}

      nextsunrise:
        friendly_name: 'Next Sunrise'
        value_template: >
          {{ as_timestamp(state_attr('sun.sun','next_rising')) | timestamp_custom('%X %D') }}

      nextsunset:
        friendly_name: 'Next Sunset'
        value_template: >
          {{ as_timestamp(state_attr('sun.sun','next_setting')) | timestamp_custom('%X %D') }}

      dayofyear:
        friendly_name: 'Day Number'
        entity_id: sensor.time
        value_template: >
          {{ now().strftime('%-j') }}

      weekofyear:
        friendly_name: 'Week Number'
        entity_id: sensor.time
        value_template: >
          {{ now().strftime('%-U') }}

      time_template:
        friendly_name: 'Time template'
        entity_id: sensor.time
        value_template: >
          {{ as_timestamp(now()) | timestamp_custom('%H:%M %-d %B') }}

      translated_weekday:
        friendly_name: Dag
        entity_id: sensor.date
        value_template: >
          {% set mapper =
            { 'Mon': 'Maandag',
              'Tue': 'Dinsdag',
              'Wed': 'Woensdag',
              'Thu': 'Donderdag',
              'Fri': 'Vrijdag',
              'Sat': 'Zaterdag',
              'Sun': 'Zondag'} %}
          {% set state = now().strftime('%a') %}
          {% set Dag = mapper[state] if state in mapper else state %}
            {{Dag}}

      vandaag:
        friendly_name: Vandaag
        entity_id: sensor.date
        value_template: >
          {{ now().strftime('%A %-d %B %Y') }}

      days_current_month:
        friendly_name: Days current month
        entity_id: sensor.date
        value_template: >
          {% set month = now().strftime('%-m') %}
          {% if month in ['1','3','5','7','8','10','12'] %} 31
          {% elif month in ['4','6','9','11'] %} 30
          {% else %} {{'29' if (now().strftime('%-y'))|int//4 == 0 else '28'}}
          {% endif %}

      remaining_days:
        friendly_name: Remaining days
        entity_id: sensor.date
        value_template: >
          {% set this = now().replace(hour=0).replace(minute=0).replace(second=0).replace(microsecond=0) %}
          {% set next = this.month + 1 if this.month + 1 <= 12 else 1 %}
          {% set last = this.replace(month=next, day=1) %}
          {{ (last.date() - this.date()).days }}

      past_days:
        friendly_name: Past days
        entity_id: sensor.date
        value_template: >
          {% set this = now().replace(hour=0).replace(minute=0).replace(second=0).replace(microsecond=0) %}
          {% set next = this.month + 1 if this.month + 1 <= 12 else 1 %}
          {% set first = this.replace(day=1) %}
          {{ (this.date() - first.date()).days }}

##############################################################################################################
# using @pnbruckner cc sun.py
# https://github.com/pnbruckner/homeassistant-config/blob/53fe1dff32a36a84a4efdbb87b72387d4ce5f091/custom_components/sun.py
##############################################################################################################
# https://community.home-assistant.io/t/read-sunset-offset-at-a-given-time/74791/30

      sunset_offset:
        friendly_name: Sunset offset
        entity_id: sensor.time #, sun.sun
        value_template: >
          {% set nw = as_timestamp(now()) %}
          {% set ss = as_timestamp(state_attr('sun.sun', 'sunset')) %}
          {{ '- ' if nw < ss }}{{ (nw - ss)|abs|timestamp_custom('%H:%M:%S', false) }}

      sunrise_offset:
        friendly_name: Sunrise offset
        entity_id: sensor.time #, sun.sun
        value_template: >
          {% set nw = as_timestamp(now()) %}
          {% set ss = as_timestamp(state_attr('sun.sun', 'sunrise')) %}
          {{ '- ' if nw < ss }}{{ (nw - ss)|abs|timestamp_custom('%H:%M:%S', false) }}

##########################################################################################
# Binary sensors template
# https://home-assistant.io/components/binary_sensor.template/
##########################################################################################
binary_sensor:
  - platform: template
    sensors:
      sun_up:
        friendly_name: 'Sun is up'
        value_template: >
          {{ state_attr('sun.sun','elevation')|float > 0 }}

# https://home-assistant.io/components/binary_sensor.workday/

  - platform: workday
    country: NL

##########################################################################################
# https://home-assistant.io/components/binary_sensor.trend/
##########################################################################################

#  - platform: trend
#    sensors:
  #    sun_rising:
  #      entity_id: sun.sun

  #    solar_angle:
  #      entity_id: sun.sun
1 Like
7

Wow thanks. I’ll have a look at it all later.

8

Thanks for all this info. I fairly new to HA, so I am working my way through the code. There is some Dutch in there. I’m no expert, so forgive the follow up questions.

  1. Is it permissible for me to change any of the Dutch words into English without affecting the code?
  2. I should be able to remove the translated_weekday code without any ill affects?
  3. Looks like I either need to remove or obtain the animated svg files and other jpg/png’s?

thanks

9

I’d say True to all questions :wink:

you can change anything to your liking, as long as the key words left of the : stay intact.

If you delete an individual sensor, just be sure one of the other sensors isn’t linked (via a template eg) to that sensor.

about the icons: Homeassistant uses the mdi icons natively. entity pictures always need to be obtained and set manually and saved in the correct (extra) folder. I have these organized in the /config/www/ structure, its following paths as mentioned in the package.

btw if you use a package, you need to set that in your configuration.yaml

10

Yes, thanks for all that :grinning:

11

Any idea how to change the season to southern hemisphere. I have a had a look a the sensor doc’s but there is nothing mentioned?

12

would think the HA system uses your lat/lon to do so automatically? If not maybe ask @DavidFW1960 bet he knows :wink:

13

You would think so…