šŸŒ» Lovelace UI ā€¢ Minimalist

Unfortunately no. I asked for the same a couple entries earlier. The ones I found on the forum is not working for my Xiaomi phone. I get the notifications but no alarm sound.

can you share this can i have a look?

Tablet format best practice?

Phone version looks great!.. tablets a dogs breakfast

Is there a style guide or best practice tips for doing a tablet version?

I guess I need to just duplicate everything, or is there a best practice for that?

ie I guess a duplicate of everything in the views folder, but name it home_tab, living_room_tab ect ect?

Thanks in advance :slight_smile:

THANKS! I try that

Mission completed.
The error was in the path, off courseā€¦
Thanks again!

@Jarne_Roussard: I used this as a starting point: A ā€œfind my phone buttonā€ - Configuration - Home Assistant Community (home-assistant.io)

@liminal: try layout card with grid mode, you can define the layout based on orientation, screen size etc. and define each block where should they be placed in each view. Very handy, the same config works on my phone, tablet and desktop with a different layout.

1 Like

That sounds amazing! Ive found a guide, but I dont really have any context to how this fits in with what I have already got;

If you can provide some examples with the home screen (assuming its similar to most of the others) so I can see how it fits in, then I should be able to work it out :slight_smile:

Thanks mate :slight_smile:

2 Likes

wow! could you share your room card? i have been trying to figure out how to do layouts on these and it is making my eyes go crossedā€¦

I got my inspiration from CM000n:
homeassistant/lovelace-minimalist.yaml at bcf77c073a15a80ab240f7fd158857076292ee09 Ā· CM000n/homeassistant Ā· GitHub

I had to made some enhancements to fit my phone and tablet, ā€œthanksā€ to the different screen sizes.

1 Like

Hey guys,

whatā€™s the best solution for viewing security cameras?? I dont see any custom cards for cameras??

what do you all use for this??

thanks!

I have the same issue.
Colors work fine on my personal MacBook with Chrome but on my phone (Chrome or companion app) or my work MacBook (Chrome or Safari) everything appears white. The only time I manage to see colors is when the color is set with rgb(x, x, x).

Thanks mate, I can work with that :slight_smile:

EDIT

Ok, so ive ported CM000ns home view in and made some changes. But it doesnā€™t seem to change.

Just wondering if anything looks wrong here?

Everything is still a mess

Ive set the grids out and defined the layout view for each horozontal stack. This is not the full yaml. But I would have expected the top welcome, to be on its own row as least right?

My other question would be, how does it know which view to use?

What am I missing.

Thanks guys :slight_smile:

title: "Home"
path: "home"
views:
  - type: custom:grid-layout
    layout:
      #default
      grid-gap: 1px 1px
      grid-template-columns: 25% 25% 25% 25%
      grid-template-rows: auto
      grid-template-areas: |
        "  .            welcome      welcome      .            "
        "  devices1     devices2     .            .            "
        "  devices1     devices2     devices3     .            "        
        "  .            person       .            .            "
        "  navigation1  navigation2  navigation3  navigation4  "
        "  navigation5  navigation6  navigation7  navigation8  "
        "  list         list         list         list         "
        "  ble          .            .            .            "
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: 1px 1px
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "  welcome      welcome      "
            "  devices_on   devices_on   "
            "  person1      person2      "
            "  navigation1  navigation2  "
            "  navigation3  navigation4  "
            "  navigation5  navigation6  "
            "  navigation7  navigation8  "
            "  list         list         "
            "  ble          .            "

cards:
  - type: "custom:button-card"
    template: "card_esh_welcome"
    triggers_update: "input_boolean.minimalist_dropdown"
    variables:
      ulm_card_esh_welcome_collapse: input_boolean.minimalist_dropdown
      ulm_weather: "weather.mascot"
      entity_1:
        nav: "boolean"
        icon: "mdi:gesture-tap-button"
        name: "Boolean"
        color: "blue"
      entity_2:
        nav: "media"
        icon: "mdi:television-classic"
        name: "Media"
        color: "yellow"
      entity_3:
        nav: "network"
        icon: "mdi:network"
        name: Network Stats
        color: "green"
      entity_4:
        nav: "workloads"
        icon: "mdi:nas"
        name: "Workloads"
        color: "purple"
      entity_5:
        nav: "printer"
        icon: "mdi:printer-3d-nozzle"
        name: Printer
        color: "red"
    view_layout:
      grid-area: welcome

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: custom_card_yagrasdemonde_lights_count
        entity: sensor.lights_on
      - type: "custom:button-card"
        template: custom_card_yagrasdemonde_lights_count
        entity: sensor.covers_open
        variables:
          ulm_custom_card_yagrasdemonde_lights_count_type: "cover"
          ulm_custom_card_yagrasdemonde_lights_count_icon_off: "mdi:window-shutter"
          ulm_custom_card_yagrasdemonde_lights_count_color: "green"
    view_layout:
      grid-area: devices1

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: custom_card_yagrasdemonde_lights_count
        entity: sensor.doors_open
        variables:
          ulm_custom_card_yagrasdemonde_lights_count_type: "doors"
          ulm_custom_card_yagrasdemonde_lights_count_icon_off: "phu:sliding-window-door-open"
          ulm_custom_card_yagrasdemonde_lights_count_color: "blue"
    view_layout:
      grid-area: devices2

EDIT

OK, Im getting somewhere, I didnā€™t have the cards lined up correctly.

I still dont get how it will know which view to use. Or how to have the welcome card centered at the top and everything else spread out. But lets see how it goes :slight_smile:

EDIT

OK, I kinda got it

1 But how can I make it fill out the screen more?
2 Why does nav1 and nav2 from row 4, come up to row 1 LOL?
3 Can I make row 2 into thirds?

title: "Home"
path: "home"
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      #default
      grid-gap: 1px 1px
      grid-template-columns: 25% 25% 25% 25%
      grid-template-rows: auto
      grid-template-areas: |
        "  .            welcome      welcome      .            "
        "  devices1     devices1     devices2     devices2     "

        "  person       person       person       person       "
        "  navigation1  navigation2  navigation3  navigation4  "
        "  navigation5  navigation6  navigation7  navigation8  "
        "  navigation9  .            .            .            "        
        "  list         list         list         list         "
        "  ble          ble          ble          ble          "
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: 1px 1px
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "  welcome      welcome      "
            "  devices1     devices1     "
            "  devices2     devices2     "            
            "  person       person       "
            "  navigation1  navigation2  "
            "  navigation3  navigation4  "
            "  navigation5  navigation6  "
            "  navigation7  navigation8  "
            "  navigation9  .            "            
            "  list         list         "
            "  ble          ble          "
1 Like

ā€˜mediaqueryā€™ (in your case max-width) determines the layout to be used. Sadly Iā€™m not in front of my computer, so can not help more, but I found a lot of useful infomation on the web, f.e. how to show or hide given cards in specific views and so on. If you cannot figure it out Ibwill be available early next week.

1 Like

Has anyone gotten confirmations to work with room cards? I canā€™t seem to get it to work for the 4 small button entities.

Somehow when all doors are closed, it shows me the string of ā€œulm_custom_card_yagrasdemonde_lights_count_light_0:ā€ instead of count_door_0.

I added my own translations.

Worked ok?

Unhelpfully lol, its working fine for me

Make sure all your indentations are correct ect. But if you added your own and its working, all good :slight_smile:

Thats the one part I worked out after finding some more examples LOL ā€œ(max-width: 800px)ā€:

Ill post to the layout card as well and see if anyone can tell me what Im messing up LOL

But thanks for pointing me in the right direction :slight_smile:

very nice done!

works now, I forgot I needed to set the variable to door oops. Thanks!

1 Like

Hi Thanks, thatā€™s not what I meant though - Iā€™ve already done that step!
Just need to know now how to get the Minimalist dashboard to ā€œforceā€ using Light mode (if thatā€™s even possible) as I prefer to use Dark mode for my other dashboards