基于界面草图的应用检索方法和装置制造方法及图纸

本发明专利技术公开了基于界面草图的应用检索方法和装置。该方法对输入的图像进行预处理后，通过对预处理后的图像进行递归分割，对各分割后的图像识别边缘矩形框，然后识别边缘矩形框内的图元标识，根据图元标识对应的控件种类识别出各种类型的控件，并根据边缘矩形框的位置确定该控件在界面上的位置，结合递归的层次关系组成用以表示控件间的层次布局的控件布局树，然后将该生产的控件布局树与应用库中各应用对应的控件布局树进行布局树相似度值计算，根据布局树相似度值是否大于阈值得到匹配的应用。软件研发人员可以依据本发明专利技术的方法和装置检索相似的界面的应用，为设计软件图形应用界面提供便利。

Application retrieval method and device based on interface sketch

【技术实现步骤摘要】
基于界面草图的应用检索方法和装置
本专利技术涉及软件图形界面设计领域，特别涉及基于应用UI界面的应用检索。
技术介绍
在软件开发中，图形用户界面非常重要。一个具有丰富且交互友好用户图形界面的软件更容易被用户所接受和青睐。在移动应用软件或者在台式桌面应用软件中，友好的用户图形界面在市场上具有更强的市场竞争力。为软件设计友好的用户图形界面需要耗费很多精力和资源。虽然目前各种应用软件开发平台大都支持图形界面控件拖拽式的所见即所得的图形界面生成平台。然而，这种拖拽的图形界面生成平台往往需要进行复杂的环境配置，这是一种重量级的应用背景，而这些行为不仅对图形界面设计的空间场景有较高要求，且需要用户具有领域内一定的先验知识。如何评价图形用户界面好坏对设计人员来说是一个重大问题。一种非常好的思路是，软件设计人员可以根据设计好的图形用户界面进行应用检索，根据检索到的应用结果可以评价所设计的图形用户界面是否符合用户一般的操作习惯，是否符合美学潮流。另一方面，设计人员也可以根据检索到的结果参考其他关联页面的设计，由此可以大大提高软件开发图形用户界面设计的效率。当然，软件设计人员在设计阶段不可能根据已经开发完成的应用提取图形用户界面进行检索，因此，根据图形用户界面进行应用检索时，最好能够根据图形界面草图进行应用检索。草图作为人类自然沟通的一种重要方式，保存了思维的核心，有利于创造性思维的快速表达。通过图形界面草图进行应用检索，并通过图形界面草图进行图形用户界面建模将大大提高软件应用开发设计人员的效率。
技术实现思路
r>本专利技术所要解决的问题：设计一种基于图形界面的应用检索系统，特别是，基于图形界面草图的应用检索系统，为软件开发设计人员设计用户图形界面提供便利。为解决上述问题，本专利技术采用的方案如下：根据本专利技术的基于界面草图的应用检索方法，该方法包括如下步骤：S1：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；S2：对图像进行递归分析处理，生成控件布局树；S3：将所生成的控件布局树与应用库中各应用对应的控件布局树分别做相似度比较，计算相应的布局树相似度值；S4：选取布局树相似度值超过预先设定阈值的应用；所述步骤S2包括：S21：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；S22：识别所述图像分割块的边缘矩形框；S23：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为步骤S2的输入转步骤S2进行递归；S24：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一种控件种类对应特定的图元标识；S25：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树；所述步骤S3包括：S31：将所生成的控件布局树和应用对应的控件布局树进行匹配，找出最佳匹配子树，并计算该最佳匹配子树的树重值Wm，i；S32：计算所生成的控件布局树的树重值Wt和应用对应的控件布局树的树重值Wi；S33：计算所生成的控件布局树与应用对应的控件布局树的布局树相似度值：其中，Si表示为第i个应用对应的控件布局树与所生成的控件布局树的布局树相似度值；Wi表示为第i个应用对应的控件布局树的树重值；Wm，i表示为第i个应用对应的控件布局树与所生成的控件布局树之间最佳匹配子树的树重值。进一步，根据本专利技术的基于界面草图的应用检索方法，该方法还包括步骤：S5：根据布局树相似度值大小对步骤S4获得的应用进行排序。进一步，根据本专利技术的基于界面草图的应用检索方法，所述控件布局树的树重值采用如下公式进行计算：其中，N为控件布局树的节点数；Cj为第j个节点的子孙节点数；Hj为第j个节点与根节点的距离；Vj为第j个节点根据其控件类型所确定的加权系数。进一步，根据本专利技术的基于界面草图的应用检索方法，所述步骤S24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识；所述识别所述图像分割块内的图元标识单元包括如下步骤：S241：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；S242：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；S243：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；S244：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。进一步，根据本专利技术的基于界面草图的应用检索方法，所述步骤S242为：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1，tx2，...，txW}和在纵向上的投影的有色像素数GTy＝{ty1，ty2，...，tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；所述步骤S243为：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1，tl2，...，tlL}和与中心点的等角分布的有色像素数GTb＝{tb1，tb2，...，tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk，rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac，ac+1)的有色像素数；r1，r2，...，rL+1为与中心点的距离分割点；a1，a2，...，aB+1为中心点的角度分割点；所述步骤S244为：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。根据本专利技术的基于界面草图的应用检索装置，该装置包括如下模块：M1，用于：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；M2，用于：对图像进行递归分析处理，生成控件布局树；M3，用于：将所生成的控件布局树与应用库中本文档来自技高网...

【技术保护点】
1.基于界面草图的应用检索方法，其特征在于，该方法包括如下步骤：/nS1：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；/nS2：对图像进行递归分析处理，生成控件布局树；/nS3：将所生成的控件布局树与应用库中各应用对应的控件布局树分别做相似度比较，计算相应的布局树相似度值；/nS4：选取布局树相似度值超过预先设定阈值的应用；/n所述步骤S2包括：/nS21：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；/nS22：识别所述图像分割块的边缘矩形框；/nS23：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为步骤S2的输入转步骤S2进行递归；/nS24：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一种控件种类对应特定的图元标识；/nS25：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树；/n所述步骤S3包括：/nS31：将所生成的控件布局树和应用对应的控件布局树进行匹配，找出最佳匹配子树，并计算该最佳匹配子树的树重值W...

【技术特征摘要】
1.基于界面草图的应用检索方法，其特征在于，该方法包括如下步骤：
S1：对输入的图像进行预处理；所述预处理包括依次进行的灰度化处理步骤、二值化处理步骤、去噪声处理步骤、以及线体单像素细化步骤；
S2：对图像进行递归分析处理，生成控件布局树；
S3：将所生成的控件布局树与应用库中各应用对应的控件布局树分别做相似度比较，计算相应的布局树相似度值；
S4：选取布局树相似度值超过预先设定阈值的应用；
所述步骤S2包括：
S21：对图像进行连续性分割，得到图像分割块和所述图像分割块的位置信息；
S22：识别所述图像分割块的边缘矩形框；
S23：若所述图像分割块能够识别到边缘矩形框，则将所述图像分割块清除所述边缘矩形框后得到的图像作为步骤S2的输入转步骤S2进行递归；
S24：若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识；所述图元标识是用于区分控件种类的标识图像；每一种控件种类对应特定的图元标识；
S25：根据识别到的图元标识和所述图像分割块所对应的边缘矩形框确定控件种类，结合所述图像分割块的位置信息，组成控件布局树节点，进而构建相应的控件布局树；
所述步骤S3包括：
S31：将所生成的控件布局树和应用对应的控件布局树进行匹配，找出最佳匹配子树，并计算该最佳匹配子树的树重值Wm,i；
S32：计算所生成的控件布局树的树重值Wt和应用对应的控件布局树的树重值Wi；
S33：计算所生成的控件布局树与应用对应的控件布局树的布局树相似度值：



其中，Si表示为第i个应用对应的控件布局树与所生成的控件布局树的布局树相似度值；Wi表示为第i个应用对应的控件布局树的树重值；Wm,i表示为第i个应用对应的控件布局树与所生成的控件布局树之间最佳匹配子树的树重值。


2.如权利要求1所述的基于界面草图的应用检索方法，其特征在于，该方法还包括步骤：
S5：根据布局树相似度值大小对步骤S4获得的应用进行排序。


3.如权利要求1所述的基于界面草图的应用检索方法，其特征在于，所述控件布局树的树重值采用如下公式进行计算：



其中，N为控件布局树的节点数；Cj为第j个节点的子孙节点数；Hj为第j个节点与根节点的距离；Vj为第j个节点根据其控件类型所确定的加权系数。


4.如权利要求1所述的基于界面草图的应用检索方法，其特征在于，所述步骤S24中，若所述图像分割块未能识别到边缘矩形框，则识别所述图像分割块内的图元标识单元；所有图像分割块识别结束后，根据当前递归层次下识别到的若干个所述图元标识单元以及所述图元标识单元之间的位置信息组成图元标识；
所述识别所述图像分割块内的图元标识单元包括如下步骤：
S241：将所述图像分割块的图像缩放至所述图元标识单元对应模板图像的尺寸大小；
S242：统计缩放后的图像分别在横向和纵向上的投影分布的有色像素数；
S243：统计缩放后的图像分别与中心点的按距离分布的有色像素数和与中心点的按角度分布的有色像素数；
S244：根据所述在横向和纵向上的投影分布的有色像素数以及所述与中心点的按距离分布的有色像素数和所述与中心点的按角度分布的有色像素数作为特征向量与所述图元标识单元对应模板图像进行相似度比较，判断所述图像分割块的图像是否为相应的图元标识单元。


5.如权利要求4所述的基于界面草图的应用检索方法，其特征在于，所述步骤S242为：统计缩放后的图像在横向上的投影的有色像素数GTx＝{tx1,tx2,…,txW}和在纵向上的投影的有色像素数GTy＝{ty1,ty2,…,tyH}；其中，W为所述图元标识单元对应模板图像横向上的尺寸，H为所述图元标识单元对应模板图像纵向上的尺寸，txi|i∈(1..W)为所述缩放后的图像在横向上第i位置纵向上的有色像素数；tyj|j∈(1..H)为所述缩放后的图像在纵向上第j位置横向上的有色像素数；所述有色像素为区别于背景色的像素点；
所述步骤S243为：统计缩放后的图像与中心点的距离分布的有色像素数GTl＝{tl1,tl2,…,tlL}和与中心点的等角分布的有色像素数GTb＝{tb1,tb2,…,tbB}；其中，L为与中心点的距离数，B为与中心点的等角数，tlk|k∈(1..L)为所述缩放后的图像与中心点距离落在区间[rk,rk+1)的有色像素数；tbc|c∈(1..B)为所述缩放后的图像与中心点的角度落在区间[ac,ac+1)的有色像素数；r1,r2,…,rL+1为与中心点的距离分割点；a1,a2,…,aB+1为中心点的角度分割点；
所述步骤S244为：将GTx、GTy、GTl和GTb组成向量GT，并通过余弦相似度公式计算向量GT与所述图元标识单元对应模板图像对应的向量GM之间的相似度，然后根据得到的相似度判断所述图像分割块的图像是否为相应的图元标识单元。


6.基于界面草图的应用...

【专利技术属性】
技术研发人员：潘敏学，张天，
申请(专利权)人：南京大学，
类型：发明
国别省市：江苏;32