Sharing back to this great community! Here is my HA setup

Share your Projects!
10

One question about the navigation bar: If I have a lot of cards on one page and have to scroll to see the lower cards, will the navigation bar still be shown all the time or only when I scroll to the very end?

Apologies for the late reply!

Sadly when you have more cards in the view, the navbar jumps around (goes below the screen or shows only partially). Other cards will be placed behind it but it is buggy. I did try few tricks back when I implemented it but quickly reverted to having only relevant cards visible and dividing the mobile into multiple views.

I’m planning to create a custom component which would be placed into the main layout if possible as I have two issues:

  1. I would like to add more cards and scroll a view as well :smile:
  2. I have started to use hass-swipe-navigation and it looks weird with an animation when the navbar also follows the animation

I know there are custom components to move the built-in header around but as it can’t be customized that well (notification badges, colors, text placement and visibility) I think I need to write my own navbar component.

11

In the meantime, I have also found a way to build a suitable solution for me. Have combined header cards and the badges of the mushroom cards for it!

Nav-Bar
Nav-Bar827×1792 125 KB

1 Like
12

Hi again!

Just wanted to share few late additions that are worth mentioning:

User popups

I did use the default user / person popups for a while but lately it started to be inconvenient to click through multiple users to see their location and in addition, to realize that their current location might be reasonable old. Therefore I decided to create two new popups; one for single user details and one for seeing everyone on a single map.

A single user popup:

screenshot-tablet-user-popup
screenshot-tablet-user-popup992×622 192 KB

I can see relevant info about the user’s sensors plus I can request a location update for that user.

Family popup:

screenshot-tablet-users-popup
screenshot-tablet-users-popup992×622 201 KB

The nice thing here is that I can request a location update for all users with a single button click.

The family popup led to another discovery that some users probably have used for a long time but I discovered just now; you can dynamically generate your lovelace cards when you are inside a button-card context! More about this below.

Dynamic creation of cards in button-card context

I have a lot of duplicate code which often times is due to the layout differences between mobile and tablet. On mobile I prefer swiping through pages instead of scrolling up and down and I use swipe-card for this purpose. On the tablet view, everything fits nicely to the screen so most of the time no need for swiping. This leads to duplication assuming you don’t like YAML anchors or use declutter card.

The nice thing about button-card is that you can construct lovelace configuration dynamically in Javascript. This also allows me to adjust the layout based on screen width etc. As an example I can do something like this:

browser_mod:
  service: browser_mod.popup
  data:
    ... redacted ...
    content:
      type: vertical-stack
      cards:
        - |
          [[[
            const isMobile = screen.availWidth < 600

            if (isMobile) {
              // return something that suits mobile such as entities card
              const entities = ["sensor.one", "sensor.two"]
              
              return {
                "type": "entities",
                "entities": entities,
              }
            } else {
              // return something that works for tablet like grid with 4 columns
              const cards = [...]
              return {
                "type": "grid",
                "columns": 4,
                "square": false,
                "cards": cards,
              }
            }
          ]]]

I also use this method to dynamically construct light cards of groups in the light popup that I use on both, mobile and tablet.

The downside of this is that you don’t have the support of VSCode Home Assistant addon but for me that is an acceptable loss.

Hope someone finds this useful! Check my repo for more details. The link is on the first post.

Thanks!

13

mind sharing how you moved your navbar to the bottom? the code for it.
looking to do so, but havent found a good solution

15

The navbar on mobile is not the standard home assistant navbar but a custom button card. The card template can be found in here: hass-config/navbar.yaml at 5b3259e07f47a1d718706205a0db6d26715cf95b · troinine/hass-config · GitHub

Note that is has certain limitations like when the amount of cards exceeds the page height, then the navbar doesn’t work exactly as it should in terms of its position. So far I have been able to manage with this so I haven’t paid too much attention to the issue.

If you want to move the hass built-in navbar, there are few community addons to do that, like GitHub - javawizard/ha-navbar-position: Moves the Home Assistant dashboard navigation bar to the bottom of the screen and the solution that @Noah proposed few posts earlier.

Hope this helps!

1 Like
16

Please have a look at this post. Maybe you can resolve your problems with the button navbar by referring to it.

17

Hello all,
Hello troinine,

I am currently in the process of making my first attempts at my own dashboard. In this context I stumbled across this fantastic UI.

Have also already tried some things to adapt but currently fail at an error in relation to the resources
‘/local/marked.min.js?v=4.2.12’

I didn’t find the file in your github @troinine.
Or is there another way to get it? :slight_smile:

Thanks a lot for your help

18

Thanks @Oligarch for pointing me to that post!

Even though It didn’t exactly solve the issue I had, it made me spend few moments with my navbar. I was able to sort out few issues and it works now pretty ok:

navbar

Now, also the view title is sticky.

One thing I tried to do is to change the background color of the title when the scroll is not on the top. It would be nice to apply the same background and blur when the page scrolls down, similar to the styles that are present in the navbar. However, button-card is a bit limited on that matter and nothing with extra_styles that I tried seemed to work so only applied the blur as it would look a bit weird on top of everything without it. I’m not sure if I like this yet but it can stay like that for now.

So, it would be highly appreciated if anyone has ideas how to change button-card styles depending on the scroll position!

Anyways, thanks for the motivational push! I like the mobile views now better as I can have more content on a single view.

19

Hi @MikeMunich and thanks for praising my dashboard :smile:

The project uses markedjs for parsing markdown. This is especially useful with the Todoist tasks as their API returns markdown for most of the content.

I haven’t stored the library in my repo but you can get the release version from the project’s github repository. Link to version 4.2.12:

https://github.com/markedjs/marked/raw/v4.2.12/marked.min.js

Store the js file under the www folder and you should get things working. Note that newer 4.x versions probably work fine as well but I haven’t yet updated myself.

20

I can’t help with that. Accidentally came across this post in a neighboring topic. I just remembered your dashboard (very nicely made) and the problem with the navbar.

21

Managed to implement dynamic title styles:

sticky_header

Tested at least to work on Safari and Chrome on iOS, macOS and Android.

This can be achieved with a window scroll listener and an “empty” button-card javascript template. Registering a named function avoids registering the listener multiple times.

sticky_title:
  custom_fields:
    scroll: |
      [[[
        const element = this;
        function updateStyle() {
          let opacity = 0.8;
          let blur = '5px';
          let boxShadow = '0 2px 4px 0 rgba(0,0,0,.4)';

          if (document.documentElement.scrollTop < 5) {
            opacity = 0;
            blur = '0px';
            boxShadow = 'none';
          }

          const card = element.shadowRoot.querySelector("#card");
          card.style.background = `rgba(var(--card-background-color-rgb), ${opacity})`;
          card.style['backdrop-filter'] = `blur(${blur})`;
          card.style['-webkit-backdrop-filter'] = `blur(${blur})`;
          card.style['box-shadow'] = boxShadow;
        }

        window.addEventListener('scroll', updateStyle, { passive: true })
      ]]]

Link to the source: hass-config/button_card_templates/troinine/titles.yaml at 450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a · troinine/hass-config · GitHub

1 Like
22

Really like this dashboard. Managed to install all cards etc. However, on my light card I do not see the toggle in the right upper corner. The template for light.yaml is exact the same as from the github. Any ideas please?

Another question is how to increase the icons on the cards? I find theme too small now.

My last question is how to change the scene buttons in the popup card for lights? I see for example relax button, but where to link this button to my own scene as it throw now an error.

Many thanks!!

23

Sometimes, the solution is so easy…
after a break a saw my error - tab at the wrong place :frowning:

1 Like
24

Really like this dashboard.

Hey, thanks @RS53! Great that you are enjoying it!

Managed to install all cards etc. However, on my light card I do not see the toggle in the right upper corner. The template for light.yaml is exact the same as from the github. Any ideas please?

I have switched mostly to use the new_light template as it uses mushroom light slider which works really nicely. I have abandoned the toggle on the top-right corner in the process. However, it should still work. For example this:

 type: 'custom:button-card'
 template: light
 entity: light.group_bedroom
 name: Makuuhuone

Produces this kind of card on the tablet view and theme:

Screenshot 2023-07-14 at 12.52.10

Another question is how to increase the icons on the cards? I find theme too small now.

The layout relies on rems as units in most places. There is a base font-size that I have adjusted in order to get a decently working scalable layout. The style.css dictates the root font-size which impacts on all measurements:

If you have not included this style.css into the www folder, then the icon’s might be too small. I have to admit that doing the initial layout I wasn’t exactly sure what works the best in terms of CSS measurements and I haven’t put more effort into it yet. If you want to play with the sizes, you can try adjusting the values in base.yaml:

This defines most dimensions on the button-cards that the dashboard uses. Some specific templates might have some hard-codings though which you need to tweak separately. One example is the new_light card which is not currently deriving the dimensions from the base.yaml.

My last question is how to change the scene buttons in the popup card for lights? I see for example relax button, but where to link this button to my own scene as it throw now an error.

The light popup scenes are defined here:

One exception to this is the tablet layout card that controls all lights. It uses a different tablet specific popup:

In addition, the mobile lights view which is not a popup has it’s own scenes:

Hope this helps!

25

@troinine
one more time, i would need your help

i try to adapt your Dashboard but i have a Problem with the Popup Card (with the Header)
My Header looks like that

img01
img01841×134 4.2 KB

In your screen, your title is in the same line as the “X”
img02

I can not find the right statement in your theme file, which is responsible for that :frowning:
Perhaps you can help me, an show me the part which i need for that

Thx in advance

26

This is due to dialog changes in HA and it is somewhat discussed in Popup title styling seems to be broken sometimes (Possibly a Light/Dark mode issue) · Issue #604 · thomasloven/hass-browser_mod · GitHub.

I have addressed this in both tablet and mobile themes now. Changes related to this

If you align your theme files with the changes and update to browser_mod 2.3.0 you should get working popups. Note that it also requires home assistant 2023.7.x. I’m using the latest 2023.7.2.

27

@troinine
Great, thx it works - i have overlooked your changes. My bad :frowning:

If its okay, i would have one more question.
In your tablet view, you have the great looking sidebar.
What i want to achieve is a footer in the sidebar at the bottom

Perhaps you have a hint or so, how i can achieve that.
My actual tries were not successfull :frowning: the only thing, which works was a spacer with 500px height… but that is not a good solution :slight_smile:

1 Like
28

@troinine
when you change:

base:
  variables:
    is_active: |
      [[[ return ['on', 'open', 'Kotona', 'home', 'cleaning', 'returning', 'idle'].indexOf(entity === undefined || entity.state) !== -1; ]]]
  template:
    - language_variables
  # Fix to https://github.com/custom-cards/button-card/issues/693
  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        case "home":
          return variables.text_state_home;
        case "not_home":
          return variables.text_state_not_home
        default:
          return variables[`text_state_${domain}_${entity.state}`];
      }
    ]]]

to:

base:
  variables:
    is_active: |
      [[[ return ['on', 'open', 'Kotona', 'home', 'cleaning', 'returning', 'idle'].indexOf(entity === undefined || entity.state) !== -1; ]]]
  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        default:
          return hass.localize(`component.${domain}.entity_component._.state.${entity.state}`);
      }
    ]]]

You don’t need the language file :wink:
At my HA it works without changing the button_card. I try it first with the changes of button_card after that i redownloaded the button_card and my fix still works.

Add the following to the template compact_card, so it will also works at the mobile view.

  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        default:
          return hass.localize(`component.${domain}.entity_component._.state.${entity.state}`);
      }
    ]]]
29

Hi @Cinamon!

Thanks for the suggestion. I had no idea that the localize function is available in the hass object. This would be the perfect solution for the button-card issues. However, the function seems to revert to English even though my language selection is Finnish:

Screenshot 2023-07-18 at 10.48.45

The state should be “Kotona” in Finnish. The same issue is with other entities such as locks, binary sensors etc. :frowning_face: I wonder how it tries to detect the current locale.

30

Great! Good that it works.

What i want to achieve is a footer in the sidebar at the bottom

I can’t quite visualize what you are trying to achieve. Could you sketch me a rough design? Is it something like

 clock | weather

 notifications

 some footer content