CN116048532B - 基于web的嵌入式UI效果模拟预览方法、装置及系统 - Google Patents

Abstract

本发明涉及计算机技术领域，特别是涉及基于web的嵌入式UI效果模拟预览方法、装置及系统，所述方法包括：获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；将多个开发终端的交互定义文件进行整合；调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；根据所述asm.js文件编译生成WASM固件并推送给资源服务器；资源服务器接收到数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；资源服务器通过浏览器接收到画面调整指令，向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。本发明实现了多个开发终端的数据的整合，可以实现在线的反馈与调整，提高了开发效率。

Description

基于web的嵌入式UI效果模拟预览方法、装置及系统

技术领域

本发明涉及计算机技术领域，特别是涉及基于web的嵌入式UI效果模拟预览方法、装置及系统。

背景技术

在嵌入式软件开发中，经常需要跨平台进行开发，其中，利用资源服务器对硬件进行开发是一种高效便捷的开发方式。

开发者完成阶段性开发后，将固件资源推送到资源服务器，借助浏览器可以对界面设计的效果进行模拟显示，同时还可以在浏览器上对显示结果进行修改，修改的内容可以反馈到开发端。这种方式借助于浏览器，可以实现远距离、跨硬件的开发合作。

然而，现有基于web（网页）的嵌入式UI（User Interface，用户界面）效果模拟均是单输入单输出的模式，当多人进行协作开发时，需要预先设定每个协作者的开发内容，最后将多部分内容进行拼合，最终呈现出预设的固定组合方式，难以实现模拟效果的及时调整，开发效率低。

发明内容

基于此，有必要针对上述的问题，提供一种基于web的嵌入式UI效果模拟预览方法、装置及系统。

本发明实施例是这样实现的，一种基于web的嵌入式UI效果模拟预览方法，所述基于web的嵌入式UI效果模拟预览方法包括：

获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

将多个开发终端的交互定义文件进行整合；

调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

资源服务器通过浏览器接收到画面调整指令，资源服务器向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

在其中一个实施例中，本发明提供了一种基于web的嵌入式UI效果模拟预览装置，所述基于web的嵌入式UI效果模拟预览装置包括：

获取模块，用于获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

整合模块，用于将多个开发终端的交互定义文件进行整合；

转换模块，用于调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

编译模块，用于根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器，用于接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

调整模块，位于资源服务器上，用于通过浏览器接收到画面调整指令，向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

在其中一个实施例中，本发明提供了一种基于web的嵌入式UI效果模拟预览系统，所述基于web的嵌入式UI效果模拟预览系统包括：

若干个开发终端，用于为开发人员提供开发环境；

整合终端，与各个开发终端通信，用于执行如本发明所述的基于web的嵌入式UI效果模拟预览方法；

资源服务器，与整合终端通信，用于提供浏览页面；以及

显示终端，所述显示终端与所述资源服务器通信，用于通过浏览器浏览UI效果模拟画面。

本发明实现了多个开发终端的数据的整合，可以实现在线的反馈与调整，提高了开发效率；同时，利用SDL库以及Emscripten编译器，实现了跨平台移植，无需烧录测试；在开发端以及显示终端，由相同代码执行得到同样的显示效果，模拟结果与实机无差异；本发明提供的方法可以直接使用浏览器访问，方便效果展示与成果分享。并且，还可以针对不同的显示终端接收不同的调整指令，从而得到多个不同的调整结果，实现了多输入（数据来自多个开发终端）多输出（在不同的显示终端可以进行不同的调整）。

附图说明

图1为一个实施例提供的基于web的嵌入式UI效果模拟预览方法的流程图；

图2为一个实施例提供的基于web的嵌入式UI效果模拟预览装置的结构框图；

图3为一个实施例提供的基于web的嵌入式UI效果模拟预览系统的结构框图；

图4为一个实施例中计算机设备的内部结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

可以理解，本发明所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但除非特别说明，这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本发明的范围的情况下，可以将第一xx脚本称为第二xx脚本，且类似地，可将第二xx脚本称为第一xx脚本。

如图1所示，在一个实施例中，提出了基于web的嵌入式UI效果模拟预览方法，具体可以包括以下步骤：

步骤S100，获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

步骤S200，将多个开发终端的交互定义文件进行整合；

步骤S300，调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

步骤S400，根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

步骤S500，资源服务器接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

步骤S600，资源服务器通过浏览器接收到画面调整指令，资源服务器向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

在本实施例中，交互定义文件调用SDL库编写，定义了页面的各种输入输出以及页面组件的属性，包括页面组件的数量、大小、形状、属性（是否可以触发、输入或者输出）等。SDL（Simple DirectMedia Layer）是一套开放源代码的跨平台多媒体开发库，使用C语言写成。SDL提供了数种控制图像、声音输出输入的函数，开发者用相同或是相似的代码可以开发跨平台（Linux、Windows、Mac OS X等）的应用软件。

在本实施例中，通过将多个开发终端的交互定义文件进行整合，可以将多个开发终端的设计整合为一个整体，整合后得到的整体不是一个单一的UI设计，而是多个UI设计的集合，最终呈现的是集合中的一个UI设计。

在本实施例中，Emscripten 是一种基于LLVM的编译器，理论上能够将任何能够生成LLVM位码的代码编译成javascript的严格子集asm.js，实际上主要用于将C/C++代码编译成asm.js。

在本实施例中，SDL采用的是C语言，整合得到的文件也是C语言的形式，需要转换编译成WASM，WASM（即WebAssembly）是一种新的编码格式并且可以在浏览器中运行，WASM可以与JavaScript并存，WASM类似一种低级的汇编语言。本发明利用WASM与JavaScript的共存性，可以减少跨平台开发难度。WASM固件是采用WASM编写的嵌入式程序。

在本实施例中，资源服务器通过浏览器为显示终端提供画面显示的数据，显示终端可以操作以输入画面调整指令，这里的操作包括但不限于鼠标输入、键盘输入、语音输入、触控输入等，具体的可以采用的输入方式通过SDL库定义。资源服务器反馈画面调整指令，整合终端根据获取的画面调整指令对交互定义文件进行重新整合并输入，从而实现UI设计的在线显示以及调整。

本发明实现了多个开发终端的数据的整合，可以实现在线的反馈与调整，提高了开发效率；同时，利用SDL库以及Emscripten编译器，实现了跨平台移植，无需烧录测试；在开发端以及显示终端，由相同代码执行得到同样的显示效果，模拟结果与实机无差异；本发明提供的方法可以直接使用浏览器访问，方便效果展示与成果分享。并且，还可以针对不同的显示终端接收不同的调整指令，从而得到多个不同的调整结果，实现了多输入（数据来自多个开发终端）多输出（在不同的显示终端可以进行不同的调整）。

作为本发明的一个优选实施例，所述将多个开发终端的交互定义文件进行整合，包括：

由各个开发终端的交互定义文件确定包含的控件，获取各控件的属性；

新建一个显示区，根据各控件的属性在所述显示区中生成各控件；

确定主控件以及次控件；

根据主控件以及次控件各自的数量在所述显示区中排布各控件；

由排布后的控件得到整合后交互定义文件。

在本实施例中，这里的控件包括但不限于输入输出控件、指示控件等，这些控件在画面显示中呈现出可变状态或者可以点击跳转等，属于UI设计中的主要元素。

在本实施例中，优选地，新建的显示区与浏览器呈现的画面具有相同的长宽比，在这个显示区内排布各个控件，可以有效防止最终显示得到的画面发生变形。

在本实施例中，除了主控件与次控件外还有其余控件，主控件与次控件主要按控件的大小进行划分。由排布后的控件得到整合后的交互定义文件，由于交互定义文件本身就是描述页面控件布置的文件（例如控件的数量、位置、大小等），由整合后的页面可以反向提取得到交互定义文件。

作为本发明的一个优选实施例，所述确定主控件以及次控件，包括：

计算各控件的面积与显示区的面积之比；

选出面积之比大于第一设定阈值的控件得到主控件、选出面积之比小于第二设定阈值的控件得到次控件；

其中，第一设定阈值大于第二设定阈值。

在本实施例中，各控件基本采用常规的基本几何形状，如矩形、圆形、三角形等，故各个控件的面积可以简单计算得到（各控件通过角点的坐标定义，故由角点坐标可以计算面积，具体计算方法视不同控件的形状而定）。

在本实施例中，第一设定阈值不小于0.1，通常取0.1-0.25之间；第二设定阈值通常取0.01-0.08之间，通常取0.05左右。

作为本发明的一个优选实施例，所述根据主控件以及次控件各自的数量在所述显示区中排布各控件，包括：

确定主控件的所有组合；

筛选出各主控件的面积与显示区的面积之比的和小于0.5的组合；

在筛选出的组合中任意选定一个主控件组合，根据选定的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列；

按设定的优先位置，将全部次控件显示于主控件的上下侧或者左右侧；

选择性地排布主控件以及次控件以外的余下控件。

在本实施例中，可以给主控件编号，每个组合具有不同的控件（数量不同或者数量相同但控件不同）。

在本实施例中，优先位置可以是主控件的上下侧之一或者左右侧之一，当主控件横向排列时，优先位置可以设定为上侧或者下侧，其中下侧较上侧优先；当主控件纵向排列时，优先位置可以设定为左侧或者右侧，其中左侧较右侧优先。进一步地，次控件的排列方式可以与主控件相同，即同样采取并排的方式（横向或者纵向，与主控件相同）。

作为本发明的一个优选实施例，所述根据选定的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列，包括：

计算选定的主控件组合内各主控件的横向尺寸之和，计算所得横向尺寸之和与显示区横向尺寸的比值记作第一比值；

计算选定的主控件组合内各主控件的纵向尺寸之和，计算所得纵向尺寸之和与显示区纵向尺寸的比值记作第二比值；

比较第一比值与第二比值的大小；

若第一比值大于第二比值，则将组内的若干个主控件在显示区纵向居中排列；

若第二比值大于第一比值，则将组内的若干个主控件在显示区横向居中排列。

在本实施例中，上述给出了判断主控件为横向排布或者纵向排布的具体方法，通过这种方法，可以使排布后的主控件分布更为合理，防止主控件过于拥挤。

作为本发明的一个优选实施例，所述选择性地排布主控件以及次控件以外的余下控件，包括：

完成主控件与次控件的排布后，在所述显示区中确定可放置区；

按余下控件的预设的优先级对余下控件进行排序；

根据排序的先后将余下控件放置于可放置区且使任意两个控件不相接触。

在本实施例中，可放置区为显示区域与主控件所在区域相减得到；余下控件每个控件都定义了优先级，具有相同优先级的控件按控件的面积由大小到选择，优先排布面积较大的控件。

作为本发明的一个优选实施例，所述整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器，其中，重新整合包括替换主控件、调整次控件的位置、更换或者调整余下控件中的一种或者多种。

在本实施例中，显示终端通过浏览器可以对呈现出的界面进行调整，从而实现在线的UI设计调整。

作为本发明的一个优选实施例，所述替换主控件，具体包括：

更换主控件的组合，根据更换后的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列；

按设定的优先位置，将全部次控件显示于主控件的上下侧或者左右侧；

选择性地排布主控件以及次控件以外的余下控件。

在本实施例中，上述以主控件替换为例说明了主控件调整的一种具体方式。至于调整次控件的位置、更换或者调整余下控件等可以参考此过程，本发明实施例对此不再赘述。

如图2所示，本发明实施例还提供了一种基于web的嵌入式UI效果模拟预览装置，所述基于web的嵌入式UI效果模拟预览装置包括：

获取模块，用于获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

整合模块，用于将多个开发终端的交互定义文件进行整合；

转换模块，用于调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

编译模块，用于根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器，用于接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

调整模块，位于资源服务器上，用于通过浏览器接收到画面调整指令，向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

在本实施例中，上述基于web的嵌入式UI效果模拟预览装置各个模块是本发明提供的方法部分的模块化，对于各个模块的具体解释说明，请参考本发明方法部分的内容，本实施例对此不再赘述。

如图3所示，本发明实施例还提供了一种基于web的嵌入式UI效果模拟预览系统，所述基于web的嵌入式UI效果模拟预览系统包括：

若干个开发终端，用于为开发人员提供开发环境；

整合终端，与各个开发终端通信，用于执行如本发明实施例任意一项或者多项所述的基于web的嵌入式UI效果模拟预览方法；

资源服务器，与整合终端通信，用于提供浏览页面；以及

显示终端，所述显示终端与所述资源服务器通信，用于通过浏览器浏览UI效果模拟画面。

在本实施例中，显示终端同样具有若干个，每个显示终端可以分别对UI效果模拟画面进行独立的调整，从而得到多个调整结果，当然，也可以由整合终端将多个显示终端调整后的结果进行合并。

本发明实施例提供的基于web的嵌入式UI效果模拟预览系统实现了多个开发终端的数据的整合，可以实现在线的反馈与调整，提高了开发效率；同时，利用SDL库以及Emscripten编译器，实现了跨平台移植，无需烧录测试；在开发端以及显示终端，由相同代码执行得到同样的显示效果，模拟结果与实机无差异；本发明提供的方法可以直接使用浏览器访问，方便效果展示与成果分享。并且，还可以针对不同的显示终端接收不同的调整指令，从而得到多个不同的调整结果，实现了多输入（数据来自多个开发终端）多输出（在不同的显示终端可以进行不同的调整）。

图4示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图3中的整合终端。如图4所示，该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现本发明实施例提供的基于web的嵌入式UI效果模拟预览方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行本发明实施例提供的基于web的嵌入式UI效果模拟预览方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图4中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，本发明实施例提供的基于web的嵌入式UI效果模拟预览装置可以实现为一种计算机程序的形式，计算机程序可在如图4所示的计算机设备上运行。计算机设备的存储器中可存储组成该基于web的嵌入式UI效果模拟预览装置的各个程序模块，比如，图2所示的获取模块、整合模块、转换模块、编译模块、资源服务器和调整模块。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本发明各个实施例的基于web的嵌入式UI效果模拟预览方法中的步骤。

例如，图4所示的计算机设备可以通过如图2所示的基于web的嵌入式UI效果模拟预览装置中的获取模块执行步骤S100；计算机设备可通过整合模块执行步骤S200；计算机设备可通过转换模块执行步骤S300；计算机设备可通过编译模块执行步骤S400；计算机设备可通过资源服务器执行步骤S500；计算机设备可通过调整模块执行步骤S600。

在一个实施例中，提出了一种计算机设备，所述计算机设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

将多个开发终端的交互定义文件进行整合；

调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

资源服务器通过浏览器接收到画面调整指令，资源服务器向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

在一个实施例中，提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时，使得处理器执行以下步骤：

获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

将多个开发终端的交互定义文件进行整合；

调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

资源服务器通过浏览器接收到画面调整指令，资源服务器向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器。

应该理解的是，虽然本发明各实施例的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，各实施例中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (8)

1.基于web的嵌入式UI效果模拟预览方法，其特征在于，所述基于web的嵌入式UI效果模拟预览方法包括：

获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

将多个开发终端的交互定义文件进行整合；

调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

资源服务器通过浏览器接收到画面调整指令，资源服务器向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器；

所述将多个开发终端的交互定义文件进行整合，包括：

由各个开发终端的交互定义文件确定包含的控件，获取各控件的属性；

新建一个显示区，根据各控件的属性在所述显示区中生成各控件；

确定主控件以及次控件；

根据主控件以及次控件各自的数量在所述显示区中排布各控件；

由排布后的控件得到整合后交互定义文件；

所述根据主控件以及次控件各自的数量在所述显示区中排布各控件，包括：

确定主控件的所有组合；

筛选出各主控件的面积与显示区的面积之比的和小于0.5的组合；

在筛选出的组合中任意选定一个主控件组合，根据选定的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列；

按设定的优先位置，将全部次控件显示于主控件的上下侧或者左右侧；

选择性地排布主控件以及次控件以外的余下控件。

2.根据权利要求1所述的基于web的嵌入式UI效果模拟预览方法，其特征在于，所述确定主控件以及次控件，包括：

计算各控件的面积与显示区的面积之比；

选出面积之比大于第一设定阈值的控件得到主控件、选出面积之比小于第二设定阈值的控件得到次控件；

其中，第一设定阈值大于第二设定阈值。

3.根据权利要求1所述的基于web的嵌入式UI效果模拟预览方法，其特征在于，所述根据选定的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列，包括：

计算选定的主控件组合内各主控件的横向尺寸之和，计算所得横向尺寸之和与显示区横向尺寸的比值记作第一比值；

计算选定的主控件组合内各主控件的纵向尺寸之和，计算所得纵向尺寸之和与显示区纵向尺寸的比值记作第二比值；

比较第一比值与第二比值的大小；

若第一比值大于第二比值，则将组内的若干个主控件在显示区纵向居中排列；

若第二比值大于第一比值，则将组内的若干个主控件在显示区横向居中排列。

4.根据权利要求1所述的基于web的嵌入式UI效果模拟预览方法，其特征在于，所述选择性地排布主控件以及次控件以外的余下控件，包括：

完成主控件与次控件的排布后，在所述显示区中确定可放置区；

按余下控件的预设的优先级对余下控件进行排序；

根据排序的先后将余下控件放置于可放置区且使任意两个控件不相接触。

5.根据权利要求1所述的基于web的嵌入式UI效果模拟预览方法，其特征在于，所述整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器，其中，重新整合包括替换主控件、调整次控件的位置、更换或者调整余下控件中的一种或者多种。

6.根据权利要求5所述的基于web的嵌入式UI效果模拟预览方法，其特征在于，所述替换主控件，具体包括：

更换主控件的组合，根据更换后的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列。

7.基于web的嵌入式UI效果模拟预览装置，其特征在于，所述基于web的嵌入式UI效果模拟预览装置包括：

获取模块，用于获取多个开发终端的交互定义文件，所述交互定义文件调用SDL库编写；

整合模块，用于将多个开发终端的交互定义文件进行整合；

转换模块，用于调用Emscripten编译器将嵌入式设备的C语言编码转化为asm.js文件；

编译模块，用于根据所述asm.js文件编译生成WASM固件并推送给资源服务器；

资源服务器，用于接收到来自浏览器的针对所述WASM固件的数据请求，解析WASM固件中的所需节点、提取应用层代码生成模拟画面并显示；

调整模块，位于资源服务器上，用于通过浏览器接收到画面调整指令，向整合终端请求数据更新，整合终端对多个开发终端的交互定义文件进行重新整合后更新到资源服务器；

所述将多个开发终端的交互定义文件进行整合，包括：

由各个开发终端的交互定义文件确定包含的控件，获取各控件的属性；

新建一个显示区，根据各控件的属性在所述显示区中生成各控件；

确定主控件以及次控件；

根据主控件以及次控件各自的数量在所述显示区中排布各控件；

由排布后的控件得到整合后交互定义文件；

所述根据主控件以及次控件各自的数量在所述显示区中排布各控件，包括：

确定主控件的所有组合；

筛选出各主控件的面积与显示区的面积之比的和小于0.5的组合；

在筛选出的组合中任意选定一个主控件组合，根据选定的主控件组合内主控件的尺寸将组内的若干个主控件在显示区横向或者纵向居中排列；

按设定的优先位置，将全部次控件显示于主控件的上下侧或者左右侧；

选择性地排布主控件以及次控件以外的余下控件。

8.基于web的嵌入式UI效果模拟预览系统，其特征在于，所述基于web的嵌入式UI效果模拟预览系统包括：

若干个开发终端，用于为开发人员提供开发环境；

整合终端，与各个开发终端通信，用于执行如权利要求1-6任意一项所述的基于web的嵌入式UI效果模拟预览方法；

资源服务器，与整合终端通信，用于提供浏览页面；以及

显示终端，所述显示终端与所述资源服务器通信，用于通过浏览器浏览UI效果模拟画面。

Images