與蟲鳥和鳴的田間歲月

這次要介紹的是Homekit-Card，

影片可以參考這個連結。

https://www.youtube.com/shorts/fP9S1_E4YPc

到HACS右上角的custom repositories輸入https://github.com/DBuit/Homekit-panel-card，

然後到設定->主面板->資源(右上角三個點)確認是否有以下內容，

有就是安裝完成了。

接下來是lovelace的撰寫，

我的完整程式碼在這，

底下做個簡單說明。

基本上建議面板是使用單卡類別，

但如果你有安裝lovelace-layout-card可以選擇Grid，

下面加入width: 100%，

就可以同一視圖有不同的card，

如同我影片第一個視圖最上方還有天氣卡。

程式碼分成兩個部分

popup_cards:
  switch.sonoff_10015da991:

.......

views:
  - theme: ios-dark-mode-blue-red
    title: PChome
    path: iphone

........

popup是點擊homekit的按鍵會跳出的介面，

可以參考Home assistant的面板介紹 - hass-browser_mod(一)

更詳細的內容下一篇講解。

Homekit card的部分
home: false

假如改為true，就可以在card最上方增加說明，

使用rules進行撰寫，

style: |
  :host {
    --tile-background: rgba(255, 255, 255, 0.8);
    --tile-border-radius: 12px;
    --tile-width: 100px;
    --tile-height: 100px;
    --tile-on-background: rgba(255, 255, 255, 1);
    
    --tile-name-text-color: rgba(0, 0, 0, 0.4);
    --tile-on-name-text-color: rgba(0, 0, 0, 1);
    
    --tile-state-text-color: rgba(0, 0, 0, 0.4);
    --tile-state-text-font: 18px;
    --tile-on-state-text-color: rgba(0, 0, 0, 1);
    --tile-state-changed-text-color: rgb(134, 134, 134);
    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
    
    --tile-value-text-color: rgba(255, 0, 0, 1);
    
    
    --tile-icon-color: rgba(0, 0, 0, 0.3);
    --tile-on-icon-color: #f7d959;  
    
    --tile-width-mobile: 79px;
    --tile-height-mobile: 90px;
    --tile-icon-size: 30px;
    --tile-image-radius: 100%
    --slider-width: 420px;
    --slider-height: 120px;
  }

Style的部分是對整體的磁磚進行設計，

包含尺寸顏色等等，

除了style外還有一些options 建議一定要有的，
enableColumns: true        允許列排行
haptic: heavy                    按下去有iphone的馬達震動觸感
tileHoldAnimation: true    按住時磁磚會放大

接下來就是rows跟columns，

我用官方的圖來說明

rows:
  - row: 1
    columns:
      - column: 1
        tileOnRow: 4
        entities:

           .......

      - column: 2
        tileOnRow: 3
        entities:

            .....

  - row: 2
    columns:
      - column: 1
        tileOnRow: 3
        entities:

            ....

rows裡會填寫有幾個row，

然後在裡面包含幾個column，

column裡面再填寫一列最多有幾個磁磚tileOnRow，

然後entities就可以填入你想放入的實體，

假如你想放進去的不是真正的實體，

可以參考以下方式撰寫，

建立一個自製的磁磚。

entities:

  - custom: lampen

    name: Lampen

    icon: mdi:lightbulb-group

    state: sensor.current_lights_on

每個磁磚也都可以有tap_action,hold_action,double_tap_action去撰寫按壓後的動作，

我大部分都是點一下就開關，

按壓住就是彈出新的卡片做詳細的控制

 tap_action:
    action: toggle
    entity: switch.0x54ef44100001154b_channel_3
hold_action:
    action: popup

另外也可以把其他的卡片放進磁磚裡，

entities:
    - card: custom:mini-graph-card
       cardOptions:
       entities:
           - sensor.kong_qi_jing_hua_qi_temperature
             name: 溫度

但很多卡片放入都會跑掉，

mini-graph-card因為作者有專門調校過所以比較沒有問題。

另外每個磁磚大小也可以藉由widerSize跟higherSize調整，

wider: true
widerSize: 3
higher: true
higherSize: 3

就會變成3*3的大方塊

更詳細的內容撰寫可以參考https://github.com/DBuit/Homekit-panel-card

Home Assistant教學總目錄

如果我的文章對你有幫助，歡迎送我喝杯咖啡喔