一个纯 HTML 单文件的车机仪表盘卡片,接入比亚迪车机 UiPlus 桥接接口,实时显示车速、续航、胎压,带星空穿越动效。
效果展示
核心画面:
- 顶部居中:当前日期 + 大号时间
- 中央:270° 环形速度表盘,白→橙→红三段渐变
- 底部缺口处:60° 续航进度弧(电+油总续航)
- 最下方:四轮胎压田字格(FL/FR/RL/RR)
- 全屏按钮:右下角,支持车机级全屏切换
功能特性
视觉设计
- 270° 表盘:0 在左下 225°,最大 200km/h 在右下 315°,经过顶部
- 颜色渐变:白(0-60)→ 橙(60-120)→ 红(120+),平滑过渡
- 指示线:径向贯穿线,随车速旋转
- 刻度:带数字刻度线,内外等长穿过圆环
- 续航弧:底部缺口处 60° 小圆弧,从左往右填充;<200km 变红,≥200km 深绿
- 胎压:正常 220-280kPa 深绿,异常深红
星空背景
- 实现穿越星丛透视效果
- 星星从中心消失点向外飞掠,近快远慢、近大远小
- 中心半径内不显示星星
- 低速有基础拖尾,高速拖尾加长
- 普通模式 120 颗星,全屏时 200 颗
- 全屏时星点变淡橙色
全屏模式
- 全屏时隐藏状态栏/导航栏
- 全屏时隐藏胎压栏、续航标签,表盘放大
- 全屏时保留时间显示,隐藏日期
发表回复