企业官网建设流程全解析

• 科研
• 自动驾驶
• 物理引擎

在 Webots 的汽车（Automobile）模块中，Vehicle robot window（汽车机器人窗口）为车辆仿真提供了专用的人机交互界面，而其中第一个标签页Overview正是快速掌握车辆整体状态的入口。本文基于 overview-tab.md 文档，结合仓库内汽车机器人窗口的 C/JavaScript 实现源码，完整讲解 Overview 标签的界面构成、静态/动态信息含义、三种驾驶控制模式下的差异，以及从 Webots C API 到前端 Canvas 绘制的完整数据链路，帮助你理解并能自如使用与定制这一车辆状态总览界面。

从汽车机器人窗口说起

Webots 为汽车仿真专门定制了一个机器人窗口，文档 robot-window.md 指出：该窗口默认分配给所有继承自CarPROTO 的节点。在 Car.proto 中可以看到window字段默认值为"automobile"，正是这个字段将车辆节点与汽车专用机器人窗口绑定在一起。

该窗口的实现位于 projects/vehicles/plugins/robot_windows/automobile，由四部分协同工作：

• automobile.c：C 侧入口库，负责采集车辆数据并通过 WWI（Webots Window Interface）文本消息发送给前端；
• automobile.js：前端主逻辑，负责标签页管理、消息分发与命令回传；
• overview_widget.js：Overview 标签的专用组件，完成 Canvas 绘制与标签刷新；
• automobile.html/automobile.css：窗口的 DOM 结构与样式。

Overview 标签的定位：一屏看懂车辆状态

按照原文档的描述，在汽车机器人窗口中，每个传感器/执行器都有常规标签页，而窗口的第一个标签页就是 Overview，它给出车辆状态的快速总览。在automobile.js的configure()函数中可以看到窗口标签的注册顺序：

1. Overview（由 automobile.js 首先创建）；
2. 车辆专属的动态信息标签：Speed、Steering、Encoders、Brake、Throttle、RPM（automobile.js）；
3. 之后才是传感器/执行器常规标签，由configureDevices()根据车辆sensors插槽中添加的设备动态生成。

窗口初始化完成时，代码会主动调用menuTabCallback('overview')并openMenu()（automobile.js），即启动后默认聚焦 Overview 标签。从上图截图可以看到，左侧深灰色导航栏中Overview高亮，其下方依次是Speed、Steering、Encoders、Brake、Throttle、RPM，再往下则是摄像头、GPS、陀螺仪、激光雷达等传感器/执行器标签，最后是Settings，与上述注册顺序完全一致。

简单来说：Overview 看整体、车辆专属标签看细节、传感器标签看设备——这正是原文档所描述的信息分层。

界面布局：一屏之内，信息分四区

Overview 页面在 automobile.html 中定义了完整的 DOM 结构，核心是一个<canvas>（overview-canvas）用于绘制车辆俯视示意图，以及一组覆盖其上的绝对定位标签（overview-labels）。结合样式表 automobile.css，这些标签按颜色可分为四类信息区：

1. 全局状态区（红色，red-label）

位于页面顶部中央，字体 16px：

• Speed：车辆当前速度，单位km/h；
• Steering angle：主转向角，单位rad（4 位小数）。

2. 车辆几何参数区（绿色，green-label）

静态几何尺寸，单位m（3 位小数）：

• front-track / rear-track：前轴轮距与后轴轮距；
• wheelbase：轴距，使用rotated-label样式（旋转 90°）沿纵轴方向标注；
• Radius：四个车轮的轮径，前轮显示front-wheel-radius、后轮显示rear-wheel-radius。

3. 动力系统区（黑色，black-long-label）

• Engine type：发动机类型（combustion / electric / 混合动力等）；
• Transmission type：驱动方式（traction / propulsion / four by four 等）；
• RPM：发动机转速（仅在扭矩控制模式下显示）；
• Engaged gear：当前挂入挡位 / 总挡位数；
• Target Speed：巡航目标速度，单位km/h（非扭矩模式下显示）。

4. 车轮状态区（黑色，black-label）

四个车轮各有独立标签，每个包含：

• Speed：车轮角速度，单位rad/s（1 位小数）；
• Encoder：车轮编码器累计转角，单位rad（指数记数法，如1.6e+2）；
• Angle：前轮的转向角（仅前两个车轮有此标签），单位rad。

从上图截图可以看到一个真实运行示例：速度46.66 km/h、主转向角-0.0737 rad、轮距约1.628 m、轴距约2.995 m、轮径约0.374 m、发动机为combustion、驱动方式为traction、当前RPM 4125.000、挂入 1 挡（共 6 挡），四个车轮的转速、编码器值分别显示在各自车轮旁。这些数值由示例车辆 PROTO 的实际参数（如 Car.proto 中的trackFront=1.7、trackRear=1.7、wheelbase=4.0）结合实时仿真计算得出，若车辆 PROTO 覆写了这些字段，Overview 中的对应几何标签会随之更新。

静态几何与动力配置：configure-vehicle 消息

Overview 中展示的车辆静态信息（几何尺寸、发动机类型、驱动方式、挡位数）并非在 HTML 中写死，而是在窗口初始化时由 C 侧一次性下发。在 automobile.c 的configure_automobile_robot_window()中，C 库通过wbu_car_get_track_front()、wbu_car_get_track_rear()、wbu_car_get_wheelbase()、wbu_car_get_front_wheel_radius()、wbu_car_get_rear_wheel_radius()、wbu_driver_get_gear_number()、wbu_car_get_type()、wbu_car_get_engine_type()等 Car/Driver 库 API 采集数据，拼装成一条configure-vehicle消息发送给前端：

configure-vehicle { "front-track": ..., "rear-track": ..., "wheelbase": ..., "front-wheel-radius": ..., "rear-wheel-radius": ..., "gear-number": ..., "transmission": "traction", "engine": "combustion" }

其中枚举值的映射关系也定义在此处：

• transmission：WBU_CAR_TRACTION→"traction"（前驱）、WBU_CAR_PROPULSION→"propulsion"（后驱）、WBU_CAR_FOUR_BY_FOUR→"four by four"（四驱）；
• engine：WBU_CAR_COMBUSTION_ENGINE→"combustion"、WBU_CAR_ELECTRIC_ENGINE→"electric"、WBU_CAR_PARALLEL_HYBRID_ENGINE→"parallel hybrid"、WBU_CAR_POWER_SPLIT_HYBRID_ENGINE→"Power-split hybrid"。

前端收到该消息后，在 automobile.js 中调用overviewWidget.setStaticInformation(data)，由 overview_widget.js 的setStaticInformation()将数据写入各标签元素。注意车轮半径存在"前轮/后轮"两组取值，对应front-wheel-radius与rear-wheel-radius两个字段，便于描述前后轮径不同的车辆。

动态实时状态：update 消息与三种控制模式

除静态配置外，每个仿真步长 C 侧都会采集车辆实时状态并通过update消息下发。append_overview_data()（automobile.c）生成的 Overview 数据块结构如下：

"overview": { "speed": 46.66, "steering": [主转向角, 右前轮转向角, 左前轮转向角], "rpm": 4125.0, "gearbox": 1, "target-speed": 0, "wheel1": { "speed": ..., "encoder": ... }, "wheel2": { "speed": ..., "encoder": ... }, "wheel3": { "speed": ..., "encoder": ... }, "wheel4": { "speed": ..., "encoder": ... } }

值得深入说明的是控制模式对显示内容的影响。C 侧通过wbu_driver_get_control_mode()获取当前模式，分为速度控制（SPEED）、扭矩控制（TORQUE）与未定义（UNDEFINED_CONTROL_MODE）三种：

• 扭矩控制模式（TORQUE）：通过 Driver 库的油门/离合器接口控制车辆，此时下发真实的rpm（wbu_driver_get_rpm()）与当前挡位gearbox（wbu_driver_get_gear()），前端 overview_widget.js 的updateControlMode()会显示 RPM 与挡位标签、隐藏 Target Speed；
• 速度控制模式（SPEED）：通过wbu_driver_set_cruising_speed()设定巡航速度，此时下发target-speed（wbu_driver_get_target_cruising_speed()），前端隐藏 RPM/挡位、显示 Target Speed；
• 未定义模式（UNDEFINED_CONTROL_MODE）：没有使用 Driver 库控制车辆，此时前端将 Speed 与 Target Speed 都显示为-；车轮速度也不再从 Car 库读取，而是直接调用wb_motor_get_velocity()从底层轮毂电机获取（automobile.c）。

四种车轮的数据顺序固定为wheel1～wheel4，对应 automobile.c 中定义的车轮电机名顺序：right_front_wheel、left_front_wheel、right_rear_wheel、left_rear_wheel（右前、左前、右后、左后）。

Canvas 俯视示意图：车辆状态的可视化

Overview 最具特色的是中央的车辆俯视示意图，它由 overview_widget.js 的paint()函数在<canvas>上实时绘制，包含三类图形元素：

1. 黑色车轴：三条实线构成车辆底盘轮廓——连接前后轴中心的纵轴线、前轴横线、后轴横线，绘制函数为drawLine()；
2. 红色虚线转向箭头：位于前轴中心，指向车辆前方，其旋转角度等于主转向角steering[0]，箭头采用 7px 虚线/3px 间隔的红色虚线样式（drawDashedArrow()），直观指示当前转向意图；
3. 蓝色车轮矩形：四个20×50的蓝色矩形分别绘制在前后轴两端（drawRotatedRectangle()），其中前两个车轮的旋转角度分别为steering[1]（右前轮）与steering[2]（左前轮），后两个车轮角度固定为 0——这一设计通过真实车轮转角体现转向状态，而非仅仅显示文字数值。

布局位置由resize()（overview_widget.js）根据窗口宽度动态计算：以车辆中心为基准，前轴位于上方 1/3 处、后轴位于下方 1/3 处，左右轮距取画布宽度的 1/6，并同步定位四个车轮半径标签、轮距标签、轴距标签（旋转 90° 沿纵轴放置）以及速度/转向角标签的位置。绘制时各标签通过绝对定位覆盖在 Canvas 之上（automobile.css中z-index分层），保证文字始终显示在图形上层。

端到端数据链路与性能细节

将整个 Overview 的数据流串起来，其完整链路为：

Webots 仿真步进 → automobile.c 的 wb_robot_window_step()（automobile.c#L322-L368） → 采集 Driver/Car 库 API 数据，拼装 "update { "vehicle": {...} }" 文本 → wb_robot_wwi_send_text() 发送 → automobile.js 的 receive() 解析消息 → update() 调用 overviewWidget.updateInformation() → OverviewWidget.update() 刷新标签并触发 paint() 重绘

有两个值得注意的工程细节：

• 按需发送：C 侧只有在用户勾选了对应信息开关时才采集该数据块。driverInfoEnabled[]数组与Overview:enable/Overview:disable命令对应（automobile.c），前端勾选框通过vehicleCheckboxCallback()生成这些命令。这样未勾选的数据不会在每次仿真步进中浪费通信带宽；
• 惰性重绘：前端update()中若数据未变化（modified标志为假）则跳过刷新；paint()在标签页隐藏时（offsetParent === null）直接返回，避免无谓的 Canvas 绘制开销（overview_widget.js）。

另外，automobile.html中 RPM 标签的单位占位符写作g（automobile.html），这是窗口模板中的历史遗留写法，实际含义为转速（RPM），阅读代码时需注意区分。

启用方式与扩展阅读

在仿真运行时，打开车辆节点的机器人窗口即可看到 Overview 标签（Vehicle robot window [车辆名]）。标签标题旁有一个勾选框，用于启用/禁用 Overview 数据刷新；导航栏中点击 Overview 按钮即可切换到该标签。由于窗口由 Car.proto 的window字段自动关联，任何基于CarPROTO 派生的车辆（包括仓库projects/vehicles/protos下的各具体车型）开箱即用，无需额外配置。

若希望深入了解 Overview 背后的驾驶与车辆模型，可继续阅读：

• Driver Library：速度/扭矩控制、巡航速度与挡位接口；
• Car Library：轮距、轴距、轮径与转向角等车辆参数接口；
• Robot-window：汽车机器人窗口的整体说明；
• menu.md：Webots 汽车模块的完整文档目录。

综上，Overview 标签并非简单的"仪表盘"，而是一个由 C 库实时采集、JSON 消息驱动、Canvas 矢量绘制的车辆状态总览组件。理解它的信息分区、控制模式差异与数据链路，无论是对日常仿真调试，还是对二次定制汽车机器人窗口，都提供了清晰的切入点。

• 科研
• 自动驾驶
• 物理引擎