查看: 11210|回复: 7

[入门] u8glib自学笔记1

[复制链接]
本帖最后由 seacowtech 于 2016-12-21 00:38 编辑

第一部分,u8glib标准语法格式:

本文使用的是DFRobot出品的LCD12864 Shield V1.0

端口占用情况:

SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9, RST = 8

背光控制占用数字口7

[mw_shl_code=c,true]//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void setup(){

}

void loop(){
    u8g.firstPage();
    do{
        //display
    }while(u8g.nextPage());
}

//u8g.firstPage() 表示图像循环的开始
//u8g.nextPage() 表示图像循环的结束[/mw_shl_code]

第二部分,画出几何图形

首先是画点。

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawPixel(unit8_t x, unit8_t y)
//参数为:(x:点的横坐标 y:点的纵坐标)[/mw_shl_code]
例子: u8g.drawPixel(14, 23);

完整代码:

[mw_shl_code=c,true]//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
  u8g.drawPixel(14, 23);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画线。

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawLine(u8g_uint_t x1, u8g_uint_t y1, u8g_uint_t x2, u8g_uint_t y2)
//参数为: (x1:线段起始点横坐标 y1:线段起始点纵坐标 x2:线段结束点横坐标 y2:线段结束点纵坐标)[/mw_shl_code]

例子: u8g.drawLine(7, 10, 40, 55);

完整代码:

[mw_shl_code=c,true]//画一个V
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
  u8g.drawLine(7, 10, 40, 55);
  u8g.drawLine(40, 55, 73, 10);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画连续点(线段)(水平线段或垂直线段)

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawHLine(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w) //水平线段
void U8GLIB::drawVLine(u8g_uint_t x, u8g_uint_t y, u8g_uint_t h) //垂直线段
//参数为: (x:线段起始点 y:线段结束点 w:水平宽度 h:垂直高度)(高度单位为像素点)[/mw_shl_code]

例子: u8g.drawHLine(60,12, 30); u8g.drawVLine(10,20, 20);

完整代码:
[mw_shl_code=c,true]//画一个方形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawHLine(40,15, 30);
    u8g.drawVLine(70,15, 30);
    u8g.drawHLine(40,45, 30);
    u8g.drawVLine(40,15, 30);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画出实心的三角形

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2)
//参数为:(x0:一个角的横坐标 y0:一个角的纵坐标 x1:另一个角的横坐标 y1:另一个角的纵坐标 x2:最后一个角的横坐标 y2:最后一个角的纵坐标)[/mw_shl_code]

例子: u8g.drawTriangle(14,9, 45,32, 9,42);

完整代码:

[mw_shl_code=c,true]//画一个实心三角形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawTriangle(14,9, 45,32, 9,42);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画出空心矩形,刚才我们用画线段的方式实现了画空心矩形,现在用更简单的方法就可以画出空心矩形。

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawFrame(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h)
//参数是:(x:矩形左上角横坐标 y:矩形左上角纵坐标 w:矩形的宽 h:矩形的高)(高和宽的单位都是像素)[/mw_shl_code]

例子: u8g.drawFrame(10, 12, 30, 20);

完整代码:

[mw_shl_code=c,true]//画一个空心矩形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawFrame(10, 12, 30, 20);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画圆角空心矩形

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawRFrame(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h, u8g_uint_t r)
//参数是: (x:圆角矩形左上角横坐标 y:圆角矩形左上角纵坐标 w:圆角矩形宽度 h:圆角矩形高度 r:圆角弧度的半径)[/mw_shl_code]

注意:最好要满足两个公式,使用时最好加上if来判断是否符合要求
w > = 2 * x * ( r + 1 )
h > = 2 * x * ( r + 1 )

例子: u8g.drawRFrame(10 ,12 ,30 ,20 ,5);

完整代码:

[mw_shl_code=c,true]//画一个圆角空心矩形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawRFrame(10,12, 30,20, 5);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画实心矩形,和画空心的一样。注意语法区别!!!

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawBox(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h)[/mw_shl_code]

例子: u8g.drawBox(10,12,20,30);

然后画出圆角实心矩形,和画圆角空心矩形一样,但注意语法区别!!!

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawRBox(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h, u8g_uint_t r)[/mw_shl_code]

例子: u8g.drawRBox(10 ,12 ,30 ,20 ,5);

然后画出空心圆

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawCircle(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rad, uint8_t opt = U8G_DRAW_ALL)
//参数是:(x0:圆心的横坐标 y0:圆心的纵坐标 rad:圆的半径 opt:见下表)[/mw_shl_code]

  • U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 圆弧
  • U8G_DRAW_UPPER_LEFT         上部左侧 1/4 圆弧
  • U8G_DRAW_LOWER_LEFT         下部左侧 1/4 圆弧
  • U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 圆弧
  • U8G_DRAW_ALL                整圆(默认)

例子: u8g.drawCircle(20,20, 14); //整圆
          u8g.drawCircle(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4圆

完整代码:

[mw_shl_code=c,true]//画一个空心圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawCircle(20,20, 14);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出实心圆

函数语法:

[mw_shl_code=c,true]void U8GLIB::drawDisc(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rad, uint8_t opt = U8G_DRAW_ALL)
//参数是:(x0:圆心的横坐标 y0:圆心的纵坐标 rad:圆的半径 opt:见下表)[/mw_shl_code]

  • U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 扇形
  • U8G_DRAW_UPPER_LEFT         上部左侧 1/4 扇形
  • U8G_DRAW_LOWER_LEFT         下部左侧 1/4 扇形
  • U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 扇形
  • U8G_DRAW_ALL                整圆(默认)

例子: u8g.drawDisc(20,20, 14); //整圆
          u8g.drawDisc(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4圆

完整代码:

[mw_shl_code=c,true]//画一个实心圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawDisc(20,20, 14);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出椭圆(空心)

函数语法:

[mw_shl_code=c,true]void drawEllipse(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rx, u8g_uint_t ry, uint8_t opt)
//参数是:(x0:椭圆圆心的横坐标 y0:椭圆圆心的纵坐标 rx:水平方向半径 ry:垂直方向半径 rad:圆的半径 opt:见下表)[/mw_shl_code]

  • U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 椭圆弧
  • U8G_DRAW_UPPER_LEFT         上部左侧 1/4 椭圆弧
  • U8G_DRAW_LOWER_LEFT         下部左侧 1/4 椭圆弧
  • U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 椭圆弧
  • U8G_DRAW_ALL                整圆(默认)

例子: u8g.drawEllipse(20,20, 14,17);

完整代码:

[mw_shl_code=c,true]//画一个椭圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawEllipse(20,20, 14,17);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出椭圆(空心),和画空心椭圆是一样的,但注意语法格式区别

函数语法:

[mw_shl_code=c,true]void drawFilledEllipse(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rx, u8g_uint_t ry, uint8_t opt)
//参数是:(x0:椭圆圆心的横坐标 y0:椭圆圆心的纵坐标 rx:水平方向半径 ry:垂直方向半径 rad:圆的半径 opt:见下表)[/mw_shl_code]

  • U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 椭圆弧
  • U8G_DRAW_UPPER_LEFT         上部左侧 1/4 椭圆弧
  • U8G_DRAW_LOWER_LEFT         下部左侧 1/4 椭圆弧
  • U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 椭圆弧
  • U8G_DRAW_ALL                整圆(默认)

例子: u8g.drawFilledEllipse(20,20, 14,17);

以上就是使用u8glib库画出几何图形。 整理一下:

[mw_shl_code=c,true]u8g.drawPixel(14, 23);                     //画点
u8g.drawLine(7, 10, 40, 55);            //画线
u8g.drawHLine(60,12, 30);                 //画水平线段
u8g.drawVLine(10,20, 20);                //画垂直线段
u8g.drawTriangle(14,9, 45,32, 9,42);    //画实心三角形
u8g.drawFrame(10, 12, 30, 20);            //画空心矩形
u8g.drawRFrame(10 ,12 ,30 ,20 ,5);        //画空心圆角矩形
u8g.drawBox(10,12,20,30);                //画实心矩形
u8g.drawRBox(10 ,12 ,30 ,20 ,5);        //画实心圆角矩形
u8g.drawCircle(20,20, 14);                 //整空心圆
u8g.drawCircle(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4空心圆
u8g.drawDisc(20,20, 14);                 //整实心圆
u8g.drawDisc(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4扇形
u8g.drawEllipse(20,20, 14,17);            //空心椭圆
u8g.drawFilledEllipse(20,20, 14,17);    //实心椭圆[/mw_shl_code]

上述代码已测试过,均可运行。如果有输入或者拼写错误,请麻烦留言,以便我及时可以修改过来。谢谢

dsweiliang  初级技神

发表于 2016-12-21 08:18:27

这个好,学习了
回复

使用道具 举报

shzrzxlee  中级技匠

发表于 2017-4-28 23:42:16

LCD12864 Shield V1.0  这个已买不到了
回复

使用道具 举报

学习的小兵  学徒

发表于 2017-7-12 10:46:31

谢谢
回复

使用道具 举报

极速未来PHANTOM  见习技师

发表于 2017-7-16 19:03:03

感谢大神分享,认真的学习了笔记,收获很大。
回复

使用道具 举报

gada888  版主

发表于 2018-10-29 14:47:30

终于知道这个怎么用的了
回复

使用道具 举报

Rich666  见习技师

发表于 2019-7-16 16:17:34

micro:bit怎么用
回复

使用道具 举报

20060606  高级技匠

发表于 2020-8-8 06:06:07

shzrzxlee 发表于 2017-4-28 23:42
LCD12864 Shield V1.0  这个已买不到了

嗯,买不到了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2021 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail