哇酷®开发者社区(WhyCan® Forum)

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

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

前排听讲

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高，最后一个完全填充完剩余空间。

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

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

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

是的，乐鑫的wifi模块

大佬一出，必然精品

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

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

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

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

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

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

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

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

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

下面是一个简单的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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

强烈需要键盘..

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

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

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

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

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

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

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

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

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

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

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

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

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

请问一下楼主，这个图形库支持非触摸屏吗？比如支持手动改变焦点控件、手动改变焦点控件后，自动把焦点控件移到可显示的区域显示

现在的XUI比较依赖XBoot，是否能够剥离出来，作为一个单独的GUI框架呢

感谢楼主分享，第一次听说GUI实现的三种设计模式，我还在手算坐标。。。

最近编辑记录 oldgerman (2021-12-28 15:18:57)

@海石生风
XML打包成二进制格式，本质还是一个配置文件，那如何用xml或者二进制描述事件呢，以及在xml里如何动态修改控件状态或者外部变量呢，如果做不到这一点，就不能称之为声明式，如果仅仅是普通的xml描述界面，连响应式都算不上。

调用surface_alloc_from_xfs（）显示一张图片，然后在图片的某个地方显示一个可以变化的时间，这样可以做到吗

最近编辑记录 岁月快快快 (2022-01-24 16:38:53)

我是想在固定的坐标位置显示时间（或者贴上一张小尺寸的图片覆盖原来显示的图片的某一区域），不传入坐标值的话，布局函数怎么知道要显示在什么地方呢

最近编辑记录 岁月快快快 (2022-01-25 17:39:10)

@xboot，大佬，按照@linghaibin坛友这样写：

static void ShowPage(struct xui_context_t * ctx)
{
    struct xfs_context_t * ctx_xfs;
    struct surface_t * page;

    xui_begin(ctx);
    ctx_xfs = xfs_alloc("/private/framework", 0);
    if(ctx_xfs) {
        page = surface_alloc_from_xfs(ctx_xfs, "assets/images/06.png");
        if (page) {
            xui_image_ex(ctx, page, 0, XUI_IMAGE_CONTAIN);
            surface_free(page);
        }
        xfs_free(ctx_xfs);
    }
    xui_end(ctx);
}

图片没显示出来，显示成了这样:

按照开机logo这样写，是可以正常显示图片的：

static void ShowPage(const char * filename)
{
    struct device_t * pos, * n;
    struct xfs_context_t * ctx;
    struct surface_t * s, * page;
    struct framebuffer_t * fb;
    struct matrix_t m;

    ctx = xfs_alloc("/private/framework", 0);
    if(ctx)
    {
        page = surface_alloc_from_xfs(ctx, filename);
        if(page)
        {
            list_for_each_entry_safe(pos, n, &__device_head[DEVICE_TYPE_FRAMEBUFFER], head)
            {
                if((fb = (struct framebuffer_t *)(pos->priv)))
                {
                    s = framebuffer_create_surface(fb);
                    matrix_init_identity(&m);
                    surface_blit(s, NULL, &m, page, RENDER_TYPE_GOOD);
                    framebuffer_present_surface(fb, s, NULL);
                    framebuffer_destroy_surface(fb, s);
                }
            }
            surface_free(page);
        }
        xfs_free(ctx);
    }
}

第一种方式是我还少了什么步骤吗

最近编辑记录 岁月快快快 (2022-01-27 09:11:55)

@达克罗德
AWTK支持动态渲染控件

<label v-if="{value < 0}" />                       <!-- value 小于0 时渲染这个label控件 -->
<label v-elif="{value > 0 &amp;&amp; value < 2}"/> <!-- value 大于0且小于2时渲染这个label控件 -->
<label v-else=""/>                                 <!-- 其他情况则渲染这个label控件 -->

可以在UI描述文件内执行fscript脚本

<button text="Basic" on:click="open('basic')" />

    <text_selector name="month" options="1-12-%02d" selected_index="8" loop_options="true">
      <property name="on:value_changed">
        <![CDATA[
        a = get_days_of_month(widget_get('parent.year', 'value'), widget_get('parent.month', 'value'))
        widget_set('parent.day', 'options', iformat( '1-%d', a) + '%02d')      
        ]]>
      </property>
    </text_selector>

最近编辑记录 海石生风 (2022-08-14 09:34:57)

AWTK目前没有造QML这样的轮子而使用XML，使用起来确实不够简洁。但这跟高级语言没有关系，换一种像QML这样简洁些的描述语言即可；如果将UI描述写到程序逻辑里就有违描述语言设计的初衷了。

@达克罗德
问题是目前在嵌入式Linux这种基于framebuffer的平台上，只有AWTK是接近声明式UI的，那些高级货都是基于现有UI库或OpenGL的、或者所使用的语言不支持嵌入式，在嵌入式领域基本上用不了；更不用说裸机、RTOS平台的支持。

最近编辑记录 海石生风 (2022-08-18 13:10:22)

AWTK相对LVGL、emWin这些只能用API手写界面的UI库已经方便很多了。基于MVVM框架只需要写模型（C语言）跟视图（XML），开发效率已经很高了。关键是这个UI能通吃MCU、ARM9、A7、PC平台。

逻辑跟UI分开的其中一个好处是逻辑跟UI都可以用不同的东西实现：逻辑可以用不同的编程语言来写，像AWTK就支持C/C++、python、golang、javascript等；而UI描述语言也可以在后期另外造轮子来实现。这样就能支持多种平台、发展再灵活，像AWTK这样。
如果将UI描述写在逻辑里，基本就限死了编程语言。目前来说，要通吃各种平台的简单的方法是用C/C++作为编程语言。

最近编辑记录 海石生风 (2022-08-19 09:41:49)

WASM技术 + reactJS，应该算终极方案，嵌入式上实现一个wasm虚拟机，然后什么都可以搞定了

想请教下大神，xui_layout_begin_column 和 xui_begin_panel 这两个函数的区别是什么？哪些场景选择xui_layout_begin_column而不是xui_begin_panel？
谢谢！

大佬，这个启动速度快吗？需要几秒？

大佬，帧率能到多少呀？