šŸŒ» Lovelace UI ā€¢ Minimalist

perfect. many thanks for your work.

How can I create a custom style for a card, or do I have to create a custom card in order to do this? E.g., I have a card (card_binary_sensor) showing my garage door sensor; I would like to have the cell shaded in green, when itā€™s closed, and red, when itā€™s open. Do I need to create a custom card for this?

Same here as wellā€¦ As long as the phone is inside the zones, everything is fine. Once it goes outside the zones the card disappears and the console log says:

ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'if (states[variables.ulm_card_person_entity].state != 'home'){
    if (states[variables.ulm_card_p...'
    at HTMLElement.eval (eval at _evalTemplate (button-card.js?hacstag=146194325342:425), <anonymous>:5:99)
    at HTMLElement._evalTemplate (button-card.js?hacstag=146194325342:425)
    at HTMLElement._getTemplateOrValue (button-card.js?hacstag=146194325342:425)
    at button-card.js?hacstag=146194325342:433
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomFields (button-card.js?hacstag=146194325342:433)
    at HTMLElement._gridHtml (button-card.js?hacstag=146194325342:517)
    at HTMLElement._buttonContent (button-card.js?hacstag=146194325342:499)
    at HTMLElement._cardHtml (button-card.js?hacstag=146194325342:479)
    at HTMLElement.render (button-card.js?hacstag=146194325342:425)

I am currently working to add the horizontal light cards. This will hopefully be added in the next release :slight_smile:

1 Like

I recommend you read more about romriders custom button card, and watch some YouTube

6:40 in to the video is a good place for you
This way you can learn super much!!

Step 2 might be too create one single card to your liking.
And if you like it, then learn how to create templates

1 Like

Thank you very much @Andy_Miller & @peroyvind . This should be fixed with the next release: Make card_person zones optional and more robust by checkerschaf Ā· Pull Request #114 Ā· UI-Lovelace-Minimalist/UI (github.com)

1 Like

Hello Guys.

Iā€™m building the second ui using this great repo.

I have a question about how the lovelace cache works on iOS (not sure if Android has the same issue).

I canā€™t post a video here, but if I use some ā€œnavigate to pathā€ buttonsā€¦ the first time I use them after opening the app, the ui do a kind of refresh of the page. After a couple of time i navigate through the tabs, it becomes smooth.

This behavior is a bit annoying due to the fact i have the same card on the top of the screen in each view. So it is really visible this refresh.

I donā€™t know if I was clear with my explanation, maybe I will post a gif that shows better the problem.

Do you know if I can do a sort of ā€œpreloadingā€ on the app opening to avoid it?

1 Like

Good morning.

I have created a dashboard for a pair of firetabs i brought to use as tv remotes.

I would like the power button icon color to change state with the state of the TV if this is possible??

Iā€™m looking to go red when off and green when on or just the default white when off and green when on.

At the moment when i push the button it turns yellow briefly but then goes white again when the TV is on.

Is anyone able to point me in the right direction for this or already has it functioning??

Thanks.

Hi,
Could you post the code for the media card?

Thanks

i am testing the new room card but i struggling to get the variables right.
SkƤrmavbild 2021-12-24 kl. 07.45.15

          - type: custom:button-card
            template:
              - card_room
              - blue
            entity: climate.midea_ac_16492674455697
            variables:
              - entity 1: light.vardagsrummet
              - entity 2: light.diskbank
              - entity 3: light.diskbank
              - entity 4: light.diskbank
            name: Vardagsrum
            icon: mdi:sofa-outline

Really dumb question, but Iā€™m using the same mini-media-player card but the border for my card doesnā€™t match the theme. How did you get it to match?

v1.0.0-beta.9 :rainbow_flag:

Good morning everyone,

here from us for you still a small Christmas gift.

This release has, in addition to a few minor bug fixes, again some new cards in the luggage. Among other things, new cards for device_tracker, input_numbers, printer and wifi.

Try it out and have fun with it. :relaxed:

In the meantime we could also get in contact with the Github support. Unfortunately it seems that none of us maintainers can get the rights over the UI organization and the associated wiki page repository.

If we donā€™t hear back from @Paddy0174 in the near future, we will probably have to move the repo to a new Github organization + Wiki Page.

Currently there are also some discussions going on in the repository about how to handle the repo in the future. A medium-term goal of ours is to make the Minimalist UI available via HACS as well. This will probably involve a major restructuring of the repo and some breaking changes. We are always grateful for your feedback. Feel free to join the discussions on the repo.

We wish you a Merry Christmas with your families and a relaxing holiday season.

:rocket: Features

  • #121 Custom-card "Device Tracker (Online or Offline ?) @vncnt-dev

  • #111 Thermostat card @httpedo13

  • #117 Custom printer card with toner status @mp-se

  • #127 Custom Input Number Card @sildehoop

  • #133 Added wifi signal card @mp-se

  • #116 Additional custom light card @13robin37

:gear: Code enhancements

  • #114 Make card_person zones optional and more robust @checkerschaf

  • #140 New release light cards @basbruss

:beetle: Bug Fixes

  • #112 Revert Set opacity-bg to 0.1 @CM000n

  • #113 Fix non colored chips on edge and chrome @CM000n

  • #140 New release light cards @basbruss

:congratulations: Translations

  • #124 IT Language for Welcome card.yaml @httpedo13

:page_facing_up: Documentation

  • #135 Restructure images in custom cards folder + fix broken links @bavo

:heart: Thank you so much for helping out to keep this UI awesome

@13robin37, @CM000n, @basbruss, @bavo, @checkerschaf, @httpedo13, @mp-se, @sildehoop, @vncnt-dev

8 Likes

The variables should be:

Hello bms,

I love your room card :star_struck: .Can you give me template code please?

Which one? :sweat_smile:

sorry! I was talking about this one, but I realized it was done by AndyVRD :joy:
Room Card

2 Likes

You can follow the current development here @Benjaminh86 :
Initial attempt at creating the room card by bavo Ā· Pull Request #125 Ā· UI-Lovelace-Minimalist/UI (github.com)

Thank you so much

What are the demand for this room card? I dont get the small icon on the right side to show.
This is the correct setup.

          - type: custom:button-card
            template:
              - card_room
              - blue
            entity: light.vardagsrummet
            variables:
              entity_id_1: light.ikea_besta_1
              entity_id_2: light.test1
              entity_id_3: light.test2
              entity_id_4: light.test3
            name: Vardagsrum
            icon: mdi:sofa-outline

Sure, you can pass through every property using a variable. Try this (untested):

Using

type: "custom:button-card"
template: custom_card_graph
entity: sensor.waschmaschine_verbrauch
variables:
  bar: "true"
  custom_icon: mdi:washing-machine
  group_by: "hour"

Template

custom_card_graph:
  show_icon: false
  show_name: false
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content  min-content
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 0px
  variables:
    hours: 24
    bar: false
    graph_color: red
    custom_icon: null
    name: null
    group_by: null
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        icon: '[[[ return variables.custom_icon ]]]'
        template:
          - icon_info
          - card_generic
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 12px
        entity: '[[[ return entity.entity_id ]]]'
        name: '[[[ return variables.name == "null" ? entity.friendly_name : variables.name ]]]'
    item2:
      card:
        type: 'custom:mini-graph-card'
        group_by: >
          [[[ 
            if (variables.group_by === 'hour') {
              return 'hour';
            } else if (variables.group_by === 'date') {
              return 'date';
            }

            return 'interval';             
          ]]]
        entities:
          - entity: '[[[ return entity.entity_id ]]]'
        line_color: "[[[ return 'rgba(var(--color-' + variables.graph_color + '),1)'; ]]]"
        hours_to_show: '[[[ return variables.hours ]]]'
        show:
          graph: '[[[ return variables.bar === "true" ? "bar" : "line"; ]]]'
          name: false
          icon: false
          legend: false
          state: false
        style: |
          ha-card {
            box-shadow: none;
            border-radius: var(--border-radius);
          }
1 Like