关于lovelace如何实现9宫格样式的图片控制卡。

ptlzx

类似这种效果

用以下代码可以实现点击图片控制具体灯具，开关可以显示各自的图片：

          - type: picture-entity
            entity: light.yeelight_color2_7c49ebacc499
            image: /local/IMG_1044.jpg
            aspect_ratio: 1:1
            state_image:
              on: /local/IMG_1044.jpg
              off: /local/IMG_1044 2.jpg
            tap_action:
              action: toggle


现在想实现上面的效果用九宫格方式显示，三列排布但是不成功，问题出在哪？求指点，谢谢！


      - type: picture-glance
        action: toggle
        columns: 3
        entities:
          - type: picture-entity
            entity: light.yeelight_color2_7c49ebacc499
            image: /local/IMG_1044.jpg
            aspect_ratio: 1:1
            state_image:
              on: /local/IMG_1044.jpg
              off: /local/IMG_1044 2.jpg
            tap_action:
              action: toggle
          - type: picture-entity
            entity: light.yeelight_color2_7c49ebacc499
            image: /local/IMG_1044.jpg
            aspect_ratio: 1:1
            state_image:
              on: /local/IMG_1044.jpg
              off: /local/IMG_1044 2.jpg
            tap_action:
              action: toggle
          - type: picture-entity
            entity: light.yeelight_color2_7c49ebacc499
            image: /local/IMG_1044.jpg
            aspect_ratio: 1:1
            state_image:
              on: /local/IMG_1044.jpg
              off: /local/IMG_1044 2.jpg
            tap_action:
              action: toggle

新生活

学习学习，希望大神来帮忙

mitu

使用horizontal_Stack和vertical-stack可以实现。

vertical-stack里嵌套三个horizontal_Stack，表示三行，每个horizontal_Stack里放三个picture-entity，表示三列。

ptlzx

mitu 发表于 2019-2-3 22:53
使用horizontal_Stack和vertical-stack可以实现。

vertical-stack里嵌套三个horizontal_Stack，表示三行， ...

搞定了，谢谢啊。

wangyiyuan

学习了 很漂亮

lijianivy

这个还是很漂亮的

新新人类

ptlzx 发表于 2019-2-4 10:14
搞定了，谢谢啊。

教程能分享下吗，谢谢

ptlzx

新新人类 发表于 2019-4-15 00:54
教程能分享下吗，谢谢

      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: switch.wall_switch_158d0001f57666
                image: /local/kz/1030.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1030.jpeg
                  off: /local/kz/1030 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: switch.sonoff_4
                image: /local/kz/1032.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1032.jpeg
                  off: /local/kz/1032 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: switch.sonoff_8
                image: /local/kz/1034.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1034.jpeg
                  off: /local/kz/1034 2.jpeg
                tap_action:
                  action: toggle
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: switch.sonoff_5
                image: /local/kz/1036.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1036.jpeg
                  off: /local/kz/1036 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: light.yeelight_lights
                image: /local/kz/1035.jpeg
                name: 书房廊灯
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1035.jpeg
                  off: /local/kz/1035 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: switch.sonoff_2
                image: /local/kz/1037.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1037.jpeg
                  off: /local/kz/1037 2.jpeg
                tap_action:
                  action: toggle
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: switch.wall_switch_left_158d0002c03055
                image: /local/kz/1038.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1038.jpeg
                  off: /local/kz/1038 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: switch.wall_switch_right_158d0002c03055
                image: /local/kz/1045.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1045.jpeg
                  off: /local/kz/1045 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: light.xiaomi_philips_smart_led_ball
                name: 过道灯
                image: /local/kz/1039.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1039.jpeg
                  off: /local/kz/1039 2.jpeg
                tap_action:
                  action: toggle
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: light.yeelight_color2_7c49ebacc499
                name: 主卧灯
                image: /local/kz/1044.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1044.jpeg
                  off: /local/kz/1044 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: light.gateway_light_7811dca47fae
                image: /local/kz/1040.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1040.jpeg
                  off: /local/kz/1040 2.jpeg
                tap_action:
                  action: toggle
              - type: picture-entity
                entity: switch.sonoff_1
                image: /local/kz/1042.jpeg
                aspect_ratio: 1:1
                state_image:
                  on: /local/kz/1042.jpeg
                  off: /local/kz/1042 2.jpeg
                tap_action:
                  action: toggle