A different take on designing a Lovelace UI

Good evening and amazing dashboard. I for the life of me cannot figure out how to change the language. I get everything to populate exactly as you have it. How do I change the language to english? Thank you in advance!

You need to edit your configuration.yaml.
Theres an “language”-Option, in my case its “de”, u need to change it on “en”

homeassistant:
  name: Daheim
  latitude: 
  longitude: 
  elevation: 
  unit_system: metric
  temperature_unit: C
  language: de
  country: DE
  time_zone: Europe/Berlin
  currency: EUR
  packages: !include_dir_named packages
  external_url: !secret external_url_ip
  internal_url: !secret internal_url_ip
  customize_domain:
    automation:
      initial_state: true
  allowlist_external_dirs:
    - /config/

This is the template sensor I was suggesting.

- sensor:
  - unique_id: emby_recently_added
    state: >
      {{ states('sensor.emby_latest_tv_shows') }}
    attributes:
      data: >
        {% if as_timestamp(states.sensor.emby_latest_tv_shows.last_updated) > as_timestamp(states.sensor.emby_latest_movies.last_updated) %}
          {{ state_attr('sensor.emby_latest_tv_shows', 'data') | from_json }}
        {% else %}
          {{ state_attr('sensor.emby_latest_movies', 'data') | from_json }}
        {% endif %}
card:
  type: custom:button-card
  entity: sensor.template_emby_recently_added
  name: Recently Added
  tap_action:
    action: none
  template:
    - conditional_media

image

1 Like

Thank you very much! Got it working!!

In another button I’d like to display the value of a specific attribute of a sensor in a circle. I have a template sensor with an attribute “modus” which can have the values “auto” or “manual” . If I add it like this:

          - type: custom:button-card
            entity: sensor.home_mode
            name: Modus
            tap_action:
              action: call-service
              service: input_boolean.toggle
              service_data:
                entity_id: input_boolean.guest_mode
            template:
              - base
              - icon_home
              - circle
            variables:
              circle_input: >
               [[[
                const entity = states['sensor.home_mode'];
                if (entity && entity.attributes && entity.attributes.modus) {
                  return entity.attributes.modus;
                }
                return 'Unknown';
               ]]]

the card is no longer displayed. So I did something wrong. Any idea?

In general I am interested on how to display something (Value / text / icon…) on the position where the circle is usually located (upper right) on the card, but haven’t been successful yet.

I found this ‘template’ configuration a while ago and i like the looks of it very much. I had it running sort of the same way as the original. Now it’s time to go the extra mile and create my own dashboard based on the original.

The sidebar is one of my quests :slight_smile: But i’m missing something/somewhere… Who can help me in the right direction?

I would like 2 person cards to be shown in the Sidebar underneath the time/date. I changed the ui-lovelace.yaml, but i’m not sure what i have to do in the sidebar.yaml?

Hello, Great theme!
One noobie question…

How to add a google calendar to the sidebar?

Sometimes you have to walk away and think it over… Found the solution myself (cause: a stupid beginner mistake in the code :smiley:)

sidebar6

            variables:
              circle_input: >
                [[[
                  if (entity && entity.attributes) {
                    return entity.attributes.modus;
                  }
                  return 'Unknown';
                ]]]

This should work, but the circle template is looking for the entity state to be ‘on’ (more specifically the state_on variable) unless the entity domain is light, climate, or person.

If you want the card to appear “on”, or modus only appear when the card appears on, you can add custom states to the state_on variable.

            variables:
              state_on: >
                [[[ return ['possible', 'states', 'of', 'sensor'].indexOf(!entity || entity.state) !== -1; ]]]
              circle_input: >
                [[[
                  if (entity && entity.attributes) {
                    return entity.attributes.modus;
                  }
                  return 'Unknown';
                ]]]

where 'possible', 'states', 'of', 'sensor' are the states of the sensor entity when you want the card to appear on, which will allow the circle to show.

Otherwise, you could edit circle.yaml and add an entry for the sensor domain that doesn’t require the state_on variable to be active.

2 Likes

This is great and I am trying to incorporate it into my own setup. I am curious. I have multiple timers that are activated based on different automations, but each of the timers is always the same. Would that still require all of the code you have or could I trim some of it out?

would anyone know how I can remove this tap_action from base.yaml?

It’s causing an error popup on fully kiosk browser and it’s driving me mad. Seems to be related to the fully kiosk integration but there doesn’t appear to be a fix for it, yet.

commenting out the lines is causing the dashboard not to load, so obviosuly I need to edit the code but not sure how to approach it.

fully kiosk error:

Failed to load sound: wrong URL or unsupported format?

base.yaml

  tap_action:
    ui_sound_tablet: |
      [[[
        let screensaver = states[variables.entity_tablet] === undefined ||
            states[variables.entity_tablet].state;

        if (variables.state === 'off' && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/on.m4a',
                media_content_type: 'music'
            });
        }
        if (variables.state_on && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/off.m4a',
                media_content_type: 'music'
            });
        }
      ]]]

Hi, if you don’t want to use the ui_sound_tablet, can you not just delete that entire block of code, leaving the ‘card bounce’ section remaining:

tap_action:
  card_bounce: |
    [[[ etc etc etc

@D34DC3N73R , What font are you using? Looks real nice. Thanks

Delete this post… Figured it out

It’s Poppins

1 Like

How can I use this? Could you share the config? I know I need to upload the fonts in the Fonts folder and do some additional config in fonts.css

add the font link in resources (remove the last comma if it’s your last line)

      { url: 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap', type: css },

you can remove any of the font weights from the url you’re not going to use

change the primary-font-family in tablet.yaml

  primary-font-family: Poppins, Roboto, system-ui

adjust font weights as needed in css rules in tablet.yaml

1 Like

You should share your HA on GitHub. You have great ideas and solutions :slight_smile:

2 Likes

could u share your config, this is exactly what i need (with fixxed camera ;))

Anyone would know why when I download the above google font onto my mac, this is the font I get:

This morning for some reason, all my lights when on, show True as status_display and the button doesn’t go white. When off it says off. Anyone else has this?