dbuit / homekit-panel-card Goto Github PK

View Code? Open in Web Editor NEW

303.0 303.0 54.0 14.56 MB

Homekit panel card for home assistant

License: MIT License

JavaScript 1.95% TypeScript 98.05%

homekit-panel-card's People

Contributors

Stargazers

Watchers

Forkers

sy-979 sauloonze thomaspetit aspkannan musicaways nickrockit capstan1 caseyjhol nckltcha vladhrytsuk ideachengo holnburger heruwinar hwhesselink barleybobs ramoneich neoantox phibins wtrbuit etsarevsky ibitas rob-mccann 0nikola1 darylosu dtterastar tdangschulz darkorion6661 bfayers jonasjeeliasson oouubo theconax ksmarty racelandshop fjch1997 evo-eco dvbit gadgetchnnel keshiyong xingzepan schevv matrix16888 15803120018 faizalps501 laurentzziu asdewqvnf songhao1993 36953288 csx1984 goodsunyu filipe-figueiredo wrj1106 dygg8888 chenyu614

homekit-panel-card's Issues

Last changed state on more devices than sensors

If I'm not misstaken there's as of now not possible to show last_changed state on other devices than sensors. A nice addon would be to be able to show last_changed state for every device that supports it.

Example below:

entities:
  - entity: person.xxxxxxx
    popup:
      type: map
      default_zoom: 16
      dark_mode: true
      entities:
        - person.xxxxx
    state: last_changed
    icon: mdi:human-female
    name: Linn
    offStates:
      - "Borta"
      - "not_home"
      - "paused"

v0.2

Custom tile with custom tap action for example to navigate to other page
Better tile for thermostat(https://community-home-assistant-assets.s3.dualstack.us-west-2.amazonaws.com/original/3X/c/a/ca0bdcb47696215f4ba8451ec3959570244a7756.jpeg)
Update mini graph card style to fit better
Combine entities
Toggle group with entities

Request: State-based icons?

Just got this working, and love it, thank you for the effort here! Question, can the icon be customized based on the entity state? So, for a lock, show mdi:lock when locked and mdi:lock-open-variant when unlocked, or for a garage cover, mdi:garage / mdi:garage-open, etc. Right now, it changes the icon color like a light for unlocked/open.

If you get a chance please consider adding support for fan speed control.

Originally posted by @slipx06 in #4 (comment)

[idea] Person card

I would like to contribute to a more immersive experience when the card is a person. It could be something similar to the weather card. I would like to display the person and devices states.

Issues with HACD Installation in combination with HA 0.107 new Ressource manager

Hi,

If I install the card via HACS and put the HACS Ressource path into the new Ressource Manager of Home Assistant it's recognized as unknown.

I need to install it manually and put the "Manual Install" Ressource into the Manager.

Is there a fix planned?

dark variant

I know I can adapt the styles with css, but a setting for one additional dark style would be nice for easier configuration.

Also, I noticed: titles should have more space to the first row of cards.

popupExtend not working when custom:light-pop-up-card is used on single entity

The popup works fine with the config below, but popupExtend is ignored.

Example config:

- entity: group.all_belysning
  name: Kväll
  icon: mdi:weather-night
  popup:
    type: custom:light-popup-card
    entity: group.all_belysning
    scenesInARow: 4
    actionsInARow: 4
    brightnessWidth: 100px
    brightnessHeight: 300px
    switchWidth: 100px
    switchHeight: 300px
    supportedFeaturesTreshold: -1
  popupExtend:
    actions:
      - service: scene.turn_on
        service_data:
          entity_id: scene.ontspannen
        color: "#FDCA64"
        name: ontspannen
      - service: scene.turn_on
        service_data:
          entity_id: scene.helder
        color: "#FFE7C0"
        name: helder
      - service: scene.turn_on
        service_data:
          entity_id: scene.concentreren
        color: "#BBEEF3"
        name: concentreren
      - service: scene.turn_on
        service_data:
          entity_id: scene.energie
        color: "#8BCBDD"
        name: energie

Request: Haptic feedback for tiles (iOS companion 2.0)

Would love to get haptic feedback when toggling a button/switch.

https://companion.home-assistant.io/en/integrations/haptics

Outdated Installation instructions for HACS

If I am not mistaken, your current Installation instructions for a HACS install now requires adding the following URL to the resources ('configuration.yaml' or the resource editor ''/config/lovelace/resources'')

/hacsfiles/Homekit-panel-card/homekit-panel-card.js

Using lovelace_gen not possible?

I love your plugin. To minimize repeats in the yaml code, I tried to use the custom lovelace_gen integration https://github.com/thomasloven/hass-lovelace_gen. However this seems to clash with the rules segment in your card. I guess it is related to your rules also using {% / %}. I tried to put the rules within quotes, this removes the lovelace_gen error, but also doesn't show the rules anymore.

Do you know how this can be avoided?

[ request ] option for entity picture instead of icons

It would be great if you could use images instead of icons, e.g. svg files

[Request]Add option to adjust color of tile

Would be very nice to easily adjust the color of the tiles used and unused.
Even opacity...

Text overflow in rules/templating

When a long text string is presented in the companion app the overflow wrecks the width. See image.

Is it possible to have a automatic line break or truncating?

Request: Status value top right corner

I'm trying to rebuild my dashboard so it matches something like this:

However, it uses a picture-elements-card and on+off pictures for each entity making it less practical to use. It also doesn't scale properly on multiple devices.

Either way, what I do like of this interface is the status in the top-right corner (with the circular percentage). Is this something that could be added to this plugin?

Not displaying anything from lights?

I copied this straight from the example and used my own lights, why doesn't it work? Nothing is displaying icons


- title: Lights
  path: lights_path
  cards:
    - type: "custom:homekit-card"
      enableColumns: true
      statePositionTop: true
      rows:
        - row: 1
          columns:
            - column: 1
              tileOnRow: 4
              entities:
                - title: Living Room
                  entities: 
                    - entity: light.tv_light_1  
                    - entity: light.tv_light_2
                    - entity: light.living_room_light
                    - entity: light.living_room_light_r
            - column: 2  
              tileOnRow: 3
              entities:
                - title: Kitchen
                  entities:
                    - entity: light.beganegrond  
        - row: 2
          columns:
            - column: 1
              tileOnRow: 4
              entities:
                - title: Upstairs
                  entities:
                    - entity: binary_sensor.wasmachine_status
                    - entity: weather.weersverwachting
        - row: 3
          columns:
            - column: 1
              entities:
                - title: Bedroom
                  entities:
                    - entity: switch.doorbell_chime_active

Homekit-panel-card/index.m.js.map' but it does not exist and the new slider is invisible

Got the following error in the console. And the new light slider on the tile does not show. It works but the slider "handle" does not show, just but the mouse pointer changes as I hover over the invisible slider...

As seen below the error is for all your components @DBuit. No other custom cards throw the same error.

DevTools failed to load SourceMap: Could not load content for http://192.168.1.10:8123/hacsfiles/light-popup-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://192.168.1.10:8123/hacsfiles/Homekit-panel-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://192.168.1.10:8123/hacsfiles/cover-popup-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Besides the slider everything seams to work fine, including the popup-cards.

I've tried reinstalling (via HACS), empty all caches but still the same errors.

Support for conditional tiles

I’d like to know if it is possible to display some tiles depending on certain conditions?

For example, I have a garden irrigation system that is connected to a water tank. If the water level of the water tank is ok, I just want to have a switch tile in the frontend to turn the watering on and off. But if the water level is too low, I want the switch to be hidden and get a tile with a warning in its place.

Or another example. I use the integrated media-control card for the tiles of my media players and really like the look of it. But I just like that the media-control cards to be displayed when the media players play. When the media-players are off, I want to show something else for it

I couldn’t find anything regarding this question in the documentation.

Wrong css style for unit of measurement in graph tiles

Currently graph tiles are looking clean but the unit of measurement has a different format then the unit itself.

The state__uom class should have the same css attributes as state__value to look clean. Otherwise great looking integration :)

[request] Weather card

Hi, i dont know if its meant to work but i wanted to add the "weather card" or "simple weather card" to the homekit panel config but it doesnt seem to work.

thanks in advance

code

              - column: 2
                entities:
                  - entities:
                      - entity: weather.breucq
                      - card: 'custom:weather-card'
                        cardOptions:
                          entities:
                            - entity: 'weather.breucq'
                        noPadding: true
                      - card: 'custom:simple-weather-card'
                        cardOptions:
                          entities:
                            - entity: 'weather.breucq'
                        noPadding: true
                      - card: 'custom:mini-graph-card'
                        cardOptions:
                          entities:
                            - sensor.temp_zithoek
                          update_interval: 1
                        noPadding: true
                      - card: 'custom:mini-graph-card'
                        cardOptions:
                          entities:
                            - sensor.temp_leefruimte
                          update_interval: 1
                        noPadding: true
                    title: Temperatuur
                tileOnRow: 3

result

Circle and temperature display in the new climate tile are not centered

Hello Dbuit,
I have just installed version 0.2 of the Homekit-panel-card and I really like the new tiles for climate entities.
Sadly the Circle and temperature display in the new climate tile are not centered for me.
The circles have an elliptical shape and the text is too far down.:

Request: faster popup menu

I don't suppose there is anyway to open the popup menu while holding the button. At the minute you have to press and hold then let go before the tile opens. Would it be possible to open the popup menu while the tile was being pressed so you knew when to let go?

Custom header kiosk mode and unathorized template API error

When using compact header in kiosk mode (hidden header) the template API bugs out with the fetch-with-auth function. When header is visible there's no thrown errors.

Is it just me or can anyone else replicate?
192.168.1.10-1579600841664.log

Request: brightness slider

I've got a new feature request: brightness slider on the card. The popup card is nice, but having the slider right inside the tile would be HUGE. This would be especially helpful with wider cards. I made this mockup:

If wanted, this could also show the color (not so nice with my current theme, but you get the idea):

What do you think?

[ request ] show picture in card

I added pictures to the person entity but it doesnt show in the card

    cards:
      - enableColumns: true
        rows:
          - columns:
              - column: 1
                entities:
                  - entities:
                      - entity: person.toulouse
                      - entity: person.babette
                tileOnRow: 3
            row: 1
        type: 'custom:homekit-card'

result:

should be:

Request: Support for hold_action / double_tap_action

Right now only tap_action (single click) is implemented. However I'd like also like to be able to "hold" an element to call another service (e.g. browser_mod.popup). Right now it simply opens the "more-info" dialog of HASS. Also might be nice to have double_tap_action too.

Could these be added?

Update docs to show result for each example in the readme

It would be awesome if you had paired each code example with a screenshot of the results. Personally I find it helpful when code examples are paired with an illustration so I know exactly what the sample does... just a suggestion. thanks for your awesome work btw, this card is great

markdown as rules?

Is there a way to add the markdown coding into the rules attribute?
Something like:

        rules: >
          <li>{% if now().hour  < 5
          %} Good Night {{'\U0001F634'}}
              {% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
              {% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
              {% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}
              {% endif %}</li>
          {% if "not_home" in states('person.saulo') %} <li>Saulo is out.</li>
          {% endif %} {% if "not_home" in states('person.olga') %} <li>Olga is
          out</li> {% endif %}

          {% if states('sensor.current_lights_on') | float > 0 %}
          <li>{{states('sensor.current_lights_on')}} lights on</li> {% endif %}

          {% if states('sensor.current_media_players_on') | float > 0 %}
          <li>{{states('sensor.current_media_players_on')}} speakers on</li> {%
          endif %}

{request} Conditional background colr

I think you've done a fine piece of work. And I also have the impression that you like it when people come up with sugessties. Since a madman can think of more than a programmer can handle, I have 3 wishes.

It would be great if you could work with thresholds. I mean that the backside of a tile gets a different colour when a certain value is reached. You can then see at a glance on your screen that something is going on. Think of the processor temperature above a certain value after which the background of the tile automatically turns red.
What would also be very nice in that context is that the background could blink. Think for example of a rain sensor. At actual precipitation, the background of the tile flashes blue.
With the popup card, it would be nice if you could also choose the colour of a circle with all the colours on it. Although there is already such a custom card from another developer, it doesn't really work well with your homekit-card. The popup works and you can choose any colour but you can't get back to the previous screen without restarting the system.

Custom element doesn't exist: homekit-card.

That's the error on console:

SyntaxError: invalid regular expression flag shomekit-panel-card.js:186:382

Request: popup on tap_action

Feature Request: have the possibility to call the custom popup on tap_action. Hold action is often to difficult for end users and it would be handy to call the custom popup on the tap_action. I know this might(?) be possible via the browser_mod, but it's interesting to not have this platform wide and only within the card.

Homekit-Card overlapping other cards.

For some reason my homekit-card overlaps other existing cards. Either removes them, or just lies on top. Which elements gets overlappend/removed depends on the order of cards. If i move the media card above the homekit-card, the graph card gets removed/overlapped.

Any help? Unsure if it's a bug or my mistake.

cards:
  # Lights
  - type: "custom:homekit-card"
    statePositionTop: true
    tileHoldAnimation: true
    entities:
      - title: Bedroom
        popup:
          type: custom:light-popup-card
        entities:
          - entity: light.rgb_magnus
            name: Magnus
            popupExtend:
              actions:
                - service: light.turn_on
                  service_data:
                    entity_id: light.rgb_magnus
                    rgb_color: [253,202,100]
                    transition: 0.8
                  color: "#FDCA64"
                - service: light.turn_on
                  service_data:
                    entity_id: light.rgb_magnus
                    rgb_color: [187,238,243]
                    transition: 0.8
                  color: "#BBEEF3"

          - entity: light.rgb_hilde
            name: Hilde
            popupExtend:
              actions:
                - service: light.turn_on
                  service_data:
                    entity_id: light.rgb_hilde
                    rgb_color: [253,202,100]
                    transition: 0.8
                  color: "#FDCA64"

                - service: light.turn_on
                  service_data:
                    entity_id: light.rgb_hilde
                    rgb_color: [187,238,243]
                    transition: 0.8
                  color: "#BBEEF3"

          - entity: switch.on_off_plug_in
            icon: mdi:fire
            color: "#FDCA64"
            name: Heater

  # Sonos
  - type: custom:mini-media-player
    entity: media_player.sonos_living_room
    artwork: cover
    hide:
      progress: true
      volume: true
      source: true
      controls: false
      shuffle: false
      info: false
      icon: false
      power: true

Screenshot:

Request: Remote Popup Card

I would love to be able to have a remote popup for my Rokus.
Awesome work! I love the cards so far

Idea's to add to card

Camera tile (https://community-home-assistant-assets.s3.dualstack.us-west-2.amazonaws.com/original/3X/1/4/1483c756843335ad04434834011995c4276cfe29.jpeg)
iphone hold for pop-up improvement, check deep-press mod compatible?
Enable overwrite with tap_action for default toggle on tap for lights and switches
render template for rules without admin rights?

iOS Safari rendering width

Saw that this was an issue on the HA forum and reported as fixed but as seen in the attached screen shot from my iPhone it still exists.

Works fine while simulating iPhone X in Chrome, and works as expected in Safari on Mac.

Alarm panel pop-up card

Just dropping a suggestion to implement a nice pop-up card for the alarm integrations.

Request: media player full album art

Would it be possible to have the currently playing song art fill the card instead of the white background, maybe this could be an additional setting?

rulesColor is not working

I cannot get rulesColor to work. No matter what color I set it to, it stays white - and makes impossible to read on a light background. Below is a snippet of the configuration:

      - type: 'custom:homekit-card'
        home: true
        rules: >
          {% if states('sensor.current_lights_on') | float > 0 %} <li>{{states('sensor.current_lights_on')}} {% if states('sensor.current_lights_on') | float > 1 %}lamper {% else %}lampe {% endif %}tændt</li> {% endif %} 
          {% if states('sensor.current_cameras_recording') | float > 0 %} <li>{{states('sensor.current_cameras_recording')}} {% if states('sensor.current_cameras_recording') | float > 1 %}kameraer {% else %}kamera {% endif %}optager</li> {% endif %}
        rulesColor: '#EB5B4C'

Am I settings this up wrong?

Not possible to deactivate Icon Brightness and temperature

The following General view settings are not honored by the config.
The icon color is always adapting to the Brightness of the lamp.
useBrightness: false
useTemperature: false

0.4.2 ignores titleColor

    title: "Övre Husargatan 9"
    useBrightness: false
    useTemperature: false
    titleColor: "#FFF"
    enableColumns: true
    statePositionTop: true
    horizontalScroll: false
    tileHoldAnimation: true

[request] update of cover card

would it be possible to have a cover/blind card which cant be controlled without the need of a popup card like this:

Transparent icon for no reason

Check this image: https://ibb.co/rMTqN9v

This is my code:

https://pastebin.com/GM2rq7VA

Roller shutter popup card (homekit style)

It would be nice to have a roller shutter popup card to easily manage this type of entity.

Thanks for your excellent work!!

Add option to create larger tiles

It would be nice to add an option to create larger tiles (e.g. a tile with the width of 2 tiles, or the height of 2 tiles, or both).

This would be very handy, as some components are just too large to fit in a single tile.

Hide doesn't work for wider and higher panels

The hide option apperantly isn't working with wider panels. Would be great if it could also be used with higher and wider panels.

`style:` for custom CSS values wont stay active

I've applied some of the custom tile styles to my tiles (e.g. --tile-border-radius: 12px;,--tile-width: 105px;,--tile-height: 81px;) they worked great at first but now will not display. They always show the default values.

For example:

Here is my current tab LOVELACE:

cards:
  - enableColumns: true
    rows:
      - columns:
          - column: 1
            entities:
              - entities:
                  - entity: light.pendants
                    icon: 'mdi:vanity-light'
                    name: Pendants
                  - entity: light.stairway
                    icon: 'mdi:ceiling-light'
                    name: Stairway
                  - entity: light.kitchen
                    icon: 'mdi:ceiling-light'
                    name: Kitchen
                  - entity: switch.kitchen_leds
                    icon: 'mdi:ceiling-light'
                    name: Counter
                  - entity: light.living_room
                    icon: 'mdi:ceiling-light'
                    name: Living Room
                  - custom: light.living_room
                    icon: 'mdi:blinds'
                    name: Living Room Blinds
                    tap_action:
                      action: call-service
                      service: cover.toggle
                      service_data:
                        entity_id: group.lr_all
            tileOnRow: 8
    settings: true
    statePositionTop: true
    style: |
      :host {
        --tile-background: rgba(255, 255, 255, 0.8);
        --tile-border-radius: 12px;
        --tile-width: 105px;
        --tile-height: 81px;
        --tile-on-background: rgba(255, 255, 255, 1);
      }
    supportedFeaturesTreshold: 0
    title: Home
    titleColor: '#FFF'
    type: 'custom:homekit-card'
    useBrightness: true
    useTemperature: true
  - cards:
      - aspect_ratio: 55%
        camera_image: camera.front_door
        camera_view: live
        entity: camera.front_door
        show_name: false
        show_state: false
        type: picture-entity
      - aspect_ratio: 55%
        camera_image: camera.allyway
        camera_view: live
        entity: camera.allyway
        show_name: false
        show_state: false
        type: picture-entity
    type: horizontal-stack
  - enableColumns: true
    rows:
      - columns:
          - column: 1
            entities:
              - entities:
                  - custom: Lights
                    icon: 'mdi:lightbulb-group'
                    name: Lights
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/lights
                  - custom: TVs
                    icon: 'mdi:television-box'
                    name: TVs
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/tvs
                  - custom: Blinds
                    icon: 'mdi:blinds'
                    name: Blinds
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/blinds
                  - custom: CCTV
                    icon: 'mdi:cctv'
                    name: CCTV
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/cctv
                  - custom: Sonos
                    icon: 'mdi:music-circle-outline'
                    name: Sonos
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/sonos
                  - custom: Alarm
                    icon: 'mdi:shield-home'
                    name: Alarm
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/locks
                  - custom: Weather
                    icon: 'mdi:weather-partly-snowy'
                    name: Weather
                    tap_action:
                      action: navigate
                      navigation_path: /lovelace/weather
            tileOnRow: 8
        row: 1
    settings: true
    statePositionTop: true
    style: |
      :host {
        --tile-background: rgba(255, 255, 222, 0.8);
        --tile-border-radius: 12px;
        --tile-width: 85px;
        --tile-height: 57px;
        --tile-on-background: #cce6ff;
        --tile-border-radius: 22px;
      }
    supportedFeaturesTreshold: 0
    title: Home
    titleColor: '#FFF'
    type: 'custom:homekit-card'
    useBrightness: true
    useTemperature: true
type: vertical-stack

But this is how it looks on the page:

Number Format - number.toLocaleString ?

Is there any way to format the representation of the number for a card ?

entities:
  - title: "Wasserverbrauch"
    entities:
      - entity: sensor.wasser_liter_jahr
        name: Jahr
        localestring: 'de-AT'                     ##  this way ??
        tap_action:
          action: more-info
          entity: sensor.wasser_liter_jahr

Result for number.toLocaleString(localestring):

Number(54123.990).toLocaleString("de-DE")
"54.123,99"