18、树莓派汽车仪表盘系统搭建与优化

最新推荐文章于 2025-09-19 14:16:13 发布

rust6ferris

最新推荐文章于 2025-09-19 14:16:13 发布

阅读量41

点赞数

CC 4.0 BY-SA版权

分类专栏：树莓派打造智能汽车文章标签：树莓派汽车仪表盘 Flask

本文链接：https://blog.youkuaiyun.com/rust6ferris/article/details/151810542

树莓派打造智能汽车专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

树莓派汽车仪表盘系统搭建与优化

1. 资源下载与本地部署

由于树莓派在汽车中使用时可能无法保证网络连接，因此不能依赖公共 CDN，需要将所需资源下载到本地。
- 下载 Bootstrap ：
1. 访问 Bootstrap 下载页面（https://getbootstrap.com/docs/4.4/getting-started/download/）。
2. 确认使用的是最新版本，可点击屏幕右上角的 “v4.4”，从版本下拉菜单中选择 “latest”。
3. 滚动到 “Compiled CSS and JS” 部分，选择下载源代码，会得到一个压缩文件。
4. 双击解压该文件，得到一个类似 bootstrap - 4.3.1 - dist 的文件夹（版本号可能不同）。
5. 在项目终端的 Pi_Car 文件夹内创建 static 文件夹： mkdir Pi_Car/static 。
6. 将整个 bootstrap 文件夹移动到 static 文件夹中，可通过文件管理器或命令行操作： mv /Users/coburn/Downloads/bootstrap - 4.3.1 - dist /Users/coburn/Documents/Pi - Car/Pi_Car/static ，需根据自己的文件夹结构修改路径。
- 下载 Font Awesome ：
1. 访问 Font Awesome 网站（https://fontawesome.com/），点击 “Start for Free” 创建账户，输入邮箱地址并选择 “Send Kit Code”，未注册无法下载。
2. 确认邮箱地址后，访问 “Other Methods” 页面（https://fontawesome.com/start#other - methods），选择下载。
3. 从下一页选择 “Download Font Awesome Free for the Web”，下载新文件，文件名类似 fontawesome - free - 5.13.0 - web（版本号可能变化）。
4. 双击解压压缩文件，将其移动到 static 文件夹： mv /Users/coburn/Downloads/fontawesome - free - 5.13.0 - web /Users/coburn/Documents/Pi - Car/Pi_Car/static 。

以下是整个资源下载与部署的流程图：

graph LR
    A[开始] --> B[下载 Bootstrap]
    B --> C[解压 Bootstrap]
    C --> D[创建 static 文件夹]
    D --> E[移动 Bootstrap 到 static 文件夹]
    A --> F[注册 Font Awesome]
    F --> G[下载 Font Awesome]
    G --> H[解压 Font Awesome]
    H --> I[移动 Font Awesome 到 static 文件夹]
    E --> J[完成资源部署]
    I --> J

2. 核心仪表盘创建

在 templates 文件夹内创建 main.html 文件： touch templates/main.html ，以下是该文件的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial - scale=1, shrink - to - fit=no">
    <title>Pi Car</title>
    <meta name="description" content="Raspberry Pi based car system">
    <meta name="author" content="Joe Coburn">
    <link href="static/fontawesome - free - 5.13.0 - web/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="static/bootstrap - 4.3.1 - dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
    <div class="container text - center text - light">
        <h1>Hello.</h1>
        <h2>Wednesday 8th January 2020</h2>
        <div class="row">
            <div class="col text - left">
                <i class="fas fa - clock"></i>15:50
            </div>
            <div class="col text - right">
                <i class="fas fa - snowflake"></i> 20° C
                <br />
                <i class="fas fa - moon"></i>
                <i class="fas fa - sun"></i>Daytime
            </div>
        </div>
        <div class="row">
            <div class="col text - middle">
                <i class="fas fa - car icon - huge"></i>
            </div>
        </div>
        <div class="row">
            <div class="col text - middle">
                <i class="fas fa - exclamation"></i><span class="exclamation">Boot is open</span>
                <br>
                <i class="fas fa - lightbulb"></i>Fog lights are on
            </div>
        </div>
    </div>
</body>
</html>

HTML 是超文本标记语言，用于网站的标记，它本身不能进行计算或逻辑操作，只是给浏览器提供解释的指令。HTML 标签需要匹配的闭合标签，但也有自闭合标签。上述代码中的 head 标签用于定义页面元数据，如标题、字符编码等；body 标签包含页面的主要内容，div 标签作为容器，H 标签用于标题，i 标签用于显示 Font Awesome 图标。

3. CSS 样式设置

在 static 文件夹内创建 CSS 文件夹和 style.css 文件：

mkdir Pi_Car/static/css
touch Pi_Car/static/css/style.css

以下是 style.css 文件的代码：

html,
body {
    font - size: 25px;
    background - color: var(--gray - dark);
    text - shadow: 2px 2px #000000;
    cursor: none;
    padding: 0;
}
i {
    margin - right: 10px;
}
.icon - huge {
    font - size: 350px;
    font - weight: bold;
    text - shadow: 4px 4px #000000;
}
.fa - snowflake {
    color: var(--blue);
}
.fa - sun {
    color: var(--yellow);
}
.fa - moon {
    color: var(--cyan);
}
.fa - exclamation,
.exclamation {
    color: var(--red);
}

CSS 用于美化页面，可改变元素的样式和布局。上述代码中，通过选择器对不同的 HTML 元素进行样式设置，如设置字体大小、背景颜色、文本阴影等，部分颜色使用了 Bootstrap 变量。

4. 修改应用路由

在 main.py 中修改应用路由，使用 Flask 的 render_template 函数加载 main.html 模板，暂时忽略数据：

from flask import Blueprint, jsonify, render_template

# 临时修改路由
@data_blueprint.route("/")
def show():
    app.logger.info("Starting to retrieve core data")
    temperature = Sensors.get_external_temp()
    boot_status = Sensors.get_boot_status()
    light_status = Sensors.get_light_status()
    reverse_light = Sensors.get_reverse_status()
    fog_light = Sensors.get_fog_light_status()
    rear_distance = Sensors.get_rear_distance_sensor()
    result = {
        "temperature": "temperature",
        "boot": "boot_status",
        "light": "light_status",
        "reverse": "reverse_light",
        "rear_distance": "rear_distance",
        "fog": "fog_light"
    }
    Sensors.beep()
    app.logger.info("Finished retrieving core data")
    app.logger.debug(f"Core data: {result}")
    # return jsonify(result)
    return render_template("main.html")

运行应用后，在浏览器中访问 http://127.0.0.1:5000/ 查看效果。此时看到的仪表盘是静态的，显示的是硬编码的数据。

5. 自动加载树莓派浏览器

为了实现无交互启动，让树莓派在启动后自动打开浏览器访问应用。
- 若树莓派的迷你 LCD 显示屏未连接，使用全尺寸 HDMI 转 micro - HDMI 电缆连接。
- 通过 SSH 连接到树莓派。
- 编辑 LXDE - pi/autostart 文件： sudo nano /etc/xdg/lxsession/LXDE - pi/autostart 。
- 在现有选项下添加以下命令：

/usr/bin/chromium - browser --no - first - run --noerrdialogs --start - fullscreen --start - maximized --disable - notifications --disable - infobars --kiosk --incognito http://localhost:5000

该命令会启动 Chromium 浏览器，指向 Flask 服务器的本地地址和端口，并设置浏览器以无干扰模式启动。
- 保存并退出文件，重启树莓派，观察浏览器在桌面环境启动后是否自动打开。

若需要调整显示方向，编辑 dispsetup.sh 文件： sudo nano /usr/share/dispsetup.sh ，在文件末尾的 exit 0 之前添加以下代码：

DISPLAY=:0 xrandr --output HDMI - 1 --rotate left

可将 “left” 替换为 “right”、“inverted” 或 “normal” 来改变旋转方向。保存文件后重启树莓派使更改生效。

6. 显示传感器数据

将模板和传感器数据关联起来，修改 main.py 中的主路由：

from flask import Blueprint, render_template
from.sensors import Sensors
from flask import current_app as app
from datetime import datetime

main_blueprint = Blueprint("main", __name__)

@main_blueprint.route("/")
def show():
    app.logger.info("Starting to retrieve core data")
    sensors = Sensors()
    temperature = sensors.get_external_temp()
    boot_status = sensors.get_boot_status()
    light_status = sensors.get_light_status()
    fog_light = sensors.get_fog_light_status()
    today = datetime.now()
    time = today.strftime("%H:%M")
    date = today.strftime("%A %d %B %Y")
    result = {
        "temperature": temperature,
        "boot": boot_status,
        "light": light_status,
        "fog": fog_light,
        "time": time,
        "date": date
    }
    app.logger.info("Finished retrieving core data")
    app.logger.debug(f"Core data: {result}")
    return render_template("main.html", data = result)

在 main.html 模板中，可通过 Jinja2 变量访问数据，以下是修改后的 body 标签代码：

<div class="container text - center text - light">
    <h2>Hello.</h2>
    <h3>{{ data.date }}</h3>
    <div class="row">
        <div class="col text - left">
            <i class="fas fa - clock"></i>{{ data.time }}
        </div>
        <div class="col text - right">
            {% if data.temperature <= 4 %}
                <i class="fas fa - snowflake"></i>
            {% endif %}
            {{ data.temperature }}° C
            <br />
            {% if data.light == 'Daytime' %}
                <i class="fas fa - sun"></i>
            {% else %}
                <i class="fas fa - moon"></i>
            {% endif %}
            {{ data.light }}
        </div>
    </div>
    <div class="row">
        <div class="col text - middle">
            <i class="fas fa - car icon - huge"></i>
        </div>
    </div>
    <div class="row">
        <div class="col text - middle">
            {% if data.boot == 'Open' %}
                <!-- 此处原文档未完整给出代码 -->
            {% endif %}
        </div>
    </div>
</div>

通过上述步骤，可实现树莓派汽车仪表盘系统的搭建、优化以及传感器数据的显示。整个过程涵盖了资源下载、HTML 页面创建、CSS 样式设置、Python 路由修改和浏览器自动加载等操作。

树莓派汽车仪表盘系统搭建与优化（续）

7. 系统测试与验证

完成上述步骤后，需要对系统进行测试和验证，确保仪表盘系统能够正常工作并显示准确的传感器数据。
- 本地测试 ：在本地计算机上运行应用程序，访问 http://127.0.0.1:5000/ ，观察仪表盘的显示效果。检查页面布局是否正确，图标是否正常显示，以及静态数据是否正确展示。
- 树莓派测试 ：将代码部署到树莓派上，重启树莓派，确保浏览器自动打开并访问应用程序。等待一段时间，让 Flask 服务器启动完成，观察仪表盘是否显示传感器的实时数据。
- 数据验证 ：检查显示的温度、时间、日期、车门状态、灯光状态等数据是否与实际传感器数据一致。可以通过模拟不同的传感器状态（如改变温度、开关车门等），观察仪表盘上的数据是否相应更新。

以下是系统测试的步骤表格：
| 测试阶段 | 测试内容 | 测试方法 | 预期结果 |
| ---- | ---- | ---- | ---- |
| 本地测试 | 页面布局和静态数据显示 | 访问 http://127.0.0.1:5000/ | 页面布局正确，图标正常显示，静态数据正确 |
| 树莓派测试 | 浏览器自动打开和应用程序访问 | 重启树莓派，等待浏览器自动打开 | 浏览器自动打开并访问应用程序，显示页面 |
| 数据验证 | 传感器数据显示 | 模拟不同传感器状态 | 仪表盘数据与实际传感器数据一致 |

8. 性能优化

为了提高系统的性能和响应速度，可以对系统进行一些优化。
- 缓存机制 ：在 Flask 中使用缓存来减少对传感器数据的频繁读取。可以使用 Flask - Caching 扩展来实现缓存功能。以下是一个简单的示例：

from flask import Flask
from flask_caching import Cache

app = Flask(__name__)
cache = Cache(app, config={'CACHE_TYPE': 'simple'})

@cache.cached(timeout=60)  # 缓存 60 秒
def get_sensor_data():
    sensors = Sensors()
    temperature = sensors.get_external_temp()
    boot_status = sensors.get_boot_status()
    light_status = sensors.get_light_status()
    fog_light = sensors.get_fog_light_status()
    today = datetime.now()
    time = today.strftime("%H:%M")
    date = today.strftime("%A %d %B %Y")
    result = {
        "temperature": temperature,
        "boot": boot_status,
        "light": light_status,
        "fog": fog_light,
        "time": time,
        "date": date
    }
    return result

@main_blueprint.route("/")
def show():
    app.logger.info("Starting to retrieve core data")
    result = get_sensor_data()
    app.logger.info("Finished retrieving core data")
    app.logger.debug(f"Core data: {result}")
    return render_template("main.html", data=result)

异步处理 ：使用 Flask 的异步处理功能来提高系统的并发性能。可以使用 async 和 await 关键字来实现异步函数。例如，将传感器数据读取函数改为异步函数：

import asyncio

async def get_sensor_data_async():
    sensors = Sensors()
    temperature = await sensors.get_external_temp_async()
    boot_status = await sensors.get_boot_status_async()
    light_status = await sensors.get_light_status_async()
    fog_light = await sensors.get_fog_light_status_async()
    today = datetime.now()
    time = today.strftime("%H:%M")
    date = today.strftime("%A %d %B %Y")
    result = {
        "temperature": temperature,
        "boot": boot_status,
        "light": light_status,
        "fog": fog_light,
        "time": time,
        "date": date
    }
    return result

@main_blueprint.route("/")
async def show():
    app.logger.info("Starting to retrieve core data")
    result = await get_sensor_data_async()
    app.logger.info("Finished retrieving core data")
    app.logger.debug(f"Core data: {result}")
    return render_template("main.html", data=result)

以下是性能优化的流程图：

graph LR
    A[开始] --> B[使用缓存机制]
    B --> C[异步处理传感器数据读取]
    C --> D[测试优化后的系统]
    D --> E[性能提升验证]
    E --> F[结束]

9. 安全考虑

在部署树莓派汽车仪表盘系统时，需要考虑系统的安全性，防止潜在的安全风险。
- 网络安全 ：确保树莓派所在的网络是安全的，避免网络攻击。可以使用防火墙来限制对树莓派的访问，只允许特定的 IP 地址或端口访问应用程序。
- 数据安全 ：对传感器数据进行加密处理，防止数据在传输过程中被窃取。可以使用 HTTPS 协议来加密数据传输。在 Flask 中，可以使用 Flask - SSLify 扩展来强制使用 HTTPS。

from flask_sslify import SSLify

app = Flask(__name__)
sslify = SSLify(app)

用户认证 ：如果需要对仪表盘系统进行访问控制，可以添加用户认证功能。可以使用 Flask - Login 扩展来实现用户登录和认证。以下是一个简单的示例：

from flask_login import LoginManager, UserMixin, login_required

login_manager = LoginManager()
login_manager.init_app(app)

class User(UserMixin):
    def __init__(self, id):
        self.id = id

@login_manager.user_loader
def load_user(user_id):
    return User(user_id)

@app.route("/dashboard")
@login_required
def dashboard():
    return render_template("dashboard.html")

以下是安全考虑的步骤列表：
1. 配置防火墙，限制网络访问。
2. 使用 HTTPS 协议加密数据传输。
3. 添加用户认证功能，控制对仪表盘系统的访问。