在Web开发中，Vue 通过 `$emit()` 和 `$on()`实现组件间通信，而 Qt 通过 信号和槽（Signal & Slot） 机制实现解耦的对象通信。与此同时，QML + QSS 和 HTML + CSS 也存在类似的结构，分别用于 UI 构建和样式管理。本文将探讨 Qt 和 Vue 在 事件通信 和 UI 设计 方面的异同点。

在探讨Qt与Vue的异曲同工之处，先回顾一下Qt的信号和槽、QML、QSS。
# Qt的信号和槽、QML、QSS
## Qt的信号和槽机制是什么？
 
Qt的信号（Signal）和槽（Slot）是一种 **观察者模式** 的实现，主要用于对象之间的 **解耦通信**。当某个对象的状态发生变化时，可以发射（emit）信号，所有连接到该信号的槽函数都会自动调用，类似于事件回调机制。

#### **1. 语法**
Qt 使用 `QObject` 提供信号和槽机制：
```cpp
class MyClass : public QObject {
    Q_OBJECT
public:
    MyClass(QObject* parent = nullptr) : QObject(parent) {}

signals:
    void mySignal(int value);  // 信号

public slots:
    void mySlot(int value) {   // 槽
        qDebug() << "Received value:" << value;
    }
};
```
连接信号和槽：
```cpp
MyClass obj1, obj2;
QObject::connect(&obj1, &MyClass::mySignal, &obj2, &MyClass::mySlot);
obj1.mySignal(42);  // 发射信号，obj2 的 mySlot() 被调用
```

---

### **2. Qt信号和槽的底层实现**
Qt 的信号槽依赖于 **元对象系统（Meta-Object System, MOC）**，其核心机制包括：
#### **（1）MOC 预处理**
Qt **不会**使用 C++ 直接提供的函数指针或标准回调，而是使用 MOC 预处理 `Q_OBJECT` 宏，生成 **信号槽映射表**。编译时，MOC 工具会解析 `.h` 文件，生成一个 `.moc` 代码文件，其中包含：
- 信号槽的 **注册** 信息
- 事件派发逻辑
- 反射调用函数（基于 `QMetaObject`）

#### **（2）信号本质**
信号是 **类的成员函数**，但不需要实现体。MOC 生成的 `.moc` 文件中，会为每个信号创建 `QMetaObject::activate()` 调用，用于触发信号。

```cpp
void MyClass::mySignal(int value) {
    void *args[] = { &value };
    QMetaObject::activate(this, &MyClass::staticMetaObject, 0, args);
}
```

#### **（3）槽的调用**
MOC 解析 `connect()` 语句，并在 `QMetaObject` 内部维护 **信号槽连接表**，当信号触发时：
- 通过 `QMetaObject::activate()` 解析连接表
- **直接调用** 目标对象的槽函数（如果是 Direct 连接）
- **投递到事件队列**（如果是 Queued 连接）

---

### **3. 信号和槽的连接方式**
Qt 支持四种连接方式：
| 连接方式 | 说明 |
|---------|------|
| `Qt::AutoConnection` | 默认方式，自动选择 Direct 或 Queued |
| `Qt::DirectConnection` | 直接调用槽（类似普通函数调用）|
| `Qt::QueuedConnection` | 通过事件队列异步调用槽 |
| `Qt::BlockingQueuedConnection` | 同步调用槽，阻塞当前线程 |

示例：
```cpp
QObject::connect(&obj1, &MyClass::mySignal, &obj2, &MyClass::mySlot, Qt::QueuedConnection);
```

---

### **4. 什么时候用信号和槽？**
信号和槽适用于以下情况：
1. **对象之间的通信**  
   - 例如 GUI 组件之间的交互（按钮点击、窗口更新等）
2. **解耦模块间的依赖**  
   - 不需要知道对方的具体类型，只需通过信号通知
3. **跨线程通信**  
   - 使用 `Qt::QueuedConnection` 进行线程间消息传递
4. **动态事件响应**  
   - 例如插件系统，动态添加槽函数进行事件处理

---

### **5. 何时不用信号和槽？**
- **性能关键代码**  
  信号和槽有一定 **运行时开销**（如 `QMetaObject` 查表、事件队列处理），如果需要极致性能，可以考虑直接使用函数调用或回调函数。
  
- **简单的函数调用**  
  如果是 **同一类内部的调用**，或者**两个对象绑定紧密**，可以直接调用成员函数，而不必使用信号和槽。

---

### **6. 总结**
- **信号和槽用于解耦通信**，提供了类似 **观察者模式** 的机制。
- **基于 MOC 预处理**，通过 `QMetaObject::activate()` 进行信号分发。
- **支持跨线程通信**，可使用 `Qt::QueuedConnection` 在不同线程间投递消息。
- **适用于 GUI 事件、模块解耦、动态交互**，但在性能敏感场景需谨慎使用。



## QML的作用
### **QML 是什么？**

QML（Qt Modeling Language）是一种 **声明式 UI 语言**，用于 **构建 Qt Quick 界面**。它的语法类似 JSON，支持 **动画、数据绑定、JavaScript 逻辑**，并能与 C++ 交互。

  **QML 示例**：

```qml
Rectangle {
    width: 200; height: 100
    color: "red"
}
```

  **数据绑定**：

```qml
Rectangle {
    width: parent.width / 2
}
```

  **动画**：

```qml
Rectangle {
    width: 100; height: 100
    color: "blue"

    NumberAnimation on width {
        from: 100; to: 300
        duration: 1000
    }
}
```

 **C++ 交互**（绑定对象）：

```cpp
QQmlApplicationEngine engine;
engine.load(QUrl("qrc:/main.qml"));
```

------

### **QML 依赖什么解析？**

QML 依赖 **Qt QML 模块（QQmlEngine）** 进行解析，包括：

✅ **1. 解析阶段**（`QQmlEngine`）

- **QML 代码 → AST（抽象语法树）**
- 解析 `.qml` 文件，转换为对象结构

✅ **2. 对象创建阶段**（`QQmlComponent`）

- 解析后的 AST 转换为 **QObject 对象树**
- 组件实例化，进行属性绑定

✅ **3. 绑定 & 渲染阶段**

- **QML 绑定引擎** 计算属性（`width: parent.width / 2`）
- **Qt Quick（QQuick）** 负责 UI 渲染（Scene Graph）

**QML 解析核心 API**：

```cpp
QQmlApplicationEngine engine;
engine.load(QUrl("qrc:/main.qml"));
```

**手动解析 QML 文件**：

```cpp
QQmlEngine engine;
QQmlComponent component(&engine, QUrl("qrc:/main.qml"));
QObject *object = component.create();
```

------

### **总结**

- **QML 是 Qt Quick 的声明式 UI 语言**，用于构建界面。
- **QML 依赖 `QQmlEngine` 解析**，转换成 **QObject 对象**，再由 **Qt Quick 渲染**。
- **解析过程**：QML 代码 → AST → 对象创建 → 绑定 → Qt Quick 渲染。
- **支持 JavaScript 逻辑 & C++ 交互**，更适合现代 UI。














## QSS的作用



### **1. QSS 是什么？**

QSS（Qt Style Sheets）是 Qt 提供的 **样式表机制**，用于 **美化 QWidget 界面**，但 **不适用于 QML**。

✅ **作用**：

- 统一 Qt **窗口、控件（QWidget、QPushButton 等）** 的样式
- 支持 **选择器、伪类、属性设置**
- **动态修改样式**，支持 **代码或 QSS 文件加载**

  **QSS 示例**：

```css
QPushButton {
    background-color: blue;
    color: white;
    border-radius: 5px;
}
QPushButton:hover {
    background-color: lightblue;
}
```

 **QSS 加载方式**（C++ 代码）：

```cpp
QFile file("style.qss");
file.open(QFile::ReadOnly);
QString style = file.readAll();
qApp->setStyleSheet(style);
```

------

### **2. QSS 解析原理**

Qt 解析 QSS 的过程包括：

1. **QSS 语法解析**（Lexical Parsing）
   - Qt 内部 **解析 QSS 语法**，构建 **CSS 规则树**（类似 AST）。
   - 解析 **选择器、属性、值**（如 `QPushButton { color: red; }`）。
2. **匹配控件**（Widget Matching）
   - Qt 遍历 **所有 QWidget**，匹配 **QSS 选择器**。
   - 例如：
     - `QPushButton {}` → 作用于所有 QPushButton
     - `QPushButton#myButton {}` → 仅作用于 `objectName="myButton"` 的按钮
     - `QPushButton:hover {}` → 仅在鼠标悬停时生效
3. **应用样式**（Style Application）
   - Qt **动态修改控件的属性（颜色、字体、边框）**，并 **重绘 UI**。
   - 但 QSS **不能修改 QWidget 布局**，仅适用于样式调整。

  **QSS 解析核心 API**：

```cpp
qApp->setStyleSheet(qssContent);
```

------

### **3. QSS 解析的局限性**

❌ **仅支持 QWidget，不支持 QML**（QML 直接用 `color: "red"`）
 ❌ **无法修改窗口布局**（只影响控件外观）
 ❌ **性能较低**（大量 QSS 可能影响 UI 响应速度）

------

### **4. 适用场景**

✅ **传统桌面应用（QWidget）** → 需要统一样式
 ✅ **不涉及动画的静态 UI** → QSS 简单易用
 ❌ **Qt Quick（QML）项目** → 直接用 `color`、`border` 定义样式

------

### **5. 总结**

- **QSS 是 QWidget 的样式表，但不支持 QML**。
- **Qt 解析 QSS 语法，匹配控件，再应用样式**。
- **适用于 QWidget 界面美化，但性能一般，复杂 UI 用 QML更佳**。



---


# **Qt vs Vue：从底层机制看信号槽、组件通信与 UI 渲染**

## **1. 信号槽 vs 事件通信：底层实现分析**
Qt 的 **信号和槽（Signal & Slot）** 机制和 Vue 的 **事件通信（Event Bus）** 机制虽然都基于 **观察者模式（Observer Pattern）**，但它们的底层实现方式完全不同。

 

### **1.1 Qt 信号和槽的底层实现**
Qt 使用 **元对象系统（Meta-Object System, MOC）** 处理信号和槽的映射关系。主要流程如下：

1. **MOC 编译阶段**
   - Qt 在编译时，MOC 工具会解析 `Q_OBJECT` 宏，生成 `.moc` 文件。
   - 这个文件包含了 **信号槽映射表（QMetaObject）** 和 **事件分发函数**。

2. **注册信号槽**
   - `QObject::connect(sender, SIGNAL(sig()), receiver, SLOT(slot()))` 会将信号-槽关系存入 `QMetaObject`。
   - Qt 运行时维护一个 **哈希表**，存储对象与信号槽的映射。

3. **发射信号**
   - `emit signal()` 触发后，Qt 通过 `QMetaObject::activate()` 查找所有连接的槽，并调用它们。

#### **示例**
```cpp
class Sender : public QObject {
    Q_OBJECT
signals:
    void mySignal(int value);
};

class Receiver : public QObject {
    Q_OBJECT
public slots:
    void mySlot(int value) {
        qDebug() << "Received:" << value;
    }
};

Sender sender;
Receiver receiver;
QObject::connect(&sender, &Sender::mySignal, &receiver, &Receiver::mySlot);
sender.mySignal(42); // 触发信号，槽函数被调用
```

#### **底层机制**
```cpp
void QMetaObject::activate(QObject *sender, int signal_index, void **argv)
{
    // 遍历所有已注册的槽函数，并逐一调用
    for (Slot *slot : signalToSlots[sender][signal_index]) {
        slot->invoke(argv);
    }
}
```

##### **优缺点**
✅ **完全解耦**，对象之间无需互相认识  
✅ **支持跨线程通信**（`Qt::QueuedConnection`）  
❌ **运行时反射机制有开销**（`QMetaObject::invoke()` 使用动态查找）  
❌ **必须使用 `Q_OBJECT`，不支持模板类**  

 

### **1.2 Vue 事件通信的底层实现**
Vue 的事件机制本质上是 **发布-订阅模式（Pub-Sub）**，由一个全局 `Event Bus` 维护所有事件的监听者。

#### **事件触发流程**
1. `this.$emit(eventName, data)` 触发事件，Vue 会在 `this._events[eventName]` 查找所有注册的回调函数。
2. 遍历所有监听者 `this._events[eventName]`，依次执行回调。

#### **示例**
```vue
// 子组件
<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit("dataChanged", 42);
    }
  }
}
</script>
```

```vue
// 父组件
<template>
  <ChildComponent @dataChanged="onDataChanged"/>
</template>

<script>
export default {
  methods: {
    onDataChanged(value) {
      console.log("收到子组件的数据:", value);
    }
  }
}
</script>
```

#### **底层实现**
```js
Vue.prototype.$emit = function (event, ...args) {
    const listeners = this._events[event] || [];
    listeners.forEach(listener => listener.apply(this, args));
};
```

##### **优缺点**
✅ **轻量级，运行时开销小**（基于 JS 的对象映射）  
✅ **支持动态注册事件**（无需预定义）  
❌ **父子组件紧耦合**（必须通过 `$parent` 或 `$children` 获取组件实例）  
❌ **不支持跨线程通信**  

 

## **2. UI 渲染架构对比**

Qt 和 Vue 的 UI 渲染方式完全不同，Qt 采用 **Scene Graph + OpenGL**，Vue 依赖 **DOM + Virtual DOM**。


### **2.1 Qt Scene Graph 渲染**
Qt 采用 **场景图（Scene Graph）** 进行 GPU 加速渲染，渲染过程如下：
1. **构建 QML 组件树**，每个 `Item` 对应一个 `QSGNode`。
2. **更新场景图**，在 `update()` 触发时，将 `QSGNode` 传递到 **渲染线程**。
3. **OpenGL 绘制**，`QSGRenderer` 将节点转换为 OpenGL 指令，最终渲染到屏幕。

#### **代码示例**
```qml
Rectangle {
    width: 200; height: 100
    color: "lightgray"

    Button {
        text: "Click Me"
        anchors.centerIn: parent
        font.pixelSize: 16
    }
}
```

#### **底层机制**
```cpp
void QQuickWindow::renderSceneGraph() {
    for (QSGNode *node : sceneGraphNodes) {
        node->renderGL();
    }
}
```

##### **优缺点**
✅ **GPU 加速，适合高性能 UI**  
✅ **跨平台，适用于桌面和嵌入式**  
❌ **C++ 代码复杂度高**  

 

### **2.2 Vue Virtual DOM 渲染**
Vue 采用 **Virtual DOM** 进行高效的 UI 更新，渲染流程如下：
1. **解析 `template` 生成 `VNode` 虚拟节点树**。
2. **VNode Diff 计算最小更新路径**。
3. **通过 `document.createElement()` 更新真实 DOM**。

#### **示例**
```vue
<template>
  <div class="box">Hello Vue</div>
</template>
```

#### **底层机制**
```js
function renderVNode(vnode) {
    if (vnode.type === "text") {
        return document.createTextNode(vnode.value);
    }
    const el = document.createElement(vnode.tag);
    vnode.children.forEach(child => el.appendChild(renderVNode(child)));
    return el;
}
```

##### **优缺点**
✅ **轻量级，适合 Web 页面**  
✅ **支持服务端渲染（SSR）**  
❌ **依赖 DOM，性能不如 Qt Scene Graph**  

 

 

## **3. 总结**
1. **Qt 信号槽 vs Vue 事件**
   - Qt 采用 `QMetaObject` 维护信号-槽映射，适合跨线程通信，但运行时开销大。
   - Vue 事件基于 `Event Bus`，轻量级但仅适用于前端组件通信。

2. **Qt Scene Graph vs Vue Virtual DOM**
   - Qt 采用 **GPU 加速**，适用于高性能 UI。
   - Vue 依赖 **Virtual DOM**，适合 Web 应用。

3. **如何选择？**
   - **桌面应用 / 嵌入式** → **Qt**（更高效）
   - **Web 前端 / H5** → **Vue**（更轻量）

Qt与Web的异曲同工之处？

记录一下去重脚本

脚本一：去除哈希后缀
```shell
#!/bin/zsh

echo "========== 开始检测重复文件 =========="

# 定义匹配哈希值和编号的正则表达式
hash_pattern='-[a-f0-9]{8,}$'  # 例如：-d0a43534a7a7
number_pattern='（[0-9]+）$'     # 例如：（1）

typeset -A files  # 定义 Zsh 关联数组

# 遍历当前目录下的所有 mp3 文件
while IFS= read -r file; do
    base_name="${file%.mp3}"  # 去掉 .mp3 扩展名
    clean_name=$(echo "$base_name" | sed -E "s/$hash_pattern//; s/$number_pattern//")

    # 确保 files[$clean_name] 是数组
    if [[ -n "${files[$clean_name]}" ]]; then
        files[$clean_name]+="|$file"  # 用 | 连接文件路径，避免路径分割问题
    else
        files[$clean_name]="$file"
    fi
done < <(find . -type f -name "*.mp3" -print0 | xargs -0 -I{} echo {})

# 遍历每个去重后的文件名组
for key in "${(@k)files}"; do
    file_list=("${(@s:|:)files[$key]}")  # 用 | 分割文件路径，转换为数组

    if [[ ${#file_list[@]} -gt 1 ]]; then
        echo ">>> 检测到重复文件：$key"
        for f in "${file_list[@]}"; do
            echo "    - \"$f\""
        done

        # 选出最短文件名作为保留项，并确保 `min_file` 不为空
        min_file=""
        for f in "${file_list[@]}"; do
            if [[ -z "$min_file" || ${#f} -lt ${#min_file} ]]; then
                min_file="$f"
            fi
        done

        echo "    ✅ 保留文件: \"$min_file\""

        # 删除其他文件
        for f in "${file_list[@]}"; do
            if [[ "$f" != "$min_file" ]]; then
                echo "    ❌ 删除: \"$f\""
                rm "$f"
            fi
        done
    fi
done

echo "========== 去重完成！ =========="

```

去除重复的歌曲脚本

Rust生态在嵌入式单片机方面也越来越完善了，所以浅尝用Rust开发来开发STM32。


## 前言


**开发板准备:** STM32F103C8T6




在 macOS 下用 Rust 开发并烧写 STM32，可以按照以下步骤进行操作：

------

### 1. **准备开发环境**

**需要提前安装STM32相关的工具**



#### 安装 Rust 工具链

1. 在终端中安装 Rust：

   ```bash
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   ```

2. 添加 ARM Cortex-M 目标架构：

   ```bash
   rustup target add thumbv7em-none-eabihf
   ```
   安装
`brew install probe-rs-tools
`
#### 安装 `cargo-generate` 和 `probe-rs`



   用于生成项目模板：

  ```bash
  cargo install cargo-generate
  ```
安装目标平台：
  ```bash
rustup target add thumbv7m-none-eabi
  ```

用于调试和烧写 STM32（弃用）：

  ```bash
  cargo install probe-rs
  ```

#### 安装 GCC 工具链

STM32 的编译需要交叉编译工具链，安装 ARM 工具链：

```bash
brew install --cask gcc-arm-embedded
```

#### 安装 OpenOCD

烧录程序所需 OpenOCD和stlink：

```bash
brew install open-ocd stlink
```

------

### 2. **创建 Rust 项目**

使用社区提供的模板快速生成项目：

1. 使用 

```
cargo-generate
```

生成项目：

```bash
cargo generate --git https://github.com/rust-embedded/cortex-m-quickstart
```

2. 按照提示输入项目名称，例如 `stm32_rust_demo`。

------

### 3. **配置项目**

#### 修改 `Cargo.toml`

根据 STM32 芯片选择对应的 HAL 库，使用 `stm32f1` 系列：

```toml

[dependencies]
cortex-m = "0.7.6"              # 使用最新版本
cortex-m-rt = "0.7.3"           # 和 HAL 匹配的版本
cortex-m-semihosting = "0.3.3"
panic-halt = "0.2.0"
stm32f1xx-hal = { version = "0.10", features = ["stm32f103", "rt"] }

# Uncomment for the panic example.
# panic-itm = "0.4.1"

# Uncomment for the allocator example.
# alloc-cortex-m = "0.4.0"

[[bin]]
name = "stm32_rust_demo"
test = false
bench = false

[profile.release]
codegen-units = 1 # better optimizations
debug = true # symbols are nice, and they don't increase the size on Flash
lto = true # better optimizations

[target.thumbv7m-none-eabi]
runner = "probe-rs run --chip STM32F103C8T6"
rustflags = [
    "-C", "link-arg=-Tlink.x"
]

[build]
target = "thumbv7m-none-eabi"

```


#### 设置链接脚本

在项目中包含 `memory.x` 文件，配置内存布局。例如，STM32F401 的内存布局如下：

```x
MEMORY
{
    FLASH : ORIGIN = 0x08000000, LENGTH = 64K
    RAM : ORIGIN = 0x20000000, LENGTH = 20K
}
```



------

### 4. **编写代码**

示例代码，点亮 STM32 板上的 LED：

```rust
#![no_std]
#![no_main]

use cortex_m_rt::entry;
use panic_halt as _; // 在发生 panic 时暂停
use stm32f4xx_hal::{
    pac,
    prelude::*,
};

#[entry]
fn main() -> ! {
    let peripherals = pac::Peripherals::take().unwrap();
    let gpioa = peripherals.GPIOA.split();

    // 设置 GPIOA5 为推挽输出模式
    let mut led = gpioa.pa5.into_push_pull_output();

    loop {
        led.set_high(); // 点亮 LED
        cortex_m::asm::delay(8_000_000); // 延迟
        led.set_low();  // 关闭 LED
        cortex_m::asm::delay(8_000_000); // 延迟
    }
}
```

------

### 5. **编译项目**

在项目目录下运行：

```bash
cargo build --release
```

然后不出意外应该能看到target下有一个thumbv7m-none-eabi目录，thumbv7m-none-eabi目录下还有一个release目录，release目录下有一个可执行文件stm32_rust_demo。

------

### 6. **烧写代码**

#### 1.使用 `probe-rs`查看调试器

1. 将调试器连接到 STM32 开发板。

执行以下命令查看是否正常识别：
```
probe-rs list 
```
如果能看到以下结果则说明连接没问题：

```

The following debug probes were found:
[0]: CMSIS_DAP -- 2e3c:f000:8D210C000040112513951D07 (CMSIS-DAP)

```

#### 2.修改OpenOCD配置

修改根目录下的openocd.cfg文件
```
# 设置调试器为cmsis-dap
source [find interface/cmsis-dap.cfg]
# 设置调试器所用接口为SWD
transport select swd
# 定义Flash大小为64K
set FLASH_SIZE 0x20000
# 设置芯片
source [find target/stm32f1x.cfg]
```


#### 3.使用 OpenOCD+GDB 来烧写固件（慢速法，不建议）

慢速法是指需要开启两个终端，通过arm-none-eabi-gdb来烧录，但是有第一次烧录成功，后续均无法烧录。
**1. 启动 OpenOCD：**

在项目的根目录下执行：
从前面的`probe-rs list`得到调试器类型CMSIS_DAP，所以执行

```bash
openocd -f interface/cmsis-dap.cfg -f openocd.cfg 
```

不出意外可以看到：

```
Open On-Chip Debugger 0.12.0
Licensed under GNU GPL v2
For bug reports, read
        http://openocd.org/doc/doxygen/bugs.html
Warn : Interface already configured, ignoring
Info : Listening on port 6666 for tcl connections
Info : Listening on port 4444 for telnet connections
Info : Using CMSIS-DAPv2 interface with VID:PID=0x2e3c:0xf000, serial=8D210C000040112513951D07
Info : CMSIS-DAP: SWD supported
Info : CMSIS-DAP: SWO-UART supported
Info : CMSIS-DAP: Atomic commands supported
Info : CMSIS-DAP: Test domain timer supported
Info : CMSIS-DAP: FW Version = 2.3.6
Info : CMSIS-DAP: Interface Initialised (SWD)
Info : SWCLK/TCK = 0 SWDIO/TMS = 1 TDI = 0 TDO = 0 nTRST = 0 nRESET = 1
Info : CMSIS-DAP: Interface ready
Info : clock speed 1000 kHz
Info : SWD DPIDR 0x1ba01477
Info : [stm32f1x.cpu] Cortex-M3 r1p1 processor detected
Info : [stm32f1x.cpu] target has 6 breakpoints, 4 watchpoints
Info : starting gdb server for stm32f1x.cpu on 3333
Info : Listening on port 3333 for gdb connections

```

若是调试器为ST-Link，则需要调整openocd.cfg和openOCD命令


**2. 启动终端使用 arm-none-eabi-gdb 来与 OpenOCD 交互：**

```
arm-none-eabi-gdb target/thumbv7m-none-eabi/release/stm32_rust_demo
```

3. 在gdb模式下，先执行:

```
target extended-remote :3333
```
不出意外可以看到：

```
Remote debugging using :3333
0x08000dea in ?? ()

```


**4. 在gdb模式下，再执行烧录命令:**


```
load
```
不出意外可以看到：

```
Loading section .vector_table, size 0x130 lma 0x8000000
Loading section .text, size 0x134 lma 0x8000130
Loading section .rodata, size 0x2c lma 0x8000264
Start address 0x08000130, load size 656
Transfer rate: 1 KB/sec, 218 bytes/write.

```

**5.重置设备并启动程序：**

```
monitor reset
```

**6.退出gdb模式:**
```
quit
```
需要再次确认，再输入`y`

**7.退出OpenOCD模式:**

快捷键Ctrl+C或者Command+C

**注意**
当前此种方法不能进行第二次烧录，原因未知。

#### 4.使用 OpenOCD 来烧写固件（快速法，推荐）

一键烧录命令：
```
openocd  -f openocd.cfg -c "tcl_port disabled" -c "gdb_port disabled" -c "program ./target/thumbv7m-none-eabi/release/stm32_rust_demo" -c reset -c shutdown

```

当用Rust开发STM32

---
# 深入解析 YUV 与 RGB 颜色空间

在图像和视频处理领域中，YUV 和 RGB 是两种主要的颜色空间。了解它们的结构、数据量计算和应用场景，对于视频编码、图像处理及压缩优化具有重要意义。本文将详细介绍 YUV 格式的三种常见采样方法（YUV444、YUV422 和 YUV420），并深入探讨 RGB 格式及其与 YUV 的区别。



---

## 什么是 YUV 颜色空间？

YUV 是一种颜色空间表示方式，它通过分离亮度（Y）和色度（U、V）来描述颜色信息。相比 RGB 格式，YUV 格式具有更高的压缩效率，特别适用于视频编码。YUV 颜色空间的亮度分量 Y 负责图像的明暗信息，而色度分量 U、V 则用于表示色彩偏移，这样的分离方式更符合人眼对亮度和色度的敏感度差异。

### YUV 组成结构

- **Y（Luminance）**：亮度分量，用来表示图像的明暗程度。Y 值越大，画面越亮。
- **U（Chrominance U）**：色度分量 U，表示蓝色的偏移信息。
- **V（Chrominance V）**：色度分量 V，表示红色的偏移信息。

通过分离亮度和色度分量，YUV 可以减少色度分量的采样率，从而达到更高的压缩效率，适用于视频传输和存储。

---

## YUV 采样格式详解

YUV 数据可以通过不同的采样方法来控制色度分量的采样率，常见的采样格式有 YUV444、YUV422 和 YUV420。每种格式的数据量和适用场景不同，具体介绍如下：

### 1. YUV444

YUV444 是最完整的 YUV 采样格式，所有像素都有独立的 Y、U 和 V 分量。因此，亮度和色度的分辨率完全一致，没有色度采样的压缩。YUV444 格式的数据量大，但颜色表现最为丰富。

- **组成**：每个像素包含一个 Y 值、一个 U 值和一个 V 值。
- **数据量计算**：假设图像分辨率为 `宽度 × 高度`，每个分量占 8 位（1 字节），则 YUV444 格式一帧的总数据量为：
  
  
$$
 
  \text{总字节数} = W \times H \times 3
 
$$
- **应用场景**：用于高质量的视频处理和电影制作，适合需要保留完整色彩信息的图像处理。

#### 示例
对于 1920 × 1080 的图像，YUV444 格式一帧的数据大小为：
$1920 \times 1080 \times 3 = 6220800 \text{ 字节}
$


---

### 2. YUV422

YUV422 格式在水平方向上每两个像素共用一个色度 U 和 V 值，即水平色度分辨率为亮度分辨率的一半。这种方式减少了一半的色度数据量，同时保留了较高的图像质量。

- **组成**：每个像素具有一个 Y 值，每两个像素共用一个 U 和一个 V 值。
- **数据量计算**：假设图像分辨率为 `宽度 × 高度`，则 YUV422 格式一帧的总数据量为：
  
  
$$
 \text{总字节数} = W \times H + \frac{W \times H}{2} + \frac{W \times H}{2} = 2 \times W \times H
$$
- **应用场景**：常用于电视视频信号和视频压缩，是一种平衡色彩和压缩效率的方案。

#### 示例


对于 1920 × 1080 的图像，YUV422 格式一帧的数据大小为：
$
2 \times 1920 \times 1080 = 4147200 \text{ 字节}
$


---

### 3. YUV420

YUV420 是一种压缩率更高的采样格式，它在水平方向和垂直方向上各减少一半的色度分量，即每四个像素共用一个色度 U 和 V 值。这种格式的数据量更小，广泛应用于流媒体和视频压缩中。

- **组成**：每个像素有一个 Y 值，每四个像素共用一个 U 和 V 值。
- **数据量计算**：假设图像分辨率为 `宽度 × 高度`，则 YUV420 格式一帧的总数据量为：

$$
  \text{总字节数} = W \times H + \frac{W \times H}{4} + \frac{W \times H}{4} = 1.5 \times W \times H
$$
- **应用场景**：用于流媒体、电视广播和视频编码标准，如 H.264、H.265 等，适合低带宽的传输场景。

#### 示例
对于 1920 × 1080 的图像，YUV420 格式一帧的数据大小为：
$1.5 \times 1920 \times 1080 = 3110400 \text{ 字节}
$

---

## RGB 颜色空间详解

RGB 是一种基于红、绿、蓝三原色的颜色表示方式，是显示设备和图像处理的常用颜色空间。RGB 的每个分量独立表示红、绿、蓝三种基本颜色，所有颜色都可以通过调节这三个分量的强度来实现。

### RGB 组成结构

- **R（Red）**：红色分量。
- **G（Green）**：绿色分量。
- **B（Blue）**：蓝色分量。

RGB 格式每个分量通常占用 8 位（1 字节），因此每个像素需要 3 字节的数据。

### RGB 数据量计算

假设图像分辨率为 `宽度 × 高度`，则 RGB 格式一帧的总数据量为：
$
\text{总字节数} = W \times H \times 3
$

#### 示例
对于 1920 × 1080 的图像，RGB 格式一帧的数据大小为：
$
1920 \times 1080 \times 3 = 6220800 \text{ 字节}
$

### RGB 应用场景

- **显示设备**：RGB 是显示设备的标准色彩模型，如电视屏幕、计算机显示器和手机屏幕。
- **图像编辑和设计**：RGB 是图像编辑、摄影和网页设计的通用色彩模式。
- **Web 和计算机图形**：RGB 色彩模式也是计算机图形和网页设计中最常见的颜色表示方式。

---

## YUV 与 RGB 的转换公式

YUV 和 RGB 之间可以通过以下公式相互转换，假设 YUV 分量的范围在 [0, 255]：

- **YUV 转 RGB**：
  $$
  \begin{align*}
  R &= Y + 1.402 \cdot (V - 128) \\
  G &= Y - 0.344136 \cdot (U - 128) - 0.714136 \cdot (V - 128) \\
  B &= Y + 1.772 \cdot (U - 128)
  \end{align*}
  $$

- **RGB 转 YUV**：


 $$
  \begin{align*}
  Y &= 0.299 \cdot R + 0.587 \cdot G + 0.114 \cdot B \\
  U &= -0.14713 \cdot R - 0.28886 \cdot G + 0.436 \cdot B + 128 \\
  V &= 0.615 \cdot R - 0.51499 \cdot G - 0.10001 \cdot B + 128
  \end{align*}
 $$


---


## 总结：YUV 与 RGB 的比较


| 属性               | YUV                                 | RGB                     |
|--------------------|-------------------------------------|-------------------------|
| **颜色结构**       | 亮度 (Y) 和色度 (U、V)             | 红、绿、蓝三原色 (R、G、B) |
| **数据量**         | 可通过采样率调节                   | 固定，每像素 3 字节      |
| **应用场景**       | 视频编码、电视广播                 | 显示设备、图像编辑      |
| **压缩效率**       | 高，通过色度采样降低数据量         | 较低                   |
| **人眼感知优化**   | 对亮度更敏感，色度采样更低         | 无优化                  |

深入解析 YUV 与 RGB 颜色空间

Arduino是一个开源的，支持多种类型单片机开发的代码框架，该框架最大程度的封装了Arduino开发板底层代码，开发者可以使用C++代码进行程序编写而不必思考底层(寄存器，时钟，外设等........)的实现，Arduino同时具有非常丰富和优质的库支持，非常适合没有硬件基础的软件开发者和想学习入门单片机开发的新手使用。


文档博客：https://misishijie.com/crankymonkey/arduino/arduino_overview.htm

## 第一个项目：点灯
**环境准备：**

1.Arduino IDE

2.开发板 Arduino UNO R4（WiFi）。

![IMG_20241020_212801.jpg](/static/img/3b1c7d7baf3a3c0691e9818861399195.IMG_20241020_212801.webp)

**准备工作：**

USB连接到开发板，打开IDE，安装开发板相关的库，在IDE里面选自己的设备（IDE会自动识别）

![image.png](/static/img/4ae677f3bdead068d578f332460fff5a.image.webp)

![image.png](/static/img/022aa0787b1c1a496fa2776042240d5a.image.webp)


**开始第一个程序：**

导入IDE的示例，找到File->Examples->01.Basices->Blink
然后开始编译：


![image.png](/static/img/d2b278c7a756e33d12b38d7fd232e58b.image.webp)
编译完成：


![image.png](/static/img/a2ee42294d9c40557ba8cf38e3e170ab.image.webp)

烧录程序到开发板：


![image.png](/static/img/938d9877b2a538ab9a837c6bf9176b01.image.webp)

这时候应该能看到指示灯闪烁。

![VID_20241020_214117.gif](/static/img/c82032e04f3011e1521183225358cbc2.VID_20241020_214117.gif)

## 安装FreeRTOS ##
**什么是FreeRTOS？**

FreeRTOS，简而言之，就是一个实时操作系统，那么为什么需要操作系统？
不难看出，Arduino程序结构由setup()和loop()两部分组成，要反复执行的代码要放在loop()中，并且这些代码一般都是顺序执行的。当需要实现的功能越来越复杂时，这种顺序执行的方式很难达到实时性，也就是不能同时处理多任务。而FreeRTOS可以让Arduino程序同时进行多任务调度。

**安装Arduino FreeRTOS库**

![image.png](/static/img/698bd1d35b905a87abb46083c486ebcd.image.webp)


安装Arduino FreeRTOS快速上手：
首先要包含Arduino FreeRTOS库的头文件。


```C++
#include <Arduino_FreeRTOS.h>
```
我们使用xTaskCreate()函数来创建任务，函数原型为：


```C++
xTaskCreate（TaskFunction_t pvTaskCode，const char * const pcName，uint16_t usStackDepth，void * pvParameters，UBaseType_t uxPriority，TaskHandle_t * pxCreatedTask）
```
在创建任务时，需要传入以下6个参数：

1. **pvTaskCode**:
   - **说明**: 任务函数的指针。
   - **用途**: 定义任务的执行代码。
2. **pcName**:
   - **说明**: 任务名称字符串。
   - **用途**: 一般用于调试和追踪，以便在系统中识别任务。
3. **usStackDepth**:
   - **说明**: 任务堆栈深度。
   - **用途**: 指定堆栈可以容纳的字数，而不是字节数。
   - **示例**: 如果堆栈为32位宽，并且 `usStackDepth` 为100，则分配400字节的堆栈空间（100 * 4字节）。
4. **pvParameters**:
   - **说明**: 任务输入参数。
   - **用途**: 可用于向任务传递数据，可以为NULL。
5. **uxPriority**:
   - **说明**: 任务优先级。
   - **用途**: 设定任务的执行优先级，其中0为最低优先级。
6. **pxCreatedTask**:
   - **说明**: 可用于接收任务句柄的指针。
   - **用途**: 允许在后续API调用中引用该任务，例如更改任务优先级或删除任务，可以为NULL。


创建两个串口任务和点灯任务：

```C++
xTaskCreate(taskPrint1, "Print1", 128, NULL, 1, NULL); 
xTaskCreate(taskPrint2, "Print2", 128, NULL, 2, NULL);
xTaskCreate(blink, "Blink", 128, NULL, 3, NULL);

```

注意：在RTOS中，不建议使用 **delay()** 函数，因为它会停止CPU，因此RTOS也将停止工作。
FreeRTOS具有内核API，可以在特定时间内阻止任务:

```C++
vTaskDelay(const TickType_t xTicksToDelay)
```

例如延时1秒：

```C++
vTaskDelay(1000 / portTICK_PERIOD_MS)
```


其中portTICK_PERIOD_MS与实际MCU的时钟频率相关。

启动任务：
```C++
vTaskStartScheduler();
```


完整代码：

``` C++
/*
  Blink

  Turns an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO
  it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to
  the correct LED pin independent of which board is used.
  If you want to know what pin the on-board LED is connected to on your Arduino
  model, check the Technical Specs of your board at:
  https://www.arduino.cc/en/Main/Products

  modified 8 May 2014
  by Scott Fitzgerald
  modified 2 Sep 2016
  by Arturo Guadalupi
  modified 8 Sep 2016
  by Colby Newman

  This example code is in the public domain.

  https://www.arduino.cc/en/Tutorial/BuiltInExamples/Blink
*/


#include <Arduino_FreeRTOS.h>



// the setup function runs once when you press reset or power the board
void setup() {
  Serial.begin(115200);           // Initialize serial communication at a baud rate of 115200
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
  // Create task
  xTaskCreate(taskPrint1, "Print1", 128, NULL, 1, NULL); 
  xTaskCreate(taskPrint2, "Print2", 128, NULL, 2, NULL);
  xTaskCreate(taskBlink, "Blink", 128, NULL, 3, NULL);
  vTaskStartScheduler();
}
void taskPrint1(void *param){
  while (1)
  {
    Serial.println("taskPrint1...");
    vTaskDelay(1000 / portTICK_PERIOD_MS ); 
  }
}
void taskPrint2(void *param){
    while (1)
  {
    Serial.println("taskPrint2...");
    vTaskDelay(1000 / portTICK_PERIOD_MS ); 
  }
}
void taskBlink(void *param){
    while (1)
  {
    digitalWrite(LED_BUILTIN, HIGH);  // turn the LED on (HIGH is the voltage level)
    vTaskDelay(1000 / portTICK_PERIOD_MS );           
    digitalWrite(LED_BUILTIN, LOW);   // turn the LED off by making the voltage LOW
    vTaskDelay(1000 / portTICK_PERIOD_MS );     
  }
        
}
// the loop function runs over and over again forever
void loop() {

}


```

然后编译，烧录，再点开串口监视器，选择115200的波特率。
可以看到，两个打印任务正常，灯也正常闪烁。

![image.png](/static/img/14b8bd39e06e3c018e1a82bc1df53560.image.webp)


## Arduino IDE 多文件开发

Arduino IDE 项目必须有一个 .ino 文件，且“入口函数”（如下）必须在这个文件，另外 Arduino IDE 要求 .ino 文件的名字和所在的项目文件夹名字一样

```cpp
void setup()
{

}

void loop()
{

}
```

官方给的示例，并没有给架构目录，所以项目比较大，全部都写在一个文件里就显得很混乱。所以多文件开发可以有效解决这些问题。
新建文件:task.h、task1.cpp、task2.cpp、task3.cpp

![image.png](/static/img/d7892e143ebf356f8321da00c580cf25.image.webp)

task.h
```C++
#ifndef TASK_H
#define TASK_H
#include <Arduino_FreeRTOS.h>
#include "Arduino.h"

void taskPrint1(void *param);
void taskPrint2(void *param);
void taskBlink(void *param);
#endif

```
task1.cpp
```C++
#include"task.h"

void taskPrint1(void *param){
  while (1)
  {
    Serial.println("taskPrint1...");
    vTaskDelay(1000 / portTICK_PERIOD_MS );
  }
}
```

task2.cpp
```C++
#include"task.h"

void taskPrint2(void *param){
    while (1)
  {
    Serial.println("taskPrint2...");
    vTaskDelay(1000 / portTICK_PERIOD_MS );
  }
}


```

task3.cpp
```C++
#include"task.h"

void taskBlink(void *param){
    while (1)
  {
    digitalWrite(LED_BUILTIN, HIGH);  // turn the LED on (HIGH is the voltage level)
    vTaskDelay(1000 / portTICK_PERIOD_MS );
    digitalWrite(LED_BUILTIN, LOW);   // turn the LED off by making the voltage LOW
    vTaskDelay(1000 / portTICK_PERIOD_MS );
  }

}


```
最后修改.ino文件
```C++
/*
  Blink

  Turns an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO
  it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to
  the correct LED pin independent of which board is used.
  If you want to know what pin the on-board LED is connected to on your Arduino
  model, check the Technical Specs of your board at:
  https://www.arduino.cc/en/Main/Products

  modified 8 May 2014
  by Scott Fitzgerald
  modified 2 Sep 2016
  by Arturo Guadalupi
  modified 8 Sep 2016
  by Colby Newman

  This example code is in the public domain.

  https://www.arduino.cc/en/Tutorial/BuiltInExamples/Blink
*/



#include "task.h"

// the setup function runs once when you press reset or power the board
void setup() {
  Serial.begin(115200);           // Initialize serial communication at a baud rate of 115200
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
  // Create task
  xTaskCreate(taskPrint1, "Print1", 128, NULL, 1, NULL); 
  xTaskCreate(taskPrint2, "Print2", 128, NULL, 2, NULL);
  xTaskCreate(taskBlink, "Blink", 128, NULL, 3, NULL);
  vTaskStartScheduler();
}

// the loop function runs over and over again forever
void loop() {

}


```

再次编译，烧录，打开串口监视器看到程序正常运行。
但是，这样看起来，文件多了，还是会混乱，那有没有更好的方法，创建目录来管理？
可以，但是必须要用src目录与.ino文件同级，子目录或者子文件再放进src。
官方给出的回答：https://arduino.stackexchange.com/questions/54651/arduino-ide-and-subfolders

**多目录管理**
先新建一个src目录，把文件再进来：
```shell
.
├── README.md
├── arduino-p.ino
└── src
    ├── task.h
    ├── task1.cpp
    ├── task2.cpp
    └── task3.cpp 
```
注意修改.ino的导入头文件`#include "src/task.h"`