类Homekit介面，3D Floorplan 触控屏

xbox3600

好漂亮的介面!可以請教右側的正方形light如何呈現出來,以及風扇會動的語法 謝謝您

fung1006

xbox3600 发表于 2021-4-10 22:09
好漂亮的介面!可以請教右側的正方形light如何呈現出來,以及風扇會動的語法 謝謝您 ...

1. 參考: https://github.com/custom-cards/button-card

2. 只是普通picture card，ON 狀況用gif 就可以，以下是例子

                  - entity: fan.xiaomi_fan_circu
                    state_filter:
                      'off': opacity(40%) saturate(0%)
                      unavailable: opacity(40%) saturate(0%)
                      'on': opacity(100%)
                    state_image:
                      'off': /local/floorplan/img/ico_fan.png
                      unavailable: /local/floorplan/img/ico_fan.png
                      'on': /local/floorplan/img/btn_fan_gif.gif
                    style:
                      left: 88%
                      top: 40%
                      width: 7%
                    tap_action:
                      action: toggle
                    type: image

复制代码

xbox3600

fung1006 发表于 2021-4-11 20:18
1. 參考: https://github.com/custom-cards/button-card

2. 只是普通picture card，ON 狀況用gif 就可以 ...

謝謝~嘗試看看

xbox3600

fung1006 发表于 2021-4-11 20:18
1. 參考: https://github.com/custom-cards/button-card

2. 只是普通picture card，ON 狀況用gif 就可以 ...

失敗了~可以分享一個右側正方形的語法嗎?? 感恩

fung1006

xbox3600 发表于 2021-4-12 08:47
失敗了~可以分享一個右側正方形的語法嗎?? 感恩

簡單的你看不懂，直接看我這個你更不懂

          - type: horizontal-stack

            cards:

              - aspect_ratio: 1/1

                type: 'custom:button-card'

                entity: light.lifx_mini_bed_main

                icon: 'mdi:lamp'

                name: Bed Main

                show_state: true

                size: 35%

                state:

                  - styles:

                      card:

                        - filter: opacity(80%)

                        - background-color: 'rgb(0,0,0)'

                        - color: 'rgb(255,255,255)'

                      icon:

                        - filter: grayscale(100%)

                    value: 'off'

                  - styles:

                      card:

                        - filter: opacity(80%)

                        - background-color: 'rgb(100,100,100)'

                        - color: 'rgb(255,255,255)'

                      icon:

                        - color: 'rgb(255,255,255)'

                    value: unavailable

                styles:

                  card:

                    - filter: opacity(100%)

                    - background-color: 'rgb(255,255,255)'

                    - color: 'rgb(50,50,50)'

                    - font-size: 12px

                    - font-weight: bold

                  grid:

                    - grid-template-areas: '"i" "n" "s"'

                    - grid-template-columns: 1fr

                    - grid-template-rows: 1fr min-content min-content

                  img_cell:

                    - align-self: start

                    - text-align: start

                  name:

                    - justify-self: start

                    - padding-left: 10px

                  state:

                    - justify-self: start

                    - padding-left: 10px

                    - padding-top: 5px

                    - padding-bottom: 5px

                    - font-size: 12px

复制代码

fung1006

xbox3600 发表于 2021-4-12 08:47
失敗了~可以分享一個右側正方形的語法嗎?? 感恩

人家最底下已經有提供範本，你先照範本成功做到再往後做還有你要說明一下你所謂 失敗 的具體情況，不是說句失敗就算，你也得解決

- type: custom:button-card
  entity: switch.skylight
  name: <3 Apple
  icon: mdi:fire
  show_state: true
  styles:
    card:
      - width: 100px
      - height: 100px
    grid:
      - grid-template-areas: '"i" "n" "s"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - align-self: start
      - text-align: start
    name:
      - justify-self: start
      - padding-left: 10px
      - font-weight: bold
      - text-transform: lowercase
    state:
      - justify-self: start
      - padding-left: 10px
  state:
    - value: 'off'
      styles:
        card:
          - filter: opacity(50%)
        icon:
          - filter: grayscale(100%)

复制代码

xbox3600

fung1006 发表于 2021-4-12 11:22
人家最底下已經有提供範本，你先照範本成功做到再往後做還有你要說明一下你所謂 失敗 的具體情況，不是說 ...

抱歉~因為我貼了官方的幾個範例都顯示錯誤~後來用您分享的這個範例是可以正常顯示,感謝

fung1006

xbox3600 发表于 2021-4-12 11:44
抱歉~因為我貼了官方的幾個範例都顯示錯誤~後來用您分享的這個範例是可以正常顯示,感謝 ...

那就好了

fenytk

背景的视频怎样自动切换？根据官方文件只能显示默认的视频，groups不起作用

fung1006

fenytk 发表于 2021-4-12 14:27
背景的视频怎样自动切换？根据官方文件只能显示默认的视频，groups不起作用 ...

參考
https://github.com/Villhellm/lovelace-animated-background