A different take on designing a Lovelace UI

[henkkeumus]

Hey Mason,

Thanks for your reply!
I’ve tried your suggestion about using the above code from @mobiustorr and that did the trick! Many thanks!

About the placement of the temperature line; I would love to have it on the bottom or aligned with the lowest footer buttons. What I’m trying to do is move person.Y and person.X above the temperature line. So you get something like this:

So, just a quick Paint edit of how I would love to see it (you’ll get the idea, I’m not an Paint pro haha)

I’m simply using Matthias is code now, within lovelace.ui line 75 and downwards.

#################################################

      #                                               #

      #                    SIDEBAR                    #

      #                                               #

      #################################################

      - type: vertical-stack

        view_layout:

          grid-area: sidebar

        cards:

          - type: custom:button-card

            entity: sensor.template_sidebar

            template: sidebar

          - type: custom:apexcharts-card

            layout: minimal

            locale: nl

            graph_span: 24h

            show:

              loading: false

            apex_config:

              plotOptions:

                area:

                  fillTo: end

              grid:

                padding:

                  top: -15

              fill:

                type: gradient

                gradient:

                  type: vertical

                  opacityFrom: 0.8

                  opacityTo: 0

                  stops:

                    - 0

                    - 99

                    - 100

              stroke:

                width: 4

              tooltip:

                style:

                  fontSize: 14px

                x:

                  format: dddd HH:mm

              chart:

                height: 140px

                offsetY: -20px

              xaxis:

                crosshairs:

                  show: false

            series:

              - entity: sensor.buienradar_temperature

                name: Buitentemperatuur

                color: '#2E86C1'

                type: area

                fill_raw: last

                group_by:

                  func: avg

                  duration: 1h

            card_mod:

              style: |

                :host{

                  --ha-card-border-width: 0px;

                }

[henkkeumus]

I also just came to the conclusion my tap and hold actions dont do anything. As stated in docs Matthias says that all light cards should automatically transfer them to pop-up to do settings like brightness etc.

This is not working none of the tap or hold actions are working. They do work on the footer but not on the button cards above.

I tried to create a pop-up for the media card for instance which result in doing nothing.

</s> <s> - type: grid</s> <s> title: Media</s> <s> view_layout:</s> <s> grid-area: media</s> <s> columns: 1</s> <s> cards:</s> <s> - type: custom:button-card</s> <s> entity: media_player.spotify_tim</s> <s> name: Spotify</s> <s> tap_action: !include popup/media.yaml</s> <s> template:</s> <s> - media</s> <s> - icon_spotify</s> <s>

EDIT: Solved this, was a markup issue.

[Chiare3]

Thanks a lot: I hadn’t noticed this post before

[henkkeumus]

And while we are on it, does anybody know how to set a custom window size for a pop-up? I’ve tried the following withouth any luck

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Media
    style: |
      ha-card {
        --popup-width: 1200px;
        --popup-max-width: 1200px;
        --ha-card-border-radius: 0;
      }
      .content {
        width: auto !important;
      }

Best thing is that the pop-up windows sizes according the content in it. It now cuts off my media player.

[503Dev]

To the OP: Thank you for this absolutely epic work.

To everyone else:
Over the past few weeks I have integrated some additional things I use such as frigate cameras, security system mode, adapted media controls, etc. The documentation provided is good however for me (despite being a programmer by trade) it took me a while to figure some things out.

I am considering doing a video tutorial on setup addressing some of the harder aspects like icons, sounds, haptic and the laundry timer, custom timers, alternate vaccum integrations, etc.

I have also made a framework for having multi dashboards on different size tablets in the same house with distinct content based on which device is used (the layout is already responsive but the bedroom tablets vs living room should have different content ideally). Among other basic things like room presence logic built in for conditional media cards, etc.

Anyway, if anyone thinks a video tutorial would be useful and could let me know I will commit to doing one. I am asking simply because it will take hours of recording and editing to make a coherent tutorial and if everybody else had no issue setting this up it’s pointless, I could just be the hard head.

Anyway thanks again to OP, this is absolutely epic. Using it with 4 tablets (wall mounts) and a static large screen wall display. It’s absolutely amazing thanks to you.

[Mattias_Persson]

@henkkeumus

And while we are on it, does anybody know how to set a custom window size for a pop-up? I’ve tried the following withouth any luck

https://github.com/thomasloven/hass-browser_mod/blob/e57867a41f2535d985038ae132765fc587fe809f/documentation/popups.md#styling-popups

style: |
  --popup-min-width: 1000px;

[Mattias_Persson]

@henkkeumus

I’m keeping the issue of the background being black on PC browsers. Replaced the themes.yaml but didnt help.

what happens if you enter the url of www/background

http:// … :8123/local/background.png

[masoncrawford1994 (mason)]

go for it, for me conditional media was the hardest thing to wrap my head around (an I am also a programmer by trade), but it was my 1st time looking at home assistant templates, I implemented this dashboard day one of home assistant.

if you want any feedback fell free to send the video my way.

some of the enhancements you mentioned sound fantastic. would love to get some more detail on how you handle multi dashboards. I have a room section for lights but hold is navigation to that rooms dashboard. I don’t have mutable size dashboards however.

[masoncrawford1994 (mason)]

I have my system uptime element in my sidebar that sticks to the bottom,

I have a custom template

up_time.yaml

up_time:
  show_icon: false
  show_name: false
  show_state: true
  styles:
    card:
      - margin-top: -100px
      - border-width: 0
    state:
      - font-size: 1vw
      - font-family: SF Mono, Roboto
      - opacity: 0.65
      - padding: 0.55vw 1.2vw 0.5vw 1.2vw

and my sidebar looks like this

ui-lovelace

      #################################################
      #                                               #
      #                    SIDEBAR                    #
      #                                               #
      #################################################

      - type: vertical-stack
        view_layout:
          grid-area: sidebar
        cards: !include sections/sidebar.yaml

sections/sidebar.yaml

- type: custom:button-card
  entity: sensor.template_sidebar
  template: sidebar
- type: custom:button-card
  entity: sensor.template_sidebar_uptime
  template: up_time

I do recall needing to add some CSS to get this to work, but I can’t recall what it was, look into how the laundry timer works in the base code from @Mattias_Persson

[kaaspad]

@masoncrawford1994 first of all thanks so much! definitely in the right direction now!! from a width perspective it looks good and works now (@Mattias_Persson great idea on putting in the debug!). Now I’m having a problem with the height - both the starting point (green circle) as well as the area which is not all on the button, any idea which parameters I change to fix this? Thanks!

[T1ppes]

I am using the circle template, to display the position of a cover entity.
In my cover template I have the following:

  variables:
    circle_input: >
      [[[
        if (entity) {
            return entity.attributes.current_position
        }
      ]]]
    circle_input_unit: '%'

When fully closed the current_position is 0, which is not displayed.
I can see that the light template manually sets the circle_input to 1, if the lights brightness === 0 && the light itself is on

return brightness === 0 && entity.state !== 'off'
                ? 1
                : brightness

However I would like to show 0% open in case of the cover card. How do I achieve this?
This does also affect the slider, which I have ammendet in the circle.yaml to also apply to the cover domain.

[masoncrawford1994 (mason)]

the code that needs to be change should just be the value in margin-top:, do you have a screenshot with the debug on so I can see what your issue is? it is ok if the blue bar is not in the button card see mine.

the height of the slider is more or less the same on all screens but the size of the button will change depending on the size of the screen, so don’t worry about fitting the blue part in side the button card

As I said you can use your web browsers dev tools too change the values in left and margin to get the position right.

[masoncrawford1994 (mason)]

nice work, im looking at buying some automated blinds so im going to want this cover template when you get it all working.

try using this for your circle_input code,

    circle_input:  >
      [[[
        return entity === undefined || Math.round(entity.attributes.volume_level * 100) || "test";
      ]]]

in this screenshot the volume of my sounder is set to 0

and when the value is at 20%

there is an issue with 0 however, In JavaScript “0” is equal to false

so you could try and find a work around for the issue or just but open / closed in the circle and call it a day.

[kaaspad]

hi, thanks so much, here is the screen shot, looks like the bar and circle are both out of place on mine now.

[masoncrawford1994 (mason)]

and a screenshot at 40% brightness?

never mind I found why its not working,

you can override the RTL language preference on the slider as that is inverting the starting position, by adding direction: ltr !important; under margin-top: 13%;

or you could move the location of the circle to the bottom if that would be more natural for you.

[T1ppes]

Thanks for your support. It’s all still a work in progress, but I can share it once I am happy with the behaviour. I can understand that 0 can create issues, but could it not being caught somewhere in the circle.yaml in a way that the input is not processed but leads to a correct display of the input value?

As I have also defined circle_input_unit to '%' replacing the circle_input with your proposal is only a workaround.

I have seen you are discussing the slider position and size. My slider seems a little small compared to yours. I tried playing with the values in extra_styles.yaml, but have had no luck so far.

Ideally I would like to keep the circle to indicate the cover position, but replace the circle slider on the cover card with a swipe_up and swipe_down action on the full card (i.e. a swipe up or down anywhere on the card should trigger an action). But at the moment I do not know how I could realize this. This would allow me to action cover.open_cover on swipe up, cover.stop_cover on swipe down and cover.stop_cover on tap.

Note: I have not yet created a cover_icon.

Also I have not yet paid attention to the font of the displayed name and status. I should make it a little bigger. But first I need to understand where it is defined.

[masoncrawford1994 (mason)]

if you must have 0% then this will work

    circle_input:  >
      [[[
        return entity === undefined || Math.round(entity.attributes.volume_level * 100) || `${0}`;
      ]]]

slider position and size

What browser are you using, im on chrome in safari, and also the home assistant Mac application.

Have you enabled the theme in the home assistant settings?

fonts

You will need to download the fonts and add them to the WWW/fonts folder

font size is in the theme file.

swipe_up and swipe_down action

The swipe action that you are after would be cool but way too hard for me to think of a way to get it to work.

[kaaspad]

so changing to LTR is actually something I played with and it works, but it doesn’t look natural, per your last comment regarding moving the circle - how do I change the vertical position of the circle (and of the bar itself)?
Thanks

[masoncrawford1994 (mason)]

just to confirm, you would like to drag from the bottom of the card to the top of the card to lower the brightness of a light and from the bottom of a card down to increase the brightness?

I don’t see a need to change the vertical position of the slider, but as I said it should be margin-top
as for changing the position of the circle that would be in the base.yaml
look for

      - grid-template-areas: |
          "icon  circle"
          "n     n"
          "s     s"

I think this should give you what you want

      - grid-template-areas: |
          "icon  -"
          "n     n"
          "s     circle"

keep in mind you are pushing the limits of what the templates are built for, you might run into more and more issues the more your change, this will also make it harder for the community to help as your changes are so far from what everyone else is working with.

[kaaspad]

nope, actually want to drag from the top as was before, I didn’t change it so the circle is on the bottom, just happened…maybe cause of rtl