# oled_visualization_design
**Repository Path**: stranding-fish/oled_visualization_design
## Basic Information
- **Project Name**: oled_visualization_design
- **Description**: 一个可视化的1.3寸-128*64分辨率的OLED(SH1106 / IIC)屏幕设计可视化网页
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-03
- **Last Updated**: 2025-11-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 1.3寸-128*64分辨率的OLED(SH1106驱动IIC协议)可视化
## 实现技术
HTML + CSS + VUE2
## 前置知识
**该 OLED 使用的是 SH1106 进行驱动，通信协议是 IIC**
我们建系是根据二维直角坐标系的，因此**左上角是 (0, 0) 点，从左向右是 x 轴正方向，从上向下是 y 轴正方向**。因此我们称一个坐标点 (x, y) 其中 x 是横坐标，y 是纵坐标，在 SH1106 中，x 是列地址，y 对应页地址
## 使用说明
上部分是设计区，支持鼠标点击点亮像素点，点击某个像素会在下方显示其坐标。
**四个按钮：**
* 清空所有：字面意思
* 拷贝坐标：将当前点亮的像素点的坐标拷贝出来
* 示例：`{0,0},{0,1},{0,2}`
* 导入坐标：将绘制好的像素坐标导入显示
* 示例：`{0,1},{0,1},{0,2}`，导入时必须严格遵守格式规范：单个坐标由花括号括起来，各个坐标间由英文逗号分隔
* 导入坐标支持两种：
* 覆盖式导入：先清空后导入
* 非覆盖式导入：保留设计区原有像素状态，对新坐标进行添加
* 拷贝为页/列地址：由于 SH1106 的寻址模式是**页 + 列地址寻址**，因此我们支持导出数据为按页划分，每页中每个列应该写入怎样的数据。并且会附带该列的起始坐标，以便于我们进行地址位置设置。拷贝后就是这样的一个 JSON，例如 page2，其中有 0x70(37,16)这表示先执行方法设置起始地址到 (37, 16)（注意此处是**根据自己编写的驱动方法设置的**，我的驱动方法有 `OLED_SetCursorXY`），其可以传入**实际像素的坐标**，然后**定位到该位置**。由于每次写入是**按照一个字节写的**，因此在同一个页中可能有**几个像素是在同一列**的，因此代码自动做了**合并**处理，**我们只需关心定位到该列的起始位置，然后直接写入数据 0x70 即可**。0x70 = 01110000，即点亮该列从上到下 8 个像素中的第 5、6、7 个像素
```json
{
"page0": [],
"page1": [],
"page2": [
"0x70(37,16)"
],
"page3": [
"0x04(37,24)",
"0x06(38,24)",
"0x05(39,24)",
"0x04(40,24)",
"0x04(41,24)",
"0x04(42,24)"
],
"page4": [
"0xE0(53,32)",
"0x10(54,32)"
],
"page5": [
"0x03(53,40)"
],
"page6": [],
"page7": []
}
```
实际的代码是这样写的
```c
// 我的驱动方法是这样定义，根据自己实际情况为准
OLED_SetCursorXY(37, 16);
OLED_WriteData(0x70);
...
```
为了避免手写，可以使用 `generateCode.py` 该 python 脚本，其可以帮我们解析 data.json（将拷贝的页/列地址内容提前复制进去），然后生成代码到 `code.txt`，我们只需复制 code.txt 内容粘贴即可
**一个 checkbox：**用来开启绘制模式，开启后，可以**长按鼠标左键连续绘制，长按鼠标右键连续清除**
下部分是显示区，模拟了实际显示状态（其实也可以点击，因为数组和设计区共用）。
实机展示
