用 React/JavaScript 给自己的特斯拉 Model 3 编写了一个高尔夫风格的仪表盘，左边的仪表是瞬时电耗，右边是速度仪表，效果如下，来看看我是如何实现的吧😂 (1/n)
为了让仪表盘能显示真实的车辆数据，并且能清晰展示 Web 开发实现过程，我会使用简化的代码做演示，思路是：安装 teslamate 提供 mqtt 接口，页面通过 mqtt webocket 获取数据。首先安装 teslamate github.com, 我是用 docker-compose 安装的，这种方式会方便以后的升级 (2/n)
下载执行 tesla_auth 命令github.com 获取 teslamate 登录需要的 token，登录完成后就可以看到 teslamate 和 Grafana，并且从 mosquitto 上就可以订阅到车辆的数据
创建一个 Web 项目，我用最原始的方式：手动创建css/js/html 等几个文件，业务逻辑在 app.js 中来实现。(4/n)
仪表盘的绘制和动画效果是使用 canvas 来实现的，主要代码都在 app.js 当中，另外我添加了测试数据 sample.json ，不需要连接自己的车，从 GitHub 下载这个项目就可以体验：github.com n/n
جاري تحميل الاقتراحات...