HACS Repo

[Jens-Wymeersch]

@andyblac @ddewar
Your cards look amazing. I’ve been trying to figure out how to get them installed in hacs. As if I add them manually, i need to maintain the updates. The link at the bottom of your github, opens up the my-cards in hacs from GitHub - AnthonMS/my-cards: Bundle of my custom Lovelace cards for Home Assistant. Includes: my-slider, my-slider-v2, my-button 2.

I’m getting the follow error <Plugin andyblac/UI-Minimalist-Custom-Cards> Repository structure for v2.1 is not compliant when trying to add the custom repo
GitHub - andyblac/UI-Minimalist-Custom-Cards: A modified version of Minimalist Room Card. and category lovelace

Can you please have a look ?

[andyblac]

sorry but my cards can not be added via HACS, as UI-Minimalist does not support GitHub for maintaining custom cards, the only way is to manually add my cards to the correct folder.

[andyblac]

I have re-worked the templates to be a stand-alone button-card template, that can be used in any yaml mode dashboard, if you are still interested in this please reply to this.

[Jens-Wymeersch]

@andyblac Yes I am interested in the cards. Can you please share ?

[andyblac]

@andyblac Yes I am interested in the cards. Can you please share ?

here's a copy of my dashboard,

add like the following:

lovelace:
  mode: storage
  dashboards:
    lovelace-andyblac:
      mode: yaml
      title: Main
      icon: phu:imac
      show_in_sidebar: true
      filename: dashboard/AndyBlac/main.yaml

dashboard.zip

[Jens-Wymeersch]

Andy, thank you for giving me access to your dashboard, but I'm not able to adjust it to my Home Assistant environment. In essence, I was only looking for the initial page

Not sure what code is associated with this piece alone.

[andyblac]

Andy, thank you for giving me access to your dashboard, but I'm not able to adjust it to my Home Assistant environment. In essence, I was only looking for the initial page

Not sure what code is associated with this piece alone.

the main dashboard file is dashboard/AndyBlac/main.yaml this sets up the dashboard, the sidebar is file dashboard/AndyBlac/sidebar.yaml and the main page yaml is dashboard/AndyBlac/views/00-home.yaml

[Jens-Wymeersch]

I went through these but couldn't get it to work for me

[andyblac]

I went through these but couldn't get it to work for me

it has all my entities in It, so you have to just look at how I did it and create your own version. YAML dashboards are not for the novice as they take a lot of work and time.

[Jens-Wymeersch]

Andy, I fully understand what you are saying, and I have done already some work related to YAML dashboards, but I hoped I could easier copy and paste what you have done.

[andyblac]

Andy, I fully understand what you are saying, and I have done already some work related to YAML dashboards, but I hoped I could easier copy and paste what you have done.

start by commenting out all rooms and sidebar from my 00-home.yaml leave room1 anything that has an entity id in change to one of yours or comment it out, start building it bit by bit.

ie line 45 and lines 81 to 455

then in this block

  # Front Garden
  - type: custom:button-card
    view_layout:
      grid-area: room1
    template:
      - andyblac_card_room
    tap_action:
      action: navigate
      navigation_path: front-garden
    variables:
      andyblac_card_room_area_id: front_garden
      andyblac_card_room_color: green
      sensor_label_1: sensor.front_garden_motion_sensor_temperature
      sensor_label_2: sensor.front_garden_soil_sensor_humidity
      sensor_label_3: sensor.front_garden_motion_sensor_illuminance_lux
      # custom_1:
      #   entity_id: camera.front_garden_video_doorbell_poe_clear
      sensor_1:
        entity_id: binary_sensor.front_door
      sensor_2:
        entity_id: binary_sensor.front_garden_motion_sensor_occupancy
        templates:
          - motion_animation
      sensor_3:
        entity_id: valve.front_garden_water_control
        templates:
          - sprinkler_animation
      entity_3:
        entity_id: light.front_garden_light
        andyblac_card_room_use_light_color: true
        # templates:
        # - outdoor-light

change my entity id to your own ones, or comment out the block ie line 66 to 69 to disable sensor_2

[Jens-Wymeersch]

@andyblac I went into this direction. The problem arises directly with the following variable andyblac_card_room_area_id

Resulting in the following error

[andyblac]

@andyblac I went into this direction. The problem arises directly with the following variable andyblac_card_room_area_id

Resulting in the following error

post your cards yaml, I'll take a look at where your going wrong, also what version of Home Assistant are you running ?

[Jens-Wymeersch]

I am running the latest version of home assistant

Core 2024.8.2
Supervisor 2024.08.0
Operating System 13.1
Frontend 20240809.0

Here is the first part of the code lab.yaml which allows for the templates to be loaded - tested it and it works.

decluttering_templates: !include_dir_merge_named New/templates/
button_card_templates: !include_dir_merge_named New/templates/
views: !include master_remote.yaml

Here is part of the master_remote.yaml which is related to your code. The problem I am facing is related to the andyblac_card_room_area_id. What should this be as I see in the template you have put some jinga code related to this variable.

- theme: Backend-selected
  title: Remote
  icon: mdi:remote
  badges: []
  cards:
    # Front Garden
    - type: custom:button-card
      template:
        - andyblac_card_room
      tap_action:
        action: navigate
        navigation_path: front-garden
      variables:
        andyblac_card_room_area_id: front_garden
        andyblac_card_room_color: green
        sensor_label_1: sensor.patio_motion_temperature
        sensor_label_2: sensor.frontyard_humidity
        sensor_label_3: sensor.patio_motion_illuminance_lux
        # custom_1:
        #   entity_id: camera.front_garden_video_doorbell_poe_clear
        sensor_1:
          entity_id: binary_sensor.entrance_door_contact
        sensor_2:
          entity_id: binary_sensor.patio_motion_occupancy
          templates:
            - motion_animation
        sensor_3:
          entity_id: binary_sensor.frontyard_is_it_watering_right_now
          templates:
            - sprinkler_animation
        entity_3:
          entity_id: switch.entrance_door_outside
          andyblac_card_room_use_light_color: true
          # templates:
          # - outdoor-light

Thank you for your help by the way

[andyblac]

and does the area id entity match that is show in the Area ?

like this :

[Jens-Wymeersch]

As I tried initially with one of my area ids, "master" and It gave me an error, I assumed this was something else. Now I changed it to master and get the same error. Not sure why ?

[Jens-Wymeersch]

It looks like it starts to work.

Templates are missing (probably other animations as well)
- motion_animation
- sprinkler_animation

Can you please share these with me ?

[andyblac]

It looks like it starts to work.

Templates are missing (probably other animations as well) - motion_animation - sprinkler_animation

Can you please share these with me ?

there in the zip I posted.

[andyblac]

here's my theme in case it missing colours etc
themes.zip

[andyblac]

oh btw, don't forget to refresh the dashboard every time you make a change, by clicking on the 3 dots top right of the dashboard and then clicking refresh.

[andyblac]

strange, I'm on Mac as well, but sure here you go.
icons.zip

[Jens-Wymeersch]

Somehow due to the title it didn't copy to home assistant.
If there is no motion and no sprinkling does it look like this ?

[andyblac]

Somehow due to the title it didn't copy to home assistant. If there is no motion and no sprinkling does it look like this ?

yup that's them. :)

[Jens-Wymeersch]

In your opinion, do you think we cannot your project to the bubble card project ?

[andyblac]

I have yet to work out how to get the font size to increase/decrease dynamically with the card size.

[andyblac]

In your opinion, do you think we cannot your project to the bubble card project ?

I have not yet tried bubble card, but what did you have in mind ?

[Jens-Wymeersch]

basically, instead of getting a popup, the bubble card bubbles the content up and easily disappears

Here is the card in closed state

Here it is in open state

[andyblac]

I'll have a play, see if I can add a template that can use a bubble card yaml to import like I did for auto-entities

[Jens-Wymeersch]

It's a nice project. Other project I'm examining is Rouded https://community.home-assistant.io/t/rounded-dashboard-guide/543043/2

[Jens-Wymeersch]

By the way, the reason why you went full control via grid is because you wanted the same for iphone - ipad - mac ?

[andyblac]

By the way, the reason why you went full control via grid is because you wanted the same for iphone - ipad - mac ?

yes I have one dashboard for desktop, iPad and iPhone. all dynamically resize to size screen

desktop:

iPhone:

[andyblac]

do you have an example of where or what you wanted to popup usage bubble card in my room card ?

[Jens-Wymeersch]

I'm trying to understand the sidebar code...

I am not sure what's going on with the weather cards...

- type: custom:stack-in-card
    mode: vertical
    cards:
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(max-width: 767px)"
        card:
          type: custom:clock-weather-card
          entity: weather.home
          card_mod:
            style: |
              .card-content {
                padding-top: 0px !important;
                padding-bottom: 0px !important;
              }
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 780px)"
        card:
          type: custom:clock-weather-card
          entity: weather.home
          card_mod:
            style: |
              .card-content {
                margin-top: -10px !important;
                margin-bottom: -15px !important;
                padding-top: 0px !important;
                padding-bottom: 0px !important;
              }
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 1200px)"
        card:
          type: custom:hourly-weather
          entity: weather.home
          num_segments: 8 # optional, defaults to 12
          label_spacing: 1
          # offset: "{{ 24 - now().hour }}"
          name: "" # optional, defaults to "Hourly Weather"
          show_wind: true
          show_precipitation_amounts: true
          show_precipitation_probability: true
          card_mod:
            style: |
              .card-content {
                margin-bottom: 0px !important;
                padding-top: 0px !important;
                padding-bottom: 0px !important;
              }
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 1024px)"
        card:
          type: custom:clock-weather-card
          entity: weather.home
          sun_entity: sun.sun
          forecast_rows: 8
          hide_today_section: true
          card_mod:
            style: |
              .card-content {
                padding-top: 0px !important;
                padding-bottom: 0px !important;
              }

[andyblac]

it's used to hide certain bits etc that I do not need on iPhone / iPad screens.

[Jens-Wymeersch]

Currently, it doesn't make a distinction btw the different environments. I am getting everything

[andyblac]

Currently, it doesn't make a distinction btw the different environments. I am getting everything

have a play with the min / max values.

[Jens-Wymeersch]

What is the purpose of the scenes ?

[andyblac]

What is the purpose of the scenes ?

activate a scene.

[Jens-Wymeersch]

Of course, it is to activate scenes. However, can you explain the use case ? Never went into that direction as I didn't really saw the value

[andyblac]

Good Morning scene, good night, away, tv time, etc, etc .....

[Jens-Wymeersch]

Hi Andy, went through the rest of the code looking for a solution how to visualise my motion- and door sensors. Still struggle with this... Any clever ideas ? (I see you did a count... but rather thinking to include it in the rooms somehow. Thoughts ?
PS one part of the dashboard is done now - see result (including bubble cards and expander card

[andyblac]

for motion and door, I use the sensor icons template

like this:

they go bright on motion or door open. (the motion sensor also flashes the radar part.

[Jens-Wymeersch]

The problem arises when you have more then 1 door or motion sensor in the room...

[andyblac]

The problem arises when you have more then 1 door or motion sensor in the room...

have different shades of colour for each?, or create a sensor group and use that as entity, so if any motion in the room the 1 icon indicates it.

[Jens-Wymeersch]

In some case, I probably will use a group helper because the ESP Presence sensor has 3 entities
Any chance, you would be able to help me with an animation for being the bed ?

[andyblac]

In some case, I probably will use a group helper because the ESP Presence sensor has 3 entities Any chance, you would be able to help me with an animation for being the bed ?

I'll try, but the ones I did took me ages, lol, as I'm not great at SVG code :)

what are you wanting ?

[Jens-Wymeersch]

You probably better then me... I would say, if you lay in the bed, you see a bed, person, and some zzzzz moving

[andyblac]

You probably better then me... I would say, if you lay in the bed, you see a bed, person, and some zzzzz moving

ok find an SVG icon of a person in bed, and I'll try to some ZZZZ's

or do you meant the normal bedroom icon ? with zzzz's

[andyblac]

found this, I'll try to animate the Z's appearing one at time.

[Jens-Wymeersch]

exactly what i am looking for

[Jens-Wymeersch]

HI Andy, hope you are doing well. I am cracking on with the dashboard, but I'm having trouble with the colour of the main room cards.
I want to colours like teal, indigo, deep-purple, etc. but i'm unable to use them. When i changed the themes, i was able to use your colours, but not all the pallet that I intended to use. Anything you can do ?

[andyblac]

HI Andy, hope you are doing well. I am cracking on with the dashboard, but I'm having trouble with the colour of the main room cards. I want to colours like teal, indigo, deep-purple, etc. but i'm unable to use them. When i changed the themes, i was able to use your colours, but not all the pallet that I intended to use. Anything you can do ?

you can also use andyblac_card_room_color: rgb(77, 195, 255) for example or andyblac_card_room_color: rgba(77, 195, 255, 0.5) if you want 50% transparent colour.

or you can edit the theme and add the colours you want.

here are the full docs to the room card
https://github.com/andyblac/UI-Minimalist-Custom-Cards/blob/main/docs/usage/custom_cards/custom_card_andyblac_room.md

[Jens-Wymeersch]

Thank Andy for your quick reply. Sorry to ask, any progress on the bed animation.
I understand it is not easy, but other ideas for animation would be the a/c, television/pc, washing machine, Dryer, Dishwasher, charging the car. Is this something you are thinking about ?

[andyblac]

Thank Andy for your quick reply. Sorry to ask, any progress on the bed animation. I understand it is not easy, but other ideas for animation would be the a/c, television/pc, washing machine, Dryer, Dishwasher, charging the car. Is this something you are thinking about ?

not had chance yet, maybe look in the ha forum for svg animations, I could then try to adapt them to fit my card.

[Jens-Wymeersch]

Hi Andy,

It looks for the TV and the Vent, we could use the following
https://github.com/matt8707/hass-config/blob/master/button_card_templates/icons.yaml
What do you think ?

[andyblac]

Hi Andy,

It looks for the TV and the Vent, we could use the following https://github.com/matt8707/hass-config/blob/master/button_card_templates/icons.yaml What do you think ?

yes we can use those, not directly but could be adapted.

[Jens-Wymeersch]

Thank you in advance. Here is another project that has a set of animations. https://github.com/studioIngrid/studio-icons_beta

[Jens-Wymeersch]

Hi Andy, I hope you are doing well. Any chance you had some time to work on the animations ?

[Jens-Wymeersch]

@andyblac I hope you are doing well. I've finally finished the first part of the new UI with your cards and bubble cards. I would like to tweak my ipad view. Basically, the 4 rows with each 3 cards, is a bit too big for the ipad 9 that I've installed. What is possible to tweak this ?

grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 37.6% auto auto auto
grid-template-rows: repeat(4, fit-content(80%))`

I changed the fit-content value, but this doesn't change a thing. Can you please advise ?