【电子量产工具】4. UI系统

这篇具有很好参考价值的文章主要介绍了【电子量产工具】4. UI系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近看了 电子量产工具 这个项目,本专栏是对该项目的一个总结。


一、UI界面分析

【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言

UI用户界面(User Interface)的缩写,指的是人与计算机或其他设备进行交互时所使用的界面。用户界面是用户与系统之间的桥梁,提供了一种方式让用户与计算机进行沟通、操作和获取信息。
用户界面可以包括以下几个方面:

  • 图形用户界面(GUI)。
  • 命令行界面(CLI)
  • 触摸界面
  • 声音界面
  • 虚拟现实界面(VR)和增强现实界面(AR)

我们的UI系统,就是构造各类GUI元素,比如按钮(目前只实现按钮)。

二、结构体描述按钮

/* 函数指针(绘制按键) */
typedef int (*ONDRAW_FUNC)(struct Button *ptButton, PDispBuff ptDispBuff);
/* 函数指针(按下按钮) */
typedef int (*ONPRESSED_FUNC)(struct Button *ptButton, PDispBuff ptDispBuff, PInputEvent ptInputEvent);


typedef struct Button {
	char *name;								// 按键 名字
	int status;								//按键 按下状态
	Region tRegion;							// 按键的区域
	ONDRAW_FUNC OnDraw;						//一个 ONDRAW_FUNC 类型的函数指针,用于指向按钮绘制函数
	ONPRESSED_FUNC OnPressed;				//一个 ONPRESSED_FUNC 类型的函数指针,用于指向按钮按下事件处理函数
}Button, *PButton;
typedef struct Region {				//区域包括 左上角坐标, 高, 宽
	int iLeftUpX;
	int iLeftUpY;
	int iWidth;
	int iHeigh;
}Region, *PRegion;

三、按钮初始化

void InitButton(PButton ptButton, char *name, PRegion ptRegion, ONDRAW_FUNC OnDraw, ONPRESSED_FUNC OnPressed)
{
	ptButton->status = 0;				//初始状态为 0 ,未按下
	ptButton->name = name;
	ptButton->tRegion = *ptRegion;			// 按钮的区域
	ptButton->OnDraw    = OnDraw ? OnDraw : DefaultOnDraw;		//若 OnDraw 为空,则执行默认绘制函数DefaultOnDraw
	ptButton->OnPressed = OnPressed ? OnPressed : DefaultOnPressed;	 //若 OnPressed 为空,则执行默认绘制函数DefaultOnPressed
}

四、默认绘制按键事件函数

绘制各个按钮 Button 的底色,文字,并将其刷新到 DispBuff 上

static int DefaultOnDraw(struct Button *ptButton, PDispBuff ptDispBuff)
{
	/* 绘制底色 */
	DrawRegion(&ptButton->tRegion, BUTTON_DEFAULT_COLOR);		// 红色 0xff0000

	/* 居中写文字 */
	DrawTextInRegionCentral(ptButton->name, &ptButton->tRegion, BUTTON_TEXT_COLOR);		//黑色 0x000000

	/* flush to lcd/web */
	FlushDisplayRegion(&ptButton->tRegion, ptDispBuff);

	return 0;
}
  1. 绘制底色
void DrawRegion(PRegion ptRegion, unsigned int dwColor)
{
	int x = ptRegion->iLeftUpX;
	int y = ptRegion->iLeftUpY;
	int width = ptRegion->iWidth;
	int heigh = ptRegion->iHeigh;

	int i,j;

	for (j = y; j < y + heigh; j++)
	{
		for (i = x; i < x + width; i++)
			PutPixel(i, j, dwColor);			//描点函数
	}
}
  1. 居中写文字
    在 一定的区域 Region,按颜色 dwColor 居中显示名字 name
void DrawTextInRegionCentral(char *name, PRegion ptRegion, unsigned int dwColor)
{
	int n = strlen(name);
	int iFontSize = ptRegion->iWidth / n / 2;
	FontBitMap tFontBitMap;

	int iOriginX, iOriginY;
	int i = 0;
	int error;

	if (iFontSize > ptRegion->iHeigh)				//计算字体大小
		iFontSize =  ptRegion->iHeigh;
		
	/* 当前文字的基点 */
	iOriginX = (ptRegion->iWidth - n * iFontSize)/2 + ptRegion->iLeftUpX;
	iOriginY = (ptRegion->iHeigh - iFontSize)/2 + iFontSize + ptRegion->iLeftUpY;

	SetFontSize(iFontSize);					// 设置字体大小

	while (name[i])			//字符编码
	{
		/* get bitmap */
		tFontBitMap.iCurOriginX = iOriginX;
		tFontBitMap.iCurOriginY = iOriginY;
		error = GetFontBitMap(name[i], &tFontBitMap);		//根据字符编码获取位图,保存在 参数 tFontBitMap中
		if (error)
		{
			printf("SelectAndInitFont err\n");
			return;
		}

		/* draw on buffer */		
		DrawFontBitMap(&tFontBitMap, dwColor);			// 绘制位图	

		iOriginX = tFontBitMap.iNextOriginX;			//获取下一文字的基点坐标
		iOriginY = tFontBitMap.iNextOriginY;	
		i++;
	}
}
  1. 将绘制到的按钮,刷新到 buffer 上。

返回 LCDframebuffer , 以后上层 APP 可以直接操作LCD, 可以不用 FbFlushRegion
也可以 malloc 返回一块无关的buffer, 要使用 FbFlushRegion

这里 为了 以后代码的可移植性,加上了刷新界面,但 并未做出任何举动。

【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言

五、默认按下按键事件函数

按下按键事件函数 也需要 上面 绘制函数 里的 : 绘制底色, 居中写文字 ,刷新界面。这里就不再 重述了。

static int DefaultOnPressed(struct Button *ptButton, PDispBuff ptDispBuff, PInputEvent ptInputEvent)
{
	unsigned int dwColor = BUTTON_DEFAULT_COLOR;		//按钮初始颜色 红色,0xff0000
	
	ptButton->status = !ptButton->status;				// 按钮状态,未按下时 为 0 
	if (ptButton->status)
		dwColor = BUTTON_PRESSED_COLOR;					//按下的颜色为 绿色, 0x00ff00

	/* 绘制底色 */
	DrawRegion(&ptButton->tRegion, dwColor);

	/* 居中写文字 */
	DrawTextInRegionCentral(ptButton->name, &ptButton->tRegion, BUTTON_TEXT_COLOR);

	/* 刷新界面 到 lcd/web */
	FlushDisplayRegion(&ptButton->tRegion, ptDispBuff);
	return 0;
}

六、测试程序

  1. 显示界面初始化
    【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言
  2. 字体初始化
    【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言
  3. ui 界面
	/* 设置按钮的显示位置,宽高 */
	tRegion.iLeftUpX = 200;
	tRegion.iLeftUpY = 200;
	tRegion.iWidth   = 300;
	tRegion.iHeigh   = 100;
	
	/* 显示 "test", 调用默认绘制,按下函数 */
	InitButton(&tButton, "test", &tRegion, NULL, NULL);
	tButton.OnDraw(&tButton, ptBuffer);				//绘制按键
	while (1)
	{
		tButton.OnPressed(&tButton, ptBuffer, NULL);	//按下按键,
		sleep(2);		// 休眠 2 秒
	}

实验效果

实验结果就是每隔 2 秒,自动 变换按键的颜色。(我按钮后面的图是 自己的QT界面,忽略即可)
【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言
【电子量产工具】4. UI系统,电子量产工具,ui,GUI,linux,电子量产工具,开发语言


总结

UI 系统界面的逻辑性 不难,就是一些函数的编写有些困难。
这些封装好的代码,可以用于以后代码的一直调用。文章来源地址https://www.toymoban.com/news/detail-542769.html

到了这里,关于【电子量产工具】4. UI系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity使用GUI封装一个UI系统

    Untiy中设计UI不会使用GUI,因为它必须要运行代码才可以看出UI的布局结果,而且GUI不支持屏幕分辨率自适应,所以一般会使用UGUI等设计,但是为了搞清楚高级UI的原理,通过GUI去设计一个类似于UGUI的工具是个很好的学习方法。所以本文属于是脱裤子放屁,但是只有脱下裤子把

    2024年02月04日
    浏览(45)
  • Unity3D学习之UI系统——GUI

    设置Screen Type和Center Type 最终实现效果: 3.1.1 GUI 共同点 3.1.2 文本控件 可以传图片 在unity中拖入图片 可以把Rect 设置成public 的变量,在控件中设置 文字和图片均显示 toolTip 获取当前选中的空间的附带信息 GUI Style 控制样式 3.1.3 按钮控件 必须要按下并抬起才算被点击 长按按钮

    2024年01月22日
    浏览(71)
  • Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行

    GUI Guider是一个专门针对LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。设计完成的UI页面可以在PC上仿真运行,确认设计完毕之后可以生成C代码,再整合到MCU项目中。 1.1 创建工程 打开GUI-Guider,选择自己要使用的LVGL版本,V7或者

    2024年03月19日
    浏览(53)
  • 在Ubuntu 系统下开发GUI,用哪种开发工具比较好?

    在Ubuntu系统下开发GUI,你可以考虑使用以下几种开发工具: Qt Creator:Qt Creator是一个跨平台的集成开发环境,专门用于开发基于Qt框架的应用程序。它提供了丰富的图形界面设计工具和代码编辑器,支持C++和QML编程。Qt Creator具有良好的跨平台支持和强大的功能,适用于开发各

    2024年02月16日
    浏览(41)
  • 【鸿蒙开发】第七章 ArkTS语言UI范式-基础语法

    通过前面的章节,我们基本清楚鸿蒙应用开发用到的语言和项目基本结构,在【鸿蒙开发】第四章 Stage应用模型及项目结构也提到过ArkTS的UI范式的 基本语法 、 状态管理 、 渲染控制 等能力,简要介绍如下: 基本语法 : ArkTS 定义了 声明式UI描述 、 自定义组件 和 动态扩展

    2024年02月03日
    浏览(64)
  • 【unity之UI专题】GUI(IMGUI)详解

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 : unity实战入门 IMGUI不会用作游戏的UI开发 会用到游戏的编辑器开发 🅰️ 题单来自:唐老狮 GUIContent -----可以是以下三者的结合 tooltip–鼠

    2024年02月10日
    浏览(51)
  • 【vue ui 一直卡在 Starting GUI..】

    直接在cmd中输入如下

    2024年02月03日
    浏览(46)
  • C#自动化采集工具-1.采集布局设计与UI开发框架

    这里UI我们用.NET中较为容易上手的winform来开发,如图,因为对于工具的界面并没有太多花哨的需求,满足使用即可。界面上方是导入导出等一系列全局操作功能,中间是配置信息,下方是日志控制台,中间配置信息又分为左右,左边是树形采集列表,右边是点击列表节点对应

    2023年04月15日
    浏览(40)
  • LLMs:Text generation web UI/text-generation-webui(一款帮助LLMs实现本地化部署和微调的GUI界面式工具,非CLI式)的简介、安装、使用方法之详细攻略

    LLMs:Text generation web UI/text-generation-webui(一款帮助LLMs实现本地化部署和模型微调的GUI界面式工具,非CLI式)的简介、安装、使用方法之详细攻略 目录 Text generation web UI的简介 Text generation web UI的安装 第一步、安装程序

    2024年02月07日
    浏览(39)
  • HarmonyOS/OpenHarmony应用开发-ArkTS语言声明式UI描述

    ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。 一、创建组件 根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。 说明,创建组件时不需要new运算符。 1.无参数 如果组

    2024年02月08日
    浏览(86)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包