回到首页 返回首页
回到顶部 回到顶部
返回上一页 返回上一页

Arduino IDE K10行空板基础练习:屏幕显示与RGB灯控制 简单

头像 rzyzzxw 2025.09.01 10 0

9.1

【学习笔记】

木子在群里发消息了,试试尝尝鲜呗。

image.png

准备工作

1、下载安装Arduino IDE
2、安装 Arduino IDE SDK
在Arduino IDE中,行空板K10将会以SDK(软件开发包)的形式在下载后集成入Arduino IDE。

SDK URL:
https://downloadcd.dfrobot.com.cn/UNIHIKER/package_unihiker_index.json

在Arduino IDE中打开 "文件→首选项…"

点击下图红圈中的按钮来添加SDK URL。

image.png

在对话框中另起一行,添加本文上方的SDK URL,最后点击确定。

image.png

打开 "工具→开发板→开发板管理",在对话框中搜索"unihiker"并且点击安装。

11.png

等待安装完成后,即可在Arduino IDE中选择行空板k10(unihiker k10)进行开发。

image.png

步骤1 基础屏幕显示

代码示例:显示欢迎界面

6798f8b63be6e631411fe4c8bf96707.jpg

练习要点:

  1. 1.学习设置屏幕背景色
  2. 2.掌握文字显示方法(位置、颜色、字体)
  3. 3.练习绘制基本图形(圆形、矩形)
  4. 4.理解坐标系统(240×320像素)

代码
#include "unihiker_k10.h"

UNIHIKER_K10 k10;
uint8_t screen_dir = 2;

void setup() {
  k10.begin();
  k10.initScreen(screen_dir);
  k10.creatCanvas();
  
  // 设置屏幕背景色
  k10.setScreenBackground(0xFFFFFF); // 白色背景
  
  // 显示欢迎文字
  k10.canvas->canvasText("欢迎使用K10行空板", 10, 30, 0x0000FF, k10.canvas->eCNAndENFont24, 200, true);
  k10.canvas->canvasText("基础屏幕显示练习", 10, 70, 0xFF0000, k10.canvas->eCNAndENFont16, 200, true);
  
  // 绘制图形元素
  k10.canvas->canvasCircle(120, 150, 40, 0xFF0000, 0x0000FF, true); // 蓝色填充的红色圆圈
  k10.canvas->canvasRectangle(50, 200, 140, 40, 0x00FF00, 0x000000, false); // 绿色边框的矩形
  
  k10.canvas->updateCanvas();
}

void loop() {
  // 空循环
}

步骤2 RGB灯控制

RGB灯呼吸效果

练习要点:

  1. 1.学习控制RGB灯亮度
  2. 2.掌握RGB颜色设置方法
  3. 3.创建简单的动画效果
  4. 4.理解亮度变化算法

代码
#include "unihiker_k10.h"

UNIHIKER_K10 k10;
int brightness = 0;
bool increasing = true;

void setup() {
  k10.begin();
  
  // 初始化RGB灯
  k10.rgb->brightness(5); // 中等亮度
}

void loop() {
  // 创建呼吸灯效果
  if (increasing) {
    brightness += 5;
    if (brightness >= 255) {
      brightness = 255;
      increasing = false;
    }
  } else {
    brightness -= 5;
    if (brightness <= 0) {
      brightness = 0;
      increasing = true;
    }
  }
  
  // 设置RGB灯颜色(红色呼吸)
  k10.rgb->write(-1, brightness, 0, 0);
  
  delay(30);
}

步骤3 颜色选择器

颜色选择器

练习要点:

  1. 1.学习使用物理按键进行交互
  2. 2.掌握状态机编程模式
  3. 3.实现屏幕与硬件的联动
  4. 4.创建用户界面和反馈机制

代码
#include "unihiker_k10.h"

UNIHIKER_K10 k10;
uint8_t screen_dir = 2;
int selectedColor = 0; // 0:红, 1:绿, 2:蓝

void setup() {
  k10.begin();
  k10.initScreen(screen_dir);
  k10.creatCanvas();
  
  // 显示颜色选择界面
  updateDisplay();
}

void loop() {
  // 检查按键A(选择下一个颜色)
  if (k10.buttonA->isPressed()) {
    selectedColor = (selectedColor + 1) % 3;
    updateDisplay();
    delay(300); // 防抖
  }
  
  // 检查按键B(应用当前颜色到RGB灯)
  if (k10.buttonB->isPressed()) {
    applyColorToLED();
    delay(300); // 防抖
  }
}

// 更新屏幕显示
void updateDisplay() {
  k10.canvas->canvasClear();
  
  // 显示标题
  k10.canvas->canvasText("颜色选择器", 10, 10, 0x000000, k10.canvas->eCNAndENFont24, 200, true);
  
  // 显示当前选择的颜色
  String colorName;
  uint32_t colorValue;
  
  switch(selectedColor) {
    case 0:
      colorName = "红色";
      colorValue = 0xFF0000;
      break;
    case 1:
      colorName = "绿色";
      colorValue = 0x00FF00;
      break;
    case 2:
      colorName = "蓝色";
      colorValue = 0x0000FF;
      break;
  }
  
  // 修正:使用正确的参数调用canvasText
  k10.canvas->canvasText("当前选择: " + colorName, 10, 50, colorValue, k10.canvas->eCNAndENFont16, 200, true);
  
  // 绘制颜色方块
  k10.canvas->canvasRectangle(80, 100, 80, 80, colorValue, colorValue, true);
  
  // 显示操作提示
  k10.canvas->canvasText("按键A: 切换颜色", 10, 200, 0x000000, k10.canvas->eCNAndENFont16, 200, true);
  k10.canvas->canvasText("按键B: 应用到LED", 10, 230, 0x000000, k10.canvas->eCNAndENFont16, 200, true);
  
  k10.canvas->updateCanvas();
}

// 将当前颜色应用到RGB灯
void applyColorToLED() {
  switch(selectedColor) {
    case 0:
      k10.rgb->write(-1, 0xFF, 0, 0); // 红色
      break;
    case 1:
      k10.rgb->write(-1, 0, 0xFF, 0); // 绿色
      break;
    case 2:
      k10.rgb->write(-1, 0, 0, 0xFF); // 蓝色
      break;
  }
}

步骤4 简单动画效果

跳动的心形

练习要点:

  1. 1.学习创建简单动画效果
  2. 2.掌握图形绘制技巧
  3. 3.实现屏幕与RGB灯的同步效果
  4. 4.理解映射函数(map)的使用

代码
#include "unihiker_k10.h"

UNIHIKER_K10 k10;
uint8_t screen_dir = 2;
int heartSize = 20;
bool growing = true;

void setup() {
  k10.begin();
  k10.initScreen(screen_dir);
  k10.creatCanvas();
}

void loop() {
  // 更新心形大小
  if (growing) {
    heartSize += 2;
    if (heartSize >= 40) {
      growing = false;
    }
  } else {
    heartSize -= 2;
    if (heartSize <= 20) {
      growing = true;
    }
  }
  
  // 清屏
  k10.canvas->canvasClear();
  
  // 绘制跳动的心形
  drawHeart(120, 160, heartSize, 0xFF0000);
  
  // 更新屏幕
  k10.canvas->updateCanvas();
  
  // 同步RGB灯效果
  int brightness = map(heartSize, 20, 40, 50, 255);
  k10.rgb->write(-1, brightness, 0, 0);
  
  delay(100);
}

// 绘制心形函数
void drawHeart(int x, int y, int size, uint32_t color) {
  // 简化版心形绘制(实际可以使用更精确的数学公式)
  k10.canvas->canvasCircle(x - size/2, y - size/4, size/2, color, color, true);
  k10.canvas->canvasCircle(x + size/2, y - size/4, size/2, color, color, true);
  k10.canvas->canvasRectangle(x - size/2, y - size/4, size, size/2, color, color, true);
  
  // 绘制心形底部
  int pointsX[] = {x, x - size, x + size};
  int pointsY[] = {y + size/2, y - size/4, y - size/4};
  // 注意:canvas库可能没有直接绘制三角形的函数,这里用三个圆形模拟
  k10.canvas->canvasCircle(pointsX[0], pointsY[0], size/2, color, color, true);
  k10.canvas->canvasCircle(pointsX[1], pointsY[1], size/4, color, color, true);
  k10.canvas->canvasCircle(pointsX[2], pointsY[2], size/4, color, color, true);
}

步骤5 响应式颜色混合器

RGB颜色混合器

练习要点:

  1. 1.学习使用加速度计传感器
  2. 2.掌握颜色混合原理
  3. 3.实现设备姿态与颜色的映射
  4. 4.学习约束函数(constrain)的使用

代码
#include "unihiker_k10.h"

UNIHIKER_K10 k10;
uint8_t screen_dir = 2;
int redValue = 128;
int greenValue = 128;
int blueValue = 128;

void setup() {
  k10.begin();
  k10.initScreen(screen_dir);
  k10.creatCanvas();
  
  // 初始化RGB灯
  k10.rgb->brightness(5); // 中等亮度
  
  // 显示初始界面
  updateDisplay();
}

void loop() {
  // 读取加速度计数据
  int accX = k10.getAccelerometerX();
  int accY = k10.getAccelerometerY();
  int accZ = k10.getAccelerometerZ();
  
  // 根据倾斜调整颜色值
  if (accX > 100) {
    redValue = constrain(redValue + 5, 0, 255);
  } else if (accX < -100) {
    redValue = constrain(redValue - 5, 0, 255);
  }
  
  if (accY > 100) {
    greenValue = constrain(greenValue + 5, 0, 255);
  } else if (accY < -100) {
    greenValue = constrain(greenValue - 5, 0, 255);
  }
  
  if (accZ > 100) {
    blueValue = constrain(blueValue + 5, 0, 255);
  } else if (accZ < -100) {
    blueValue = constrain(blueValue - 5, 0, 255);
  }
  
  // 更新显示
  updateDisplay();
  
  // 应用到RGB灯
  k10.rgb->write(-1, redValue, greenValue, blueValue);
  
  delay(200);
}

// 更新屏幕显示
void updateDisplay() {
  k10.canvas->canvasClear();
  
  // 显示标题
  k10.canvas->canvasText("RGB颜色混合器", 10, 10, 0x000000, k10.canvas->eCNAndENFont24, 200, true);
  
  // 显示当前颜色值
  k10.canvas->canvasText("R: " + String(redValue), 10, 50, 0xFF0000, k10.canvas->eCNAndENFont16, 200, true);
  k10.canvas->canvasText("G: " + String(greenValue), 10, 80, 0x00FF00, k10.canvas->eCNAndENFont16, 200, true);
  k10.canvas->canvasText("B: " + String(blueValue), 10, 110, 0x0000FF, k10.canvas->eCNAndENFont16, 200, true);
  
  // 显示混合后的颜色
  uint32_t mixedColor = (redValue << 16) | (greenValue << 8) | blueValue;
  k10.canvas->canvasRectangle(80, 150, 80, 80, mixedColor, mixedColor, true);
  
  // 显示操作提示
  k10.canvas->canvasText("倾斜设备调整颜色", 10, 250, 0x000000, k10.canvas->eCNAndENFont16, 200, true);
  k10.canvas->canvasText("X轴:红 Y轴:绿 Z轴:蓝", 10, 280, 0x000000, k10.canvas->eCNAndENFont16, 200, true);
  
  k10.canvas->updateCanvas();
}

学习建议

  1. ​循序渐进​​:从简单练习开始,逐步增加复杂度
  2. ​理解原理​​:不仅要会写代码,还要理解每行代码的作用
  3. ​尝试修改​​:对每个示例进行修改,观察变化效果
  4. ​组合创新​​:将不同练习中的技巧组合起来创建新项目
  5. ​记录问题​​:遇到问题时记录下来,逐步解决

评论

user-avatar