A different take on designing a Lovelace UI

Could you provide yaml tv card? I would like to get the same effect as you did with Netflix

Oh wow, thank you André! :nerd_face:

Huge thank you to @Mattias_Persson for sharing this. It’s been a lot of fun learning how all of this works and tweaking it.
Just thought I’d share my progress in case it sparks some interest and ideas for people.

Quick overview;

  • Time and date format changed a bit… ‘th’ and ‘rd’ are added dynamically.
  • Cameras grid is a copy of the Media grid with some tweaks. Clicking a camera opens a popup that looks at the entity for that camera and displays the correct feed, avoiding having to create multiple popup-files.
  • The Cameras button displays all 4 cameras at once.
  • Automatic popup when the doorbell is pressed, showing the doorbell cam.
  • Copied a weather card from this thread.
  • All of the cards under the Rooms grids opens all of the entities for that particular room.
  • Special occasions template for the sidebar. Manually created a template with all the dates that are (or should be) important to me :slight_smile:
    This should help me to avoid forgetting valentines… and birthdays…
  • Sidebar template with a reminder for when trash is picked up. Also warns me the day before.
  • RSS feed as the footer with custom icons.
  • And some other stuff.

13 Likes

Can you share the camera code?

Screen Shot 2022-02-10 at 21.13.22

what the footer informs about?

I shared it with you already: A different take on designing a Lovelace UI - #2620 by Laffer

Yes, but missing things - Conditional_camera :wink:

Updated: A different take on designing a Lovelace UI - #2622 by Laffer

2 Likes

I am new to all this. Trying to setup my dashboard for fire tablet, As u could see sidebar is just covering a portion of the screen. Please advise on how i can make this to cover full area (height wise) ? Also what i need to change for adding some padding(Hour is not displayed properly), increase size of the clock. Experts please advice/ guide?

You need to upload and set the theme of the tablet. Then it will start to look different.

1 Like

@Laffer the RSS feed. Can you share the code please?

Can someone please help with these card-mod shadow root things? This bit of code, albeit important, does not affect my Home view at all.

grid-layout$:
        hui-grid-card:
          $: |
            /* default */
            h1 {
              font-size: 2.4vw !important;
              line-height: 0 !important;
              font-family: SF Text !important;
              font-weight: 500 !important;
              color: rgba(255, 255, 255, 0.8) !important;
              padding: 1vw 0 2vw 0 !important;
              }
            /* portrait */
            @media screen and (max-width: 1200px) {
                h1 {
                font-size: 3.3vw !important;
                line-height: 1.1vw !important;
                }
              }
            /* phone */
            @media screen and (max-width: 800px) {
              h1 {
                font-size: 5.5vw !important;
                line-height: 6vw !important;
                margin: 2vw 0 0 0 !important;
                }
              }

Can you please share the code for “Automatic popup when the doorbell is pressed, showing the doorbell cam” ?.

1 Like

Thanks it worked. Whats the best way to start automating the themes selection based on the devices like tablet, phone desktop and webpage?

I’v tried to mod template.yaml to get opened doors and windows to show up in the sidebar just as lights and switches do but I cant get it to work, it just shows up as “Allt är stängt”.
Any suggestions on what am missing here?

          alarm: |
            {%- set alarmsys = [
              states.binary_sensor.kontor_fonster,
              states.binary_sensor.matsal_dorr,
              states.binary_sensor.matsal_fonster,
              states.binary_sensor.garage_fonster,
              states.binary_sensor.garage_port,
              states.binary_sensor.grov_entre,
              states.binary_sensor.grov_entre_baksida,
              states.binary_sensor.hall_entre,
              states.binary_sensor.kok_fonster,
              states.binary_sensor.tvattstuga_fonster,
              states.binary_sensor.verkstad_fonster,
              states.binary_sensor.badrum_fonster
            ] %}
          
            {%- set alarmsys_on = alarmsys | selectattr('state','eq','open') | list %}
            {%- set alarmsys_name = alarmsys | selectattr('state','eq','open') | map(attribute='name') | join(', ') %}
            
            {%- if (alarmsys_on | length == 1) -%}
              {{ alarmsys_name }} är öppen

            {%- elif (alarmsys_on | length > 1) -%}
              {{ alarmsys_on | length }} är öppna

            {%- else %}
              <font color='#6a7377'>Allt är stängt</font>
            {%- endif -%}type or paste code here

To fix that go in the setting section of home Assitant and change theme to “Tablet”

1 Like

maybe try this
>- {{ states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count }}

selectattr('state','eq','open')selectattr('state','eq','on')

https://www.home-assistant.io/integrations/binary_sensor/#device-class

Can someone please help with rss code instead of covid19?