ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Webots 汽车机器人窗口 Overview 标签:车辆状态实时概览的界面设计与数据链路详解

Webots 汽车机器人窗口 Overview 标签:车辆状态实时概览的界面设计与数据链路详解 科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载在 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.cC 侧入口库负责采集车辆数据并通过 WWIWebots Window Interface文本消息发送给前端automobile.js前端主逻辑负责标签页管理、消息分发与命令回传overview_widget.jsOverview 标签的专用组件完成 Canvas 绘制与标签刷新automobile.html/automobile.css窗口的 DOM 结构与样式。Overview 标签的定位一屏看懂车辆状态按照原文档的描述在汽车机器人窗口中每个传感器/执行器都有常规标签页而窗口的第一个标签页就是 Overview它给出车辆状态的快速总览。在automobile.js的configure()函数中可以看到窗口标签的注册顺序Overview由 automobile.js 首先创建车辆专属的动态信息标签Speed、Steering、Encoders、Brake、Throttle、RPMautomobile.js之后才是传感器/执行器常规标签由configureDevices()根据车辆sensors插槽中添加的设备动态生成。窗口初始化完成时代码会主动调用menuTabCallback(overview)并openMenu()automobile.js即启动后默认聚焦 Overview 标签。从上图截图可以看到左侧深灰色导航栏中Overview高亮其下方依次是Speed、Steering、Encoders、Brake、Throttle、RPM再往下则是摄像头、GPS、陀螺仪、激光雷达等传感器/执行器标签最后是Settings与上述注册顺序完全一致。简单来说Overview 看整体、车辆专属标签看细节、传感器标签看设备——这正是原文档所描述的信息分层。界面布局一屏之内信息分四区Overview 页面在 automobile.html 中定义了完整的 DOM 结构核心是一个canvasoverview-canvas用于绘制车辆俯视示意图以及一组覆盖其上的绝对定位标签overview-labels。结合样式表 automobile.css这些标签按颜色可分为四类信息区1. 全局状态区红色red-label位于页面顶部中央字体 16pxSpeed车辆当前速度单位km/hSteering angle主转向角单位rad4 位小数。2. 车辆几何参数区绿色green-label静态几何尺寸单位m3 位小数front-track / rear-track前轴轮距与后轴轮距wheelbase轴距使用rotated-label样式旋转 90°沿纵轴方向标注Radius四个车轮的轮径前轮显示front-wheel-radius、后轮显示rear-wheel-radius。3. 动力系统区黑色black-long-labelEngine type发动机类型combustion / electric / 混合动力等Transmission type驱动方式traction / propulsion / four by four 等RPM发动机转速仅在扭矩控制模式下显示Engaged gear当前挂入挡位 / 总挡位数Target Speed巡航目标速度单位km/h非扭矩模式下显示。4. 车轮状态区黑色black-label四个车轮各有独立标签每个包含Speed车轮角速度单位rad/s1 位小数Encoder车轮编码器累计转角单位rad指数记数法如1.6e2Angle前轮的转向角仅前两个车轮有此标签单位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 中的trackFront1.7、trackRear1.7、wheelbase4.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 }其中枚举值的映射关系也定义在此处transmissionWBU_CAR_TRACTION→traction前驱、WBU_CAR_PROPULSION→propulsion后驱、WBU_CAR_FOUR_BY_FOUR→four by four四驱engineWBU_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 库的油门/离合器接口控制车辆此时下发真实的rpmwbu_driver_get_rpm()与当前挡位gearboxwbu_driver_get_gear()前端 overview_widget.js 的updateControlMode()会显示 RPM 与挡位标签、隐藏 Target Speed速度控制模式SPEED通过wbu_driver_set_cruising_speed()设定巡航速度此时下发target-speedwbu_driver_get_target_cruising_speed()前端隐藏 RPM/挡位、显示 Target Speed未定义模式UNDEFINED_CONTROL_MODE没有使用 Driver 库控制车辆此时前端将 Speed 与 Target Speed 都显示为-车轮速度也不再从 Car 库读取而是直接调用wb_motor_get_velocity()从底层轮毂电机获取automobile.c。四种车轮的数据顺序固定为wheel1wheel4对应 automobile.c 中定义的车轮电机名顺序right_front_wheel、left_front_wheel、right_rear_wheel、left_rear_wheel右前、左前、右后、左后。Canvas 俯视示意图车辆状态的可视化Overview 最具特色的是中央的车辆俯视示意图它由 overview_widget.js 的paint()函数在canvas上实时绘制包含三类图形元素黑色车轴三条实线构成车辆底盘轮廓——连接前后轴中心的纵轴线、前轴横线、后轴横线绘制函数为drawLine()红色虚线转向箭头位于前轴中心指向车辆前方其旋转角度等于主转向角steering[0]箭头采用 7px 虚线/3px 间隔的红色虚线样式drawDashedArrow()直观指示当前转向意图蓝色车轮矩形四个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 标签的单位占位符写作gautomobile.html这是窗口模板中的历史遗留写法实际含义为转速RPM阅读代码时需注意区分。启用方式与扩展阅读在仿真运行时打开车辆节点的机器人窗口即可看到 Overview 标签Vehicle robot window [车辆名]。标签标题旁有一个勾选框用于启用/禁用 Overview 数据刷新导航栏中点击 Overview 按钮即可切换到该标签。由于窗口由 Car.proto 的window字段自动关联任何基于CarPROTO 派生的车辆包括仓库projects/vehicles/protos下的各具体车型开箱即用无需额外配置。若希望深入了解 Overview 背后的驾驶与车辆模型可继续阅读Driver Library速度/扭矩控制、巡航速度与挡位接口Car Library轮距、轴距、轮径与转向角等车辆参数接口Robot-window汽车机器人窗口的整体说明menu.mdWebots 汽车模块的完整文档目录。综上Overview 标签并非简单的仪表盘而是一个由 C 库实时采集、JSON 消息驱动、Canvas 矢量绘制的车辆状态总览组件。理解它的信息分区、控制模式差异与数据链路无论是对日常仿真调试还是对二次定制汽车机器人窗口都提供了清晰的切入点。赞分享科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载相关推荐Webots 汽车机器人窗口Automobile Robot Window详解Overview 标签页与车辆状态监控Webots 汽车机器人窗口Automobile Robot Window详解Overview 标签页与车辆状态监控 Webots 为汽车类仿真场景专门实科研自动驾驶物理引擎TeslaMate Web界面详解实时监控车辆状态与行驶数据TeslaMate Web界面详解实时监控车辆状态与行驶数据 你是否还在为无法全面掌握特斯拉车辆的实时状态和行驶数据而烦恼TeslaMate作为一款开源的特后端数据分析数据可视化Prometheus Operator监控共享汽车车辆状态与预订率Prometheus Operator监控共享汽车车辆状态与预订率 共享汽车平台每天面临两大核心挑战如何实时掌握数百辆分布车辆的电池状态、定位信息以及如何云原生可观测性上一篇AndroidMic安全指南保护你的手机麦克风数据安全的完整配置方案下一篇GalaxyBookMask终极指南如何让普通Windows电脑完美模拟三星Galaxy Book笔记本创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表