OLED 菜单操作

        本次介绍一款中景园带字库的OLED显示屏，并基于该模块描述一种菜单操作方法，能够极大的减少显示界面开发工作量。

        使用的2.08寸OLED显示屏，字库芯片为GT30L32S4W，支持多种字号中英文。

        官方提供了很完善的参考资料，包括不同芯片的操作例程，也就是说点亮显示屏显示字符等操作官方已经帮你完成了，所以接下来要讲的就是具体的应用。
        首先我们从例程中可以得到如下类型的操作函数，这些函数基本具备了菜单操作的一切，只需要填充坐标和显示内容就可以了。

void OLED_ShowChar(u8 x,u8 y,u8 chr,u8 sizey,u8 mode)；
void OLED_ShowString(u8 x,u8 y,u8 *dp,u8 sizey,u8 mode)；
void OLED_ShowNum(u8 x,u8 y,u32 num,u16 len,u8 sizey,u8 mode)；
void OLED_DrawBMP(u8 x,u8 y,u16 length,u8 width,const u8 BMP[],u8 mode)；

void OLED_Clear(void)；
void OLED_Fill(u16 x1,u8 y1,u16 x2,u8 y2,u8 color)；

      如果只是单页面的话，这样直接调用函数去操作也是没什么问题的，毕竟应用本身就不复杂。但是如果我们需要实现多种菜单页面，而且页面内容还支持滚动查看，那么就不太方便了。因此我们需要一套GUI操作方法，能够实现多页面，长页面，页面上下滚动，甚至还有加下划线或高亮指示等功能。

        下面就来说说我所使用的一套GUI操作方法，以本次所述带中文字库的OLED为例。

        首先说一下OLED显示字符的方式，OLED可以显示不同字号字体以及图片等，那么它是如何实现的呢。事实上，OLED厂家会提供一个取模软件，通过这个软件，你可以输入想要的文字或图片，设置字体和字号，最终输出一个字节数组。而OLED在显示的时候就是读取字节数组实现的，因此不同字体字号的文字得使用不同的字节数组，使用不同的操作函数，也就是说想要显示的类型越多，就需要越大的内存空间来存储。

        以上所述是常规的OLED显示方法，针对带字库芯片的OLED有额外的显示方法。首先，不需要再通过取模软件去生成字节数组了，如有需要，直接从字库芯片获取就可以了，当然，受限于字库芯片，你也只能得到有限种的显示效果。比如本次使用的这款OLED，它的字库芯片所支持的内容如下：

        好的，不说那么多，开始讲如何实现动态菜单吧。首先我们得知道关于这个屏的一些基本参数，分辨率256*64，那么根据所选的字体，也就可以计算出每行每列最大支持几个字符显示了。在这里我为了简单只使用了固定大小的字体16，所以可以知道每行最多显示32个字符，每列最多显示4个字符。

        有时候我们需要设置菜单标题和菜单项，并且在滚动菜单时需要冻结菜单标题的显示。如果需要在一行显示多个内容，需要设置左右间隔（事实上设置一边就够了）。如果要设置参数，需要一个索引，这里使用一个箭头作指示。我们把这些常量写到宏里并放到头文件里。

#define DISPLAY_MAX_SCREEN_WIDTH                (256)
#define DISPLAY_MAX_SCREEN_HEIGHT               (64)

#define DISPLAY_LINENUM_MAX                     (4)
#define DISPLAY_LINENUM_WITHOUT_HEAD_MAX        (DISPLAY_LINENUM_MAX - 1)
#define Label_TEXT_LENGTH_MAX                   (32)
#define Label_LEFT_MARGIN                       (16)  // 定义label左边的留白宽度
#define MENU_TOP_MARGIN                         (0)
#define MENU_ARROW_X                            (0)

#define Label_DEFAULT_FONT_SIZE                (16)
#define Label_DEFAULT_FONT_SIZE_WIDTH          (16)
#define Label_DEFAULT_FONT_SIZE_HEIGHT         (16)

        接下来我们开始构建一个显示结构体，可以看到很全面，要显示的内容，长度，坐标，是否有下划线等都可以设置。

typedef struct 
{
    uint8_t         text[KLabel_TEXT_LENGTH_MAX];       // 需要显示的字符串
    uint8_t         textLength;                         // 字符串的实际长度
    POS_typedef     pos;                                // 需要显示的位置(左上角)
    POS_typedef     size;                               // 当前label的大小
    uint8_t         fontSize;                           // 字符显示的大小
    uint8_t         head;                               // 是否是head
    UNDERLINE_enum  underline;                          // 是否含有下划线
}Label_typedef;

typedef struct 
{
    uint8_t  x;
    uint8_t  y;
}POS_typedef;

typedef enum
{
    UNDERLINE_NO             = 0,
    UNDERLINE_YES            = 1
} UNDERLINE_enum;

        接下来定义操作函数,在这里先对显示标签初始化，后面如果要调整再使用下面的操作函数。

void Label_Init(Label_typedef *label, uint8_t *text)
{
    memset(label->text, 0x00, sizeof(uint8_t) * Label_TEXT_LENGTH_MAX);
    label->textLength   = 0;
    label->pos.x        = 0;
    label->pos.y        = 0;
    label->size.x       = 0;
    label->size.y       = 0;
    label->fontSize     = Label_DEFAULT_FONT_SIZE;
    label->head         = 0;  
    label->underline    = UNDERLINE_NO;

    Label_SetText(label, text);
}

void Label_SetText(Label_typedef *label,  uint8_t *text)
{
    uint8_t index = 0;
    if (strlen((char*)text) >= Label_TEXT_LENGTH_MAX)
    {
        return;
    }
    memset(label->text, 0x00, sizeof(uint8_t) * Label_TEXT_LENGTH_MAX);
    while (*(text + index))
    {
        label->text[index] = text[index];
        index++;
    }
    label->textLength = index;
}

void Label_SetPos(Label_typedef *label, POS_typedef pos)
{
    label->pos.x    = pos.x;
    label->pos.y    = pos.y;
}

void Label_SetSize(Label_typedef *label, POS_typedef size)
{
    label->size.x   = size.x;
    label->size.y   = size.y;
}


void Label_SetFontSize(Label_typedef *label, uint8_t fontSize)
{
    label->fontSize     = fontSize;
}

void Label_SetUnderline(Label_typedef *label, UNDERLINE_enum underline)
{
    label->underline    = underline;
}

void Label_SetHead(Label_typedef *label, uint8_t isHead)
{
    label->head         = isHead;
}

        接下里就是核心，真正的显示函数。在这里首先判断了是否是菜单标题，如果是，则肯定会得到显示。如果不是的话，就得根据坐标去判断是否要显示了，比如菜单总共10行，但每次算上标题也只能显示4行，那么后面7行菜单项自然是不需要显示的。最后，如果要加高亮指示等，可以叠加下划线或设置反色等都可以。

void Label_Display(Label_typedef *label)
{
    if (label->head)
    {
        OLED_ShowString(label->pos.y, label->pos.x, (char*)label->text, label->fontSize);
    }
    else
    {
        if (label->pos.y >=Label_DEFAULT_FONT_SIZE_HEIGHT && (label->pos.y+label->size.y) <= DISPLAY_MAX_SCREEN_HEIGHT && (label->pos.x+label->size.x+Label_DEFAULT_FONT_SIZE_WIDTH*label->textLength) <= DISPLAY_MAX_SCREEN_WIDTH)
        {
            OLED_ShowString(label->pos.y, label->pos.x, (char*)label->text, label->fontSize);
        }

        if (label->underline == UNDERLINE_YES)
        {
            OLED_ShowLine(label->pos.y + label->size.y - 2,label->pos.x,label->size.x, 1);
        }
        else
        {
            OLED_ShowLine(label->pos.y + label->size.y - 2,label->pos.x,label->size.x, 0);
        }
    }
}

        有了上面这些，要实现菜单就很容易了。比如要实现一个带标题的菜单，菜单含有4个菜单项，那么可以按如下方式去构造菜单。

typedef struct
{
    KLabel_typedef      headLabel;               // 菜单头

    KLabel_typedef      menuitem1Label;
    KLabel_typedef      menuitem1ValueLabel;

    KLabel_typedef      menuitem2Label;
    KLabel_typedef      menuitem2ValueLabel;

    KLabel_typedef      menuitem3Label;
    KLabel_typedef      menuitem3ValueLabel;

    KLabel_typedef      menuitem4Label;
    KLabel_typedef      menuitem4ValueLabel;

    uint8_t                  firstLineIndex;
    uint8_t                  lastLineIndex;
    uint8_t                  currentIndex;
} TESTWidget_typedef;

        菜单结构定义完毕，接下来就是具体的显示实现了。首先是菜单的初始化,这里先对菜单项赋了初值，然后调用布局函数。

void TESTWidget_Init(TESTWidget_typedef *widget)
{
    KLabel_Init(&widget->headLabel,             "TEST WIDGET");
    KLabel_Init(&widget->menuitem1Label,       "MENU1:");
    KLabel_Init (&widget->menuitem1ValueLabel, "MENU1_VALUE");
    KLabel_Init(&widget->menuitem2Label,       "MENU2:");
    KLabel_Init (&widget->menuitem2ValueLabel, "MENU2_VALUE");
    KLabel_Init(&widget->menuitem3Label,       "MENU3:");
    KLabel_Init (&widget->menuitem3ValueLabel, "MENU3_VALUE");
    KLabel_Init(&widget->menuitem4Label,       "MENU4:");
    KLabel_Init (&widget->menuitem4ValueLabel, "MENU4_VALUE");

    KLabel_SetHead(&widget->headLabel, 1);

    widget->firstLineIndex = 1;
    widget->lastLineIndex = DISPLAY_LINENUM_WITHOUT_HEAD_MAX;

    TESTWidget_Layout(widget);
}

        现在看看布局函数是什么样的,可以看到除了标题外，其余菜单项的坐标与索引widget->firstLineIndex有关，之前说的比如菜单总共10行，但每次算上标题也只能显示4行，如果此时widget->firstLineIndex==0，那么会显示2-4行，如果widget->firstLineIndex==3，那么会显示5-7行，这样只需调整widget->firstLineIndex的值，就能实现菜单的滚动显示。

static void TESTWidget_Layout(TESTWidget_typedef *widget)
{
    POS_typedef pos;
    POS_typedef posValue;
    POS_typedef size;

    size.x = 0;
    size.y = Label_DEFAULT_FONT_SIZE_HEIGHT;

    TESTWidget_LayoutHeadRow(&widget->headLabel, &pos);

    pos.x = TESTWIDGET_LEFT_MARGIN;
    pos.y = widget->headLabel.pos.y + widget->headLabel.size.y
            - (widget->firstLineIndex - 1) * Label_DEFAULT_FONT_SIZE_HEIGHT;


    KLabel_SetPos (&widget->menuitem1Label, pos);
    KLabel_SetSize (&widget->menuitem1Label, size);
    KLabel_SetAlignment (&widget->menuitem1Label, ALIGNMENT_MIDDLE);
    KLabel_SetFontSize (&widget->menuitem1Label, Label_DEFAULT_FONT_SIZE);
    KLabel_SetUnderline (&widget->menuitem1Label, UNDERLINE_NO);

    posValue.x = pos.x + 2*Label_DEFAULT_FONT_SIZE_HEIGHT;
    posValue.y = pos.y;
    KLabel_SetPos (&widget->menuitem1ValueLabel, posValue);
    KLabel_SetSize (&widget->menuitem1ValueLabel, size);
    KLabel_SetAlignment (&widget->menuitem1ValueLabel, ALIGNMENT_MIDDLE);
    KLabel_SetFontSize (&widget->menuitem1ValueLabel, KLabel_DEFAULT_FONT_SIZE);
    KLabel_SetUnderline (&widget->menuitem1ValueLabel, UNDERLINE_NO);

    pos.y = pos.y + widget->menuitem1ValueLabel.size.y;
    KLabel_SetPos (&widget->menuitem2Label, pos);
    KLabel_SetSize (&widget->menuitem2Label, size);
    KLabel_SetAlignment (&widget->menuitem2Label, ALIGNMENT_MIDDLE);
    KLabel_SetFontSize (&widget->menuitem2Label, KLabel_DEFAULT_FONT_SIZE);
    KLabel_SetUnderline (&widget->menuitem2Label, UNDERLINE_NO);

    posValue.x = pos.x + 2*Label_DEFAULT_FONT_SIZE_HEIGHT;
    posValue.y = pos.y;
    KLabel_SetPos (&widget->menuitem2ValueLabel, posValue);
    KLabel_SetSize (&widget->menuitem2ValueLabel, size);
    KLabel_SetAlignment (&widget->menuitem2ValueLabel, ALIGNMENT_MIDDLE);
    KLabel_SetFontSize (&widget->menuitem2ValueLabel, KLabel_DEFAULT_FONT_SIZE);
    KLabel_SetUnderline (&widget->menuitem2ValueLabel, UNDERLINE_NO);

    /*后边类似，使用简写代替*/

    TESTWidget_LayoutAppendedRow(&widget->menuitem3Label, &pos);
    TESTWidget_LayoutAppendedColumn(&widget->menuitem3ValueLabel, &pos, 2 * Label_DEFAULT_FONT_SIZE_HEIGHT);
}

        我们可以使用按键或旋转编码器来用作菜单的滚动，可以设置往上滚动为-1，往下滚动为+1，那么可以得到下面的程序。根据当前所处的索引widget->currentIndex和总的菜单项数目计算widget->firstLineIndex和widget->lastLineIndex，由此决定当前需要显示的内容。

void TESTWidgetItemIndexScrewed(TESTWidget_typedef* widget,int8_t value)
{
    int8_t tempIndex = 0;
    tempIndex = widget->currentIndex + value;
    if (tempIndex < 1)
    {
        tempIndex = 1;
    }
    else if (tempIndex >= TESTWIDGET_MENU_LINE_NUM)
    {
        tempIndex = TESTWIDGET_MENU_LINE_NUM- 1;
    }

    widget->currentIndex = tempIndex;
    if (widget->currentIndex < widget->firstLineIndex)
    {
        widget->firstLineIndex = widget->currentIndex;
        widget->lastLineIndex = widget->firstLineIndex + (DISPLAY_LINENUM_WITHOUT_HEAD_MAX - 1);
    }
    if (widget->currentIndex > widget->lastLineIndex)
    {
        widget->lastLineIndex = widget->currentIndex;
        widget->firstLineIndex = widget->lastLineIndex - (DISPLAY_LINENUM_WITHOUT_HEAD_MAX - 1);
    }
}

        如果要修改菜单参数，可以参照TESTWidgetItemIndexScrewed函数编写，这样就有两个功能，一个用于菜单翻页（选择具体菜单项），另一个用作调整参数值，基本满足菜单操作的所有需要。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/461926.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

结构体联合体枚举和位段

结构体联合体枚举和位段

文章目录 结构体结构体类型的声明特殊的声明 结构的自引用结构体变量的定义和初始化结构体内存对齐为什么要内存对齐结构体传参结构体实现位段&#xff08;位段的填充&可移植性&#xff09;位段位段的内存分配空间如何开辟位段的跨平台问题位段的应用 枚举枚举类型的定义枚…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Column）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Column）

沿垂直方向布局的容器。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Column(value?: {space?: string | number}) 从API version 9开始&#xff0c;该接口…
阅读更多...
vscode 生成树状图工具：project-tree

vscode 生成树状图工具：project-tree

按下快捷键“CtrlShiftP”, 在弹框中输入 Project Tree&#xff0c;然后敲回车即会在根目录自动生成README.md&#xff08;如果之前没有的话&#xff09;。
阅读更多...
pytorch 入门基础知识二（Pytorch 02）

pytorch 入门基础知识二（Pytorch 02）

一 微积分 1.1 导数和微分 微分就是求导&#xff1a; %matplotlib inline import numpy as np from matplotlib_inline import backend_inline from d2l import torch as d2l def f(x):return 3 * x ** 2 - 4 * x 定义&#xff1a; 然后求 f(x) 在 x 1 时的导数&#xff…
阅读更多...
HarmonyOS NEXT应用开发—折叠屏音乐播放器方案

HarmonyOS NEXT应用开发—折叠屏音乐播放器方案

介绍 本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。 效果图预览 使用说明 播放器预加载了歌曲&#xff0c;支持播放、暂停、重新播放&#xff0c;在折叠屏上&#xff0c;支持横屏悬停态下的组件自适应动态变更。 实现思路 采用MVVM模式进…
阅读更多...
【Algorithms 4】算法（第4版）学习笔记 18 - 4.4 最短路径

【Algorithms 4】算法（第4版）学习笔记 18 - 4.4 最短路径

文章目录 前言参考目录学习笔记0&#xff1a;引入介绍1&#xff1a;APIs1.1&#xff1a;API&#xff1a;加权有向边1.2&#xff1a;Java 实现&#xff1a;加权有向边1.3&#xff1a;API&#xff1a;加权有向图1.4&#xff1a;Java 实现&#xff1a;加权有向图1.5&#xff1a;AP…
阅读更多...
Unity类银河恶魔城学习记录10-12 p100 Improve aliments - chill源代码

Unity类银河恶魔城学习记录10-12 p100 Improve aliments - chill源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili CharacterStats.cs using System.Collections; using System.Collections…
阅读更多...
docker容器镜像管理

docker容器镜像管理

目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、镜像命令 3.1 查看当前已有镜像 3.2 查看已有的全部镜像 3.3 查看镜像ID 3.4 镜像删除 四、 容器命令 4.1 下载镜像 4.2 新建和启动容器 run 4.3 交互式 4.…
阅读更多...
探讨大世界游戏的制作流程及技术——大场景制作技术概况篇

探讨大世界游戏的制作流程及技术——大场景制作技术概况篇

接上文&#xff0c;我们接下来了解一下大世界场景制作技术有哪些&#xff0c;本篇旨在给大家过一遍目前业界的做法&#xff0c;能让大家有一个宏观的知识蓝图。实际上&#xff0c;针对不同的游戏类型和美术风格&#xff0c;制作技术在细节上有着非常大的不同&#xff0c;业界目…
阅读更多...
【UE5】持枪状态站立移动的动画混合空间

【UE5】持枪状态站立移动的动画混合空间

项目资源文末百度网盘自取 创建角色在持枪状态站立移动的动画混合空间 在BlendSpace文件夹中单击右键选择动画(Animation)中的混合空间(Blend Space) 选择SK_Female_Skeleton 命名为BS_RifleStand 打开 水平轴表示角色的方向&#xff0c;命名为Direction&#xff0c;方…
阅读更多...
SD-WAN技术助力跨境电商网络搭建的解决方案

SD-WAN技术助力跨境电商网络搭建的解决方案

随着全球贸易的蓬勃发展&#xff0c;跨境电商成为了商业领域中的一个重要组成部分。然而&#xff0c;跨境电商面临着网络搭建和管理的复杂性&#xff0c;而SD-WAN技术的引入为解决这些问题提供了一种创新的方法。本文将深入探讨SD-WAN如何有效解决跨境电商行业的网络搭建问题。…
阅读更多...
UE5.1 iClone8 正确导入角色骨骼与动作

UE5.1 iClone8 正确导入角色骨骼与动作

使用iClone8插件Auto Setup 附录下载链接 里面有两个文件夹,使用Auto Setup C:\Program Files\Reallusion\Shared Plugins 在UE内新建Plugins,把插件复制进去 在工具栏出现这三个人物的图标就安装成功了 iClone选择角色,导入动作 选择导出FBX UE内直接导入 会出现是否启动插件…
阅读更多...
同城预约上门服务APP小程序开发 打造快捷便利生活

同城预约上门服务APP小程序开发 打造快捷便利生活

随着移动互联网的快速发展&#xff0c;人们的生活方式正在发生深刻的变化。特别是在城市生活中&#xff0c;人们越来越依赖移动应用来解决日常生活中的各种问题。其中&#xff0c;同城预约上门服务APP正成为一种新型的生活服务平台&#xff0c;为人们提供了更加便利和快捷的服务…
阅读更多...
RTC的Google拥塞控制算法 rmcat-gcc-02

RTC的Google拥塞控制算法 rmcat-gcc-02

摘要 本文档描述了使用时的两种拥塞控制方法万维网&#xff08;RTCWEB&#xff09;上的实时通信&#xff1b;一种算法是基于延迟策略&#xff0c;一种算法是基于丢包策略。 1.简介 拥塞控制是所有共享网络的应用程序的要求互联网资源 [RFC2914]。 实时媒体的拥塞控制对于许…
阅读更多...
2023年总结：一个普通程序员如何挑选出价值千万的职业赛道

2023年总结：一个普通程序员如何挑选出价值千万的职业赛道

​​​​​​​ 引言 随着2023年的序幕缓缓落下&#xff0c;我终于在岁月的流转中捕捉到了一条隐秘而又公开的真理。它悄然告诉我们&#xff0c;成功并非单纯由勤劳的双手雕琢&#xff0c;一份耕耘未必有一份收获&#xff0c;而是在于我们如何在命运的十字路口作出关键选择。那…
阅读更多...
Linux/secret

Linux/secret

Enumeration nmap 第一次扫描发现系统对外开放了22&#xff0c;80和3000端口&#xff0c;端口详细信息如下 可以看到22端口对应的是ssh服务&#xff0c;80和3000都是http服务&#xff0c;80端口使用nginx&#xff0c;3000使用了Node.js TCP/80 可以先从80端口开始探索&…
阅读更多...
滑动窗口和螺旋矩阵

滑动窗口和螺旋矩阵

209. 长度最小的子数组 题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符合条件的子数组&#xff0c;返回…
阅读更多...
R统计学3 - 数据分析入门问题41-60

R统计学3 - 数据分析入门问题41-60

往期R统计学文章： R统计学1 - 基础操作入门问题1-20 R统计学2 - 数据分析入门问题21-40 41. R 语言如何做双坐标图？ # 创建模拟数据 year <- 2014:2024 gdp <- data.frame(year, GDP = sort(rnorm(11, 1000, 100))) ur <- data.frame(year, UR = rnorm(11, 5, 1…
阅读更多...
微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

老规矩先上效果图: 1 、在pages文件夹下新建image文件夹用来存放标记的图片。 2、代码片段 也可以参考小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html index.wxml代码 <mapid="map"style="width: 100%; height:100%;&…
阅读更多...
外包就干了2个月，技术退步明显....

外包就干了2个月，技术退步明显....

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023