一种软件图形界面的快速自动生成方法与装置制造方法及图纸

本发明专利技术公开了一种软件图形界面的快速自动生成方法，包括如下步骤：S100：接收用于生成图形界面的源图片；S200：通过机器视觉检测识别所述源图片中各类UI组件图形及文本信息；S300：完成所述UI组件的自动布局，并自动快速生成图形界面，同时生成界面的控制脚本代码并进行显示。本发明专利技术还公开了相应的装置。本发明专利技术的软件图形界面的快速自动生成方法，灵活采用画板上绘制草图、现场手绘草图输入以及外部图片导入等多种方式生成图形界面的源图片，有效解决了软件设计过程中UI设计与产品经理反复绘图、修改等效率低下，影响设计灵感及图形表达等难题，快速的将草图转化为实际可以运行的图形界面，缩短图形界面设计制作的流程，大大提高了图形界面输入工作效率。

A fast automatic generation method and device of software graphic interface

【技术实现步骤摘要】
一种软件图形界面的快速自动生成方法与装置
本专利技术属于工业控制
，更具体地，涉及一种软件图形界面的快速自动生成方法与装置。
技术介绍
随着计算机和网络的普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于软件功能上的“够用”，而是更加强调好用、易用，对软件的易用性和舒适性提出了更高的要求。因此不管是普通用户的个人软件，还是企业应用的大型软件，都不能仅仅靠丰富的功能立于不败之地。软件的非功能性要素也在逐渐影响其是否能被市场说认可。比如，人机交互界面就是一个非常重要的方面，受到了软件开发者和设计者的关注。目前绝大多数软件开发中，图形界面设计和开发工作一般需要产品经理、UI、前端、市场运营等各部门人员聚在一起沟通、讨论。从分析需求开始，产品经理绘出原型图，讨论修改完之后，UI绘制设计草图，开会修改；前端写好代码，检查沟通，到最后的确定方案，需要花费数天乃至数周才能完成。在软件开发前期，用户的界面需求很模糊，许多工作都需要这样反复讨论修改，流程复杂，花费的时间多，大大降低了工作效率。因此，专利技术设计一种图形界面快速制作生成的方法和相应装置，缩短图形界面原型设计制作周期，快速的建立图形界面原型，提供初始的系统图形界面，让用户能够对界面有清晰的认识和感知，快速的发现问题，解决问题，对于提高工作效率和降低企业生产成本具有十分重要的意义。中国专利文献CN102354285A公开了一种嵌入式图形界面快速开发装置及方法，包括组态式界面设计工具，用于设计和生成图形界面；下载配置工具，用于上传图形界面文件到可编程智能LCD；可编程智能LCD，用于接受图形界面文件，并解释和独立运行显示界面；主控制器，与可编程智能LCD连接，用于控制界面显示数据。该图形界面开发过程比较简单，能够满足开发人员直观、快速、灵活的实现人机图形界面。但这种图形界面快速开发装置及方法也存在一些不足，依然无法解决软件开发过程中图形快速生成的难题。(1)其采用的组态式界面设计工具获取图形界面，依然需要通过计算机软件实现对UI组件图形的设计和编辑，其图形的输入不便，难以适应UI设计工程师和产品经理的快速沟通已经UI组件的高效设计、修改等操作，软件设计的效率比较低；(2)其实现图形的生成方法，依托于上传图形界面文件到可编程智能LCD，并通过可编程智能LCD接受图形界面文件，解释和独立运行显示界面，本质上还是先需要UI设计工程师绘制好图形，再通过装置实现界面显示，没有从而根本上解决现有软件设计过程中UI组件设计、编辑修改繁琐，工作量大，效率低下的难题。
技术实现思路
针对现有技术的以上缺陷或改进需求，本专利技术提供一种软件图形界面的快速自动生成方法与装置，目的在于针对现有图形界面原型开发制作的周期时间长，工作量大和流程复杂的问题，提出一种软件图形界面的快速自动生成方法与相应装置，可以自动识别手绘界面草图的内容，在绘制草图的时候就可以识别出界面的UI组件和文本信息，通过草图完成过程中的新增、修改、删除等编辑操作，就可以实现对实际界面的相应编辑操作。草图完成后，对应的图形界面原型和脚本语言代码就自动生成，并且可以直观的显示图形界面实际运行的效果，有利于及时的对图形界面进行评估。为了实现上述目的，按照本专利技术的一个方面，提供一种软件图形界面的快速自动生成方法，包括如下步骤：S100：接收用于生成图形界面的源图片；S200：通过机器视觉检测识别所述源图片中各UI组件图形及文本信息；S300：完成所述UI组件的自动布局，并自动快速生成图形界面，同时生成界面的控制脚本代码；S400：运行生成可以操作的图形界面并进行显示。进一步地，所述步骤S100可采用多种方式生成图形界面的源图片，具体包括：S101：画板上绘制草图；或，S102：现场手绘草图输入；或，S103：外部图片导入。进一步地，所述步骤S101画板上绘制草图，用户可灵活选择草图界面上的文本信息和对应的UI组件，或者勾选需要的UI组件，或者对可编辑的UI组件进行适当的编辑修改，使其满足设计需求。进一步地，所述步骤S101画板上绘制草图，先进行保存，然后通过以太网向步骤S200传输。进一步地，所述步骤S102现场手绘草图输入，在草图绘制的过程中通过摄像机实时采集图像，并通过以太网实时向步骤S200传输图片。进一步地，所述S103外部图片导入，包括在图片上的编辑UI组件或点击UI组件的步骤。进一步地，所述步骤S200通过机器视觉检测模块识别图形中各类UI组件及文本信息，所述机器视觉检测具体包括如下步骤：S201：对输入图像中各UI组件的图形和文本信息的识别；S202：识别并记录图像中各组件的位置信息和轮廓信息；并，将所述各UI组件的图形、文本、位置及轮廓信息传输给步骤S300。进一步地，所述步骤S201及S202中各UI组件的信息识别包括如下步骤：S210：对图形输入的源图片进行特征识别；S211：对识别的特征信息进行提取；S212：对提取的特征信息进行分类。进一步地，所述步骤S300根据识别的UI组件的图形、文本、位置及轮廓信息，完成所述各组件的自动布局，并自动生成图形的脚本代码，具体包括：S301：在对应的UI软件设计界面中自动生成各组件的边框轮廓；S302：调用UI设计软件中的组件；S303：完成各组件的自动布局和属性设置；S304：同时自动生成整个界面的脚本代码，最后通过软件图形界面快速自动生成装置自动生成图形界面并显示。进一步地，所述S301包括如下步骤：S3011：根据各UI组件的位置信息对其进行布局；S3012：根据各UI组件的图形、文本及轮廓信息对布局好的图形进行设计和界面设计；S3013：将各UI组件的布局、图形及界面信息传输给S302。进一步地，所述S304具体包括如下步骤：S3041：根据各UI组件的布局、图形及界面设计信息实现与其相应组件、代码的匹配；S3042：对整个界面代码层次结构进行规划，并加载各组件相对应的代码；S3043：生成整个界面全部的脚本代码；S3044：运行生成可以操作的图形界面并进行显示。按照本专利技术的另一个方面，提供一种软件图形界面的快速自动生成装置，用于实现所述的软件图形界面的快速自动生成方法，该装置至少包括：一个通信接口，用于和计算机、摄像机和画板进行通信；一个显示器，用于显示生成的图形界面和脚本代码；一个处理器以及存储器，所述存储器存储图片的信息，所述处理器执行指令；该装置还至少包括：图像输入模块，用于输入各UI组件的源图片；图像信息预处理模块及机器视觉检测识别分析模块，所述图像信息预处理模块用于接收到所述源图片后，调用所述机器视觉检测识别分析模块对所述源图片进行识别处理，记录识别所述源图片中各UI组件类别及文本信息，并记录各组件的位置信息和本文档来自技高网...

【技术保护点】
1.一种软件图形界面的快速自动生成方法，其特征在于，包括如下步骤：/nS100：接收用于生成图形界面的源图片；/nS200：通过机器视觉检测识别所述源图片中各UI组件图形及文本信息；/nS300：完成所述UI组件的自动布局，并自动快速生成图形界面，同时生成界面的控制脚本代码；/nS400：运行生成可以操作的图形界面并进行显示。/n

【技术特征摘要】
1.一种软件图形界面的快速自动生成方法，其特征在于，包括如下步骤：
S100：接收用于生成图形界面的源图片；
S200：通过机器视觉检测识别所述源图片中各UI组件图形及文本信息；
S300：完成所述UI组件的自动布局，并自动快速生成图形界面，同时生成界面的控制脚本代码；
S400：运行生成可以操作的图形界面并进行显示。


2.根据权利要求1所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S100可采用多种方式生成图形界面的源图片，具体包括：
S101：画板上绘制草图；或，
S102：现场手绘草图输入；或，
S103：外部图片导入。


3.根据权利要求2所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S101画板上绘制草图，用户可灵活选择草图界面上的文本信息和对应的UI组件，或者勾选需要的UI组件，或者对可编辑的UI组件进行适当的编辑修改，使其满足设计需求。


4.根据权利要求2或3所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S101画板上绘制草图，先进行保存，然后通过以太网向步骤S200传输。


5.根据权利要求2所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S102现场手绘草图输入，在草图绘制的过程中通过摄像机实时采集图像，并通过以太网实时向步骤S200传输图片。


6.根据权利要求2所述的一种软件图形界面的快速自动生成方法，其特征在于，所述S103外部图片导入，包括在图片上的编辑UI组件或点击UI组件的步骤。


7.根据权利要求1所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S200通过机器视觉检测模块识别图形中各类UI组件及文本信息，所述机器视觉检测具体包括如下步骤：
S201：对输入图像中各UI组件的图形和文本信息的识别；
S202：识别并记录图像中各组件的位置信息和轮廓信息；并，
将所述各UI组件的图形、文本、位置及轮廓信息传输给步骤S300。


8.根据权利要求7所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S201及S202中各UI组件的信息识别包括如下步骤：
S210：对图形输入的源图片进行特征识别；
S211：对识别的特征信息进行提取；
S212：对提取的特征信息进行分类。


9.根据权利要求1所述的一种软件图形界面的快速自动生成方法，其特征在于，所述步骤S300根据识别的UI组件的图形、文本、位置及轮廓信息，完成所述各组件的自动布局，并自动生成图形的脚本代码，具体包括：
S301：在对应的UI软件设计界面中自动生成各组件的边框轮廓；
S302：调用UI设计软件中的组件；
S303：完成各组件的自动布局和属性设置；
S304：同时自动生成整个界面的脚本代码，最后通过软件图形界面快速自动生成装置自动生成图形界面并显示。


10.根据权利要求9所述的一种软件图形界面的快速自动生成方法，其特征在于，所述S301包括如下步骤：
S3011：根据各UI组件的位置信息对其进行布局；
S3012：根据各UI组件的图形、文本及轮廓信息对布局好的图形进行设计和界面设计；
S3013：将各UI组件的布局、图形及界面信息传输给S302。


11.根据权利要求9所述的一种软件图形界面的快速自动生成方法，其特征在于，所述S304具体包括如下步骤：
S3041：根据各UI组件的布局、图形及界面设计信息实现与其相应代码的匹配；
S3042：对整个界面代码层次结构进行规划，并加载各组件相对应的代码；
S3043：生成整个界面全部的脚本代码；
S3044：运行生成可以操作的图形界面并进行显示。


12.一种软件图形界面的快速自动生成装置，用于实现如权利要求1-11中任一项所述的软件图形界面的快速自动生成方法，该装置至少包括：
一个通信接口，用于和计算机、摄像机和画板进行通信；
一个显示器，用于显示生成的图形界面和脚本代码；
一个处理器以...

【专利技术属性】
技术研发人员：杨建中，朱万强，张成磊，高嵩，王天正，
申请(专利权)人：华中科技大学，
类型：发明
国别省市：湖北;42