858 lines
36 KiB
Python
858 lines
36 KiB
Python
|
#!/usr/bin/env python3
|
|||
|
|
import json
|
|||
|
|
import socket
|
|||
|
|
import threading
|
|||
|
|
import time
|
|||
|
|
import traceback
|
|||
|
|
from datetime import datetime
|
|||
|
|
import argparse
|
|||
|
|
from flask import Flask, render_template_string, jsonify, render_template
|
|||
|
|
|
|||
|
|
class CommaWebListener:
|
|||
|
|
def __init__(self, port=8088):
|
|||
|
|
"""初始化接收器"""
|
|||
|
|
self.port = port
|
|||
|
|
self.data = {}
|
|||
|
|
self.last_update = 0
|
|||
|
|
self.running = True
|
|||
|
|
self.device_ip = None
|
|||
|
|
|
|||
|
|
def start_listening(self):
|
|||
|
|
"""启动UDP监听"""
|
|||
|
|
sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
|
|||
|
|
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
|
|||
|
|
try:
|
|||
|
|
sock.bind(('0.0.0.0', self.port))
|
|||
|
|
print(f"正在监听端口 {self.port} 的广播数据...")
|
|||
|
|
|
|||
|
|
while self.running:
|
|||
|
|
try:
|
|||
|
|
data, addr = sock.recvfrom(4096)
|
|||
|
|
self.device_ip = addr[0]
|
|||
|
|
try:
|
|||
|
|
self.data = json.loads(data.decode('utf-8'))
|
|||
|
|
self.last_update = time.time()
|
|||
|
|
except json.JSONDecodeError:
|
|||
|
|
print(f"接收到无效的JSON数据: {data[:100]}...")
|
|||
|
|
except Exception as e:
|
|||
|
|
print(f"接收数据时出错: {e}")
|
|||
|
|
except Exception as e:
|
|||
|
|
print(f"无法绑定到端口 {self.port}: {e}")
|
|||
|
|
finally:
|
|||
|
|
sock.close()
|
|||
|
|
|
|||
|
|
# HTML模板
|
|||
|
|
HTML_TEMPLATE = """
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>CommaAssist 数据监视器</title>
|
|||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
margin: 20px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.waiting {
|
|||
|
|
background-color: #fff3cd;
|
|||
|
|
color: #856404;
|
|||
|
|
}
|
|||
|
|
.connected {
|
|||
|
|
background-color: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
}
|
|||
|
|
.expired {
|
|||
|
|
background-color: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
}
|
|||
|
|
.card {
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.card-header {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
padding: 15px;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
.card-body {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
.row {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.col-6 strong {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.badge {
|
|||
|
|
font-size: 100%;
|
|||
|
|
}
|
|||
|
|
.bg-primary {
|
|||
|
|
background-color: #007bff;
|
|||
|
|
}
|
|||
|
|
.bg-success {
|
|||
|
|
background-color: #28a745;
|
|||
|
|
}
|
|||
|
|
.bg-danger {
|
|||
|
|
background-color: #dc3545;
|
|||
|
|
}
|
|||
|
|
.bg-warning {
|
|||
|
|
background-color: #ffc107;
|
|||
|
|
color: #212529;
|
|||
|
|
}
|
|||
|
|
.bg-info {
|
|||
|
|
background-color: #17a2b8;
|
|||
|
|
}
|
|||
|
|
.nav-tabs {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.tab-content {
|
|||
|
|
padding-top: 20px;
|
|||
|
|
}
|
|||
|
|
.map-container {
|
|||
|
|
height: 300px;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #eee;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.controls {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.auto-refresh {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 15px;
|
|||
|
|
}
|
|||
|
|
pre {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>CommaAssist 数据监视器</h1>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="status-container" class="status waiting">
|
|||
|
|
等待来自comma3的数据...
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="controls">
|
|||
|
|
<label class="auto-refresh">
|
|||
|
|
<input type="checkbox" id="auto-refresh" checked> 自动刷新 (1秒)
|
|||
|
|
</label>
|
|||
|
|
<button class="btn btn-primary float-end" onclick="fetchData()">刷新数据</button>
|
|||
|
|
<div style="clear: both;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|||
|
|
<li class="nav-item" role="presentation">
|
|||
|
|
<button class="nav-link active" id="car-tab" data-bs-toggle="tab" data-bs-target="#car-tab-pane" type="button" role="tab">
|
|||
|
|
车辆信息
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item" role="presentation">
|
|||
|
|
<button class="nav-link" id="device-tab" data-bs-toggle="tab" data-bs-target="#device-tab-pane" type="button" role="tab">
|
|||
|
|
设备信息
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item" role="presentation">
|
|||
|
|
<button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location-tab-pane" type="button" role="tab">
|
|||
|
|
位置信息
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item" role="presentation">
|
|||
|
|
<button class="nav-link" id="json-tab" data-bs-toggle="tab" data-bs-target="#json-tab-pane" type="button" role="tab">
|
|||
|
|
原始数据
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div class="tab-content" id="myTabContent">
|
|||
|
|
<!-- 车辆信息标签页 -->
|
|||
|
|
<div class="tab-pane fade show active" id="car-tab-pane" role="tabpanel" aria-labelledby="car-tab" tabindex="0">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">基本车辆信息</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="vehicle-status-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">方向盘与控制系统</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="steering-system-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">详细车辆信息</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="detailed-vehicle-info-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">踏板与制动系统</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="pedal-status-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">车门与信号灯</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="door-lights-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">巡航控制</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="cruise-info-container">
|
|||
|
|
<div class="alert alert-warning">等待车辆数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 设备信息标签页 -->
|
|||
|
|
<div class="tab-pane fade" id="device-tab-pane" role="tabpanel" aria-labelledby="device-tab" tabindex="0">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">设备状态</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="device-info-container">
|
|||
|
|
<div class="alert alert-warning">等待设备数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">系统资源</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="system-resources-container">
|
|||
|
|
<div class="alert alert-warning">等待设备数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 位置信息标签页 -->
|
|||
|
|
<div class="tab-pane fade" id="location-tab-pane" role="tabpanel" aria-labelledby="location-tab" tabindex="0">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">GPS位置</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="gps-info-container">
|
|||
|
|
<div class="alert alert-warning">等待GPS数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">导航信息</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="navigation-container">
|
|||
|
|
<div class="alert alert-warning">等待导航数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">地图</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div id="map" class="map-container"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 原始数据标签页 -->
|
|||
|
|
<div class="tab-pane fade" id="json-tab-pane" role="tabpanel" aria-labelledby="json-tab" tabindex="0">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">原始JSON数据</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<pre id="raw-data">等待数据...</pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
let map, marker;
|
|||
|
|
let lastValidLatLng = null;
|
|||
|
|
let activeTab = 'car'; // 默认显示车辆信息标签
|
|||
|
|
|
|||
|
|
// 根据车辆状态自动切换标签
|
|||
|
|
function autoSwitchTabs(isCarActive) {
|
|||
|
|
// 如果车辆启动，切换到车辆标签；否则切换到设备标签
|
|||
|
|
if (isCarActive && activeTab !== 'car') {
|
|||
|
|
document.getElementById('car-tab').click();
|
|||
|
|
activeTab = 'car';
|
|||
|
|
} else if (!isCarActive && activeTab === 'car') {
|
|||
|
|
document.getElementById('device-tab').click();
|
|||
|
|
activeTab = 'device';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initMap() {
|
|||
|
|
if (typeof google !== 'undefined') {
|
|||
|
|
const defaultPos = {lat: 39.9042, lng: 116.4074}; // 默认位置：北京
|
|||
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|||
|
|
zoom: 16,
|
|||
|
|
center: defaultPos,
|
|||
|
|
mapTypeId: 'roadmap'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
marker = new google.maps.Marker({
|
|||
|
|
position: defaultPos,
|
|||
|
|
map: map,
|
|||
|
|
title: 'Comma3位置'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateMap(lat, lng, bearing) {
|
|||
|
|
if (typeof google !== 'undefined' && map && marker) {
|
|||
|
|
const latLng = new google.maps.LatLng(lat, lng);
|
|||
|
|
|
|||
|
|
// 更新标记位置
|
|||
|
|
marker.setPosition(latLng);
|
|||
|
|
|
|||
|
|
// 根据方向旋转标记
|
|||
|
|
if (bearing !== undefined) {
|
|||
|
|
// 如果我们有自定义的带方向的标记图标，可以在这里设置
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 平滑移动地图中心
|
|||
|
|
map.panTo(latLng);
|
|||
|
|
|
|||
|
|
lastValidLatLng = {lat, lng};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDataRow(label, value, badgeClass = null) {
|
|||
|
|
let valueHtml = value;
|
|||
|
|
if (badgeClass) {
|
|||
|
|
valueHtml = `<span class="badge ${badgeClass}">${value}</span>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-6">
|
|||
|
|
<strong>${label}</strong>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6">
|
|||
|
|
${valueHtml}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateVehicleStatus(car) {
|
|||
|
|
const speed = car.speed || 0;
|
|||
|
|
const isCarMoving = speed > 1.0;
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
html += formatDataRow('运行状态', isCarMoving ? '行驶中' : '静止', isCarMoving ? 'bg-success' : 'bg-secondary');
|
|||
|
|
html += formatDataRow('当前速度', `${speed.toFixed(1)} km/h`, 'bg-primary');
|
|||
|
|
html += formatDataRow('档位', car.gear_shifter || 'Unknown');
|
|||
|
|
|
|||
|
|
document.getElementById('vehicle-status-container').innerHTML = html;
|
|||
|
|
|
|||
|
|
return isCarMoving;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateSteeringSystem(car) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
html += formatDataRow('方向盘角度', `${(car.steering_angle || 0).toFixed(1)}°`);
|
|||
|
|
html += formatDataRow('转向力矩', `${(car.steering_torque || 0).toFixed(1)} Nm`);
|
|||
|
|
|
|||
|
|
let blinkerStatus = '';
|
|||
|
|
if (car.left_blinker && car.right_blinker) blinkerStatus = '双闪';
|
|||
|
|
else if (car.left_blinker) blinkerStatus = '左转';
|
|||
|
|
else if (car.right_blinker) blinkerStatus = '右转';
|
|||
|
|
else blinkerStatus = '关闭';
|
|||
|
|
|
|||
|
|
html += formatDataRow('转向灯', blinkerStatus);
|
|||
|
|
|
|||
|
|
document.getElementById('steering-system-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updatePedalStatus(car) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
const brakeStatus = car.brake_pressed ? '已踩下' : '释放';
|
|||
|
|
const gasStatus = car.gas_pressed ? '已踩下' : '释放';
|
|||
|
|
|
|||
|
|
html += formatDataRow('制动踏板', brakeStatus, car.brake_pressed ? 'bg-danger' : 'bg-secondary');
|
|||
|
|
html += formatDataRow('油门踏板', gasStatus, car.gas_pressed ? 'bg-success' : 'bg-secondary');
|
|||
|
|
|
|||
|
|
document.getElementById('pedal-status-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateDoorLights(car) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
const doorStatus = car.door_open ? '打开' : '关闭';
|
|||
|
|
html += formatDataRow('车门状态', doorStatus, car.door_open ? 'bg-danger' : 'bg-success');
|
|||
|
|
|
|||
|
|
html += formatDataRow('左转向灯', car.left_blinker ? '开启' : '关闭', car.left_blinker ? 'bg-warning' : 'bg-secondary');
|
|||
|
|
html += formatDataRow('右转向灯', car.right_blinker ? '开启' : '关闭', car.right_blinker ? 'bg-warning' : 'bg-secondary');
|
|||
|
|
|
|||
|
|
document.getElementById('door-lights-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateCruiseInfo(car) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
html += formatDataRow('巡航速度', `${(car.cruise_speed || 0).toFixed(1)} km/h`, 'bg-info');
|
|||
|
|
|
|||
|
|
document.getElementById('cruise-info-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateDeviceInfo(device) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
html += formatDataRow('设备IP', device.ip || 'Unknown');
|
|||
|
|
|
|||
|
|
const battery = device.battery || {};
|
|||
|
|
const batPercent = battery.percent || 0;
|
|||
|
|
let batClass = 'bg-danger';
|
|||
|
|
if (batPercent > 50) batClass = 'bg-success';
|
|||
|
|
else if (batPercent > 20) batClass = 'bg-warning';
|
|||
|
|
|
|||
|
|
html += formatDataRow('电池电量', `${batPercent}%`, batClass);
|
|||
|
|
html += formatDataRow('电池电压', `${(battery.voltage || 0).toFixed(2)} V`);
|
|||
|
|
html += formatDataRow('电池电流', `${(battery.status || 0).toFixed(2)} A`);
|
|||
|
|
|
|||
|
|
document.getElementById('device-info-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateSystemResources(device) {
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
let memClass = 'bg-success';
|
|||
|
|
if (device.mem_usage > 80) memClass = 'bg-danger';
|
|||
|
|
else if (device.mem_usage > 60) memClass = 'bg-warning';
|
|||
|
|
|
|||
|
|
html += formatDataRow('内存使用', `${(device.mem_usage || 0).toFixed(1)}%`, memClass);
|
|||
|
|
html += formatDataRow('CPU温度', `${(device.cpu_temp || 0).toFixed(1)}°C`);
|
|||
|
|
html += formatDataRow('存储空间', `剩余 ${(device.free_space || 0).toFixed(1)}%`);
|
|||
|
|
|
|||
|
|
document.getElementById('system-resources-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateGpsInfo(location) {
|
|||
|
|
if (!location.gps_valid) {
|
|||
|
|
document.getElementById('gps-info-container').innerHTML =
|
|||
|
|
'<div class="alert alert-warning">GPS信号无效或未获取</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
html += formatDataRow('纬度', location.latitude.toFixed(6));
|
|||
|
|
html += formatDataRow('经度', location.longitude.toFixed(6));
|
|||
|
|
html += formatDataRow('方向', `${location.bearing.toFixed(1)}°`);
|
|||
|
|
html += formatDataRow('海拔', `${location.altitude.toFixed(1)} m`);
|
|||
|
|
html += formatDataRow('GPS精度', `${location.accuracy.toFixed(1)} m`);
|
|||
|
|
html += formatDataRow('GPS速度', `${location.speed.toFixed(1)} km/h`, 'bg-primary');
|
|||
|
|
|
|||
|
|
document.getElementById('gps-info-container').innerHTML = html;
|
|||
|
|
|
|||
|
|
// 更新地图
|
|||
|
|
updateMap(location.latitude, location.longitude, location.bearing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateNavigation(nav) {
|
|||
|
|
if (!nav || Object.keys(nav).length === 0) {
|
|||
|
|
document.getElementById('navigation-container').innerHTML =
|
|||
|
|
'<div class="alert alert-info">没有活动的导航</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
// 格式化距离显示
|
|||
|
|
const distRemaining = nav.distance_remaining || 0;
|
|||
|
|
let distText = '';
|
|||
|
|
if (distRemaining > 1000) {
|
|||
|
|
distText = `${(distRemaining / 1000).toFixed(1)} km`;
|
|||
|
|
} else {
|
|||
|
|
distText = `${Math.round(distRemaining)} m`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化时间显示
|
|||
|
|
const timeRemaining = nav.time_remaining || 0;
|
|||
|
|
const minutes = Math.floor(timeRemaining / 60);
|
|||
|
|
const seconds = timeRemaining % 60;
|
|||
|
|
|
|||
|
|
html += formatDataRow('剩余距离', distText, 'bg-info');
|
|||
|
|
html += formatDataRow('剩余时间', `${minutes}分${seconds}秒`, 'bg-info');
|
|||
|
|
html += formatDataRow('道路限速', `${(nav.speed_limit || 0).toFixed(1)} km/h`, 'bg-danger');
|
|||
|
|
|
|||
|
|
if (nav.maneuver_distance > 0) {
|
|||
|
|
html += formatDataRow('下一动作', nav.maneuver_text, 'bg-warning');
|
|||
|
|
html += formatDataRow('动作距离', `${nav.maneuver_distance} m`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('navigation-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateDetailedVehicleInfo(carInfo) {
|
|||
|
|
if (!carInfo || !carInfo.details) {
|
|||
|
|
document.getElementById('detailed-vehicle-info-container').innerHTML =
|
|||
|
|
'<div class="alert alert-info">没有详细车辆信息</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
// 基本信息
|
|||
|
|
if (carInfo.basic) {
|
|||
|
|
html += '<h5>基本信息</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('车型', carInfo.basic.car_model);
|
|||
|
|
html += formatDataRow('车辆指纹', carInfo.basic.fingerprint);
|
|||
|
|
html += formatDataRow('车重', carInfo.basic.weight);
|
|||
|
|
html += formatDataRow('轴距', carInfo.basic.wheelbase);
|
|||
|
|
html += formatDataRow('转向比', carInfo.basic.steering_ratio);
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 巡航信息
|
|||
|
|
if (carInfo.details.cruise) {
|
|||
|
|
const cruise = carInfo.details.cruise;
|
|||
|
|
html += '<h5>巡航控制</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('巡航状态', cruise.enabled ? '开启' : '关闭', cruise.enabled ? 'bg-success' : 'bg-secondary');
|
|||
|
|
html += formatDataRow('自适应巡航', cruise.available ? '可用' : '不可用');
|
|||
|
|
html += formatDataRow('设定速度', `${(cruise.speed || 0).toFixed(1)} km/h`, 'bg-info');
|
|||
|
|
if (cruise.gap !== undefined) {
|
|||
|
|
html += formatDataRow('跟车距离', cruise.gap);
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车轮速度
|
|||
|
|
if (carInfo.details.wheel_speeds) {
|
|||
|
|
const ws = carInfo.details.wheel_speeds;
|
|||
|
|
html += '<h5>车轮速度</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('左前', `${(ws.fl || 0).toFixed(1)} km/h`);
|
|||
|
|
html += formatDataRow('右前', `${(ws.fr || 0).toFixed(1)} km/h`);
|
|||
|
|
html += formatDataRow('左后', `${(ws.rl || 0).toFixed(1)} km/h`);
|
|||
|
|
html += formatDataRow('右后', `${(ws.rr || 0).toFixed(1)} km/h`);
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 方向盘信息
|
|||
|
|
if (carInfo.details.steering) {
|
|||
|
|
const steering = carInfo.details.steering;
|
|||
|
|
html += '<h5>方向盘系统</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('方向盘角度', `${(steering.angle || 0).toFixed(1)}°`);
|
|||
|
|
html += formatDataRow('方向盘力矩', `${(steering.torque || 0).toFixed(1)} Nm`);
|
|||
|
|
if (steering.rate !== undefined) {
|
|||
|
|
html += formatDataRow('转向速率', `${steering.rate.toFixed(1)}°/s`);
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全系统
|
|||
|
|
if (carInfo.details.safety_systems && Object.keys(carInfo.details.safety_systems).length > 0) {
|
|||
|
|
const safety = carInfo.details.safety_systems;
|
|||
|
|
html += '<h5>安全系统</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
if (safety.esp_disabled !== undefined) {
|
|||
|
|
html += formatDataRow('ESP状态', safety.esp_disabled ? '禁用' : '正常', safety.esp_disabled ? 'bg-warning' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (safety.abs_active !== undefined) {
|
|||
|
|
html += formatDataRow('ABS状态', safety.abs_active ? '激活' : '正常', safety.abs_active ? 'bg-warning' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (safety.tcs_active !== undefined) {
|
|||
|
|
html += formatDataRow('牵引力控制', safety.tcs_active ? '激活' : '正常', safety.tcs_active ? 'bg-warning' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (safety.collision_warning !== undefined) {
|
|||
|
|
html += formatDataRow('碰撞警告', safety.collision_warning ? '警告' : '正常', safety.collision_warning ? 'bg-danger' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车门信息
|
|||
|
|
if (carInfo.details.doors && Object.keys(carInfo.details.doors).length > 0) {
|
|||
|
|
const doors = carInfo.details.doors;
|
|||
|
|
html += '<h5>车门状态</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('驾驶员门', doors.driver ? '打开' : '关闭', doors.driver ? 'bg-danger' : 'bg-success');
|
|||
|
|
if (doors.passenger !== undefined) {
|
|||
|
|
html += formatDataRow('乘客门', doors.passenger ? '打开' : '关闭', doors.passenger ? 'bg-danger' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (doors.trunk !== undefined) {
|
|||
|
|
html += formatDataRow('行李箱', doors.trunk ? '打开' : '关闭', doors.trunk ? 'bg-danger' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (doors.hood !== undefined) {
|
|||
|
|
html += formatDataRow('引擎盖', doors.hood ? '打开' : '关闭', doors.hood ? 'bg-danger' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (carInfo.status && carInfo.status.seatbelt_unlatched !== undefined) {
|
|||
|
|
html += formatDataRow('安全带', carInfo.status.seatbelt_unlatched ? '未系' : '已系', carInfo.status.seatbelt_unlatched ? 'bg-danger' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 灯光状态
|
|||
|
|
if (carInfo.details.lights && Object.keys(carInfo.details.lights).length > 0) {
|
|||
|
|
const lights = carInfo.details.lights;
|
|||
|
|
html += '<h5>灯光状态</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
html += formatDataRow('左转向灯', lights.left_blinker ? '开启' : '关闭', lights.left_blinker ? 'bg-warning' : 'bg-secondary');
|
|||
|
|
html += formatDataRow('右转向灯', lights.right_blinker ? '开启' : '关闭', lights.right_blinker ? 'bg-warning' : 'bg-secondary');
|
|||
|
|
if (lights.high_beam !== undefined) {
|
|||
|
|
html += formatDataRow('远光灯', lights.high_beam ? '开启' : '关闭', lights.high_beam ? 'bg-info' : 'bg-secondary');
|
|||
|
|
}
|
|||
|
|
if (lights.low_beam !== undefined) {
|
|||
|
|
html += formatDataRow('近光灯', lights.low_beam ? '开启' : '关闭', lights.low_beam ? 'bg-info' : 'bg-secondary');
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 盲点监测
|
|||
|
|
if (carInfo.details.blind_spot && Object.keys(carInfo.details.blind_spot).length > 0) {
|
|||
|
|
const bs = carInfo.details.blind_spot;
|
|||
|
|
html += '<h5>盲点监测</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
if (bs.left !== undefined) {
|
|||
|
|
html += formatDataRow('左侧', bs.left ? '检测到车辆' : '无车辆', bs.left ? 'bg-warning' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
if (bs.right !== undefined) {
|
|||
|
|
html += formatDataRow('右侧', bs.right ? '检测到车辆' : '无车辆', bs.right ? 'bg-warning' : 'bg-success');
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他信息
|
|||
|
|
if (carInfo.details.other && Object.keys(carInfo.details.other).length > 0) {
|
|||
|
|
const other = carInfo.details.other;
|
|||
|
|
html += '<h5>其他信息</h5>';
|
|||
|
|
html += '<div class="mb-3">';
|
|||
|
|
if (other.outside_temp !== undefined) {
|
|||
|
|
html += formatDataRow('车外温度', `${other.outside_temp.toFixed(1)}°C`);
|
|||
|
|
}
|
|||
|
|
if (other.fuel_range !== undefined) {
|
|||
|
|
html += formatDataRow('续航里程', `${other.fuel_range.toFixed(1)} km`);
|
|||
|
|
}
|
|||
|
|
if (other.odometer !== undefined) {
|
|||
|
|
html += formatDataRow('里程表', `${other.odometer.toFixed(1)} km`);
|
|||
|
|
}
|
|||
|
|
if (other.fuel_consumption !== undefined) {
|
|||
|
|
html += formatDataRow('油耗', `${other.fuel_consumption.toFixed(1)} L/100km`);
|
|||
|
|
}
|
|||
|
|
html += '</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果没有任何详细信息
|
|||
|
|
if (html === '') {
|
|||
|
|
html = '<div class="alert alert-info">没有获取到详细车辆信息</div>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('detailed-vehicle-info-container').innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fetchData() {
|
|||
|
|
fetch('/api/data')
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
const statusContainer = document.getElementById('status-container');
|
|||
|
|
|
|||
|
|
if (!data || !data.data || Object.keys(data.data).length === 0) {
|
|||
|
|
statusContainer.className = 'status waiting';
|
|||
|
|
statusContainer.textContent = '等待来自comma3的数据...';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentTime = new Date().getTime() / 1000;
|
|||
|
|
if (currentTime - data.last_update > 5) {
|
|||
|
|
statusContainer.className = 'status expired';
|
|||
|
|
statusContainer.textContent = `数据已过期! 上次更新: ${new Date(data.last_update * 1000).toLocaleTimeString()}`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 数据有效，更新UI
|
|||
|
|
statusContainer.className = 'status connected';
|
|||
|
|
statusContainer.textContent = `已连接到 ${data.device_ip || 'Comma3设备'} - 最后更新: ${new Date(data.last_update * 1000).toLocaleTimeString()}`;
|
|||
|
|
|
|||
|
|
// 获取数据
|
|||
|
|
const carData = data.data.car || {};
|
|||
|
|
const deviceData = data.data.device || {};
|
|||
|
|
const locationData = data.data.location || {};
|
|||
|
|
const navData = data.data.navigation || {};
|
|||
|
|
|
|||
|
|
// 先更新车辆状态，并获取车辆是否启动
|
|||
|
|
const isCarActive = updateVehicleStatus(carData);
|
|||
|
|
|
|||
|
|
// 根据车辆状态自动切换标签页
|
|||
|
|
autoSwitchTabs(isCarActive);
|
|||
|
|
|
|||
|
|
// 更新所有数据区域
|
|||
|
|
updateSteeringSystem(carData);
|
|||
|
|
updatePedalStatus(carData);
|
|||
|
|
updateDoorLights(carData);
|
|||
|
|
updateCruiseInfo(carData);
|
|||
|
|
updateDeviceInfo(deviceData);
|
|||
|
|
updateSystemResources(deviceData);
|
|||
|
|
updateGpsInfo(locationData);
|
|||
|
|
updateNavigation(navData);
|
|||
|
|
updateDetailedVehicleInfo(data.data.car_info);
|
|||
|
|
|
|||
|
|
// 更新原始数据
|
|||
|
|
document.getElementById('raw-data').textContent = JSON.stringify(data.data, null, 2);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('获取数据出错:', error);
|
|||
|
|
document.getElementById('status-container').className = 'status expired';
|
|||
|
|
document.getElementById('status-container').textContent = '连接错误: ' + error.message;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标签页切换处理
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
|
|||
|
|
tabEls.forEach(tabEl => {
|
|||
|
|
tabEl.addEventListener('shown.bs.tab', function (event) {
|
|||
|
|
// 更新当前活动标签
|
|||
|
|
const id = event.target.id;
|
|||
|
|
if (id.includes('car')) activeTab = 'car';
|
|||
|
|
else if (id.includes('device')) activeTab = 'device';
|
|||
|
|
else if (id.includes('location')) activeTab = 'location';
|
|||
|
|
else activeTab = 'json';
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
fetchData();
|
|||
|
|
|
|||
|
|
// 设置自动刷新
|
|||
|
|
const autoRefreshCheckbox = document.getElementById('auto-refresh');
|
|||
|
|
let refreshInterval;
|
|||
|
|
|
|||
|
|
function setAutoRefresh() {
|
|||
|
|
if (autoRefreshCheckbox.checked) {
|
|||
|
|
refreshInterval = setInterval(fetchData, 1000);
|
|||
|
|
} else {
|
|||
|
|
clearInterval(refreshInterval);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
autoRefreshCheckbox.addEventListener('change', setAutoRefresh);
|
|||
|
|
setAutoRefresh();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- 加载Google地图API (需要替换为您自己的API密钥) -->
|
|||
|
|
<script async defer
|
|||
|
|
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
"""
|
|||
|
|
|
|||
|
|
def create_app(listener):
|
|||
|
|
app = Flask(__name__)
|
|||
|
|
|
|||
|
|
@app.route('/')
|
|||
|
|
def index():
|
|||
|
|
"""主页"""
|
|||
|
|
return render_template_string(HTML_TEMPLATE)
|
|||
|
|
|
|||
|
|
@app.route('/api/data')
|
|||
|
|
def get_data():
|
|||
|
|
"""提供JSON数据API"""
|
|||
|
|
return jsonify({
|
|||
|
|
'data': listener.data,
|
|||
|
|
'last_update': listener.last_update,
|
|||
|
|
'device_ip': listener.device_ip
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return app
|
|||
|
|
|
|||
|
|
def main():
|
|||
|
|
"""主函数"""
|
|||
|
|
parser = argparse.ArgumentParser(description='CommaAssist Web监视器')
|
|||
|
|
parser.add_argument('-p', '--port', type=int, default=8088, help='监听comma设备的UDP端口(默认: 8088)')
|
|||
|
|
parser.add_argument('-w', '--web-port', type=int, default=5000, help='Web服务器端口(默认: 5000)')
|
|||
|
|
parser.add_argument('--host', default='0.0.0.0', help='Web服务器监听地址(默认: 0.0.0.0)')
|
|||
|
|
args = parser.parse_args()
|
|||
|
|
|
|||
|
|
# 创建监听器
|
|||
|
|
listener = CommaWebListener(port=args.port)
|
|||
|
|
|
|||
|
|
# 启动接收线程
|
|||
|
|
receiver_thread = threading.Thread(target=listener.start_listening)
|
|||
|
|
receiver_thread.daemon = True
|
|||
|
|
receiver_thread.start()
|
|||
|
|
|
|||
|
|
# 创建Flask应用
|
|||
|
|
app = create_app(listener)
|
|||
|
|
|
|||
|
|
# 启动Web服务器
|
|||
|
|
try:
|
|||
|
|
print(f"Web服务已启动，请访问 http://{args.host}:{args.web_port}/")
|
|||
|
|
app.run(host=args.host, port=args.web_port)
|
|||
|
|
except KeyboardInterrupt:
|
|||
|
|
print("\n退出...")
|
|||
|
|
finally:
|
|||
|
|
listener.running = False
|
|||
|
|
receiver_thread.join(timeout=1.0)
|
|||
|
|
|
|||
|
|
if __name__ == "__main__":
|
|||
|
|
main()
|