您尚未登录。

楼主 #1 2021-04-23 16:39:58

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

XUI是xboot内置的立即模式GUI框架,代码量很低,但功能绝对强大,所想即所得,无需各种设计器辅助,随心所欲敲你的代码,就行了,当你敲完了,UI开发工作就结束了。
1_20210423-1639.jpg

离线

楼主 #2 2021-04-23 16:45:07

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

这个项目demo采用xboot的主线代码,感兴趣的可以研究,不要钱的,学到了,就是自己的了
https://github.com/xboot/xboot

离线

楼主 #3 2021-04-23 16:49:42

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

补充一下原始设计稿,不是贴图喔,上面的界面是纯代码实现。

3.png

离线

楼主 #4 2021-04-23 16:50:54

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

4.png

离线

楼主 #5 2021-04-23 16:52:02

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

发现是不是有点不一样,设计稿对于xui最大的意义,就是提供颜色尺寸等信息

离线

楼主 #6 2021-04-23 17:02:12

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

如果感兴趣的人多的话,我可以再讲讲XUI的细节,先说个概括性的。

GUI实现分为三种设计模式:
1,保留模式,传统GUI,都是使用此方案,优点是成熟,缺点是开发繁琐
2,立即模式,诞生于游戏开发领域,解决游戏交互,xui就采用此模式,此模式优点,是代码量低,所想所得,灵活性强1,编写事情响应得心应手,缺点是纯代码,驾驭不了代码的新手,会退避三分
3,声明式,这个在web领域,如火如荼,什么VUE啥的,很现代,优点是,效果赞,赏心锐目,而且现代,缺点是,需要脚本语言配合,而且需要描述能力稍强点的语言,再有就是性能需求也是较高。嵌入式裸奔系统或者各种rtos没有见到过有这种的。不知以后会不会有这玩意儿。

离线

#7 2021-04-23 17:06:32

阿黄
会员
注册时间: 2018-10-03
已发帖子: 265
积分: 195

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

前排听讲

离线

楼主 #8 2021-04-23 17:12:08

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

XUI里面没有任何回调函数,所有的事件响应都是 在if else 里面,是不是觉得不可以思议。来事件了,条件判断会自动转向

离线

楼主 #9 2021-04-23 17:22:44

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

https://gitee.com/xboot/xboot/blob/master/src/kernel/command/cmd-overview.c
这个链接,是一个测试demo,大部分控件,都展示了。

			if(xui_begin_tree(ctx, "Normal Button"))
			{
				xui_layout_row(ctx, 3, (int[]){ 100, 100, -1 }, 40);
				for(int i = 0; i < 8; i++)
				{
					xui_button_ex(ctx, 0, wcstr[i], (i << 8) | XUI_OPT_TEXT_CENTER);
				}
				xui_end_tree(ctx);
			}

比如这段代码,就是如果点击了树形控件里面的Normal Button标题,则会自动创建8个按钮,每行3个,前2个100像素宽,40高,最后一个完全填充完剩余空间。


感觉是不是很神奇,这一点代码就可以做这么多事了。

离线

#10 2021-04-23 21:52:07

微凉VeiLiang
会员
所在地: 深圳
注册时间: 2018-10-28
已发帖子: 551
积分: 489
个人网站

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

如果感兴趣的人多的话,我可以再讲讲XUI的细节,先说个概括性的。

GUI实现分为三种设计模式:
1,保留模式,传统GUI,都是使用此方案,优点是成熟,缺点是开发繁琐
2,立即模式,诞生于游戏开发领域,解决游戏交互,xui就采用此模式,此模式优点,是代码量低,所想所得,灵活性强1,编写事情响应得心应手,缺点是纯代码,驾驭不了代码的新手,会退避三分
3,声明式,这个在web领域,如火如荼,什么VUE啥的,很现代,优点是,效果赞,赏心锐目,而且现代,缺点是,需要脚本语言配合,而且需要描述能力稍强点的语言,再有就是性能需求也是较高。嵌入式裸奔系统或者各种rtos没有见到过有这种的。不知以后会不会有这玩意儿。

给力,说的很到位。VUE开发有的,叫有嵌入式的框架叫EVM的一直在搞这个。看上去很不错,后面现代ui应该是越来越多是声明式了。主要是配合设计工具特别好用。感觉AWTK也算是吧

离线

#11 2021-04-23 21:52:59

微凉VeiLiang
会员
所在地: 深圳
注册时间: 2018-10-28
已发帖子: 551
积分: 489
个人网站

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

补充一下原始设计稿,不是贴图喔,上面的界面是纯代码实现。

https://whycan.com/files/members/2137/3.png

不懂就问,这个设计辅助工具是什么 big_smile

离线

#12 2021-04-23 22:39:23

shichen717
会员
注册时间: 2021-04-23
已发帖子: 1
积分: 0.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

问楼主,右边的白色方块是什么

离线

#13 2021-04-24 09:14:00

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

不错 刚好有个项目 可以试下

离线

#14 2021-04-24 09:59:37

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

shichen717 说:

问楼主,右边的白色方块是什么

串口wifi

离线

楼主 #15 2021-04-24 12:13:07

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

是的,乐鑫的wifi模块

离线

#16 2021-04-24 13:34:51

tianjjff
会员
注册时间: 2018-12-24
已发帖子: 111
积分: 69

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

前排围观大佬!

离线

#17 2021-04-24 14:57:01

小智
会员
注册时间: 2019-10-16
已发帖子: 100
积分: 86

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

大佬一出,必然精品

离线

#18 2021-04-24 17:10:25

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xui 的icon资源是怎么加载的 我测试了例子 都是在资源文件里面找不到 icon的图片资源

离线

#19 2021-04-24 17:53:51

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

linghaibin 说:

xui 的icon资源是怎么加载的 我测试了例子 都是在资源文件里面找不到 icon的图片资源

看了一下 icon 资源 貌似是字体里面的  image 貌似是通过surface_t 实现的 如果我要显示一张自定义图片应该怎么加载显示呢

离线

#20 2021-04-24 18:00:35

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

linghaibin 说:
linghaibin 说:

xui 的icon资源是怎么加载的 我测试了例子 都是在资源文件里面找不到 icon的图片资源

看了一下 icon 资源 貌似是字体里面的  image 貌似是通过surface_t 实现的 如果我要显示一张自定义图片应该怎么加载显示呢


找到了 是不是这个 surface_alloc_from_xfs

离线

#21 2021-04-24 20:43:29

novice
会员
注册时间: 2019-07-26
已发帖子: 65
积分: 51

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

linghaibin 说:

xui 的icon资源是怎么加载的 我测试了例子 都是在资源文件里面找不到 icon的图片资源

可能楼主用的是SVG矢量图片。

离线

#22 2021-04-24 22:38:40

linghaibin
会员
注册时间: 2018-01-07
已发帖子: 33
积分: 30

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

linghaibin 说:
linghaibin 说:
linghaibin 说:

xui 的icon资源是怎么加载的 我测试了例子 都是在资源文件里面找不到 icon的图片资源

看了一下 icon 资源 貌似是字体里面的  image 貌似是通过surface_t 实现的 如果我要显示一张自定义图片应该怎么加载显示呢


找到了 是不是这个 surface_alloc_from_xfs

可以了 分享一下流程

			ctx_xfs = xfs_alloc("/private/framework", 0);
			logo = surface_alloc_from_xfs(ctx_xfs, "assets/images/panel.png");
			if(logo) {
				printf("create suss/n");
			} else {
				printf("create fail/n");
			}

                        xui_image_ex(ctx, logo, 0, XUI_IMAGE_CONTAIN);

离线

楼主 #23 2021-04-25 09:33:26

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

icon是矢量字体实现的,渲染过程利用了freetype,就是流行的icon font

离线

楼主 #24 2021-04-25 09:49:45

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


贴一个overview demo的演示视频,可以看看究竟实现了哪些控件,要扩展控件也是比较简单的,一般一个控件也就不到200行代码,也可自定义高级别的的控件。

离线

楼主 #25 2021-04-25 10:01:06

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

高级别的组件可以由各种低级别的组件组合而成,也就是说,你实现了一个模拟时钟界面,那么这个界面可以变成一个控件,导出一个控件函数,就可以随便调用了,需要注意的事,可变的控制信息需要通过参数传递进去,不能共享变量,不然创建多个控件时会导致同步变化。

离线

#26 2021-04-25 11:57:54

armstrong
会员
注册时间: 2019-04-10
已发帖子: 181
积分: 163.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

理解立即模式好难啊。
普通GUI的界面元素都是对象,对象拥有一些属性和方法,对象用树状结构管理,这很好理解。
立即模式该怎么理解呢?

离线

楼主 #27 2021-04-25 12:49:26

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

立即模式是个大循环,里面不断调用各种控件,每一帧只要屏幕上看得见的都会调用一遍,在调用时会生成绘图指令队列,再全部调用完后,重排绘图指令,做脏矩形优化,找到需要更新的区域,执行相关的绘图指令。事件处理过程就是在控件的调用里,事件会改变绘图指令,当绘图指令变化了,界面就跟这变化了

离线

楼主 #28 2021-04-25 12:54:33

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

因为是个大循环,感觉效率会很低,但这里做了很多优化,比如,比如当屏幕不变化时,也要去重刷,明显是浪费cpu资源,在这里用hash算法优化了,每一帧的所有绘图指令,都进行hash运算,当hash值变化了,就代表屏幕内容变化了,这样才需要执行具体的绘图指令。但光有这一个部分优化,还是不够的,如果屏幕仅仅有一小块区域变化了,hash值变了就进行全屏刷新绘制,效率也是很低的,所有,这里又将屏幕分成无数个格子,每个格子都有一个hash值,如果这个格子的hash值变化了,就代表这个格子需要重新绘制,这样就实现按需刷新,也就是脏矩形技术。

离线

楼主 #29 2021-04-25 13:03:48

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

经过优化后,这个大循环基本能做到千帧以上,逻辑上的响应速度是很快的,瓶颈主要是在渲染部分,这个看硬件渲染看硬件绘图能力,千帧UI的表现就是很灵敏,没有迟钝的现象,可以看上面的演示视频,当然你绘图拖后腿了,那就没辙了,谁叫你画得慢呢,立即UI,都是通过指令来生成各种图形的,贴图在这里是二等公民,因为都是指令,所以整个UI都是矢量的,每个控件都支持无限缩放,自动布局。看视频最后的演示,里面调整了主题参数,然后一个个按钮都变得特别大

离线

#30 2021-04-25 16:03:16

hox
会员
注册时间: 2020-02-17
已发帖子: 23
积分: 16.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

板凳,听大佬讲课

离线

楼主 #31 2021-04-25 19:48:11

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

优化了下xui,避免多次重复计算字体尺寸,在F1C100S平台上测试帧率提升了4帧
字体测量,布局,这个还是比较耗资源的。

离线

#32 2021-04-26 11:36:25

tam2907
会员
注册时间: 2020-03-29
已发帖子: 34
积分: 23.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

看起来不错

离线

#33 2021-04-26 14:27:49

netwp
会员
注册时间: 2018-08-19
已发帖子: 27
积分: 21

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

补充一下原始设计稿,不是贴图喔,上面的界面是纯代码实现。

https://whycan.com/files/members/2137/3.png

请问这个设计稿软件是做什么用的,也是上位机做界面,Xboot去运行吗

离线

楼主 #34 2021-04-26 14:43:13

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

这个就是一个美工用的工具,类似ps而已

离线

#35 2021-04-26 16:31:32

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

按一个按钮让树的某个节点以及它的子节点全部展开或关闭应该怎么调用接口?
可以在一个线程循环读数和计算,然把计算结果显示在label里面吗?

离线

楼主 #36 2021-04-26 17:30:59

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

可以的,可以看那个cmd-overview.c,看里面怎么写的,千万别用保留模式的思维来思考,换一种思维,你会发现,一切都是顺其自然的,纯线性思维。

离线

楼主 #37 2021-04-26 17:45:15

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

下面是一个简单的demo代码,一个窗体里创建了3个控件,一个label,独占一行,显示value变量的值,两个button,每个100像素宽,在同一行,其中一个点击后执行加一操作,另一个执行减一操作。看着着代码应该更容易理解怎么编写UI吧。

static void test_window(struct xui_context_t * ctx)
{
	if(xui_begin_window(ctx, "Test Window", NULL))
	{
		static int value = 0;

		xui_layout_row(ctx, 1, (int[]){ -1 }, 0);
		xui_label(ctx, xui_format(ctx, "value = %d", value));

		xui_layout_row(ctx, 2, (int[]){ 100, 100 }, 0);
		if(xui_button(ctx, "add"))
			value++;
		if(xui_button(ctx, "sub"))
			value--;

		xui_end_window(ctx);
	}
}

下面是演示视频

最近编辑记录 xboot (2021-04-26 17:49:23)

离线

#38 2021-04-26 18:22:46

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

可以的,可以看那个cmd-overview.c,看里面怎么写的,千万别用保留模式的思维来思考,换一种思维,你会发现,一切都是顺其自然的,纯线性思维。

我第一个问题其实是想问控件有没有记录状态功能,然后通过api更改它的状态,然后下一次刷新就能做出正确的绘图,例如树节点的开或闭。还是说所有状态都要用户程序通过全局或静态变量来记录,然后在代码中用if else做相应的处理?

还有一个问题,如果数据来自于网络,譬如这个论坛的一个主题,它包含很多内容,现在是否有比较简便的接口从数据直接生成ui呢?以后呢?

离线

楼主 #39 2021-04-26 20:05:11

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

第一个问题,绝大部分控件的状态是由用户来维护,但某些控件,为了方便使用,xui自动负责维护了,这个需要在实现控件时,跟一般控件有些区别,也就是说,系统可以自动维护状态,比如树形控件的展开和折叠,窗口的显示与关闭,toogle开关的缓动动画过程,这些是控件自动维护的,但checkbox,radiobutton等状态是需要外面的变量来维护的。

第二个问题,通过描述文件生成ui,界面的描述,是没有任何问题的,但你事件响应就无法编程了,没有任何响应的界面,是没有任何意义的。

通过api改变控件的状态,这种是保留模式特有的,这立即模式根本就不需要api来改变控件状态,你直接改变变量的值,ui就跟着变化了。
控件和变量是天然绑定的,控件可以改变变量,同样变量也可以改变控件。

最近编辑记录 xboot (2021-04-26 20:07:23)

离线

楼主 #40 2021-04-26 20:35:50

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

关于控件和变量天然绑定,这个可以看number控件,这个控件可以绑定一个变量,变量类型有多种,char,int,float,double等都是可以绑定的

static inline int xui_number(struct xui_context_t * ctx, double * value, double low, double high, double step)
static inline int xui_number_float(struct xui_context_t * ctx, float * value, float low, float high, float step)
static inline int xui_number_int(struct xui_context_t * ctx, int * value, int low, int high, int step)
static inline int xui_number_uint(struct xui_context_t * ctx, unsigned int * value, unsigned int low, unsigned int high, unsigned int step)
static inline int xui_number_char(struct xui_context_t * ctx, char * value, char low, char high, char step)
static inline int xui_number_uchar(struct xui_context_t * ctx, unsigned char * value, unsigned char low, unsigned char high, unsigned char 

number控件绑定某个变量后,就会双向控制,滑动鼠标可以改变变量的值,同样,改变变量的值,可以修改控件的显示状态,滑动的范围,步长等参数,都可以在调用控件时传递参数来设置。

if(xui_begin_tree(ctx, "Normal Number"))
			{
				static double n[8] = { 10, 20, 30, 40, 50, 60, 70, 80 };
				xui_layout_row(ctx, 1, (int[]){ -1 }, 0);
				for(int i = 0; i < 8; i++)
				{
					xui_number_ex(ctx, &n[i], -1000, 1000, 1, "%.2f", (i << 8) | XUI_OPT_TEXT_LEFT);
				}
				xui_end_tree(ctx);
			}

这个代码是创建8个double型number控件,从-1000 到1000,步长为1。这样这个double变量,就限制了变化范围,以及变化的步长,可以通过ui来双向控制。

离线

#41 2021-04-27 11:46:18

达克罗德
会员
注册时间: 2018-04-10
已发帖子: 1,037
积分: 1004.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

立即模式天然绑定变量,可以说是天然的响应式UI框架。不过缺点也很明显,没有快速化组件能力,需要自己维护大量状态变量。

离线

#42 2021-04-27 11:52:15

542396750@qq.com
会员
注册时间: 2021-03-26
已发帖子: 79
积分: 5.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

wifi模块是ESP8266吗?

离线

#43 2021-04-27 14:52:54

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

如果要在程序中记住UI所有状态,这未免增加了应用开发人员的脑力负担,而且程序耦合度也高了。不过嵌入式系统ui不会很复杂元素也比较固定,这点额外负担倒是可以接受。
控件和变量天然绑定,我看了代码有些是,有些不是,譬如raido,progress,哪些应该绑定哪些不用绑定以后要好好设计。

我的第二个问题并不是通过描述文件生成ui,而是wpf中的mvvm,数据驱动ui。既然xui有数据绑定功能,那应该可以做到。
通过描述文件生成ui 看似解耦了ui和代码,其实在现实中ui和代码绝对分开的例子比例并不大,最后还是会增加ui设计者和代码开发者的沟通成本,如果都由一个人来做的话又要在ui语言和代码语言之间切换,这又增加了脑力成本,现在大家都准备走flutter和jetpack compose路线,也是吸取了多年经验教训后的结果啊。

离线

#44 2021-04-27 17:11:05

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

不知道xui怎么解决多余重绘问题的,譬如某个控件的状态变化了,整个画面需要重画。在保留模式下因为修改控件的状态必须调用控件接口,所以控件的状态都由自己记录,控件可以知道自己状态有没有改变,没有就不需要重画。
某个控件状态改变导致整个画面重绘的问题很耗cpu,在嵌入式里面恐怕难以接受。
可以学学react的做法,控件函数里面只记录状态,控件api调用完成时(譬如xui_end_window()或xui_end()时)把整个ui树的状态发送到另一个线程做界面绘制。因为绘制线程拿到整个ui树各个控件的状态,这还可以在绘制前做优化。也可以在性能不足的时候把某些帧跳过,只需要忽略掉某次主线程发过来的状态。

离线

#45 2021-04-27 18:58:45

达克罗德
会员
注册时间: 2018-04-10
已发帖子: 1,037
积分: 1004.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

jlau 说:

不知道xui怎么解决多余重绘问题的,譬如某个控件的状态变化了,整个画面需要重画。在保留模式下因为修改控件的状态必须调用控件接口,所以控件的状态都由自己记录,控件可以知道自己状态有没有改变,没有就不需要重画。
某个控件状态改变导致整个画面重绘的问题很耗cpu,在嵌入式里面恐怕难以接受。
可以学学react的做法,控件函数里面只记录状态,控件api调用完成时(譬如xui_end_window()或xui_end()时)把整个ui树的状态发送到另一个线程做界面绘制。因为绘制线程拿到整个ui树各个控件的状态,这还可以在绘制前做优化。也可以在性能不足的时候把某些帧跳过,只需要忽略掉某次主线程发过来的状态。

XUI是绘图命令级别的脏矩形刷新,不是控件级别的局部刷新

离线

#46 2021-04-27 21:25:11

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

达克罗德 说:
jlau 说:

不知道xui怎么解决多余重绘问题的,譬如某个控件的状态变化了,整个画面需要重画。在保留模式下因为修改控件的状态必须调用控件接口,所以控件的状态都由自己记录,控件可以知道自己状态有没有改变,没有就不需要重画。
某个控件状态改变导致整个画面重绘的问题很耗cpu,在嵌入式里面恐怕难以接受。
可以学学react的做法,控件函数里面只记录状态,控件api调用完成时(譬如xui_end_window()或xui_end()时)把整个ui树的状态发送到另一个线程做界面绘制。因为绘制线程拿到整个ui树各个控件的状态,这还可以在绘制前做优化。也可以在性能不足的时候把某些帧跳过,只需要忽略掉某次主线程发过来的状态。

XUI是绘图命令级别的脏矩形刷新,不是控件级别的局部刷新

好像是,看了代码xui_draw_xxx()都是把绘图命令放入队列,在xui_end()做优化后绘图

离线

楼主 #47 2021-04-27 22:19:22

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

XUI记录的是绘图指令,每条指令都有影响的空间区域且记录在指令里,将所有指令重排,计算出影响了到了哪些区域再做脏矩形优化。一个控件由多条绘制指令组合而成,其实所谓的控件仅仅是一个函数,并没有特别的,复合控件,就是多调用了很多其他函数而已。控件的概念本身是弱化了,只不过方便人使用而抽象出来的。从这一点上看,任何奇形怪状的控件都是可以做出来的,不一定是矩形区域,只要能画得出来的都可以。立即UI特别灵活,少量的代码就可以作出复杂的界面,在嵌入式领域还是有优势的,谁都讨厌动不动就上万行的代码。现在xui,23个控件总共才3000多行,其中框架就占了近2000行,也就说说一个控件才需100行代码,我想这是立即UI最大的优势吧。当然耦合性强,这也是他的缺点。

声明式UI肯定是未来的趋势,但这个需要强大的脚本语言配合,纯编译型语言是不可能实现声明式UI的。Jetpack Compose理念最大的变化就是将原来的继承关系变成了顶级函数间的组合关系,摒弃类,而拥抱函数。

再补充一句,声明式UI可以说是进化版的立即UI,就是不用用户维护变量版本的立即UI。为何能做到不要用户维护,那是因为引入了脚本语言,可以动态记录各种状态。

离线

#48 2021-04-28 14:27:47

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

确实,立即模式GUI实现容易,使用方便,显示速度快,而且更像是业务代码的一个呈现层,并不是框架,这些优势确实很契合嵌入式系统。我想一个比较大的问题会是扩展性比较差,应用的功能一多,代码的规模和逻辑就有点难以控制。我想也是它的应用面不广的一个主要原因吧。保留模式GUI在应用设计时就要有分层思维,也容易模块化,更适合功能多规模大的应用。

声明式GUI说是兼有了立即模式GUI和保留模式GUI的优势,算是未来的趋势了。它们并没有使用脚本语言,swift、kotlin、dart都是编译型语言,只是它们的语法和编译器对声明式GUI做了些适配。脚本语言代码一多维护成本就很高,对app开发并不是好的选择。我记得qt在qt6也要把qml做成编译型的静态语言了。xboot支持lua,或许可以用lua做个声明式GUI。

离线

楼主 #49 2021-04-28 15:26:57

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

是的,lua理论上是可以实现声明式GUI的,但现在还没见到相关工程,有lua版的react移植,但react仅仅是框架,排版,渲染,等都是自己实现,工作量还是很大的,这个领域我会一直关注,如果思路成熟了,真可能会去实现个lua版的声明式gui,现在xboot里,支持各种c版app,lua版app,可同时运行,不管选用哪种gui框架,都不冲突。之所以开发个c版本的gui,就是考虑到嵌入式领域,某些简单的案子,完全用c就可以胜任了,没必要上那么高阶的技能,况且lua也不是每个人都懂,多少是有点学习成本的。

编译型语言支持声明式ui,这一点我现在还没想明白,如果要让c支持声明式ui,理论上也有可能吗?第一感觉是不能。

离线

#50 2021-04-29 14:45:28

jlau
会员
注册时间: 2018-06-11
已发帖子: 151
积分: 139.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

如果c语言支持命名参数和匿名函数,那可以写成flutter那样:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(child: Text('$val'))),
            ElevatedButton(
              child: Text('Add'),
              onPressed: () => change(),
            ),
          ],
        ),
      ),
    );
  }

如果c语言进取一点,有更多的语法糖(https://developer.android.google.cn/jetpack/compose/kotlin),可以写成jetpack compose那样:

@Composable
fun NewsStory() {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Image(
            painter = painterResource(R.drawable.header),
            contentDescription = null
        )

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

我了解了c语言的标准,即使是下一代标准c2x,仍然不支持这些语法,所以用c语言做声明式GUI还是不成。
有另一个法子,可以自己定义一套DSL,用编译器把DSL转换成c,然后统一通过gcc编译。作为参考,nim,vlang这些语言都可以直接编译成c,而且还是全功能语言不是DSL,DSL应该更简单。另外,vlang也有自己的声明式GUI。

不用神话声明式GUI,概略的看它跟立即式GUI很像,flutter的runApp()就是xui_loop(),它内部也是不断调用build()函数,build()函数不断调用里面的widget生成函数去实例化widget,就跟xui的应用不断调用xui_begin_xxx()一样。只不过由于flutter和jetpack compose的语言有一些便利的语法,写出来的代码看上去像声明一个个widget而不是创建一个个widget,其实内在是创建一个个widget。

如果是实现立即式GUI,用过程式编程语言就可以了;如果是实现保留式GUI,面向对象语言更合适;而要实现声明式GUI,更现代的语言才行。声明式GUI的流行可能是前端开发人员在不断采用现代化的语言的过程中受了立即式GUI的启发慢慢发展和流行出来的吧。

离线

楼主 #51 2021-04-29 14:46:27

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


新版本,支持wifi,485更新界面信息

离线

#52 2021-04-29 15:53:32

642242855
会员
注册时间: 2019-10-31
已发帖子: 157
积分: 99

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

这个屏和我买的一毛一样,是不是中显的 big_smile

离线

#53 2021-04-29 16:24:41

达克罗德
会员
注册时间: 2018-04-10
已发帖子: 1,037
积分: 1004.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

jlau 说:

不用神话声明式GUI,概略的看它跟立即式GUI很像,flutter的runApp()就是xui_loop(),它内部也是不断调用build()函数,build()函数不断调用里面的widget生成函数去实例化widget,就跟xui的应用不断调用xui_begin_xxx()一样。只不过由于flutter和jetpack compose的语言有一些便利的语法,写出来的代码看上去像声明一个个widget而不是创建一个个widget,其实内在是创建一个个widget。

如果是实现立即式GUI,用过程式编程语言就可以了;如果是实现保留式GUI,面向对象语言更合适;而要实现声明式GUI,更现代的语言才行。声明式GUI的流行可能是前端开发人员在不断采用现代化的语言的过程中受了立即式GUI的启发慢慢发展和流行出来的吧。

你对声明式UI理解有误,你说的是声明式创建控件,但是其实声明式UI直接创建的不是控件而是一个类似json结构的VDOM。然后才根据VDOM去创建或者更新真正的DOM控件。否则光有声明式创建,无法实现变量绑定和按需更新
我也是自己做了个React的Python版才真正理解了这点

离线

楼主 #54 2021-04-29 17:47:16

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

从另外一个角度看,虚拟dom是否可以看成绘制命令呢,diff算法,就相当于比较两帧之间的绘制命令差异。可能一个是宏观的,一个是微观的吧

离线

#55 2021-04-29 18:54:17

达克罗德
会员
注册时间: 2018-04-10
已发帖子: 1,037
积分: 1004.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

从另外一个角度看,虚拟dom是否可以看成绘制命令呢,diff算法,就相当于比较两帧之间的绘制命令差异。可能一个是宏观的,一个是微观的吧

是的,react它是控件级别的diff,算是宏观diff吧,backend其实是保留模式的控件。
你的UI是立即UI,有diff绘图了,感觉可以省掉vdom以及diff,直接声明式描述UI就可以了,就是状态不是很好封装

离线

楼主 #56 2021-04-29 19:44:24

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

是的,就是状态不好封装,还有具体的事件响应没办法描述,语言能力在声明式UI显得很关键,基本有什么样语言就有什么样的表达,还是看语言的表达能力。

离线

楼主 #57 2021-05-05 23:39:04

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


给xui添加滑动支持,采用阻尼系统模型

离线

楼主 #58 2021-05-06 09:29:20

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


中文界面启动速度优化,其中logo显示后会等待1秒,再执行APP

离线

#59 2021-05-06 11:39:50

阿黄
会员
注册时间: 2018-10-03
已发帖子: 265
积分: 195

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

强烈需要键盘..

离线

楼主 #60 2021-05-06 12:14:55

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

软键盘,输入法?

离线

#61 2021-05-06 13:21:23

阿黄
会员
注册时间: 2018-10-03
已发帖子: 265
积分: 195

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

软键盘,输入法?

不需要输入法,只需要键盘能输入符号、英文字母、数字就行。 一般不需要打单词和汉字。当然有汉字更好

离线

楼主 #62 2021-05-06 15:45:34

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

写个键盘控件没多少行代码,关键要好看的话,这个得找到漂亮的皮,才行

离线

楼主 #63 2021-05-06 19:02:28

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


启动速度及通信测试,持续通信45分钟,没有发现异常。

离线

楼主 #64 2021-05-07 08:52:23

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


区分拖动与滑动事件,滑动时可以急停,提升用户体验

离线

楼主 #65 2021-05-08 18:19:16

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


支持通过网络和485传输图片,因为传输协议层中间是通用的json数据,所以图片都是经过base64编码后,json格式打包传送到板子上,板子收到完整帧后,先base64解码,然后再jpg或png格式解码,解码后的内容直接生成surface_t对象,可通过xui_image 控件显示对象。

离线

#66 2021-05-08 20:32:10

dragoniye
会员
注册时间: 2019-02-07
已发帖子: 35
积分: 33.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

该评论内容与本帖子无关,鼓励各位坑友积极发言讨论与帖子有关的内容!

离线

  • 不通过:与技术无关

#67 2021-05-08 21:09:42

kekemuyu
会员
注册时间: 2018-12-13
已发帖子: 734
积分: 680

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

声明式ui,还是流行的web前端比较合适(html,css,js三剑客)。sciter就是基于这种技术实现,体积也比较小,不过需要linux(gtk)。
Screenshot211109.png

最近编辑记录 kekemuyu (2021-05-08 21:13:08)

离线

#68 2021-05-08 22:40:51

kekemuyu
会员
注册时间: 2018-12-13
已发帖子: 734
积分: 680

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

在树莓派运行的demo,可以看到依赖的东西很少,只有一个scapp文件,其他都是前端的东西
Screenshot223846.png

离线

楼主 #69 2021-05-09 11:30:41

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

基于前端技术的本地APP开发

离线

#70 2021-05-09 12:49:48

kekemuyu
会员
注册时间: 2018-12-13
已发帖子: 734
积分: 680

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

很多桌面软件都已经开始用前端技术来开发了,常用的网易云音乐pc端,vscode,微信小程序开发工具等。

离线

#71 2021-05-09 17:38:51

hpxzw520
会员
注册时间: 2020-11-18
已发帖子: 6
积分: 4

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

大佬,
stm32f4这样的芯片能跑吗??
不知道能否替代emwin

离线

楼主 #72 2021-05-09 19:11:18

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

看你内存多大了,靠内部K级的SRAM肯定是不可以的

离线

#73 2021-05-10 15:54:13

达克罗德
会员
注册时间: 2018-04-10
已发帖子: 1,037
积分: 1004.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

kekemuyu 说:

声明式ui,还是流行的web前端比较合适(html,css,js三剑客)。sciter就是基于这种技术实现,体积也比较小,不过需要linux(gtk)。
https://whycan.com/files/members/1315/Screenshot211109.png

sciter不是完整实现,React和VUE都跑不起来的。
不过作为一个HTML引擎,sciter确实很小巧才几个MB。我也关注很久了,学生时代就关注过,那时候它还很简陋,现在强大多了

离线

#74 2021-05-10 19:48:02

kekemuyu
会员
注册时间: 2018-12-13
已发帖子: 734
积分: 680

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

达克罗德 说:
kekemuyu 说:

声明式ui,还是流行的web前端比较合适(html,css,js三剑客)。sciter就是基于这种技术实现,体积也比较小,不过需要linux(gtk)。
https://whycan.com/files/members/1315/Screenshot211109.png

sciter不是完整实现,React和VUE都跑不起来的。
不过作为一个HTML引擎,sciter确实很小巧才几个MB。我也关注很久了,学生时代就关注过,那时候它还很简陋,现在强大多了

前端web不用框架开发桌面级程序也是很简单的.

离线

楼主 #75 2021-05-11 11:26:08

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架


给屏幕打上水印,任何界面都会有,有人能猜到究竟是想干啥吗?

离线

#76 2021-05-11 12:43:02

qaz78666666
会员
注册时间: 2021-05-11
已发帖子: 1
积分: 0.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

xboot 说:

XUI是xboot内置的立即模式GUI框架,代码量很低,但功能绝对强大,所想即所得,无需各种设计器辅助,随心所欲敲你的代码,就行了,当你敲完了,UI开发工作就结束了。
https://whycan.com/files/members/2137/1_20210423-1639.jpg

您这个开发是在Windows下开发的,Linux系统不会用,想进行裸机开发

离线

楼主 #77 2021-05-11 15:02:34

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

windows可以开发的,不过,体验差很多,开发效率也低很多。

离线

#78 2021-05-11 17:59:37

loveme758
会员
注册时间: 2021-01-25
已发帖子: 14
积分: 7.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

纯代码编写GUI,控件位置什么的,需要自己先计算好坐标值吗?

离线

楼主 #79 2021-05-12 09:26:17

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

不需要,有自动布局系统,布局相关函数的调用一下,就可以按你心里所想得布局规则,布局了。

离线

楼主 #80 2021-05-12 09:29:52

xboot
会员
注册时间: 2019-10-15
已发帖子: 403
积分: 277

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

要是还要自己去算坐标,不是累死个人,而且,定死坐标的那种,怎么可能做到自适应,且矢量化的UI系统。任意缩放,靠指定坐标来实现,是不敢想象的。XUI里面任何一个控件都无需传递任何坐标参数信息,也不会存储各种坐标,全靠自动布局系统来管理布局。

离线

#81 2021-08-12 09:08:25

642242855
会员
注册时间: 2019-10-31
已发帖子: 157
积分: 99

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

有没有移植教程,想搞到STM32F4平台上,内存8M,不知道够用了没

离线

#82 2021-08-24 21:21:40

kanemsn
会员
注册时间: 2021-08-23
已发帖子: 16
积分: 3

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

楼主的界面是用在医疗系统上的吗?

离线

#83 2021-08-24 21:26:42

kanemsn
会员
注册时间: 2021-08-23
已发帖子: 16
积分: 3

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

感谢楼主分享,的确是一个不错的ui框架

离线

#84 2021-08-25 23:52:22

轩辕剑
会员
注册时间: 2019-12-30
已发帖子: 22
积分: 20

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

感谢楼主分享,的确是一个不错的ui框架

离线

#85 2021-09-20 00:43:50

lg676041036
会员
注册时间: 2021-07-09
已发帖子: 18
积分: 42

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

该评论内容与本帖子无关,鼓励各位坑友积极发言讨论与帖子有关的内容!

离线

  • 不通过:其他

#86 2021-10-02 12:19:50

banzhangzzw
会员
注册时间: 2020-12-17
已发帖子: 3
积分: 2.5

Re: 用F1C100S开发了一个项目,原始技术实现,裸奔XUI GUI框架

看上去确实不错,xui跟微软的guix比怎么样?

离线

页脚

工信部备案:粤ICP备20025096号 Powered by FluxBB

感谢为中文互联网持续输出优质内容的各位老铁们。 QQ: 516333132, 微信(wechat): whycan_cn (哇酷网/挖坑网/填坑网) service@whycan.cn