【再见UI界面】Floorplan平面效果图，附参考配置！

咸味土豆 · 2020 年7 月 20 日 14:42

1、Floorplan的效果

很直观，感谢泛艺大佬 @fineemb 和 @killadm大佬。

动图：

GIF

有窗户关闭和开启的效果、灯光效果、风扇效果、闪动效果(灯暖)。。。红外触发的实体是用的地板的元素，有人活动的话颜色不一样，这个可以看上面的图。

2、可玩的lovelace的UI

3、…

玩的几个也发了帖子，搬运能力有限，没能实现最早的想法（还有个dwains-theme），非常的遗憾，抄了国外大佬做的感觉真的很优秀的界面，本想慢慢的写一些教程的，实在精力和基础有限，吹过的牛逼没有实现！！

4、配置

家居效果图绘制的方法参考泛艺大佬的分享：

floorplan的动画效果，是很久以前(1年还是2年前)K大分享给我的！！！！！！

这个图我搞完感觉有半年了，当时还在B站发了个半成品(现在其实也是)，分享出来，窗户的角度和开合位置我试了几次没有搞懂，先这样：

floorplan.css.zip (6.0 KB)
(下载后删除.zip即可)

5、 Lovelace插件

插件配置参考github：

css效果见上面的附件，如果能给 @大概是顾小北吧同学一点参考，心里就很宽慰了，

6、贴一下我的配置思路和方法

我单独做了一个dashboards:

在ui-lovelace.yaml里面单独做了跳转

#Navigation导航界面
title: Home
views:
  - title: Home
    path: home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            color_type: blank-card
            styles:
              card:
                - height: 10px
          - type: button
            tap_action:
              action: navigate
              navigation_path: ../homekit-infused/
            hold_action:
              action: navigate
              navigation_path: ../homekit-infused/
            show_icon: true
            show_name: true
            name: 界面(hki)
            icon: 'mdi:tablet-cellphone'
            icon_height: 20px
          - type: button
            tap_action:
              action: navigate
              navigation_path: ../hki-settings/
            hold_action:
              action: navigate
              navigation_path: ../hki-settings/
            show_icon: true
            show_name: true
            name: 配置(hki)
            icon: 'mdi:tools'
            icon_height: 20px
          - type: button
            tap_action:
              action: navigate
              navigation_path: ../lovelace-floorplan/
            hold_action:
              action: navigate
              navigation_path: ../lovelace-floorplan/
            show_icon: true
            show_name: true
            name: 配置(Floorplan)
            icon: 'mdi:tablet-dashboard'
            icon_height: 20px
          - type: button
            tap_action:
              action: navigate
              navigation_path: ../lovelace-matt8707/
            hold_action:
              action: navigate
              navigation_path: ../lovelace-matt8707/
            show_icon: true
            show_name: true
            name: 界面(matt)
            icon: 'mdi:tablet-dashboard'
            icon_height: 20px
          - type: button
            tap_action:
              action: navigate
              navigation_path: ../lovelace-lajv/
            hold_action:
              action: navigate
              navigation_path: ../lovelace-lajv/
            show_icon: true
            show_name: true
            name: 界面(lajv)
            icon: 'mdi:tablet-dashboard'
            icon_height: 20px
#          - type: button
#            tap_action:
#              action: navigate
#              navigation_path: ../lovelace-dwainstheme/
#            hold_action:
#              action: navigate
#              navigation_path: ../lovelace-dwainstheme/
#            show_icon: true
#            show_name: true
#            name: 界面（dwainstheme）
#            icon: 'mdi:laptop-chromebook'
#            icon_height: 20px

然后在这个lovelace_floorplan.yaml里面写入了需要控制的实体ID：

直接贴了(请忽略隐私信息)：

custom_header:
  kiosk_mode: true #false true
#  exceptions:
#    - conditions:
#        user_agent: Mobile
#      config:
#        kiosk_mode: false

title: floorplan界面
views:
  - panel: true
    path: floorplan
    title: 平面控制
    cards:
      - type: 'custom:floorplan-card'
      #  title: home
        config:
          image: /local/floorplan/home/floorplan2.svg
          stylesheet: /local/floorplan/home/floorplan.css
          rules:
            - name: Sensors
              entities:
                - sensor.temperature_158d00019f912b
                - sensor.temperature_158d0001dc17c3
                - sensor.m1_temperature
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var temp = parseFloat(entity.state);
                if (temp < 15)
                  return "temp-low";
                else if (temp < 30)
                  return "temp-medium";
                else
                  return "temp-high";
                '
            - name: Sensors
              entities:
                - sensor.humidity_158d00019f912b
                - sensor.humidity_158d0001dc17c3
                - sensor.m1_humidity
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var humidity = parseFloat(entity.state);
                if (humidity < 45)
                  return "humidity-low";
                else if (humidity < 65)
                  return "humidity-medium";
                else
                  return "humidity-high";
                '
            - name: Sensors Hcho
              entities:
                - sensor.m1_hcho
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var m1_hcho = parseFloat(entity.state);
                if (m1_hcho < 0.1)
                  return "m1_hcho-low";
                else if (m1_hcho < 0.2)
                  return "m1_hcho-medium";
                else
                  return "m1_hcho-high";
                '

            - name: Sensors PM25
              entities:
                - sensor.m1_pm2_5
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var m1_pm2_5 = parseFloat(entity.state);
                if (m1_pm2_5 < 50)
                  return "m1_pm2_5-low";
                else if (m1_pm2_5 < 70)
                  return "m1_pm2_5-medium";
                else
                  return "m1_pm2_5-high";
                '

            - name: Sensors
              entities:
                - sensor.illumination_34ce008c099b
                - sensor.illumination_158d0001e02fa1
                - sensor.illumination_158d0001ad5c41
                - sensor.illumination_158d0001e521e9
                - sensor.illumination_158d0001e53c30
                - sensor.illumination_158d0001e59ac8
                - sensor.illumination_livingroom
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var illumination = parseFloat(entity.state);
                if (illumination < 100)
                  return "illumination-low";
                else if (illumination < 300)
                  return "illumination-medium";
                else
                  return "illumination-high";
                '
            - name: Sensors Pressure
              entities:
                - sensor.pressure_158d0001dc17c3
              # text_template: '${entity.state ? entity.state : "unknown"}'
              # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
              text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}${entity.attributes.unit_of_measurement}'
              class_template: '
                var pressure = parseFloat(entity.state);
                if (pressure < 1000)
                  return "pressure-low";
                else if (pressure < 1030)
                  return "pressure-medium";
                else
                  return "pressure-high";
                '

            - name: Light Sensors
              entities:
                - sensor.sonoff01_state
                - sensor.sonoff03_state
                - sensor.sonoff06_state
                - sensor.sonoff08_state
                - sensor.sonoff09_state
                - sensor.sonoff11_state

                - sensor.menting_xdd_state
                - sensor.canting_dd_state
                - sensor.keting_xdd_state
                - sensor.guodao_dd_state
                - sensor.woshi_xdd_state
                - sensor.shufang_xdd_state
                - sensor.chufang_xdd_state
                - sensor.cesuo_xdd_state
                - sensor.gateway_light_34ce008c099b_state
                - sensor.slot_0301_state
                - sensor.dianshiqiang_dd_state
                - sensor.dianshiqiang_td_state
          ## 时间日期
                - sensor.date_time
                - sensor.jieqi_animal
                - sensor.jieqi_cnday
                - sensor.jieqi_suit
                - sensor.jieqi_taboo
                - sensor.jieqi_week

          ## 天气
                - sensor.caiyun_hourly_skycon
                - sensor.caiyun_daily_skycon
                - sensor.caiyun_alert_alert
                - sensor.caiyun_daily_carwashing
                - sensor.caiyun_daily_dressing
                - sensor.caiyun_minutely_description
                - sensor.caiyun_hourly_description

          ## 电视时长
                - sensor.sony_tv_time_on

              states:
                - state: 'off'
                  class: 'sensors-off'
                - state: 'on'
                  class: 'sensors-on'
          #    state_transitions:
          #      - name: on to off
          #        from_state: 'on'
          #        to_state: 'off'
          #        duration: 10

            - name: Binary sensors motion
              entities:
                - binary_sensor.motion_sensor_158d0001ad5c41
                - binary_sensor.motion_sensor_158d0001e02fa1
                - binary_sensor.motion_sensor_158d0001e53c30
                - binary_sensor.motion_sensor_158d0001e521e9
                - binary_sensor.motion_sensor_158d0001e59ac8
                - binary_sensor.water_leak_sensor_158d00028ee572 #需定义状态
                - binary_sensor.smoke_sensor_158d0002cb5a00      #需定义状态
              states:
                - state: 'off'
                  class: 'motion-off'
                - state: 'on'
                  class: 'motion-on'
              state_transitions:
                - name: On to off
                  from_state: 'on'
                  to_state: 'off'
                  duration: 5
                - name: Off to on
                  from_state: 'off'
                  to_state: 'on'
                  duration: 3

            - name: Lights
              entities:
                - light.canting_dd
                - light.cesuo_xdd
                - light.chufang_xdd
                - light.dianshiqiang_dd
                - light.dianshiqiang_td
                - light.gateway_light_34ce008c099b
                - light.guodao_dd
                - light.keting_xdd
                - light.menting_xdd
                - light.shufang_xdd
                - light.sonoff01
                - light.sonoff02
                - light.sonoff03
                - light.sonoff11
                - light.studyroom_lamp
                - light.studyroom_led
                - light.woshi_xdd
                - switch.wol_hzm_pc
              states:
                - state: 'on'
                  class: 'light-on'
                - state: 'off'
                  class: 'light-off'
              action:
      #          domain: light   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: light.toggle

            - name: switchs
              entities:
                - switch.slot_0301 #次卧台灯
                - switch.plug_158d0001b196a8
                - switch.cesuo_reshuiqi
                - switch.dc1_num01 #餐厅DC1总控
                - switch.dc1_num01_s1
                - switch.dc1_num01_s2
                - switch.dc1_num01_s3
                - switch.dc1_num02  #主卧DC1总控
                - switch.dc1_num02_s1
                - switch.dc1_num02_s2
                - switch.dc1_num02_s3
                - switch.slot_0101
                - switch.slot_0102
                - switch.slot_0103
                - switch.slot_0104
                - switch.slot_0201
                - switch.slot_0202
                - switch.slot_0203
                - switch.slot_0204
                - switch.slot_0302
                - switch.slot_0303
                - switch.slot_0304
                - switch.slot_0401
                - switch.slot_0402
                - switch.slot_0403
                - switch.slot_0404
                - switch.xiaomi_plug_01
                - switch.xiaomi_plug_01_usb
                - switch.xiaomi_plug_02
                - switch.xiaomi_plug_02_usb
                - switch.livingroom_gateway_switch_plug
                - switch.studyroom_gateway_switch_plug
                - switch.wol_ds416p
                - switch.wol_gen8
                - switch.cesuo_reshuiqi

              states:
                - state: 'on'
                  class: 'light-on'
                - state: 'off'
                  class: 'light-off'
              action:
      #          domain: switch   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: switch.toggle


            - name: covers
              entities:
                - cover.bedroom
                - cover.livingroom
              states:
                - state: 'open'
                  class: 'cover-on'
                - state: 'closed'
                  class: 'cover-off'
              action:
      #          domain: cover   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: cover.toggle

            - name: Fans
              entities:
                - fan.sonoff06 #卧室风扇
          #      - fan.sonoff08 #厕所暖风扇
                - fan.sonoff09 #厕所排风扇
                - fan.xiaomi_air_humidifier 
                - fan.xiaomi_smart_fan
              states:
                - state: 'on'
                  class: 'fan-on'
                - state: 'off'
                  class: 'fan-off'
              action:
      #          domain: fan   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: fan.toggle           

            - name: Fans Warm
              entities:
                - fan.sonoff08 #厕所暖风扇
              states:
                - state: 'off'
                  class: 'warm-fan-off'
                - state: 'on'
                  class: 'warm-fan-on'
              action:
      #          domain: fan   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: fan.toggle 

            - name: Climate
              entities:
                - climate.livingroom_acpartner
                - climate.bedroom_acpartner
                - climate.studyroom_acpartner
          #    text_template: '${entity.attributes.current_temperature ? entity.attributes.current_temperature : "undefined"}'
              states:
                - state: 'heat'
                  class: 'climate-on'
                - state: 'cool'
                  class: 'climate-on'
                - state: 'auto'
                  class: 'climate-on'
                - state: 'ide'
                  class: 'climate-off'
                - state: 'off'
                  class: 'climate-off'
              action:
      #          domain: climate   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: climate.turn_on


            - name: Doors1
              entities:
                - binary_sensor.door_window_sensor_158d00032604d3 #厕所门
              states:
                - state: 'off'
                  class: 'door_closed'
                - state: 'on'
                  class: 'door_open'

            - name: Doors2
              entities:
                - binary_sensor.door_window_sensor_158d0002014310 #门口大门
              states:
                - state: 'off'
                  class: 'door_closed'
                - state: 'on'
                  class: 'door_open1'

          #  - name: Doors3
          #    entities:
          #      - binary_sensor.door_window_sensor_158d00026ba081 #客厅窗户
          #      - binary_sensor.door_window_sensor_158d00032605b8 #主卧窗户
          #      - binary_sensor.door_window_sensor_158d0002a16231 #次卧窗户
          #    states:
          #      - state: 'off'
          #        class: 'door_closed'
          #      - state: 'on'
          #        class: 'door_open'

            - name: Doors4
              entities:
                - binary_sensor.door_window_sensor_158d00026ba081 #客厅窗户
              states:
                - state: 'off'
                  class: 'door_closed'
                - state: 'on'
                  class: 'door_open2'

            - name: Doors5
              entities:
                - binary_sensor.door_window_sensor_158d00032605b8 #主卧窗户
              states:
                - state: 'off'
                  class: 'door_closed'
                - state: 'on'
                  class: 'door_open3'

            - name: Doors6
              entities:
                - binary_sensor.door_window_sensor_158d0002a16231 #次卧窗户
              states:
                - state: 'off'
                  class: 'door_closed'
                - state: 'on'
                  class: 'door_open4'

            - name: Cameras
              entities:
                - camera.ezviz02
                - camera.ezviz01
                - camera.ezviz03
                - camera.hikvisioncam
              states:
                - state: 'idle'    ##显示为图像
                  class: 'camera-idle'  #显示的图像以及图像的效果为CSS中的camera-idle  

            - name: Media player
              entities:
                - media_player.googlehomemini
                - media_player.chromecast
                - media_player.android_tv
                - media_player.appletv
                - media_player.shield_tv_kodi
                - media_player.xxxxin_xboxone
                - media_player.oppo_udp_203
                - media_player.xiao_mi_aiyin_xiang_6931
                - media_player.googlehomemini2
                - media_player.chromecastgroup
              states:
                - state: 'off'
                  class: 'squeezebox-off'
                - state: 'idle'
                  class: 'squeezebox-on'
                - state: 'paused'
                  class: 'squeezebox-on'
                - state: 'playing'
                  class: 'squeezebox-on'
              action:
      #          domain: media_player   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: media_player.toggle
                
            - name: TV player
              entities:
                - media_player.bedroom_sonytv_remote
                - media_player.sony_tv
              states:
                - state: 'off'
                  class: 'squeezebox-off'
                - state: 'HDMI1/MHL'
                  class: 'squeezebox-on-1'
                - state: 'HDMI2'
                  class: 'squeezebox-on-2'
                - state: 'HDMI3'
                  class: 'squeezebox-on-3'
                - state: 'HDMI4'
                  class: 'squeezebox-on-4'
              action:
      #          domain: media_player   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: media_player.toggle

            - name: Media Players
              elements:
                - media_players_button   #这是一个按钮
              action:
      #          domain: class        #点击时候的行为
                service: media_player.toggle      #点击时候的为切换
                data:
                  elements:
                    #- media_players_layer   #下面是你想控制显示还是不显示的ID
          #          - media_player.bedroom_sonytv_remote
          #          - media_player.sony_tv
          #          - media_player.googlehomemini
          #          - media_player.chromecast
          #          - media_player.android_tv
          #          - media_player.appletv
          #          - media_player.shield_tv_kodi
          #          - media_player.xxx_xboxone
          #          - media_player.oppo_udp_203
          #          - media_player.xiao_mi_aiyin_xiang_6931
          #          - media_player.googlehomemini2
          #          - media_player.chromecastgroup
                  classes:       
                    - layer-visible  ##显示出来
                    - layer-hidden   ##隐藏起来
                  default_class: layer-hidden ##css中的主题
                  ##以上效果就是，点一下media_players_button这个按钮。这个media_players_layer就显示出来，再点一下，就隐藏

            - name: switchs harmony
              entities:
                - switch.harmonylivingroomappletv
                - switch.harmonylivingroomgames
                - switch.harmonylivingroomgoogletv
                - switch.harmonylivingroomoppoplayer
                - switch.harmonylivingroomsonytv
              states:
                - state: 'on'
                  class: 'harmony-on'
                - state: 'off'
                  class: 'harmony-off'
              action:
      #          domain: switch   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: switch.toggle

            - name: Scripts
              entities:
                - script.harmony_remote_set_all_media_devices_off
              states:
                - state: 'on'
                  class: 'harmony-on'
                - state: 'off'
                  class: 'harmony-off'
              action:
      #          domain: script   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: script.turn_on 

            - name: HA Scene
              entities:
                - scene.room_music_model
                - scene.dinner_model
                - scene.lights_off
                - scene.lights_on
                - scene.livingroom_media_model
                - scene.night_model
                - scene.sleep_model
                - scene.wakeup_model
              states:
                - state: 'scening'
                  class: 'scene-on'
              action:
      #          domain: scene   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: scene.turn_on 

            - name: HA Scene input_boolean
              entities:
                - input_boolean.scene1
                - input_boolean.scene2
                - input_boolean.scene3
                - input_boolean.scene4
                - input_boolean.scene5
                - input_boolean.scene6
                - input_boolean.scene7
                - input_boolean.scene8
              states:
                - state: 'on'
                  class: 'scene-input-boolean-on'
                - state: 'off'
                  class: 'scene-input-boolean-off'
              action:
      #          domain: input_boolean   # This optional parameter allows you to use other services such as homeassistant.toggle like here.
                service: input_boolean.toggle

7、体验

这种控制效果其实还可以，风扇转动，闪动，以及红外触发都还算流畅，不像最早的版本风扇转了、灯开了、平面图还没反应过来。

需要svg效果图的可以留言，因为本身是客制化的，画图其实也需要一些心思，我就不展开了，有心思的话先体验一下画图吧，怎么用漏洞导出(其实还可以导出3D的，我操作失误浪费了官方送的免费的一次机会)见F大佬的说明。

houhd · 2020 年7 月 21 日 00:08

要说论前端页面风骚程度，两边论坛，如果土豆哥说第二，应该没人敢说第一。

咸味土豆 · 2020 年7 月 21 日 00:12

我是搬运工

隔壁论坛我家里网老是打不开啊，传图很费劲儿。

fineemb · 2020 年7 月 21 日 02:15

分享一个门窗开关的动画

/* 门窗感应器,以及动画. 单开门有四种情况,以及双开门 */
#dmright.off-door0{
  animation-duration: 2s;
  animation-name: rotateReset90;
  transform: rotate(90deg) !important;
  transform-origin: 0 0 0 !important;
  transform-box: fill-box !important;
}
#dmright.on-door0{
  animation-duration: 2s;
  animation-name: rotate90;
  transform: rotate(0deg) !important;
  transform-origin: 0 0 0 !important;
  transform-box: fill-box !important;
}
#dmleft.off-door0{
  animation-duration: 2s;
  animation-name: rotateReset-90;
  transform: rotate(-90deg) !important;
  transform-origin: 0 100% 0 !important;
  transform-box: fill-box !important;
}
#dmleft.on-door0{
  animation-duration: 2s;
  animation-name: rotate-90;
  transform: rotate(0deg) !important;
  transform-origin: 0 100% 0 !important;
  transform-box: fill-box !important;
}
.off-door1{
  animation-duration: 2s;
  animation-name: rotateReset-90;
  transform: rotate(-90deg) !important;
  transform-origin: 100% 100% 0 !important;
  transform-box: fill-box !important;
}
.on-door1{
  animation-duration: 2s;
  animation-name: rotate-90;
  transform: rotate(0deg) !important;
  transform-origin: 100% 100% 0 !important;
  transform-box: fill-box !important;
}
.off-door2{
  animation-duration: 2s;
  animation-name: rotateReset-90;
  transform: rotate(-90deg) !important;
  transform-origin: 100% 0 0 !important;
  transform-box: fill-box !important;
}
.on-door2{
  animation-duration: 2s;
  animation-name: rotate-90;
  transform: rotate(0deg) !important;
  transform-origin: 100% 0 0 !important;
  transform-box: fill-box !important;
}
.off-door3{
  animation-duration: 2s;
  animation-name: rotateReset90;
  transform: rotate(90deg) !important;
  transform-origin: 100% 0 0 !important;
  transform-box: fill-box !important;
}
.on-door3{
  animation-duration: 2s;
  animation-name: rotate90;
  transform: rotate(0deg) !important;
  transform-origin: 100% 0 0 !important;
  transform-box: fill-box !important;
}
.off-door4{
  animation-duration: 2s;
  animation-name: rotateReset90;
  transform: rotate(90deg) !important;
  transform-origin: 100% 0 100% !important;
  transform-box: fill-box !important;
}
.on-door4{
  animation-duration: 2s;
  animation-name: rotate90;
  transform: rotate(0deg) !important;
  transform-origin: 100% 0 100% !important;
  transform-box: fill-box !important;
}
@keyframes rotateReset90 {
  0% {transform: none}
  100% {transform: rotate(90deg)}
}
@keyframes rotate90 {
  0% {transform: rotate(90deg)}
  100% {transform: none}
}
@keyframes rotateReset-90 {
  0% {transform: none}
  100% {transform: rotate(-90deg)}
}
@keyframes rotate-90 {
  0% {transform: rotate(-90deg)}
  100% {transform: none}
}
/* 窗户 */
.off-window{
  animation-duration: 2s;
  animation-name: window-translate-off;
  transform: translate(0,0) !important;
  transform-box: fill-box !important;
}
.on-window{
  animation-duration: 2s;
  animation-name: window-translate-on;
  transform: translate(0,100%) !important;
  transform-box: fill-box !important;
}
@keyframes window-translate-off {
    0% {transform: translate(0,100%)}
    100% {transform: translate(0,0)}
}
@keyframes window-translate-on {
    0% {transform: translate(0,0)}
    100% {transform: translate(0,100%)}
}

咸味土豆 · 2020 年7 月 21 日 02:42

炒鸡感谢，zsbd

ghostist · 2020 年7 月 21 日 06:54

我只考虑了手机平板横屏效果就不行了

咸味土豆 · 2020 年7 月 21 日 10:53

拉大，然后转一转呗，专门做个平板的就可以了啊

nichwang · 2020 年7 月 21 日 14:36

土豆哥现在专注主题恒久远

ghostist · 2020 年7 月 22 日 00:40

有没有什么方法让HA识别到当前登录的客户端是手机还是平板？

咸味土豆 · 2020 年7 月 22 日 02:10

custom header就可以的吧，我没有细看。

咸味土豆 · 2020 年7 月 22 日 02:11

实在搞不动别的，主要这个不花钱…

iciness · 2020 年7 月 23 日 01:38

大佬带带我

咸味土豆 · 2020 年7 月 23 日 12:01

涵大佬，这个没难度行么，纯体力活

wangrenlu2003 · 2020 年7 月 24 日 08:34

UI大佬啊。。。

mabel198866 · 2020 年8 月 10 日 01:09

两层房子UI很挤呀，我想问问能不能一个HA跑两个floorplan？

mabel198866 · 2020 年8 月 10 日 01:59

QQ截图20200810095849 这边这些内容也是floorplan做出来的吗？

咸味土豆 · 2020 年8 月 10 日 20:26

嗯，这个简单，就是几个不同颜色的方块叠加，

这几个方块我花了不少心思，喜欢的话分享给你，主要就是图层：按钮.rar (14.8 KB)

咸味土豆 · 2020 年8 月 10 日 20:40

跑几个都可以的，看你怎么设计，floorplan的lovelace版本就是个界面插件，所以很灵活，比如你可以做两个平面，然后通过左右滑动切换,或者通过图标动作用tap_action+navigation_path跳转，类似这种：

          - type: icon
            icon: mdi:information-outline
            title: 测试
            tap_action: 
              action: navigate
              navigation_path: /ui-lovelace/view2

mabel198866 · 2020 年8 月 13 日 06:59

好的好的，感谢大佬，自己回去研究一下

447043569 · 2020 年8 月 31 日 01:48

厉害了大佬