【花雕学编程】Arduino OLED 之绘制矩形和圆形

编程语言 2025-04-11 19:06
0 阅读

在这里插入图片描述

Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用Arduino IDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Arduino的功能和学习Arduino的知识。

Arduino的特点是：
1、开放源码：Arduino的硬件和软件都是开放源码的，你可以自由地修改、复制和分享它们。
2、易用：Arduino的硬件和软件都是为初学者和非专业人士设计的，你可以轻松地上手和使用它们。
3、便宜：Arduino的硬件和软件都是非常经济的，你可以用很低的成本来实现你的想法。
4、多样：Arduino有多种型号和版本，你可以根据你的需要和喜好来选择合适的Arduino板。
5、创新：Arduino可以让你用电子的方式来表达你的创意和想象，你可以用Arduino来制作各种有趣和有用的项目，如机器人、智能家居、艺术装置等。

在这里插入图片描述

概念概述
Arduino OLED 指的是将 Arduino 开发平台与 OLED（有机发光二极管）显示屏相结合的应用组合。Arduino 是开源电子原型平台，具备灵活的硬件扩展性和简单易上手的编程环境；OLED 显示屏则以其自发光、高对比度、宽视角、响应速度快等优势，为信息展示提供了优质的视觉体验。二者结合能实现各类数据显示、图形绘制及交互界面展示等功能，在电子制作、物联网、机器人等诸多领域广泛应用。
详细解释

Arduino 相关特性
硬件特性
开源设计：Arduino 的硬件设计方案完全公开，用户能够获取其原理图、PCB 版图等详细资料。这不仅降低了开发成本，还方便开发者根据自身需求对硬件进行修改和扩展，例如制作自定义外形或功能的开发板。
丰富接口资源：Arduino 开发板配备了多种类型的接口。数字输入输出引脚可用于连接开关、继电器、LED 等设备，实现数字信号的读取和输出控制；模拟输入引脚能够采集如温度传感器、光照传感器输出的连续模拟信号，经内部 ADC（模拟 - 数字转换器）转换为数字值供程序处理。
多种供电方式：支持 USB 供电、外接电源适配器供电以及电池供电等多种方式。使用 USB 供电时，可方便地与计算机连接进行程序上传和调试；外接电源适配器则能提供稳定的电源，适用于长时间运行的项目；电池供电赋予了 Arduino 设备便携性，可应用于移动监测等场景。
软件特性
简易编程环境：Arduino 使用基于 C/C++ 的编程语言，其语法简洁易懂。Arduino IDE 是专门为其开发的集成开发环境，具有跨平台性，可在 Windows、Mac OS、Linux 等操作系统上运行。IDE 提供了直观的代码编辑界面、便捷的编译和上传功能，还内置了大量示例代码，帮助初学者快速入门。
庞大的库资源：Arduino 社区拥有丰富的开源库，涵盖了传感器驱动、通信协议、图形绘制等各个领域。例如，Wire 库用于 I2C 通信，SPI 库用于 SPI 通信，开发者可以直接调用这些库，无需从头编写底层代码，大大提高了开发效率。
OLED 显示屏特性
显示原理
OLED 基于有机材料的电致发光特性工作。当在有机材料层两端施加电压时，电子从阴极注入，空穴从阳极注入，二者在有机材料中相遇并复合，释放出能量以光的形式呈现，从而实现发光显示。由于每个像素都能独立发光，OLED 显示屏无需背光源。
性能优势
自发光与高对比度：自发光特性使得 OLED 能够实现真正的黑色显示，因为不发光的像素完全不产生光线。这使得其对比度极高，图像的亮部更亮，暗部更暗，色彩表现更加生动逼真。
宽视角：OLED 的视角非常宽广，通常可达 170° 以上。从不同角度观看显示屏，画面的颜色和亮度变化极小，能为用户提供一致的视觉体验，适用于各种需要多角度观察的应用场景。
快速响应时间：OLED 的响应时间极短，一般在几微秒到几十微秒之间。相比传统的液晶显示屏，OLED 在显示动态画面时不会出现拖影现象，能够清晰、流畅地展示快速变化的图像，如动画、视频等。
轻薄与低功耗：由于无需背光源，OLED 显示屏的结构更加简单，厚度更薄，重量更轻。同时，其在显示黑色画面时几乎不消耗电能，只有发光的像素才会消耗功率，因此在显示深色画面较多的场景下，功耗显著降低。
Arduino 与 OLED 的连接和通信
通信接口类型
SPI（Serial Peripheral Interface）：SPI 是一种高速的全双工串行通信协议，Arduino 通过 SPI 接口与 OLED 显示屏连接时，通常需要使用时钟线（SCK）、主输出从输入线（MOSI）、主输入从输出线（MISO）和片选线（SS）。SPI 通信速度快，适合需要快速传输大量数据的应用场景，如显示高分辨率的图像或视频流。
I2C（Inter - Integrated Circuit）：I2C 是一种串行通信协议，使用两根线进行通信，即时钟线（SCL）和数据线（SDA）。I2C 接口简单，占用 Arduino 的引脚资源少，并且支持多个设备挂载在同一总线上，通过不同的设备地址进行区分。在一些对引脚资源要求较高的项目中，I2C 接口更为适用。
通信流程
初始化：在 Arduino 代码中，首先需要初始化所选的通信接口（SPI 或 I2C），并设置相关的通信参数，如时钟频率、设备地址等。
发送数据：Arduino 根据需要显示的内容，将数据按照 OLED 显示屏的通信协议进行编码，然后通过通信接口发送给 OLED 显示屏。数据可以是字符、数字、图形等信息。
显示更新：OLED 显示屏接收到数据后，对其进行解码和处理，将相应的内容显示在屏幕上。为了实现动态显示效果，Arduino 可以定期更新发送的数据，使 OLED 显示屏不断刷新显示内容。

应用场景
数据监测与显示：在环境监测系统中，Arduino 连接各种传感器（如温度传感器、湿度传感器、空气质量传感器等）采集环境数据，然后将数据通过通信接口传输到 OLED 显示屏上进行实时显示。用户可以直观地了解环境参数的变化情况。
智能家居控制：在智能家居系统中，Arduino 作为控制核心，连接各种家电设备和传感器。OLED 显示屏可以显示家电设备的状态（如开关状态、温度设置等），并提供操作菜单，用户可以通过触摸按键或其他输入设备在 OLED 显示屏上进行操作，实现对家电设备的远程控制。
机器人交互界面：在机器人项目中，OLED 显示屏可以作为机器人的交互界面，显示机器人的工作状态、任务进度、传感器数据等信息。同时，还可以显示一些动画或图标，增强机器人的人机交互体验。
手持设备与可穿戴设备：由于 OLED 显示屏的轻薄和低功耗特性，与 Arduino 结合可用于开发手持设备和可穿戴设备。例如，制作一个便携式的健康监测设备，通过 Arduino 连接心率传感器、计步器等，将监测数据显示在 OLED 显示屏上，方便用户随时查看自己的健康状况。

在这里插入图片描述

绘制矩形
• 主要特点
◦ 简单直观：矩形是一种规则的几何图形，绘制方法相对简单，只需要指定矩形的左上角顶点坐标、宽度和高度等参数，就可以通过 Arduino 的相关函数轻松实现绘制。
◦ 灵活性高：可以根据实际需求灵活调整矩形的大小、位置和颜色。通过改变参数值，能够绘制出不同尺寸的矩形，以适应各种显示需求，例如绘制不同大小的菜单选项框、数据显示区域等。
◦ 易于组合：多个矩形可以组合成复杂的图形或界面布局。可以利用矩形的拼接来创建具有层次感和结构化的显示内容，如仪表盘、表格等。
• 应用场景
◦ 界面设计：在各种电子设备的用户界面设计中，矩形常被用于构建菜单、按钮、文本框等元素。例如，智能手表的菜单界面可以使用矩形来表示不同的功能选项，清晰明了，方便用户操作。
◦ 数据可视化：用于创建数据显示的边框或区域。比如，在温度、湿度等传感器数据的显示界面中，用矩形框住数据内容，使其更加醒目和易于识别，还可以通过不同颜色的矩形来区分不同的数据范围。
◦ 图形绘制：作为复杂图形的基本组成部分。在绘制一些具有规则形状的图形，如房屋、建筑物等时，矩形可以作为主要的构建元素，通过组合不同大小和位置的矩形来形成更复杂的图形。
• 注意事项
◦ 坐标系统：要清楚 OLED 显示屏的坐标系统，确保矩形的坐标值在显示屏的有效范围内。不同的 OLED 显示屏可能有不同的坐标原点和范围，如果坐标设置错误，矩形可能会显示在错误的位置或超出显示屏范围而无法显示。
◦ 内存使用：虽然绘制矩形本身相对简单，但如果在程序中频繁绘制大量矩形，可能会占用较多的内存资源。特别是在处理复杂界面或动态图形时，需要注意内存的使用情况，避免因内存不足导致程序运行不稳定。
◦ 显示效果：考虑矩形的颜色、线条粗细等属性对显示效果的影响。如果颜色选择不当或线条过粗，可能会导致矩形之间的区分度不高，影响整体的视觉效果。同时，也要注意与背景颜色的搭配，以保证矩形能够清晰地显示出来。

绘制圆形
• 主要特点
◦ 平滑美观：圆形具有流畅的曲线，能够给人一种柔和、美观的视觉感受。在 OLED 显示屏上绘制的圆形可以呈现出较高的精度和光滑度，适用于一些对视觉效果要求较高的应用场景。
◦ 几何特性：圆形具有独特的几何特性，例如圆心到圆周上任意一点的距离都相等。这些特性使得圆形在一些特定的应用中具有优势，如用于表示进度、百分比等，能够直观地展示数据的比例关系。
◦ 可定制性：可以根据需要调整圆形的半径、颜色和填充方式等。通过改变这些参数，可以绘制出不同大小、颜色和样式的圆形，以满足不同的设计需求，例如绘制实心圆、空心圆或带有不同颜色渐变的圆。
• 应用场景
◦ 进度指示：在各种任务或操作的进度显示中，圆形常被用作进度条的形状。例如，文件下载、数据传输等过程中，可以用圆形进度条来直观地展示完成的百分比，让用户清楚地了解任务的进展情况。
◦ 图形图标：许多图标和图形元素采用圆形设计，如应用程序图标、按钮图标等。在 OLED 显示屏上绘制圆形图标可以提高界面的美观度和辨识度，使界面更加简洁、直观。
◦ 科学可视化：在一些科学实验或数据可视化应用中，圆形可用于表示数据点或物体的分布情况。例如，在地理信息系统中，可以用不同大小的圆形来表示城市的人口规模或资源分布等信息，通过圆形的位置和大小来直观地展示数据的空间分布特征。
• 注意事项
◦ 绘制算法：绘制圆形需要使用特定的算法，如中点圆算法等。这些算法的实现可能相对复杂一些，需要对算法原理有一定的了解，以确保圆形能够正确、高效地绘制出来。不同的算法在绘制速度和精度上可能会有所差异，需要根据实际情况选择合适的算法。
◦ 精度问题：由于 OLED 显示屏的像素是离散的，绘制圆形时可能会出现锯齿现象，尤其是在圆形半径较小的情况下。为了提高圆形的显示精度，可以采用一些抗锯齿算法或增加显示屏的分辨率，但这可能会增加程序的复杂度和硬件成本。
◦ 内存占用：与绘制矩形类似，频繁绘制大量圆形也可能会占用较多的内存资源。特别是当圆形的分辨率较高或需要绘制多个不同颜色和样式的圆形时，要注意内存的使用情况，避免程序因内存不足而出现故障。

在这里插入图片描述
1、基于摇杆控制OLED上圆和矩形的移动显示

扫描二维码关注公众号，回复： 17605544 查看本文章 
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
 
#define OLED_RESET 4
Adafruit_SSD1306 display(128, 64, &Wire, OLED_RESET);
 
#define pinX A0
#define pinY A1
 
int xCircle = 0;
int yCircle = 0;
int radius = 4;
 
void setup() {
    
    
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  display.setTextColor(WHITE);
  display.clearDisplay();
}
 
void loop() {
    
    
  xCircle = map(analogRead(pinX), 0, 1023, radius, 128 - radius);
  yCircle = map(analogRead(pinY), 0, 1023, radius, 64 - radius);
 
  display.clearDisplay();
  display.drawRect(0, 0, 128, 64, 1); // 绘制矩形边框
  display.drawCircle(xCircle, yCircle, radius, 1); // 绘制圆
  display.display();
}

要点解读
硬件连接
OLED屏通过I2C接口连接Arduino，VCC/GND接3.3V/GND，SDA/SCL接A4/A5。
摇杆模块的X/Y轴输出分别接A0/A1，VCC/GND接5V/GND。
核心功能
使用map()函数将摇杆模拟量（0-1023）映射到OLED显示范围（0-128或0-64）。
drawRect()绘制全屏边框，drawCircle()绘制动态圆，位置随摇杆移动。
优化建议
添加去抖动逻辑，避免摇杆轻微移动导致画面闪烁。
矩形边框颜色和圆半径可通过变量调整，增强可配置性。

2、MPU6050传感器控制OLED上3D矩形效果

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <MPU6050.h>
 
#define OLED_RESET 4
Adafruit_SSD1306 display(128, 64, &Wire, OLED_RESET);
MPU6050 mpu;
 
int16_t ax, ay, az;
int rectX = 0, rectY = 0;
 
void setup() {
    
    
  Wire.begin();
  mpu.initialize();
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  display.clearDisplay();
}
 
void loop() {
    
    
  mpu.getMotion6(&ax, &ay, &az, NULL, NULL, NULL);
  rectX = map(ax, -16000, 16000, 0, 128);
  rectY = map(ay, -16000, 16000, 0, 64);
 
  display.clearDisplay();
  display.drawRect(rectX - 10, rectY - 10, 20, 20, 1); // 绘制动态矩形
  display.display();
}

要点解读
硬件连接
MPU6050通过I2C连接Arduino，VCC/GND接3.3V/GND，SDA/SCL接A4/A5。
OLED屏连接方式与案例一相同。
核心功能
通过MPU6050读取加速度数据（ax, ay），映射到OLED坐标范围。
drawRect()绘制动态矩形，位置随传感器姿态变化。
优化建议
增加加速度滤波算法（如卡尔曼滤波），减少噪声干扰。
矩形大小可与加速度值关联，实现更丰富的视觉效果。

3、OLED显示温湿度数据及动态图形

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <DHT.h>
 
#define OLED_RESET 4
#define DHTPIN 2
#define DHTTYPE DHT22
 
Adafruit_SSD1306 display(128, 64, &Wire, OLED_RESET);
DHT dht(DHTPIN, DHTTYPE);
 
void setup() {
    
    
  dht.begin();
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
  display.clearDisplay();
}
 
void loop() {
    
    
  float t = dht.readTemperature();
  float h = dht.readHumidity();
 
  display.clearDisplay();
  display.setCursor(0, 0);
  display.print("Temp: ");
  display.print(t);
  display.println(" C");
  display.print("Hum: ");
  display.print(h);
  display.println(" %");
 
  // 绘制动态图形（如温度柱状图）
  int barHeight = map(t, 0, 40, 0, 64);
  display.fillRect(100, 64 - barHeight, 20, barHeight, 1);
 
  display.display();
  delay(2000);
}

要点解读
硬件连接
DHT22传感器数据引脚接Arduino数字引脚2，VCC/GND接5V/GND。
OLED屏连接方式与案例一相同。
核心功能
读取温湿度数据并显示在OLED屏上。
使用fillRect()绘制动态柱状图，高度与温度值关联。
优化建议
增加异常值处理（如传感器读数失败时显示错误信息）。
图形颜色和位置可通过变量调整，增强视觉效果。

在这里插入图片描述
4、动态变化的矩形和圆形

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1

// 创建OLED对象
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// 动态变量
int rect_width = 10; // 矩形宽度
int circle_radius = 5; // 圆形半径

void setup() {
    
    
    // 初始化OLED
    if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    
     // 使用默认I2C地址0x3C
        Serial.println(F("SSD1306 allocation failed"));
        for (;;);
    }
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Dynamic Shapes");
    display.display();
}

void loop() {
    
    
    // 清屏
    display.clearDisplay();

    // 绘制矩形
    display.drawRect(10, 10, rect_width, 20, SSD1306_WHITE);

    // 绘制圆形
    display.drawCircle(64, 32, circle_radius, SSD1306_WHITE);

    // 更新显示
    display.display();

    // 动态调整尺寸
    rect_width += 2;
    circle_radius += 1;

    // 边界检查
    if (rect_width > 100 || circle_radius > 30) {
    
    
        rect_width = 10;
        circle_radius = 5;
    }

    delay(200); // 控制刷新频率
}

要点解读
动态图形
矩形的宽度和圆形的半径随时间动态变化，展示动画效果。
清屏与重绘
每次循环调用clearDisplay()清除屏幕内容，避免图形叠加。
边界控制
当矩形或圆形尺寸超过设定范围时，重置为初始值，形成循环动画。
库支持
使用Adafruit SSD1306库提供的drawRect()和drawCircle()函数简化绘图操作。
延时控制
使用delay()函数控制刷新频率，确保动画流畅且不占用过多资源。

5、交互式按钮控制图形

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
#define BUTTON_PIN 2

// 创建OLED对象
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// 图形状态
bool draw_rectangle = true;

void setup() {
    
    
    // 初始化OLED
    if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    
    
        Serial.println(F("SSD1306 allocation failed"));
        for (;;);
    }
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Press Button");
    display.display();

    // 初始化按钮
    pinMode(BUTTON_PIN, INPUT_PULLUP);
}

void loop() {
    
    
    // 检测按钮按下
    if (digitalRead(BUTTON_PIN) == LOW) {
    
    
        draw_rectangle = !draw_rectangle; // 切换图形
        delay(200); // 防抖延迟
    }

    // 清屏
    display.clearDisplay();

    // 根据状态绘制图形
    if (draw_rectangle) {
    
    
        display.drawRect(10, 10, 50, 30, SSD1306_WHITE);
    } else {
    
    
        display.drawCircle(64, 32, 20, SSD1306_WHITE);
    }

    // 更新显示
    display.display();
}

要点解读
按钮交互
使用物理按钮切换绘制矩形或圆形，实现用户交互功能。
防抖处理
在检测按钮按下后添加delay(200)，防止误触发。
状态切换
使用布尔变量draw_rectangle记录当前绘制状态，便于切换逻辑。
清屏与重绘
每次切换状态后清屏并重新绘制，确保屏幕内容清晰。
硬件集成
将按钮输入与OLED显示结合，展示软硬件协同工作的能力。

6、模拟进度条与加载动画

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1

// 创建OLED对象
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// 进度条变量
int progress = 0;

void setup() {
    
    
    // 初始化OLED
    if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    
    
        Serial.println(F("SSD1306 allocation failed"));
        for (;;);
    }
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Loading...");
    display.display();
}

void loop() {
    
    
    // 清屏
    display.clearDisplay();

    // 绘制进度条背景
    display.drawRect(10, 20, 100, 10, SSD1306_WHITE);

    // 绘制进度条填充
    display.fillRect(11, 21, progress, 8, SSD1306_WHITE);

    // 绘制加载动画圆圈
    int radius = 5 + progress / 10;
    display.drawCircle(64, 50, radius, SSD1306_WHITE);

    // 更新显示
    display.display();

    // 增加进度
    progress += 5;

    // 边界检查
    if (progress > 100) {
    
    
        progress = 0;
    }

    delay(100); // 控制刷新频率
}

要点解读
进度条模拟
使用矩形绘制进度条背景，并通过fillRect()动态填充进度条。
加载动画
使用动态变化的圆形半径模拟加载动画，提升视觉效果。
多图形组合
结合矩形和圆形实现复杂的UI效果，适用于加载界面或仪表盘。
动态更新
通过变量progress控制矩形填充和圆形半径的变化，形成动态效果。
刷新频率控制
使用delay(100)平衡动画流畅性和系统性能。

注意，以上案例只是为了拓展思路，仅供参考。它们可能有错误、不适用或者无法编译。您的硬件平台、使用场景和Arduino版本可能影响使用方法的选择。实际编程时，您要根据自己的硬件配置、使用场景和具体需求进行调整，并多次实际测试。您还要正确连接硬件，了解所用传感器和设备的规范和特性。涉及硬件操作的代码，您要在使用前确认引脚和电平等参数的正确性和安全性。

在这里插入图片描述

猜你喜欢

目录

热门文章