老毕教程之：汽车卡片

flashbj

各位大佬们，老毕我又又又来了，这次带来的是一个汽车的卡片，我个人认为还比较好看，哈哈！


首先看一下我之前的卡片吧（如下图），这个卡片有个一直解决不了的问题，就是状态发生变化时，文字颜色不会改变，比如：车门不管是打开还是关闭，文字都是白色，不够醒目。尝试多种方法都没能解决。


为了解决以上的问题，我重构了卡片，先请各位大佬看一下成品的视频吧。


这个界面使用的卡片为：Vehicle Status Card，可以直接从HACS中下载，这个卡片还自带了地图功能，如果各位大佬吧汽车接入后，能出现设备追踪器，就可以吧车辆定为添加到地图中。
下面贴几张截图吧

这个卡片解决了我的诉求，当车门、轮胎等状态发生变化时，图标的颜色也会发生变化，重点说一下，四个轮胎中只要有一个胎压异常，那首页上的车辆轮胎的图标就会变颜色，状态同时变为异常；车辆诊断也是同理，只要有一个系统是异常，那么车辆诊断的图标就会变色，状态也会随之变为异常。通过以上的颜色和状态变化，就可以起到醒目提醒的作用。

这个卡片我觉的挺美观的，各位大佬觉得呢

具体卡片的代码我放在下方，有需要的大佬可以自取

type: custom:vehicle-status-card
name: 长安汽车
button_card:
  - button:
      primary: 刷新
      secondary:
        "0":
          entity: ""
          attribute: ""
          state_template: ""
        state_template: 状态刷新
      icon: mdi:refresh
      notify: ""
      color: green
    button_type: action
    hide_button: false
    card_type: default
    default_card: []
    custom_card: []
    button_action:
      entity: button.xin_xi_shua_xin_an_niu
      tap_action:
        action: perform-action
        perform_action: button.press
        target:
          entity_id: button.xin_xi_shua_xin_an_niu
  - button:
      primary: 车锁
      secondary:
        "0":
          entity: ""
          attribute: ""
          state_template: ""
        entity: sensor.jia_shi_yuan_che_men_suo
      icon: car
      notify: ""
      color: |-
        {% if is_state('sensor.jia_shi_yuan_che_men_suo', '上锁') %}
          green
        {% else %}
          #ffa500
        {% endif %}
      picture_template: |-
        {% if is_state('sensor.jia_shi_yuan_che_men_suo', '上锁') %}
          mdi:lock
        {% elif is_state('sensor.jia_shi_yuan_che_men_suo', '解锁') %}
          mdi:lock-open
        {% endif %}
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      primary: 发动机
      icon: mdi:power
      secondary:
        entity: sensor.fa_dong_ji_qi_dong_zhuang_tai
      notify: ""
      state_color: false
      color: |-
        {% if is_state('sensor.fa_dong_ji_qi_dong_zhuang_tai', '启动') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      primary: 天窗
      icon: mdi:car-select
      secondary:
        entity: sensor.tian_chuang_zhuang_tai
      notify: ""
      color: |-
        {% if is_state('sensor.tian_chuang_zhuang_tai', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      icon: ios:car-side-front-open-crop-fill
      secondary:
        entity: sensor.yin_qing_gai_zhuang_tai
      color: |
        {% if is_state('sensor.yin_qing_gai_zhuang_tai', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
      primary: 引擎盖
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      primary: 后备箱
      icon: ios:car-side-rear-open-crop-fill
      secondary:
        entity: sensor.hou_bei_xiang_zhuang_tai
      color: |-
        {% if is_state('sensor.hou_bei_xiang_zhuang_tai', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      secondary:
        entity: sensor.zuo_qian_che_men
      state_color: false
      primary: 左前门
      icon: mdi:car-door
      color: |-
        {% if is_state('sensor.zuo_qian_che_men', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
      picture_template: >-
        {{ iif (is_state('sensor.zuo_qian_che_men', '关闭'), 'mdi:car-door-lock',
        'mdi:car-door-lock-open') }}
    button_type: action
    hide_button: false
    card_type: default
    default_card: []
    custom_card:
      - type: entities
        title: Custom Card
        entities: []
        state_color: false
        show_header_toggle: true
    button_action:
      entity: sensor.zuo_qian_che_men
      tap_action:
        action: none
    tire_card:
      title: ""
      horizontal: false
      hide_rotation_button: false
      image_size: 100
      value_size: 100
      top: 50
      left: 50
      front_left:
        name: 左前轮胎
        color: ""
      front_right:
        attribute: ""
        name: 右前轮胎
        color: ""
      rear_left:
        attribute: ""
        name: 左后轮胎
        color: ""
      rear_right:
        attribute: ""
        name: 右后轮胎
        color: ""
  - button:
      secondary:
        entity: sensor.you_qian_che_men
      state_color: false
      notify_icon: >-
        {{ iif (is_state('sensor.you_qian_che_men', '关闭'), 'mdi:lock',
        'mdi:lock-open') }}
      notify_color: >-
        {{ iif (is_state('sensor.you_qian_che_men', '关闭'),
        'var(--state-person-home-color)', 'var(--state-person-active-color)') }}
      primary: 右前门
      icon: mdi:car-door
      picture_template: >-
        {{ iif (is_state('sensor.you_qian_che_men', '关闭'), 'mdi:car-door-lock',
        'mdi:car-door-lock-open') }}
      color: |-
        {% if is_state('sensor.you_qian_che_men', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
    button_type: action
    hide_button: false
    card_type: custom
    button_action:
      tap_action:
        action: none
  - button:
      secondary:
        entity: sensor.zuo_hou_che_men
      state_color: false
      color: |-
        {% if is_state('sensor.zuo_hou_che_men', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
      picture_template: >-
        {{ iif (is_state('sensor.zuo_hou_che_men', '关闭'), 'mdi:car-door-lock',
        'mdi:car-door-lock-open') }}
      primary: 左后门
    button_type: action
    hide_button: false
    card_type: default
    button_action: {}
  - button:
      secondary:
        entity: sensor.you_hou_che_men
      state_color: false
      color: |-
        {% if is_state('sensor.you_hou_che_men', '打开') %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
      picture_template: >-
        {{ iif (is_state('sensor.you_hou_che_men', '关闭'), 'mdi:car-door-lock',
        'mdi:car-door-lock-open') }}
      primary: 右后门
    button_type: action
    hide_button: false
    card_type: default
    button_action: {}
  - button:
      secondary:
        "0":
          entity: ""
          attribute: ""
          state_template: ""
        state_template: |-
          {% set tires = [
                      states('sensor.zuo_qian_lun_tai_ya_zhuang_tai'),
                      states('sensor.you_qian_lun_tai_ya_zhuang_tai'), 
                      states('sensor.zuo_hou_lun_tai_ya_zhuang_tai'),
                      states('sensor.you_hou_lun_tai_ya_zhuang_tai')
                    ] %}
                    {% if '异常' in tires %}异常{% else %}正常{% endif %}
      icon: mdi:tire
      notify: ""
      color: |-
        {% set tires = [
            states('sensor.zuo_qian_lun_tai_ya_zhuang_tai'),
            states('sensor.you_qian_lun_tai_ya_zhuang_tai'), 
            states('sensor.zuo_hou_lun_tai_ya_zhuang_tai'),
            states('sensor.you_hou_lun_tai_ya_zhuang_tai')
            ] %}
        {% if '异常' in tires %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
      primary: 车辆轮胎
    button_type: default
    hide_button: false
    card_type: tire
    default_card: []
    custom_card: []
    button_action:
      entity: ""
    tire_card:
      title: ""
      horizontal: false
      hide_rotation_button: false
      value_size: 100
      top: 50
      front_left:
        entity: sensor.zuo_qian_lun_tai_ya_zhuang_tai
        name: 左前轮胎
        color: "{% if is_state('sensor.zuo_qian_lun_tai_ya_zhuang_tai', '异常') %}\n  \t#ffa500\n{% else %}\n    green\n{% endif %}\n"
      front_right:
        entity: sensor.you_qian_lun_tai_ya_zhuang_tai
        attribute: ""
        name: 右前轮胎
        color: "{% if is_state('sensor.you_qian_lun_tai_ya_zhuang_tai', '异常') %}\n  \t#ffa500\n{% else %}\n    green\n{% endif %}"
      rear_left:
        entity: sensor.zuo_hou_lun_tai_ya_zhuang_tai
        attribute: ""
        name: 左后轮胎
        color: "{% if is_state('sensor.zuo_hou_lun_tai_ya_zhuang_tai', '异常') %}\n  \t#ffa500\n{% else %}\n    green\n{% endif %}"
      rear_right:
        entity: sensor.you_hou_lun_tai_ya_zhuang_tai
        attribute: ""
        name: 右后轮胎
        color: "{% if is_state('sensor.you_hou_lun_tai_ya_zhuang_tai', '异常') %}\n  \t#ffa500\n{% else %}\n    green\n{% endif %}"
      image_size: 80
      left: 70
      background: /local/CS55/车顶.png
  - button:
      primary: 车辆诊断
      secondary:
        "0":
          entity: ""
          attribute: ""
          state_template: ""
        state_template: |-
          {% set tires = [
                      states('sensor.espxi_tong'),
                      states('sensor.absxi_tong'), 
                      states('sensor.fa_dong_ji'),
                      states('sensor.bian_su_xiang'),
                      states('sensor.dao_che_lei_da'),
                      states('sensor.che_shen_wen_ding'),
                      states('sensor.zhu_li_zhuan_xiang'),
                      states('sensor.an_quan_qi_nang'),
                      states('sensor.leng_que_xi_tong'),
                      states('sensor.fa_dong_ji_leng_que_ye')
                    ] %}
                    {% if '异常' in tires %}异常{% else %}正常{% endif %}
      icon: mdi:clipboard-pulse
      notify: ""
      color: |-
        {% set tires = [
            states('sensor.espxi_tong'),
                    states('sensor.absxi_tong'), 
                    states('sensor.fa_dong_ji'),
                    states('sensor.bian_su_xiang'),
                    states('sensor.dao_che_lei_da'),
                    states('sensor.che_shen_wen_ding'),
                    states('sensor.zhu_li_zhuan_xiang'),
                    states('sensor.an_quan_qi_nang'),
                    states('sensor.leng_que_xi_tong'),
                    states('sensor.fa_dong_ji_leng_que_ye'),
            ] %}
        {% if '异常' in tires %}
          #ffa500
        {% else %}
          #d3d3d3
        {% endif %}
    hide_button: false
    card_type: custom
    default_card: []
    custom_card:
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.espxi_tong
            name: ESP系统
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.absxi_tong
            name: ABS系统
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.fa_dong_ji
            name: 发动机
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.bian_su_xiang
            name: 发动机
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.dao_che_lei_da
            name: 倒车雷达
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.che_shen_wen_ding
            name: 车身稳定
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.zhu_li_zhuan_xiang
            name: 助力转向
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.an_quan_qi_nang
            name: 安全气囊
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
      - type: horizontal-stack
        cards:
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.leng_que_xi_tong
            name: 冷却系统
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
          - show_name: true
            show_icon: true
            type: custom:button-card
            entity: sensor.fa_dong_ji_leng_que_ye
            name: 发动机冷却液
            show_state: true
            tap_action:
              action: none
            hold_action:
              action: none
            state:
              - operator: template
                value: "[[[ return entity.state === "正常" ]]]"
                color: green
              - operator: template
                value: "[[[ return entity.state === "异常" ]]]"
                color: "#ffa500"
            styles:
              icon:
                - width: 30px
              name:
                - font-size: 12px
              state:
                - font-size: 12px
              img_cell:
                - width: 45px
                - height: 45px
                - border-radius: 50%
                - background: "#363636"
    button_action:
      entity: ""
    button_type: default
images:
  - url: /local/CS55/车头.png
    title: /local/CS55/车头.png
  - url: /local/CS55/侧面.png
    title: /local/CS55/侧面.png
  - url: /local/CS55/车尾.png
    title: /local/CS55/车尾.png
layout_config:
  hide_card_name: false
  section_order:
    - indicators
    - range_info
    - images
    - buttons
  theme_config:
    theme: ios-dark-mode-blue-red
    mode: auto
  button_grid:
    columns: 2
    swipe: true
    button_layout: horizontal
    transparent: false
    hide_notify_badge: false
    rows: 3
mini_map:
  device_tracker: device_tracker.lao_bi_shou_ji
  enable_popup: true
indicator_rows:
  - row_items:
      - entity: input_text.che_liang_xin_xi_geng_xin_shi_jian
        type: entity
        show_name: false
        show_state: true
        show_icon: false
        tap_action:
          action: more-info
      - type: entity
        show_name: false
        show_state: true
        show_icon: false
        show_entity_picture: false
        include_state_template: false
        tap_action:
          action: more-info
        entity: sensor.che_liang_ding_wei
  - row_items:
      - type: entity
        show_name: true
        show_state: true
        show_icon: false
        show_entity_picture: false
        include_state_template: false
        tap_action:
          action: more-info
        entity: sensor.dian_huo_xing_shi_li_cheng
        name: 行驶里程
      - entity: sensor.ran_you_li_cheng
        type: entity
        show_name: true
        show_state: true
        show_icon: false
        tap_action:
          action: none
        color: accent
        show_entity_picture: false
        ignore_global: false
        column_reverse: false
        include_state_template: false
        row_reverse: false
        name: 油量里程
      - type: entity
        show_name: true
        show_state: true
        show_icon: false
        show_entity_picture: false
        include_state_template: false
        tap_action:
          action: more-info
        entity: sensor.zong_li_cheng
        column_reverse: false
        row_reverse: false
        name: 总计里程
      - type: entity
        show_name: true
        show_state: true
        show_icon: false
        show_entity_picture: false
        include_state_template: false
        tap_action:
          action: none
        entity: sensor.dang_qian_che_su
range_info:
  - energy_level:
      entity: sensor.sheng_yu_you_liang
      tap_action:
        action: none
      value_position: inside
      value_alignment: end
      max_value: 58
    range_level:
      entity: sensor.sheng_yu_you_liang
      value_position: outside
      attribute: friendly_name
    charging_entity: ""
    progress_color: "#9bc1f8"
    color_blocks: false
    bar_height: 20
    color_thresholds:
      - value: 20
        color: "#0f64e1"
      - value: 30
        color: "#2879f1"
      - value: 40
        color: "#4e91f3"
      - value: 50
        color: "#75a9f6"
      - value: 60
        color: "#9bc1f8"

复制代码

lucienyida

大佬回归了。
可惜我这车虽然有车联网，但是数据加密弄不出来

flashbj

lucienyida 发表于 2025-10-9 17:11
大佬回归了。
可惜我这车虽然有车联网，但是数据加密弄不出来

有没有小程序，如果有的话，抓小程序的包看看，我的app也是加密的，我抓的小程序的包

lucienyida

flashbj 发表于 2025-10-9 17:13
有没有小程序，如果有的话，抓小程序的包看看，我的app也是加密的，我抓的小程序的包
...

一汽大众的油车，没有小程序。只有app

flashbj

lucienyida 发表于 2025-10-9 17:17
一汽大众的油车，没有小程序。只有app

那没办法了

lucienyida

flashbj 发表于 2025-10-9 17:24
那没办法了

论坛有个一汽大众的电车nodered流程，油车居然用不了

隔壁的王叔叔

lucienyida 发表于 2025-10-9 17:17
一汽大众的油车，没有小程序。只有app

反编译，看看，先脱壳。。。。。。。。。。我也编不下去了

binghun9806

代码中下面这部分有点小问题，直接导入会报错：

            
state:
   - operator: template
     value: "[[[ return entity.state === "正常" ]]]"
     color: green
   - operator: template
      value: "[[[ return entity.state === "异常" ]]]"
      color: "#ffa500"


将正常和异常的双引号改为单引号就好了：

            
state:
  - operator: template
    value: "[[[ return entity.state === '正常' ]]]"
    color: green
  - operator: template
     value: "[[[ return entity.state === '异常' ]]]"
     color: "#ffa500"