特斯拉仪表盘 | 通过HomeAssistant & TeslaMate定制你的Tesla专用仪表盘

特斯拉没有仪表盘？可以没有，当然更可以有！

不仅可以有，而且可以每个人每辆车有不一样的高级定制专属仪表盘！

还可以同一个人同一辆车拥有很多个不一样的高级定制专属仪表盘！

实现本文内容首先需要自备以下材料：

• 有至少一辆Tesla或者有至少一辆Tesla的权限
• 动手能力
• TeslaMate
• HomeAssistant
• DDNS
• 以及其他需要的材料……

TeslaMate的安装可以见本站文章：《TeslaMate 通过docker安装|备份|升级|还原》，其他基础操作省略

本文两种 Tesla专用仪表盘 的效果：

先上效果图，后面再分析代码及使用的插件，由于文章比较长，点击下面1和2小标题可以直接跳转到相应代码分析部分

1.电脑、手机、车机浏览器自适应配置的效果

2.车机浏览器专用配置的效果

Tesla专用仪表盘 代码分析及所使用到的插件

1.电脑、手机、车机浏览器自适应效果

直接上整页 yaml 代码， HA普通卡片组合制作

title: MY xxxxx专用仪表盘
kiosk_mode:
  non_admin_settings:
    hide_header: true
    ignore_entity_settings: true
views:
  - theme: ios-dark-mode-blue-red
    path: xxxxx
    icon: mdi:car
    badges: []
    cards:
      - square: false
        columns: 1
        type: grid
        cards:
          - type: conditional
            conditions:
              - entity: sensor.tesla_state
                state: driving
            card:
              type: gauge
              entity: sensor.tesla_speed
              needle: true
              severity:
                green: 50
                yellow: 100
                red: 150
              min: 0
              max: 217
          - type: conditional
            conditions:
              - entity: sensor.tesla_state
                state: driving
            card:
              type: gauge
              entity: sensor.tesla_power
              min: -100
              max: 100
              needle: true
              severity:
                green: -50
                yellow: 0
                red: 50
          - type: iframe
            url: https://xxxxxxxxxx/amap-panel
            aspect_ratio: 115%
      - square: false
        columns: 1
        type: grid
        cards:
          - square: false
            columns: 2
            type: grid
            cards:
              - type: gauge
                entity: sensor.tesla_battery_level
                needle: true
                severity:
                  green: 20
                  yellow: 80
                  red: 10
                min: 0
                max: 100
              - type: gauge
                entity: sensor.tesla_rated_battery_range_z
                max: 422
                min: 0
                needle: true
                severity:
                  green: 84
                  yellow: 337
                  red: 42
          - square: false
            columns: 2
            type: grid
            cards:
              - type: gauge
                entity: sensor.tesla_outside_temp
                needle: true
                severity:
                  green: 20
                  yellow: 30
                  red: 40
                max: 50
              - type: gauge
                entity: sensor.tesla_inside_temp
                needle: true
                severity:
                  green: 20
                  yellow: 30
                  red: 40
                max: 50
          - square: false
            columns: 2
            type: grid
            cards:
              - type: entity
                entity: sensor.tesla_state
              - type: entity
                entity: proximity.home_tesla
          - square: false
            columns: 2
            type: grid
            cards:
              - hours_to_show: 24
                graph: line
                type: sensor
                entity: sensor.tesla_elevation
                detail: 1
              - hours_to_show: 120
                graph: line
                type: sensor
                entity: sensor.tesla_odometer_z
                detail: 1
          - type: conditional
            conditions:
              - entity: binary_sensor.tesla_update_available
                state: 'off'
            card:
              type: picture
              image: https://xxxxxxxxxx/xxxxx.png
              tap_action:
                action: url
                url_path: https://xxxxxxxxxx/index.html
              hold_action:
                action: none
          - type: conditional
            conditions:
              - entity: binary_sensor.tesla_charge_port_door_open
                state: 'on'
            card:
              show_name: true
              show_icon: true
              show_state: true
              type: glance
              entities:
                - entity: sensor.tesla_time_to_full_charge_min
                - entity: sensor.tesla_charge_energy_added
                - entity: sensor.tesla_charger_power
                - entity: binary_sensor.tesla_plugged_in
              state_color: true
          - type: conditional
            conditions:
              - entity: binary_sensor.tesla_update_available
                state: 'on'
            card:
              square: false
              columns: 2
              type: grid
              cards:
                - type: entity
                  entity: sensor.tesla_update_version
                - type: entity
                  entity: sensor.tesla_version
          - type: entity-filter
            entities:
              - binary_sensor.tesla_update_available
              - binary_sensor.tesla_is_climate_on
              - binary_sensor.tesla_sentry_mode
              - binary_sensor.tesla_plugged_in
              - binary_sensor.tesla_locked
              - binary_sensor.tesla_doors_open
              - binary_sensor.tesla_windows_open
              - binary_sensor.tesla_trunk_open
              - binary_sensor.tesla_frunk_open
              - binary_sensor.tesla_charge_port_door_open
            state_filter:
              - 'on'
            card:
              type: custom:badge-card
          - type: picture
            image: >-
              https://xxxxxxxxxx/xxx.gif
            tap_action:
              action: none
            hold_action:
              action: none
      - square: false
        columns: 1
        type: grid
        cards:
          - square: false
            columns: 2
            type: grid
            cards:
              - type: entity
                entity: sensor.date
                name: 日期
                icon: 'mdi:'
              - type: entity
                entity: sensor.time
                name: 时间
                icon: mdi:clock
          - type: weather-forecast
            entity: weather.vanke_14
          - type: glance
            entities:
              - entity: sensor.tpms_pressure_fl
              - entity: sensor.tpms_pressure_rl
              - entity: sensor.tpms_pressure_fr
              - entity: sensor.tpms_pressure_rr
          - square: false
            columns: 2
            type: grid
            cards:
              - hours_to_show: 120
                graph: line
                type: sensor
                entity: sensor.price_thb_icbc_2
                detail: 1
              - hours_to_show: 120
                graph: line
                type: sensor
                entity: sensor.price_jpy_icbc_2
                detail: 1
          - square: false
            columns: 1
            type: grid
            cards:
              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: online
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/111.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none
              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: charging
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/222.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none
              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: driving
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/333.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none

点击HA面板右上角三个点→编辑仪表盘 →再点击 右上角三个点→原始配置编辑器 ，粘贴进去保存即可看到效果，也可以根据效果自行增减。由于有些实体名称是我重新定义过的，所以也不能完全照搬，只要搞清楚原理即可根据自己的实体情况进行设置，原理不仅仅适用于来制作Tesla仪表盘，对于家里的其他智能设备的整合界面也是一样的

HA的基本使用本文不详述，下面分析一下本设置的几个重点，每个人想要的东西不一样，可以自行研究：

重点1：实现纯粹的面板观感

首先需要设置一个只读用户用来查看需要查看的面板，使用只读用户的另外一个好处是可以把HA中能实现控制的设备不放到外网，更安全

kiosk_mode:
  non_admin_settings:
    hide_header: true
    ignore_entity_settings: true

在 title: 和 views: 之间这一段需要在HACS中安装前端插件：kiosk-mode，目前这一段设置的是非管理员模式下隐藏顶部标题并且忽略entity_settings，另外在车机上用户设置里面选择” 始终隐藏侧边栏 “，这样做的目的就是让面板看起来非常纯粹

虽然设置后看不到侧边栏，在车机浏览器最左侧用手往右滑还是可以滑出侧边栏，如果有几个不同界面的车机仪表盘都开放给只读用户的话也可以轻松切换

重点2：使用三个一列网格卡片实现卡片位置基本固定

    cards:
      - square: false
        columns: 1
        type: grid
        cards:
          - type: gauge

在 views: 内使用三个都只有一列（columns: 1）的网格卡片（type: grid）进行定位，仔细观察层级关系或者使用可视化编辑器可以看出，其他卡片在这三列之内再进行嵌套添加（即cards: 内部还有 cards:），比如第一列想要显示哪些内容就把相应卡片放到第一列内，以此类推。

使用了条件卡片后在不同的状态卡片数量不同的时候卡片位置会出现混乱的状况，这个也是摸索了一段时间后才得出的结论。

HA的网格面板使用的是瀑布流的排列方式，如果不使用条件卡片并且显示的卡片一直都是固定的还好控制位置，一旦上面或者中间位置的卡片数量发生变化，瀑布流中的很多卡片的位置会上下左右自动变化，经常会出现在自己不想它出现的地方，并且很难调整

重点3：使用条件卡片实现某个实体在不同状态时面板显示不同的内容

这就需要首先了解Tesla的各种状态，通过对TeslaMate数据的查看，发现Tesla的sensor.tesla_state实体具有以下几种状态：

• online
• suspended
• asleep
• driving
• charging
• updating
• offline

下面这段代码即设置车速卡片仅在 driving 状态下显示，其他状态时不显示，其他状态时显示车速卡片也没有意义。

          - type: conditional
            conditions:
              - entity: sensor.tesla_state
                state: driving
            card:
              type: gauge
              entity: sensor.tesla_speed
              needle: true
              severity:
                green: 50
                yellow: 100
                red: 150
              min: 0
              max: 217

条件卡片适用于所有具有状态的实体，比如所有的二元传感器全部具有“on”和“off”两种状态，其他实体有些有很多状态有些没有状态。

条件卡片有两种确认状态的模式： “ 等于 ” 或 “ 不等于 ” ，二元传感器用等于或者不等于都是二选一的状态，像车机状态这种具有很多种状态的有时候可以使用不等于某一状态，即为其中一种状态的时候不显示其他状态都会显示

可以根据自己的需要设置，比如我的车机专用仪表盘上根据 车机在 online | charging | driving 不同的状态会显示不同的 gif 动图，实际上还可以更多，图中右下角那张图片即在 online 状态下一条鱼一直在游动，不同状态出现不同的动图没有实际的意义，但是可以让车机界面更生动活泼，纯属娱乐，举例如下：

              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: online
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/111.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none
              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: charging
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/222.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none
              - type: conditional
                conditions:
                  - entity: sensor.tesla_state
                    state: driving
                card:
                  type: picture
                  image: >-
                    https://xxxxxxxxxx/333.gif
                  tap_action:
                    action: none
                  hold_action:
                    action: none

条件卡片内可以使用很多其他类型的卡片，比如网格卡片、图片卡片、实体卡片等等

条件卡片在编辑面板的时候会全部出现，编辑完成后根据车机当时的状态显示

重点4：使用徽章插件实现让徽章出现在任意位置

HA自带的徽章全部在页面顶部，如果使用状态过滤，没有徽章时和有徽章时车机的显示位置会发生变化

通过HACS安装 badge-card 插件后，可以把徽章放在比较靠下面的地方，这样同时使用状态过滤时对整个界面的排版影响会小很多

代码中使用 badge-card 配合状态过滤把Tesla的二元传感器基本上全加进来了，过滤后只有状态为 “on” 的才会显示，状态为 “off”的不会显示

          - type: entity-filter
            entities:
              - binary_sensor.tesla_update_available
              - binary_sensor.tesla_is_climate_on
              - binary_sensor.tesla_sentry_mode
              - binary_sensor.tesla_plugged_in
              - binary_sensor.tesla_locked
              - binary_sensor.tesla_doors_open
              - binary_sensor.tesla_windows_open
              - binary_sensor.tesla_trunk_open
              - binary_sensor.tesla_frunk_open
              - binary_sensor.tesla_charge_port_door_open
            state_filter:
              - 'on'
            card:
              type: custom:badge-card

这里设置了车机有升级 、空调、烧饼、充电枪插入、 门锁、 车门、车窗、 前备箱、后备箱、充电盖状态为on的时候显示，状态为off的时候则不显示

这两次车机升级都是通过HA查看到有车机升级徽章显示再打开Tesla app进行升级，不管是在家里还是在办公室都可以进行升级操作，避免为了查看升级有没有推送而频繁打开Tesla app来唤醒车机，并且这个图标在平时也没有必要一直显示，非常好用

2.车机浏览器专用配置的效果

title: MY xxxxx 车机专用仪表盘
kiosk_mode:
  non_admin_settings:
    hide_header: true
    ignore_entity_settings: true
views:
  - theme: ios-dark-mode-blue-red
    title: Tesla
    icon: mdi:car-cruise-control
    path: xxxxx
    type: panel
    badges: []
    cards:
      - type: picture-elements
        image: https://xxxxxxxxxx/tesla-bg-v.png
        elements:
          - entity: sensor.tesla_battery_level
            prefix: ''
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(2, 2)
              left: 4.5%
              top: 8%
            type: state-icon
          - entity: sensor.tesla_battery_level
            prefix: 剩余电量：
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: Orange
              left: 15.5%
              top: 8%
            type: state-label
          - entity: sensor.tesla_rated_battery_range_z
            prefix: 剩余续航：
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 13%
              top: 15%
            type: state-label
          - entity: sensor.tesla_state
            prefix: 状态：
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: Orange
              left: 15.5%
              top: 24%
            type: state-label
          - entity: sensor.tesla_odometer_z
            prefix: 总里程：
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 13%
              top: 31%
            type: state-label
          - entity: proximity.home_tesla
            prefix: ''
            style:
              '--paper-item-icon-color': grey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 4.5%
              top: 39.5%
            type: state-icon
          - entity: proximity.home_tesla
            prefix: ''
            style:
              color: grey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 4.5%
              top: 48.5%
            type: state-label
          - entity: sensor.tesla_outside_temp
            prefix: ''
            style:
              '--paper-item-icon-color': grey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 12.5%
              top: 39.5%
            type: state-icon
          - entity: sensor.tesla_outside_temp
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              color: grey
              left: 12.5%
              top: 48.5%
            type: state-label
          - entity: sensor.tesla_inside_temp
            prefix: 内温
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              '--paper-item-icon-color': grey
              left: 21%
              top: 39.5%
            type: state-icon
          - entity: sensor.tesla_inside_temp
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              color: '#3399ff'
              left: 21%
              top: 48.5%
            type: state-label
          - entity: binary_sensor.tesla_plugged_in
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              '--paper-item-icon-color': grey
              left: 4.5%
              top: 56%
            type: state-icon
          - entity: binary_sensor.tesla_sentry_mode
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              '--paper-item-icon-color': grey
              left: 12.5%
              top: 56%
            type: state-icon
          - entity: binary_sensor.tesla_is_climate_on
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              '--paper-item-icon-color': grey
              left: 21%
              top: 56%
            type: state-icon
          - entity: sensor.tesla_time_to_full_charge_min
            prefix: null
            style:
              transform: translate(-50%, -50%) scale(1.3, 1.3)
              '--paper-item-icon-color': grey
              left: 4.5%
              top: 64%
            type: state-icon
          - entity: sensor.tesla_time_to_full_charge_min
            prefix: null
            style:
              transform: translate(0%, -50%) scale(1.5, 1.5)
              color: grey
              left: 12%
              top: 64%
            type: state-label
          - entity: sensor.tesla_charge_energy_added
            prefix: null
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              '--paper-item-icon-color': grey
              left: 4.5%
              top: 72%
            type: state-icon
          - entity: sensor.tesla_charge_energy_added
            prefix: null
            style:
              transform: translate(0%, -50%) scale(1.5, 1.5)
              color: grey
              left: 12%
              top: 72.5%
            type: state-label
          - entity: sensor.price_thb_icbc_2
            prefix: 工银泰铢：
            style:
              transform: translate(0%, -50%) scale(1.5, 1.5)
              color: grey
              left: 6%
              top: 81%
            type: state-label
          - entity: sensor.price_jpy_icbc_2
            prefix: 工银日元：
            style:
              transform: translate(0%, -50%) scale(1.5, 1.5)
              color: grey
              left: 6%
              top: 85%
            type: state-label
          - entity: sensor.tesla_version
            prefix: 固件版本：
            style:
              transform: translate(0%, -50%) scale(1.5, 1.5)
              color: grey
              left: 6%
              top: 95%
            type: state-label
          - entity: sensor.date
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(4, 4)
              color: lightgrey
              left: 40%
              top: 10%
            type: state-label
          - entity: sensor.time
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(8, 8)
              color: orange
              left: 40%
              top: 20%
            type: state-label
          - entity: weather.vanke_14
            style:
              transform: translate(0%, -50%) scale(1.8, 1.8)
              color: '#339966'
              left: 52%
              top: 16%
            type: state-label
          - entity: sensor.tesla_shift_state
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              '--paper-item-icon-color': lightgrey
              left: 35%
              top: 40%
            type: state-icon
          - entity: sensor.tesla_shift_state
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 41%
              top: 40%
            type: state-label
          - entity: binary_sensor.tesla_doors_open
            prefix: ''
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 35%
              top: 51%
            type: state-icon
          - entity: binary_sensor.tesla_doors_open
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 41%
              top: 51%
            type: state-label
          - entity: binary_sensor.tesla_windows_open
            prefix: ''
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(1.5, 2)
              color: lightgrey
              left: 35%
              top: 62%
            type: state-icon
          - entity: binary_sensor.tesla_windows_open
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: lightgrey
              left: 41%
              top: 62%
            type: state-label
          - entity: sensor.tesla_display_name
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: '#ff3333'
              left: 90%
              top: 10%
            type: state-label
          - entity: sensor.tesla_speed
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(3.5, 3.5)
              color: orange
              left: 71%
              top: 34%
            type: state-label
          - entity: sensor.tesla_power
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: orange
              left: 71%
              top: 39%
            type: state-label
          - entity: binary_sensor.tesla_locked
            prefix: ''
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(2, 2)
              left: 71%
              top: 50%
            type: state-icon
          - entity: binary_sensor.tesla_locked
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              color: lightgrey
              left: 71%
              top: 55%
            type: state-label
          - entity: sensor.tesla_elevation
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              '--paper-item-icon-color': orange
              left: 71.5%
              top: 65%
            type: state-icon
          - entity: sensor.tesla_elevation
            prefix: ''
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: orange
              left: 71.5%
              top: 69%
            type: state-label
          - entity: binary_sensor.tesla_frunk_open
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 71%
              top: 15%
            type: state-icon
          - entity: binary_sensor.tesla_frunk_open
            style:
              color: lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 71%
              top: 19%
            type: state-label
          - entity: binary_sensor.tesla_trunk_open
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 71%
              top: 80%
            type: state-icon
          - entity: binary_sensor.tesla_trunk_open
            style:
              color: lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 71%
              top: 84%
            type: state-label
          - entity: binary_sensor.tesla_charge_port_door_open
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 61%
              top: 80%
            type: state-icon
          - entity: binary_sensor.tesla_charge_port_door_open
            style:
              color: lightgrey
              transform: translate(-50%, -50%) scale(1.5, 1.5)
              left: 61%
              top: 76%
            type: state-label
          - entity: sensor.tpms_pressure_fr
            style:
              transform: translate(-50%, -50%) scale(2, 2) rotate(90deg)
              color: '#3399ff'
              left: 85%
              top: 28%
            type: state-label
          - entity: sensor.tpms_pressure_rr
            style:
              transform: translate(-50%, -50%) scale(2, 2) rotate(90deg)
              color: '#3399ff'
              left: 85%
              top: 75%
            type: state-label
          - entity: sensor.tpms_pressure_fl
            style:
              transform: translate(-50%, -50%) scale(2, 2) rotate(90deg)
              color: '#3399ff'
              left: 56.5%
              top: 28%
            type: state-label
          - entity: sensor.tpms_pressure_rl
            style:
              transform: translate(-50%, -50%) scale(2, 2) rotate(90deg)
              color: '#3399ff'
              left: 56.5%
              top: 75%
            type: state-label

这个配置使用的是“面板”（views:的type: panel）即“单一卡片”的视图类型，配合“图片元素”卡片，图片元素卡片没有可视化编辑器，只能通过修改代码+即时预览的方式进行编辑和调整

完全按照Tesla车机浏览器在车机右侧的显示尺寸比例进行设置，模拟传统车机的显示方式，把各个状态和数据结合图片进行显示

显示比例不一样时，比如在电脑和手机上显示时不会自适应，会变得很乱

只要底图做好了以后就是个简单重复的操作了，这个设置挑最开始一段的 cards: 里面的内容来说明

    cards:
      - type: picture-elements
        image: https://xxxxxxxxxx/tesla-bg.png
        elements:
          - entity: sensor.tesla_battery_level
            prefix: ''
            style:
              '--paper-item-icon-color': lightgrey
              transform: translate(-50%, -50%) scale(2, 2)
              left: 4.5%
              top: 8%
            type: state-icon
          - entity: sensor.tesla_battery_level
            prefix: 剩余电量：
            style:
              transform: translate(-50%, -50%) scale(2, 2)
              color: Orange
              left: 15.5%
              top: 8%
            type: state-label

type: picture-elements 即卡片类型为“图片元素”卡片

image: https://xxxxxxxxxx/tesla-bg.png 即所使用的背景图片，为png格式，设置好透明度，看起来跟主题背景的融合度会更协调

elements: 接下来就是在图片上放置元素，元素里面就是各种实体

entity: sensor.tesla_battery_level 需要放置的第一个实体的名称，这里我需要显示的是电池电量的图标

prefix: '' 描述，要显示实体图标的时候为空

'--paper-item-icon-color': lightgrey 实体图标状态为off时的颜色，状态为on的时候会自动变为醒目的黄色

transform: translate(-50%, -50%) scale(2, 2) 定位的点及大小比例，可自行调整，我有些定位点是使用的是（0%, -50%），由于是为车机比例打造的固定位置，所以定位点在居中定位和靠左定位影响不大

color: Orange 实体颜色

left: 15.5% 离左侧的距离

top: 8% 离顶部的距离

type: state-icon 显示类型为实体的图标

type: state-label 显示类型为实体的数值或者状态

最后几点：

所使用的主题插件： iOS Themes - Dark Mode and Light Mode，代码：theme: ios-dark-mode-blue-red

TeslaMate项目地址：https://github.com/adriankumpf/teslamate，HomeAssistant项目官网：https://www.home-assistant.io

最后放上我自己在PS里面P出来的png格式底图，可右键下载使用或自行修改，仅做参考

～～～ 让可睿思 • 飞一会儿～～～