一种布局图生成方法、装置和存储介质与流程

专利2022-06-29  62


本发明涉及图像处理技术,尤其涉及一种布局图生成方法、装置和计算机可读存储介质。



背景技术:

物联网(iot,internetofthings)空间设备布局图的生成方法一般是由设计侧利用三维(3d,3-dimension)建模技术将不同的物联网空间布局元素转化成对应的3d模型,再将不同的3d模型组合成对应的3d物联网空间以模拟真实的物联网场景,即生成相应的物联网空间设备布局图。开发侧可以根据物联网空间设备布局图修改相应的代码逻辑,以满足不同类型的客户和场景需求。

相关方案中,利用3d模型模拟真实的物联网场景的技术门槛高,需要拥有对应技术储备的运维人员参与到产品的落地和部署,实施难度大,投入产比低,同时浏览器的兼容性问题和设备的性能瓶颈可能导致物联网场景还原度不高,实际效果与预计效果存在差距。



技术实现要素:

有鉴于此,本发明的主要目的在于提供一种布局图生成方法、装置和计算机可读存储介质。

为达到上述目的,本发明的技术方案是这样实现的:

本发明实施例提供了一种布局图生成方法,所述方法包括:

确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

上述方案中,所述确定画布区域内的至少一个目标体,包括:

接收操作指令;所述操作指令用以向所述画布区域内添加目标体、移动目标体或删除目标体;

根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体或从所述画布区域删除的目标体。

上述方案中,所述目标体包括:设备;

相应于所述目标体为设备的情况下,确定所述至少一个目标体中各目标体的属性值,包括以下至少之一:

根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

上述方案中,所述目标体包括:墙体;

相应于所述目标体为墙体的情况下,确定所述至少一个目标体中各目标体的属性值,包括:

确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

上述方案中,相应于所述目标体为设备的情况下,所述基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图,包括以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

上述方案中,相应于所述目标体为墙体的情况下,所述基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图,包括:

确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成可缩放矢量图形svg元素,将生成的svg元素插入对应的画布区域。

上述方案中,所述方法还包括:

将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

本发明实施例提供了一种布局图生成装置,所述装置包括:第一处理模块、第二处理模块;其中,

所述第一处理模块,用于确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

所述第二处理模块,用于基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

本发明实施例提供了一种布局图生成装置,所述装置包括:处理器和用于存储能够在处理器上运行的计算机程序的存储器;其中,

所述处理器用于运行所述计算机程序时,执行上述任一项布局图生成方法的步骤。

本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以上任一项所述布局图生成方法的步骤。

本发明实施例所提供的布局图生成方法、装置和计算机可读存储介质,确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。本发明实施例中,利用具有透视效果的图片呈现相应的目标体,达到与3d模型方案类似的视觉效果,由于具有透视效果的图片只需要预先开发即可应用于各种中小型物联网空间布局场景,大大降低了产品的开发维护成本,缩短研发周期。

附图说明

图1为本发明实施例提供的一种布局图生成方法的流程示意图;

图2为本发明实施例提供的一种模拟设备图片的示意图;

图3为本发明实施例提供的一种显示层叠顺序的关系示意图;

图4为本发明实施例提供的一种布局图生成装置的人机交互界面的示意图;

图5为本发明实施例提供的另一种布局图生成方法的流程示意图;

图6为本发明实施例提供的一种布局图生成装置的结构示意图;

图7为本发明实施例提供的另一种布局图生成装置的结构示意图。

具体实施方式

在本发明的各种实施例中,确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

下面结合实施例对本发明再作进一步详细的说明。

图1为本发明实施例提供的一种布局图生成方法的流程示意图;如图1所示,所述布局图生成方法包括:

步骤101、确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

步骤102、基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

本发明实施例中,所述确定画布区域内的至少一个目标体,包括:

接收操作指令;所述操作指令是针对画布区域进行各种操作的指令,所述操作指令用以向所述画布区域内添加目标体、移动目标体、或删除目标体;

根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体、或从所述画布区域删除的目标体。

具体来说,本发明实施例中的布局图生成方法可以应用于布局图生成装置,所述布局图生成装置可以在终端上实现,所述终端可以是计算机、平板电脑、手机、服务器等。

用户通过布局图生成装置的人机交互界面添加、删除或移动任意一个目标体,布局图生成装置均会作对应记录,即保存有对应的数据;所述确定画布区域内的至少一个目标体包括:布局图生成装置通过上述数据确定至少一个目标体;或者,也可以是对画布区域进行检测,确定画布区域内包括的至少一个目标体。

所述接收操作指令可以是接收多个操作指令,每个操作指令对应一个目标体;基于接收的多个操作指令可以确定多个目标体。

实际应用中,所述目标体,可以包括:设备、墙体。

针对设备来说,各设备添加至画布区域后,对应产生相对于画布区域的属性值,例如:各设备在画布区域的坐标系(即画布区域对应的笛卡尔坐标系)的坐标、各设备相对于所述画布区域内除自身外的其他设备的位置关系等;若设备移动,相应的属性值对应改变。

对于墙体来说,墙体基于两个相邻锚点生成,若锚点移动即锚点的坐标改变,则墙体的位置也改变。

具体地,相应于所述目标体为设备的情况下,确定所述至少一个目标体中各目标体的属性值,包括以下至少之一:

根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

即设备的属性值至少包括:设备在所述画布区域应的坐标系中的坐标、设备与所述画布区域内除自身外的其他设备之间的位置关系。

这里,所述坐标,至少包括:各设备的底部占据区域的四个角的坐标、对齐参照点的坐标。

具体地,相应于所述目标体为设备的情况下,所述基于所述至少一个设备和所述至少一个设备中各设备的属性值,生成包括所述至少一个设备的空间设备布局图,包括以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

针对上述基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;具体说明:

本发明实施例的布局图生成方法,可以提供有画布区域内的设备自动对齐功能。所述设备自动对齐功能,指当任一设备由用户进行相应的操作,如将设备拖拽至画布区域内的某一位置并释放鼠标以结束拖拽(即添加至画布区域)后,可以根据添加的设备的结束位置,运用设备自动对齐功能将添加的设备移动至最近的目标对齐点。

具体来说,添加到画布区域的设备(具体指实体设备,如柜体、箱体等)以预设的模拟设备图片进行呈现;每种设备对应不同的模拟设备图片,均以相同的透视角度绘制,即每种设备都有预先定义的维度常量用于描述对应的二维(2d)图片。所述2d图片具有透视效果,即可以实现2.5d的视觉效果,也即伪3d的视觉效果。

设备对应的模拟设备图片的维度常量,包括以下至少之一:

设备对应的模拟设备图片的对齐参照点相对于所述设备对应的模拟设备图片的目标点(这里可以设定为左上角,参考图2所示)的偏移比例参数,记做offsetx、offsety;这里,各设备均预先设定有自身的对齐参照点,所述对齐参照点可以在预设设备对应的模拟设备图片时由开发人员设定;

设备对应的模拟设备图片的标准尺寸宽高;

设备对应的模拟设备图片在画布区域的方向参考线上对应的尺寸参数,记做a、b,所述a、b用于描述伪3d视觉效果下的底部占据面积(具体可以参考图2所示)。

所述第一设备为预设时间内操作的设备,所述预设时间可以是1秒内,即所述第一设备指最新添加或移动的设备。

所述基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点,包括:

确定所述第一设备的对齐参照点的坐标值(记做第一坐标值);所述第一坐标值指结束针对第一设备的操作时,所述第一设备的对齐参照点的坐标值;

确定所述第一坐标值在所述画布区域的坐标系上第一参考线的第一结果,以及在坐标系上第二参考线的第二结果;

确定根据所述第一结果进行位置移动的第一平移距离值,以及,确定根据所述第二结果进行位置移动的第二平移距离值;

根据所述第一平移距离值和所述第二平移距离值,确定所述第一设备的对齐参照点的第二坐标值;所述第二坐标值作为所述目标对齐点的坐标值。

这里,所述第一参考线为:√3/3*x-y=0;

所述第二参考线为:-√3/3*x-y 40=0;

所述x,y分别表示所述第一坐标值在所述画布区域的坐标系的x轴和y轴的值;

所述第一结果表示将所述第一坐标值在所述画布区域的坐标系的x轴和y轴的值带入√3/3*x-y的结果;

所述第二结果表示将所述第一坐标值在所述画布区域的坐标系的x轴和y轴的值带入-√3/3*x-y 40的结果。

这里,确定根据所述第一结果进行位置移动的第一平移距离值,包括:

确定所述第一参考线平移到达所述对齐参照点的最近距离(也即对齐参照点与第一参考线之间的直线距离),作为所述第一平移距离。

所述第一平移距离具体为n*单位距离(所述单位距离可以2*√3/3);所述n指移动多少个单位距离;所述n=第一平移距离除以2*√3/3后取整,得到的整数值的绝对值。

需要说明的是,确定第一结果小于0时,表征所述对齐参照点在第一参考线的下方,对第一参考线进行平移的结果为√3/3*x–y 第一平移距离值=0;

确定第一结果大于0时,表征所述对齐参照点在第一参考线的上方,对第一参考线进行平移的结果为√3/3*x–y-第一平移距离=0;

这里,确定根据所述第二结果进行位置移动的第二平移距离值,包括:

确定所述第二参考线平移到达所述对齐参照点的最近距离(也即对齐参照点与第二参考线之间的直线距离),作为所述第二平移距离。

所述第二平移距离具体为m*单位距离(所述单位距离可以2*√3/3);所述m指移动多少个单位距离;所述m=第二平移距离除以2*√3/3后取整,得到的整数值的绝对值。

需要说明的是,确定第二结果小于0时,表征所述对齐参照点在第二参考线的下方,对第二参考线进行平移的结果为-√3/3*x-y 40 第二平移距离值=0;

确定第二结果大于0时,表征所述对齐参照点在第二函数的上方,对第二参考线进行平移的结果为-√3/3*x-y 40-第二平移距离值=0。

通过上述方式可以确定第一平移距离值和第二平移距离值,再根据所述第一平移距离值和所述第二平移距离值,确定所述第一设备的对齐参照点的第二坐标值。这里,所述第二坐标值包括newx和newy,根据所述第一平移距离值和所述第二平移距离值,确定所述第一设备的对齐参照点的第二坐标值,包括:

newx=第一平移距离值-第二平移距离值 20*√3;

newy=(newx 2*第二平移距离值)/√3。

所述基于第一设备的对齐参照点确定目标对齐点可以采用以下代码实现。

通过上述方法,将第一坐标值传入特征函数(newx=第一平移距离值-第二平移距离值 20*√3;newy=(newx 2*第二平移距离值)/√3),即可计算得到对齐参照点最终的坐标点,即获得上述第二坐标值,并将设备相应的模拟设备图片(具体指模拟设备图片的对齐参照点)移动到所述第二坐标值对应位置即可。

需要说明的是,上述画布区域内的设备自动对齐功能可以选择打开或关闭,具体实现可以提供有功能按键一,用户通过对功能按键一进行操作,控制打开或关闭画布区域内的设备自动对齐功能。

针对上述确定第一设备与第二设备之间存在视觉重叠,将所述第一设备返回至初始位置,具体说明:

考虑到实际应用中设备不可能在物理空间上占据相同的位置,因此布局图在视觉上也需要消除重叠,主要是在伪3d(即2.5d)视觉样式下,底部占据区域不存在重叠区域;因此,提供上述相应于第一设备与第二设备之间存在视觉重叠,将所述第一设备返回至初始位置。

为消除视觉重叠,当设备结束拖拽后,加入前置判断,具体判断某一设备移动到当前拖拽位置时是否会造成与已有设备的视觉重叠;确定设备移动或添加到当前拖拽位置时会造成与已有设备的视觉重叠,则将设备返回初始位置。

上述移动或添加的设备相当于上述第一设备,上述造成视觉重叠的已有设备相当于上述第二设备。

所述确定第一设备与第二设备之间存在视觉重叠,包括:

基于所述第一设备的维度常量参数,确定所述第一设备的底部占据区域(在二维角度下是一个已知尺寸和位置的平行四边形);

遍历当前画布区域内包含的设备,确定当前画布区域内包含的各设备的底部占据区域;

将第一设备与当前画布区域内包含的各设备分别进行底部占据区域的比较,判断是否存在与第一设备的底部占据区域重叠的设备,若存在,则认为存在视觉重叠;上述与第一设备的底部占据区域重叠的设备即为第二设备。

这里,相应设备在画布区域内的底部占据区域可以根据对齐参照点的坐标值和维度常量参数得到,具体指,根据对齐参照点的坐标值和设备对应的模拟设备图片的对齐参照点相对于设备对应的模拟设备图片的目标点(这里可以设定为左上角,参考图2所示)的偏移比例参数、以及设备对应的模拟设备图片的标准尺寸宽高确定,具体可以确定底部占据区域的四个角的坐标值。

针对根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系,确定所述至少两个设备中各设备之间的层级属性值(可记做z-index),基于所述层级属性值将所述至少两个设备按层级关系显示,具体说明:

根据透视原理知晓与当前视角距离越远的设备需要被越近的设备覆盖,即对应的z-index属性越小;也就是说,z-index越大,离用户当前视角越近,反之,z-index越小,离用户当前视角越远;因此,只需要根据该规则将所有的设备排序并更新属性即可。

这里,根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定所述层级属性值,包括:

确定所述至少两个设备中各设备的对齐参照点的坐标值和各设备的底部占据区域;

基于各设备的对齐参照点的坐标值和底部占据区域,确定各设备(具体指各模拟设备图片)的对齐参照点与相关设备的底部占据区域(一般为四边形区域)的相对位置关系;

基于确定的相对位置关系确定各设备与相关设备的层级显示顺序。

具体来说,任意两个设备之间存在层级显示顺序,需分别确定两者之间的层级关系;以第一设备和第三设备为例,确定层级显示顺序,包括:

确定所述第一设备的对齐参照点在相应于所述第三设备的底部占据区域的第一区域内(具体包括:左上边区域、右上边区域),则确定第一设备的层级属性值小于第三设备的层级属性值;

确定所述第一设备的对齐参照点在相应于所述第三设备的底部占据区域的第二区域内(具体包括:左下边区域、右下边区域),则确定第一设备的层级属性值大于第三设备的层级属性值;

当所述第一设备的对齐参照点在所述第三设备的交线临界区域(即相应于第三设备的底部占据区域的左侧交线和右侧交线形成的区域,所述交线根据底部占据区域各角的方向参考线确定)上时,进行反向判断,即:确定所述第一设备的对齐参照点在相应于第三设备的底部占据区域的左侧交线形成的交线临界区域时,确定第一设备的层级属性值大于第三设备的层级属性值;确定所述第一设备的对齐参照点在相应于第三设备的底部占据区域的右侧交线形成的交线临界区域时,确定第一设备的层级属性值小于第三设备的层级属性值;

当所述第一设备的对齐参照点在所述第三设备的中间区域(即相应于第三设备的模拟设备图片的中间区域)时,将所述第一设备的对齐参照点与所述第三设备的对齐参照点的位置进行坐标比较,基于比较结果确定层级关系。

以上所述的上、下、左、右由开发人员设定,其目的是为了实现相对位置的确定,相对于用户通过人机交互界面观看的视角,上、下、左、右如图2所示。实际应用时可以按其他方式进行设定,这里不做限定。

这里,所述当所述第一设备的对齐参照点在所述第三设备的中间区域时,将所述第一设备的对齐参照点与所述第三设备的对齐参照点的位置进行坐标比较,基于比较结果确定层级关系,包括:

确定所述第一设备的对齐参照点在y轴的坐标值大于所述第三设备的对齐参照点在y轴的坐标值时,确定第一设备的层级属性值小于第三设备的层级属性值;

确定所述第一设备的对齐参照点在y轴的坐标值小于所述第三设备的对齐参照点在y轴的坐标值时,确定第一设备的层级属性值大于第三设备的层级属性值;

确定所述第一设备的对齐参照点在y轴的坐标值等于所述第三设备的对齐参照点在y轴的坐标值时,比较所述第一设备的对齐参照点在x轴的坐标值和所述第三设备的对齐参照点在x轴的坐标值;

确定所述第一设备的对齐参照点在x轴的坐标值大于所述第三设备的对齐参照点在x轴的坐标值时,确定第一设备的层级属性值小于第三设备的层级属性值;

确定所述第一设备的对齐参照点在x轴的坐标值小于所述第三设备的对齐参照点在x轴的坐标值时,确定第一设备的层级属性值大于第三设备的层级属性值。

这里,所述y轴为人机交互界面显示的从下至上的方向,所述x轴为人机交互界面显示的从左至右的方向。

基于上述原则,确定图3中的层级属性值,如图3所示,设备一、设备二、设备三、设备四、设备五的层级属性值(即z-index)由大至小依次为:设备四、设备二、设备一、设备三、设备五。

具体地,相应于所述目标体为墙体的情况下,确定所述至少一个目标体中各目标体的属性值,包括:

确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

具体地,相应于所述目标体为墙体的情况下,所述基于所述至少一个设备和所述至少一个设备中各设备的属性值,生成包括所述至少一个设备的空间设备布局图,包括:

确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设的模拟墙体图片生成svg元素,将生成的svg元素插入对应的画布区域。

针对确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成svg元素,将生成的svg元素插入对应的画布区域,具体说明:

模拟墙体由在方向参考线上的起始锚点或结束锚点确定,当增加锚点时,记录锚点的对应坐标。

每当新增一个锚点时,都可以计算出当前可绘制模拟墙体的锚点组,从而可计算出多边形(polygon)元素的路径参数,再根据预先已标准化的模拟墙体图片生成对应的图像文件格式(svg,scalablevectorgraphics)元素插入到对应的画布区域;最后遵循最近锚点生成原则,删除多余的重叠墙体元素。

这里,用户可以对锚点组中的锚点进行删除或添加,即可以实现对墙体的绘制或删除。

需要说明的是,所述墙体具有透视效果,但区别于其他对应有模拟设备图片的实体设备,这里,开发人员可以预先按照透视原理设置模拟墙体图片的svg元素,实际应用时,根据预设模拟墙体图片的svg元素,相邻锚点之间可以得到具有透视效果的墙体。所述墙体对应的属性值包括:墙体对应的两个相邻的锚点。

所述墙体厚度可以预先由开发人员设置,基于所述墙体对应的两个锚点和预设的墙体厚度,可以计算得到墙体四个角的坐标。

具体地,所述方法还包括:

确定任一设备四个角的坐标,根据设备四个角的坐标确定设备在画布区域内的底部占据区域;

确定任一墙体四个角的坐标,根据墙体四个角的坐标确定墙体在画布区域内的底部占据区域;

确定任一设备在画布区域内的底部占据区域与任一墙体在画布区域内的底部占据区域重叠时,则显示提示信息,以提示用户底部区域重叠,调整相应位置。

具体地,所述方法还包括:

将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

这里,空间设备布局图的相关数据可以转化为可存储于服务器的数据,同时,也可以根据需要将存储的数据逆向解析为可视的空间设备布局图。这里,可以将空间设备布局图的相关数据转换为可被ajax(asynchronousjavascriptandxmlandhtml,一种创建交互式网页应用的网页开发技术)协议传输的js对象简谱(json,javascriptobjectnotation)类型数据(即目标格式的数据),同时实现将空间设备布局图的相关数据转化为json数据(encode)和json数据转化为空间设备布局图的相关数据(decode)时,保证100%的还原度。

通过上述方法可以有效、安全的保存生成的场景,并在需要调取时从服务器中获取并展示。

本发明实施例提供的布局图生成方法,解决了物联网大屏可视产品方向,在不同实际用户场景下,物联网空间设备布局图开发维护困难的问题,消除针对不同类型用户的定制需求,简化物联网场景解决方案的实施难度,同时也提升了产品的价值,提高了产品的专业度。上述方案基于自动对齐、重叠检测、墙体自动生成等功能让用户可以简单便捷地得到满足个性化需求的物联网空间设备布局图;另外,上述方案解决了现有方案中针对不同客户的需求场景定制多的问题,利于节约产品研发维护成本,同时相比于3d建模方案,运维人员无需3d相关的技术储备,亦能得到与三维空间相似视觉感受的空间设备布局图,也不存在引入3d渲染技术导致的设备性能瓶颈,可以提高中小型物联网场景的投入产出比。

图4为本发明实施例提供的一种布局图生成装置的人机交互界面的示意图,如图4所示,所述布局图生成装置可以提供有以下功能模块:工具栏区域、设备列表、画布区域、模拟设备、锚点、模拟墙体、实时信息区域、预览设备区域。

所述工具栏区域,主要用于给用户提供开关、操作、模式切换等功能的入口。例如,可包括:自动对齐开关、元素删除、保存、预览/编辑模式切换、设备/墙体编辑模式切换。

所述设备列表,用于向用户展示画布区域内的所有元素(上述设备、墙体)概况信息。

所述画布区域,是元素的可拖拽区域,画布区域宽高可变,画布背景可以绘制有方向参考线(如模拟设备和模拟墙体底部的边绘制在方向参考线上,也即绘制在x轴、y轴形成的坐标系上),用于帮助用户更好地调整设备布局。

所述模拟设备,是在画布区域内可拖拽的模拟设备图片,用于模拟实际物联网空间中不同类型的设备,根据与观察视角的距离,在视觉上有一定的层次和覆盖关系。

所述锚点,是画布区域内模拟实际物联网空间中墙角的部分,在同一条方向参考线上的两个锚点会连接自动生成墙体。

所述模拟墙体,是画布区域内模拟实际物联网空间中墙体的部分,模拟墙体只能绘制在方向参考线上,且需要由两个锚点确定起始点;若同一条方向参考线存在多个锚点时,只会在最近两个锚点之间绘制模拟墙体,不会出现重合墙体的情况。

所述实时信息区域,用于展示当前拖拽中的模拟设备的位置和尺寸等信息。

所述预览设备区域,用于给用户展示当前支持的各类模拟设备的缩略图(如上述预设的模拟设备图片),同时区域内的设备支持直接选中拖拽进入画布区域直接在画布内生成对应的模拟图片,方便用户侧快速增加设备。

图5为本发明实施例提供的另一种布局图生成方法的流程示意图;如图5所示,所述iot平台由上述布局图生成装置提供,用于通过人机交互界面呈现并提供给用户进行相应操作;

所述iot平台提供有布局页,用于提供给用户进行操作;用户可以通过点击iot平台相应的功能键调用所述布局页,在所述布局页的画布区域内进行布局图绘制;

所述iot平台基于用户的操作生成布局图的方法具体可以参考上述图1所示方法的步骤,这里不再赘述。

所述iot平台提供有物联网空间大屏,用户可以通过点击iot平台相应的功能键调用所述物联网空间大屏,所述物联网空间大屏可以用于显示绘制完成的空间设备布局图。

本发明实施例中还提供有iot后台服务,所述iot后台服务通过后台的服务器实现;用户通过iot平台登陆所述后台的服务器后即可使用所述iot平台提供的布局图生成方案;

生成空间设备布局图后还可以将所述空间设备布局图发送给所述后台的服务器进行保存,后期再需要获取所述空间设备布局图时,可以向所述后台的服务器发送获取请求,接收所述后台的服务器发送的空间设备布局图的配置数据。

通过图5可以看出,本发明实施例提供的方案整体数据流向简洁明了,用户在平台布局页可以根据不同的实际场景需求绘制物联网空间设备布局图并确认保存后,由iot平台将其转化为可存储可解析的配置数据,通过ajax请求保存在后台的服务端。当用户访问物联网空间可视化大屏页或需要再次编辑布局图配置数据时,再次向平台服务端请求已保存的数据,由前端将数据解析为对应的可视化的物联网空间设备布局图。

图6为本发明实施例提供的一种布局图生成装置的结构示意图;如图6所示,所述装置包括:第一处理模块、第二处理模块;其中,

所述第一处理模块,用于确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

所述第二处理模块,用于基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

具体地,所述第一处理模块,用于接收操作指令;所述操作指令用以向所述画布区域内添加目标体、移动目标体或删除目标体;

根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体或从所述画布区域删除的目标体。

具体地,所述目标体包括:设备;

相应于所述目标体为设备的情况下,所述第一处理模块,用于执行以下至少之一:

根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

具体地,所述目标体包括:墙体;

相应于所述目标体为墙体的情况下,所述第一处理模块,用于确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

具体地,相应于所述目标体为设备的情况下,所述第二处理模块,用于执行以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

具体地,相应于所述目标体为墙体的情况下,所述第二处理模块,用于确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成svg元素,将生成的svg元素插入对应的画布区域。

具体地,所述装置还包括:第三处理模块,用于将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

需要说明的是:上述实施例提供的布局图生成装置在进行布局图生成时,仅以上述各程序模块的划分进行举例说明,实际应用中,可以根据需要而将上述处理分配由不同的程序模块完成,即将装置的内部结构划分成不同的程序模块,以完成以上描述的全部或者部分处理。另外,上述实施例提供的布局图生成装置与布局图生成方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。

图7为本发明实施例提供的另一种布局图生成装置的结构示意图。所述装置70包括:处理器701和用于存储能够在所述处理器上运行的计算机程序的存储器702;其中,所述处理器701用于运行所述计算机程序时,执行:确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行:接收操作指令;所述操作指令用以向所述画布区域内添加目标体、移动目标体或删除目标体;根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体或从所述画布区域删除的目标体。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行:根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行:确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行:确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成svg元素,将生成的svg元素插入对应的画布区域。

在一实施例中,所述处理器701还用于运行所述计算机程序时,执行:将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

需要说明的是:上述实施例提供的布局图生成装置与布局图生成方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。

实际应用时,所述装置70还可以包括:至少一个网络接口703。布局图生成装置70中的各个组件通过总线系统704耦合在一起。可理解,总线系统704用于实现这些组件之间的连接通信。总线系统704除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图7中将各种总线都标为总线系统704。其中,所述处理器704的个数可以为至少一个。网络接口703用于布局图生成装置70与其他设备之间有线或无线方式的通信。

本发明实施例中的存储器702用于存储各种类型的数据以支持布局图生成装置70的操作。

上述本发明实施例揭示的方法可以应用于处理器701中,或者由处理器701实现。处理器701可能是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法的各步骤可以通过处理器701中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器701可以是通用处理器、数字信号处理器(dsp,digitalsignalprocessor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器701可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本发明实施例所公开的方法的步骤,可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中,该存储介质位于存储器702,处理器701读取存储器702中的信息,结合其硬件完成前述方法的步骤。

在示例性实施例中,布局图生成装置70可以被一个或多个应用专用集成电路(asic,applicationspecificintegratedcircuit)、dsp、可编程逻辑器件(pld,programmablelogicdevice)、复杂可编程逻辑器件(cpld,complexprogrammablelogicdevice)、现场可编程门阵列(fpga,field-programmablegatearray)、通用处理器、控制器、微控制器(mcu,microcontrollerunit)、微处理器(microprocessor)、或其他电子元件实现,用于执行前述方法。

本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器运行时,执行:确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

在一实施例中,所述计算机程序被处理器运行时,执行:接收操作指令;所述操作指令用以向所述画布区域内添加目标体、移动目标体或删除目标体;根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体或从所述画布区域删除的目标体。

在一实施例中,所述计算机程序被处理器运行时,执行:根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

在一实施例中,所述计算机程序被处理器运行时,执行:确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

在一实施例中,所述计算机程序被处理器运行时,执行以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

在一实施例中,所述计算机程序被处理器运行时,执行:确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成svg元素,将生成的svg元素插入对应的画布区域。

在一实施例中,所述计算机程序被处理器运行时,执行:将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,如:多个单元或组件可以结合,或可以集成到另一个系统,或一些特征可以忽略,或不执行。另外,所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口,设备或单元的间接耦合或通信连接,可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的,作为单元显示的部件可以是、或也可以不是物理单元,即可以位于一个地方,也可以分布到多个网络单元上;可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外,在本发明各实施例中的各功能单元可以全部集成在一个处理单元中,也可以是各单元分别单独作为一个单元,也可以两个或两个以上单元集成在一个单元中;上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。

本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储于一计算机可读取存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:移动存储设备、只读存储器(rom,read-onlymemory)、随机存取存储器(ram,randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

或者,本发明上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时,也可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括:移动存储设备、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述,仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,均应包含在本发明的保护范围之内。


技术特征:

1.一种布局图生成方法,其特征在于,所述方法包括:

确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

2.根据权利要求1所述的方法,其特征在于,所述确定画布区域内的至少一个目标体,包括:

接收操作指令;所述操作指令用以向所述画布区域内添加目标体、移动目标体或删除目标体;

根据所述操作指令,确定添加至所述画布区域内的目标体、在所述画布区域内移动的目标体或从所述画布区域删除的目标体。

3.根据权利要求1所述的方法,其特征在于,所述目标体包括:设备;

相应于所述目标体为设备的情况下,确定所述至少一个目标体中各目标体的属性值,包括以下至少之一:

根据所述至少一个设备中各设备在所述画布区域内的位置,确定各设备在所述画布区域对应的坐标系中的坐标,作为坐标属性值;

确定各设备相对于所述画布区域内除自身外的其他设备的位置关系,作为层级属性值。

4.根据权利要求1或3所述的方法,其特征在于,所述目标体包括:墙体;

相应于所述目标体为墙体的情况下,确定所述至少一个目标体中各目标体的属性值,包括:

确定相邻两个锚点的坐标,作为所述相邻两个锚点对应的墙体的坐标属性值。

5.根据权利要求1所述的方法,其特征在于,相应于所述目标体为设备的情况下,所述基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图,包括以下至少之一:

基于第一设备的对齐参照点的坐标值、预设的第一参考线和预设的第二参考线,确定目标对齐点;将所述第一设备移动至所述目标对齐点;所述第一设备为预设时间内操作的设备;

确定第一设备与第二设备之间存在视觉重叠时,将所述第一设备返回至初始位置;所述第二设备为所述至少一个设备中除所述第一设备外的任意一个;所述第一设备与所述第二设备之间存在视觉重叠表征所述第一设备的底部占据区域与所述第二设备的底部占据区域存在重合;所述底部占据区域基于所述设备的属性值确定;

所述画布区域内的设备的数量为至少两个时,确定所述至少两个设备中各设备之间的层级属性值,基于所述层级属性值将所述至少两个设备按层级关系显示;所述层级属性值表征两个设备之间的视觉关系;所述层级属性值根据所述至少两个设备中各设备的对齐参照点和各设备的底部占据区域的相对位置关系确定。

6.根据权利要求1或5所述的方法,其特征在于,相应于所述目标体为墙体的情况下,所述基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图,包括:

确定第一锚点和基于第一锚点可绘制模拟墙体的锚点组,基于所述第一锚点、所述锚点组和选择的预设模拟墙体图片生成可缩放矢量图形svg元素,将生成的svg元素插入对应的画布区域。

7.根据权利要求1至6任一所述的方法,其特征在于,所述方法还包括:

将所述空间设备布局图发送至服务器;所述空间设备布局图由所述服务器接收并转换为目标格式的数据并保存;所述目标格式的数据用于被终端获取并转换为对应的空间设备布局图。

8.一种布局图生成装置,其特征在于,所述装置包括:第一处理模块、第二处理模块;其中,

所述第一处理模块,用于确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;

所述第二处理模块,用于基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

9.一种布局图生成装置,其特征在于,所述装置包括:处理器和用于存储能够在处理器上运行的计算机程序的存储器;其中,

所述处理器用于运行所述计算机程序时,执行权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7任一项所述方法的步骤。

技术总结
本发明公开了一种布局图生成方法、装置和存储介质,其中,方法包括:确定画布区域内的至少一个目标体和所述至少一个目标体中各目标体的属性值;所述画布区域内的目标体具有透视效果;基于所述至少一个目标体和所述至少一个目标体中各目标体的属性值,生成包括所述至少一个目标体的空间设备布局图。

技术研发人员:王仕聪;龙涛
受保护的技术使用者:深圳市信锐网科技术有限公司
技术研发日:2020.02.21
技术公布日:2020.06.09

转载请注明原文地址: https://bbs.8miu.com/read-20427.html

最新回复(0)