andyblac / UI-Minimalist-Custom-Cards

A modified version of Minimalist Room Card.
58 stars 3 forks source link

HACS Repo #21

Open Jens-Wymeersch opened 4 months ago

Jens-Wymeersch commented 4 months ago

@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 commented 4 months ago

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 commented 2 months ago

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 commented 1 month ago

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

andyblac commented 1 month ago

@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 commented 1 month ago

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

image

Not sure what code is associated with this piece alone.

andyblac commented 1 month ago

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

image

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 commented 1 month ago

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

andyblac commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

Resulting in the following error

image

andyblac commented 1 month ago

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

Resulting in the following error

image

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 commented 1 month ago

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 commented 1 month ago

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

like this :

Screenshot 2024-08-22 at 20 00 46
Jens-Wymeersch commented 1 month ago

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 ?

image

Jens-Wymeersch commented 1 month ago

It looks like it starts to work.

image

Templates are missing (probably other animations as well)

Can you please share these with me ?

andyblac commented 1 month ago

It looks like it starts to work.

image

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.

Screenshot 2024-08-23 at 13 25 16
andyblac commented 1 month ago

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

andyblac commented 1 month ago

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 commented 1 month ago

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

Jens-Wymeersch commented 1 month ago

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 ?

image

andyblac commented 1 month ago

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 ?

image

yup that's them. :)

Jens-Wymeersch commented 1 month ago

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

andyblac commented 1 month ago

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

andyblac commented 1 month ago

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 commented 1 month ago

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

Here is the card in closed state

image

Here it is in open state

image

andyblac commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

andyblac commented 1 month ago

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:

Screenshot 2024-08-23 at 15 00 59

iPhone: IMG_0037 IMG_0038

andyblac commented 1 month ago

if you want a copy of my template sensors just ask I post the code.

andyblac commented 1 month ago

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

Jens-Wymeersch commented 1 month ago

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

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

image

- 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 commented 1 month ago

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

Jens-Wymeersch commented 1 month ago

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

andyblac commented 1 month ago

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 commented 1 month ago

What is the purpose of the scenes ?

andyblac commented 1 month ago

What is the purpose of the scenes ?

activate a scene.

Jens-Wymeersch commented 1 month ago

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 commented 1 month ago

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

Jens-Wymeersch commented 1 month ago

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

image

andyblac commented 1 month ago

for motion and door, I use the sensor icons template

like this:

Screenshot 2024-08-27 at 20 59 20

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

Screenshot 2024-08-27 at 21 02 04
Jens-Wymeersch commented 1 month ago

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

andyblac commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

andyblac commented 1 month ago

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

bed

andyblac commented 1 month ago

found this, I'll try to animate the Z's appearing one at time. sleeping-in-bed-svgrepo-com-2

Jens-Wymeersch commented 1 month ago

exactly what i am looking for