CN112083915A - 页面布局方法、装置、电子设备及存储介质 - Google Patents
页面布局方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN112083915A CN112083915A CN202010942680.4A CN202010942680A CN112083915A CN 112083915 A CN112083915 A CN 112083915A CN 202010942680 A CN202010942680 A CN 202010942680A CN 112083915 A CN112083915 A CN 112083915A
- Authority
- CN
- China
- Prior art keywords
- window
- display window
- component
- identifier
- selection operation
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 230000015654 memory Effects 0.000 claims description 31
- 230000004044 response Effects 0.000 claims description 11
- 238000011161 development Methods 0.000 abstract description 15
- 238000012544 monitoring process Methods 0.000 abstract description 11
- 230000000712 assembly Effects 0.000 abstract 2
- 238000000429 assembly Methods 0.000 abstract 2
- 230000006870 function Effects 0.000 description 26
- 238000004891 communication Methods 0.000 description 14
- 238000010586 diagram Methods 0.000 description 9
- 230000001960 triggered effect Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 239000003826 tablet Substances 0.000 description 3
- 230000010354 integration Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000010187 selection method Methods 0.000 description 2
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000007943 implant Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及视频监控技术领域，具体涉及页面布局方法、装置、电子设备及存储介质，其中方法包括响应于目标页面中各个窗口的选择操作；基于所述各个窗口的选择操作，形成至少一个展示窗口；响应于所述至少一个展示窗口对应的组件的选择操作；基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
Description
技术领域
本发明涉及视频监控技术领域，具体涉及页面布局方法、装置、电子设备及存储介质。
背景技术
在监控行业中，常常会通过客户端在PC上进行视频浏览、录像回放等基本操作。但随着监控行业的不断发展，监控的功能所包含的页面展示已不仅仅是监控和录像回放这么简单，常常需要结合不同的行业及使用场景进行差异化的页面呈现。
当前监控客户端软件的页面布局一般采用功能模块划分，使用tab页的方式将各个功能业务模块页面加以区分，各个模块的主体页面样式往往都是固定的。用户想要查看监控画面时，需要切换到视频浏览相关模块，想要录像回放时，又需要通过tab页切换的录像回放相关模块，需要使用其他的业务功能模块还需要重新切换。然而，由于上述的页面布局方法中业务功能模块与功能页面都相对固定，而不同的用户对监控页面可能具有不同的需求，那么基于不同的用户就需要布局不同的页面，导致页面布局的开发效率较低。
发明内容
有鉴于此，本发明实施例提供了一种页面布局方法、装置、电子设备及存储介质，以解决页面布局的开发效率较低的问题。
根据第一方面，本发明实施例提供了一种页面布局方法，包括：
响应于目标页面中各个窗口的选择操作；
基于所述各个窗口的选择操作，形成至少一个展示窗口；
响应于所述至少一个展示窗口对应的组件的选择操作；
基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。
本发明实施例提供的页面布局方法，在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
结合第一方面，在第一方面第一实施方式中，所述基于所述各个窗口的选择操作，形成至少一个展示窗口，包括：
利用所述各个窗口的选择操作，确定所述选择操作对应的选择区域；
基于所述选择区域以及所述各个窗口对应区域的位置关系，确定与所述选择区域相交的窗口；
基于确定出的相交的窗口形成所述展示窗口。
本发明实施例提供的页面布局方法，利用选择操作对应的选择区域与各个窗口对应的区域的位置关系确定展示窗口，即直接利用位置关系进行展示窗口的确定，提高了页面布局的开发效率。
结合第一方面第一实施方式，在第一方面第二实施方式中，所述窗口与容器对象一一对应，所述基于所述各个窗口的选择操作，形成所述至少一个展示窗口，还包括：
对确定出的相交的窗口对应的所述容器对象进行合并，得到所述展示窗口对应的容器对象。
本发明实施例提供的页面布局方法，通过对相交的窗口对应的容器对象进行合并得到展示窗口的容器对象，即，通过合并方式确定展示窗口的容器对象，提高了页面布局的开发效率。
结合第一方面，或第一方面第一实施方式至第二实施方式中任一项，在第一方面第三实施方式中，所述基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容，包括：
获取所述选择操作对应的位置；
利用所述选择操作对应的位置与所述组件的位置，确定选择的组件的标识；其中，所述选择的组件的标识包括功能模块的标识，或视频播放的标识；
根据所述选择的组件的标识，确定所述至少一个展示窗口对应的展示内容。
本发明实施例提供的页面布局方法，通过选择操作对应的位置与各个组件的位置确定选择的组件的标识，即利用位置关系确定展示窗口中的展示内容，提高了页面布局的开发效率；且由于组件的集成，可以实现组件的重复使用，提高了组件的复用性。
结合第一方面第三实施方式，在第一方面第四实施方式中，所述根据所述选择的组件的标识，确定所述至少一个展示窗口对应的展示内容，包括：
响应于选择的组件在所述至少一个展示窗口的释放操作；
获取所述释放操作对应的位置；
利用所述释放操作对应的位置与所述至少一个展示窗口的位置，确定所述选择的组件对应的目标展示窗口；
基于所述目标展示窗口以及所述选择的组件的标识，确定所述目标展示窗口的展示内容。
本发明实施例提供的页面布局方法，通过利用释放操作对应的位置与各个展示窗口的位置确定目标展示窗口及其展示内容，即利用位置关系确定目标展示窗口，提高了页面布局的开发效率。
结合第一方面第四实施方式，在第一方面第五实施方式中，所述目标展示窗口具有对应的容器对象；其中，所述基于所述目标展示窗口以及所述选择的组件的标识，确定所述目标展示窗口的展示内容，包括：
将所述选择的组件的标识传递给所述目标展示窗口对应的容器对象；
利用所述目标展示窗口对应的容器对象判断所述选择的组件的标识；
当所述选择的组件的标识为所述功能模块的标识时，利用所述目标展示窗口对应的容器对象在所述目标展示窗口中创建所述功能模块；
当所述选择的组件的标识为所述视频播放的标识时，将所述选择的组件的标识作为图像采集装置的通道标识，并调取对应的视频源显示在所述目标展示窗口中。
本发明实施例提供的页面布局方法，目标展示窗口对应的容器对象通过对选择的组件的标识进行判断，并基于判断结果创建对应的功能模块或视频播放，即通过容器对象实现目标展示窗口中的展示内容的创建，提高了页面布局的开发效率。
结合第一方面，在第一方面第六实施方式中，所述基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容，还包括：
判断所述至少一个展示窗口是否进入组件就绪状态；
当所述至少一个展示窗口进入所述组件就绪状态时，将所述展示窗口中的组件关联至关闭控件；
响应于所述关闭控件的触发操作；
释放所述展示窗口中的组件及其数据。
本发明实施例提供的页面布局方法，在展示窗口进入组件就绪状态后将其关联至关闭控件，在触发关闭控件之后释放展示窗口中的组件及其数据，实现目标页面中组件的删除或更新等，提高了目标页面的灵活扩展。
根据第二方面，本发明实施例提供了一种页面布局装置，包括：
第一响应模块，用于响应于目标页面中各个窗口的选择操作；
选择模块，用于基于所述各个窗口的选择操作，形成至少一个展示窗口；
第二响应模块，用于响应于所述至少一个展示窗口对应的组件的选择操作；
确定模块，用于基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。
本发明实施例提供的页面布局装置，在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
根据第三方面，本发明实施例提供了一种电子设备，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行第一方面或者第一方面的任意一种实施方式中所述的页面布局方法。
根据第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行第一方面或者第一方面的任意一种实施方式中所述的页面布局方法。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是根据本发明实施例的页面布局方法的流程图；
图2是根据本发明实施例的页面布局方法的流程图；
图3a-图3d是根据本发明实施例的形成展示窗口的示意图；
图4是根据本发明实施例的页面布局方法的流程图；
图5a-图5d是根据本发明实施例的形成展示窗口的组件的示意图；
图6是根据本发明实施例的展示窗口对应的展示内容的示意图；
图7是根据本发明实施例的页面布局装置的结构框图；
图8是本发明实施例提供的电子设备的硬件结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，本发明实施例中的目标页面上展示有多个窗口，以及多个组件。其中，每个窗口以及每个组件均可以进行独立的操作。所述的组件封装有不同的功能，例如，告警状态、人脸识别实时信息、电子地图、视频播放、车辆实时信息或门禁信息中心等等。各个组件是根据监控相关的业务需求，开发出的一个个相对独立的模块，里面包含了业务逻辑，数据分析处理，页面展示等，如：告警状态模块，人脸识别实时信息模块，电子地图模块，视频浏览模块，车辆实时信息模块，门禁信息中心模块等，这些功能模块用来展现服务器和摄像机传输过来的图片、视频和数据。
针对所述的目标页面，用户可以根据需求实现页面的自定义布局。
进一步地，当需要对该目标页面进行更新时，就需要在目标页面中增加或删除相应的组件即可。
根据本发明实施例，提供了一种页面布局方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
在本实施例中提供了一种页面布局方法，可用于电子设备，如电脑、手机、平板电脑等，图1是根据本发明实施例的页面布局方法的流程图，如图1所示，该流程包括如下步骤：
S11，响应于目标页面中各个窗口的选择操作。
电子设备上所显示的目标页面中具有多个窗口，每个窗口均是一个独立的窗口，可以对其进行独立的选择操作。各个窗口的形状可以根据实际情况进行相应的设置，例如，窗口可以是圆形，也可以是矩形，或其他形状等等。
其中，对于目标页面中各个窗口的选择可以是点选，也可以是框选等等。例如，可以连续点击选择多个窗口，也可以通过框选的方式选择多个窗口，在此对目标页面中各个窗口的选择方式并不做任何限制。
当用户在对目标页面进行选择操作时，电子设备就会响应于该选择操作，并执行下述S12。
S12，基于各个窗口的选择操作，形成至少一个展示窗口。
电子设备针对用户对各个窗口的选择操作，对选择的窗口进行合并得到至少一个展示窗口。例如，在目标页面上显示有4*4个窗口，用户通过第一次选择操作，选择了第一行的四个窗口，并对其进行合并操作，那么第一行的4个窗口通过合并之后，就得到第一个展示窗口；用户通过第二次选择操作，选择了剩余三行的12个窗口，电子设备对选中的窗口进行合并操作，得到第二个展示窗口。
S13，响应于至少一个展示窗口对应的组件的选择操作。
如上文所述，在目标组件中集成有用于实现不同功能的组件。用户可以依次为各个展示窗口选择相应的组件，也可以是在选择组件之后再确定该组件对应的展示窗口等等。
用户可以将选择的组件拖曳至展示窗口中，也可以将选择的组件复制至展示窗口中，不论用户采用何种选择方式，电子设备响应于用户对至少一个展示窗口对应的组件的选择操作，执行下述S14。
S14，基于组件的选择操作，确定至少一个展示窗口对应的展示内容。
电子设备在选择出相应的组件之后，可以建立选择的组件与展示窗口的对应关系。电子设备利用各个展示窗口与组件的对应关系，就可以确定各个展示窗口对应的展示内容。
例如，当展示窗口对应的组件为视频播放时，电子设备可以在展示窗口内部创建一个控件窗口，将该控件窗口的窗口句柄传递给解码器进行视频解码显示；当展示窗口对应的组件为功能模块时，电子设备可以利用QtQucik的qml开发具体的业务模块，也可以是开发html页面，利用WebEngineView将html嵌入到窗口中，使用跨域的方式，通过ajax与设备端进行通信。
本实施例提供的页面布局方法，在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
在本实施例中提供了一种页面布局方法，可用于电子设备，如电脑、手机、平板电脑等，图2是根据本发明实施例的页面布局方法的流程图，如图2所示，该流程包括如下步骤：
S21，响应于目标页面中各个窗口的选择操作。
图3a示出了目标页面的示意图，所述的目标页面上显示有4个矩形窗口以及多个组件。当用户对图3a中的目标页面进行编辑时，电子设备上显示的页面如图3b所示，其提供了4画面、9画面、16画面、25画面、36画面、49画面以及64画面的基础画面风格供用户选择。同时在此基础上，电子设备还支持用户在此页面上进行其他选择操作，如上文所述的点选或框选。例如，用户可以先在上述几种基础画面风格中选择一种，再基于选择结果进行其他的选择操作。
S22，基于各个窗口的选择操作，形成至少一个展示窗口。
具体地，上述S22包括如下步骤：
S221，利用各个窗口的选择操作，确定所选择操作对应的选择区域。
在本实施例中，以选择操作为框选为例。如图3c所示，电子设备响应于用户的选择操作，即在页面上显示16画面的窗口；此外，用户可以拖动鼠标进行框选，例如，用户通过框选在页面上形成一个矩形区域，即所述的选择区域。
如图3c所示，电子设备响应于用户的框选操作，在页面上显示该框选操作对应的选择区域。具体地，当用户在页面上进行框选时，电子设备在编辑区域覆盖一个透明的Windows窗口，以表示用户的框选区域。
其中，在整个页面中会有一个鼠标响应区，当鼠标按下后，电子设备开始在页面上绘制相应的选择区域，并实时记录当前鼠标的位置。当电子设备检测到鼠标松开时，鼠标响应区会上报鼠标松开的位置。电子设备可以利用Qt的Canvas画布绘制一个矩形框，用于表示用户框选的区域。
S222，基于选择区域以及各个窗口对应区域的位置关系，确定与选择区域相交的窗口。
由于电子设备记录了选择区域的位置，那么就可以将选择区域的位置与各个窗口对应区域的位置进行比较，确定与选择区域相交的窗口。例如，如图3c所示，选择区域与页面中的4个窗口相交。
S223，基于确定出的相交的窗口形成展示窗口。
电子设备在确定出与选择区域相交的窗口之后，将相交的窗口进行合并形成展示窗口。图3d示出了图3c中相交的4个窗口的合并结果。
作为本实施例的一种可选实施方式，目标页面中的每个窗口均对应于一个容器对象，当电子设备在上述S223中对相交的窗口进行合并时，其也对确定出的相交的窗口对应的容器对象进行合并，得到展示窗口对应的容器对象。
具体地，图3a中的每个窗口内，都包含了一个容器对象，即，MonitorVideoWnd对象，作为承载功能模块的容器。在容器对象中记录了其对应的窗口的左上和右下角的坐标点。用户通过对窗口进行框选的操作后，电子设备响应于该操作对选中的窗口进行合并，从而实现对目标页面中容器的大小和数量的编辑。例如，在对窗口进行合并后，容器的面积会相应增大，容器的数量就会相应的减少，因此，可以实现对目标页面中容器的大小和数量的编辑。电子设备在对各个容器进行编辑后，各个容器对象的坐标将重新调整，而不需要的容器也会自动隐藏。
电子设备通过多次执行上述S21-S22，就可以在页面上形成满足用户需求的展示窗口。
S23，响应于至少一个展示窗口对应的组件的选择操作。
详细请参见图1所示实施例的S13，在此不再赘述。
S24，基于组件的选择操作，确定至少一个展示窗口对应的展示内容。
详细请参见图1所示实施例的S14，在此不再赘述。
本实施例提供的页面布局方法，在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
在本实施例中提供了一种页面布局方法，可用于电子设备，如电脑、手机、平板电脑等，图4是根据本发明实施例的页面布局方法的流程图，如图4所示，该流程包括如下步骤：
S31，响应于目标页面中各个窗口的选择操作。
详细请参见图2所示实施例的S21，在此不再赘述。
S32，基于各个窗口的选择操作，形成至少一个展示窗口。
详细请参见图2所示实施例的S22，在此不再赘述。
S33，响应于至少一个展示窗口对应的组件的选择操作。
如图5a所示，如图5a示出了经过上述S32处理后的目标页面。其中，在目标页面中还包括组件列表①、画面风格模板②以及操作区域③。在组件列表①的设备列表中展示有多个视频源以及小工具，所述的视频源即网络摄像机，小工具即各个功能模块。在操作区域③中，用户可以修改当前Tab页面的标题，针对当前操作进行保存和回撤操作。
在组件列表中展示有多种不同类型的组件，如图5b所示，用户可以通过鼠标对各个组件进行选择操作。在用户选择某一组件之后，电子设备响应于用户的选择操作。
其中，如上文所述，用户可以先确定展示窗口，再在组件列表中进行组件的选择操作；也可以是先在组件列表中进行组件的选择操作，再将选中的组件拖到展示窗口中。电子设备响应于用户的选择操作，即可得到各个展示窗口对应的组件。
S34，基于组件的选择操作，确定至少一个展示窗口对应的展示内容。
在本实施例中，以用户选中组件之后，将选中的组件拖到展示窗口中为例。具体地，上述S34包括如下步骤：
S341，获取选择操作对应的位置。
电子设备在响应于组件的选择操作之后，获取选择操作对应的位置。例如，用户通过鼠标对组件进行选择，电子设备获取鼠标按下的位置，以利用获取到的位置确定选中的组件。
S342，利用选择操作对应的位置与组件的位置，确定选择的组件的标识。
其中，所述选择的组件的标识包括功能模块的标识，或视频播放的标识。
电子设备在获取到选择操作对应的位置之后，利用获取到的位置与各个组件的位置，确定选中的组件。每个组件均对应有一个标识，后续电子设备利用该标识就可以确定相应的组件。
组件的标识包括功能模块的标识或视频播放的标识，在本实施例中组件的标识主要包括两种，即功能模块的标识或视频播放的标识。当组件的标识对应为功能模块的标识时，该组件的标识可以用组件的类型表示；当组件的标识对应为视频播放的标识时，该组件的标识可以用ID表示。其中，ID和类型是互斥的，对于同一个容器窗口来说，要么用来浏览视频源，要么呈现功能模块，二者不能同时呈现。
S343，根据选择的组件的标识，确定至少一个展示窗口对应的展示内容。
电子设备在上述S343中确定选择的组件的标识之后，利用选择的组件与展示窗口的对应关系，在展示窗口中显示相应的展示内容。
具体地，上述S343包括以下步骤：
(1)响应于选择的组件在至少一个展示窗口的释放操作。
用户拖动选择组件在相应的展示窗口中进行释放，电子设备响应于该操作过程，可以产生一个可以拖动的浮动窗口，用户将浮动窗口拖动到容器窗口内。
(2)获取释放操作对应的位置。
当用户松开鼠标之后，电子设备获取释放操作对应的位置。
(3)利用释放操作对应的位置与至少一个展示窗口的位置，确定选择的组件对应的目标展示窗口。
电子设备在获取到释放操作对应的位置之后，将该位置与各个展示窗口对应的区域进行比较，以确定释放点落在哪个展示窗口内，从而确定选择的组件对应的目标展示窗口。当确定出目标展示窗口之后，将浮动窗口记录的对应组件的标识传递给容器窗口。
(4)基于目标展示窗口以及选择的组件的标识，确定目标展示窗口的展示内容。
电子设备在确定出目标展示窗口及其对应的组件之后，利用选择组件的标识，确定目标展示窗口的展示内容。当用户有选择的创建一个模块时，MonitorVideoWnd对象会基于传递的组件的标识，利用Qt的创建组件函数，即createComponent函数，将预先实现好的组件创建载入到对应的目标展示窗口中。
例如，如图5c以及5d所示，电子设备在相应的展示页面中形成有组件。
作为本实施例的一种可选实施方式，所述目标展示窗口具有对应的容器对象。上述步骤(4)包括如下步骤：
4.1)将选择的组件的标识传递给目标展示窗口对应的容器对象。
电子设备将选择组件的标识传递给目标展示窗口的容器对象，以使得目标窗口的容器对象知晓应该创建何种功能模块或播放何种视频。
4.2)利用目标展示窗口对应的容器对象判断选择的组件的标识。
当选择的组件的标识为功能模块的标识时，执行步骤4.3)；当选择的组件的标识为视频播放的标识时，执行步骤4.4)。
4.3)利用目标展示窗口对应的容器对象在目标展示窗口中创建功能模块。
当电子设备确定目标展示窗口对应的组件的标识为功能模块的标识时，目标展示窗口将创建该功能模块，并呈现在目标展示窗口中。
4.4)将选择的组件的标识作为图像采集装置的通道标识，并调取对应的视频源显示在目标展示窗口中。
当电子设备确定目标展示窗口对应的组件的标识为视频播放的标识时，将标识作为图像采集装置的通道标识，并调取相应的视频源呈现在目标展示窗口中。
当电子设备对目标页面编辑完成之后，在相应的展示窗口向用户展示设置后的效果，例如，如图6所示，在各个展示窗口显示相应的展示内容。每个展示窗口，其对应的容器对象根据编辑时得到的组件的标识，开始分别创建各自的视频浏览区域和业务功能模块。其中，各个容器窗口根据用户的选择，可以呈现摄像机的视频源画面，也可以呈现业务模块的展示界面，如电子地图，人脸识别实时信息，车辆实时信息，客流统计等。容器对象利用Qt.createComponent开始动态的创建由qml编写的各个功能模块，使用html开发的业务功能模块，由qml对象中的WebEngineView负责加载呈现。各个qml模块都使用锚定位，保证模块的尺寸与容器窗口的尺寸一致。
具体地，整个页面同时将视频窗口，功能模块页面和HTML网页同时部署在同一个Tab页面中，并且通过QT C++、qml中的信号与槽、QtWebChannel实现了各个模块之间的松耦合交互。有了信号与槽的编程机制，在Qt中处理界面各个组件的交互操作时变得更加直观和简单。其中，与qml之间的通信，通过emit关键字来发射信号，qml文件中Connections组件，来建立一个与发送对象对应的接收槽，用来接收信号。对于qml与html页面之间的通信，首先实现一个继承于QObject的类，接着给本地应用的网页载体QWebEnginePage对象注册通信类对象，html页面实现中引入qwebchannel.js，创建html的QWebChannel对象并与本地应用的通信类对象进行关联，最终实现html页面能够直接访问通信类的方法与本地应用进行通信。
本实施例提供的页面布局方法，目标展示窗口对应的容器对象通过对选择的组件的标识进行判断，并基于判断结构创建对应的功能模块或视频播放，即通过容器对象实现目标展示窗口中的展示内容，提高了页面布局的开发效率。由于自定义布局的实现，加上信号与槽的机制，业务功能模块的布局与整合变得更加简单，开发人员只需要实现自己的业务单元，将其作为小组件的形式植入到程序中。此方案可以快速的为客户定制出一个新的功能或解决方案。
作为本实施例的一种可选实施方式，上述S33还包括如下步骤：
(1)判断至少一个展示窗口是否进入组件就绪状态。
当对展示窗口编辑完成之后，该展示窗口就进入组件就需状态，即进入Component.Ready状态。其中，在电子设备中可以创建一个监视线程，以确定展示窗口是否进入组件就绪状态。当至少一个展示窗口进入所述组件就绪状态时，执行步骤(2)；否则，继续执行步骤(1)。
(2)将展示窗口中的组件关联至关闭控件。
电子设备在确定展示窗口进入组件就绪状态之后，将该展示窗口中的组件关联至关闭控件，即对该动态创建的组件connect一个关闭信号。
(3)响应于关闭控件的触发操作。
电子设备实时监听该各个展示窗口对应的关闭控件是否被触发，当关闭控件被触发时，电子设备响应于该操作执行下述步骤(4)。
例如，在展示窗口中的组件创建好后，在每个展示窗口的右上方都会有一个关闭按钮，当用户点击关闭按钮后，意味着用户想要将该组件从展示窗口中删除，这是关闭控件被触发。
(4)释放展示窗口中的组件及其数据。
在电子设备监测到展示窗口中的关闭控件被触发时，开始释放创建的组件及其数据，以删除组件。当组件删除之后，用户可以通过菜单选择在展示窗口中选择其他的组件呈现其中，从而实现目标页面中组件的更新。
基于上面所述，通过对页面的自定义布局，实现功能页面的添加、删除、修改、自定义页面的保存等功能。
在本实施例中还提供了一种页面布局装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
本实施例提供一种页面布局装置，如图7所示，包括：
第一响应模块41，用于响应于目标页面中各个窗口的选择操作。
选择模块42，用于基于所述各个窗口的选择操作，形成至少一个展示窗口。
第二响应模块43，用于响应于所述至少一个展示窗口对应的组件的选择操作。
确定模块44，用于基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。
本实施例提供的页面布局装置，在目标页面中集成有多个组件，通过自定义布局的方式形成展示窗口以及展示窗口对应的组件，可以在目标页面中根据用户需求显示相应的内容，提高了页面布局的开发效率。
本实施例中的页面布局装置是以功能单元的形式来呈现，这里的单元是指ASIC电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。
上述各个模块的更进一步的功能描述与上述对应实施例相同，在此不再赘述。
本发明实施例还提供一种电子设备，具有上述图7所示的页面布局装置。
请参阅图8，图8是本发明可选实施例提供的一种电子设备的结构示意图，如图8所示，该电子设备可以包括：至少一个处理器51，例如CPU(Central Processing Unit，中央处理器)，至少一个通信接口53，存储器54，至少一个通信总线52。其中，通信总线52用于实现这些组件之间的连接通信。其中，通信接口53可以包括显示屏(Display)、键盘(Keyboard)，可选通信接口53还可以包括标准的有线接口、无线接口。存储器54可以是高速RAM存储器(Random Access Memory，易挥发性随机存取存储器)，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器54可选的还可以是至少一个位于远离前述处理器51的存储装置。其中处理器51可以结合图7所描述的装置，存储器54中存储应用程序，且处理器51调用存储器54中存储的程序代码，以用于执行上述任一方法步骤。
其中，通信总线52可以是外设部件互连标准(peripheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。通信总线52可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
其中，存储器54可以包括易失性存储器(英文：volatile memory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)，硬盘(英文：hard diskdrive，缩写：HDD)或固态硬盘(英文：solid-state drive，缩写：SSD)；存储器54还可以包括上述种类的存储器的组合。
其中，处理器51可以是中央处理器(英文：central processing unit，缩写：CPU)，网络处理器(英文：network processor，缩写：NP)或者CPU和NP的组合。
其中，处理器51还可以进一步包括硬件芯片。上述硬件芯片可以是专用集成电路(英文：application-specific integrated circuit，缩写：ASIC)，可编程逻辑器件(英文：programmable logic device，缩写：PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(英文：complex programmable logic device，缩写：CPLD)，现场可编程逻辑门阵列(英文：field-programmable gate array，缩写：FPGA)，通用阵列逻辑(英文：generic arraylogic,缩写：GAL)或其任意组合。
可选地，存储器54还用于存储程序指令。处理器51可以调用程序指令，实现如本申请图1、2以及4实施例中所示的页面布局方法。
本发明实施例还提供了一种非暂态计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的页面布局方法。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard DiskDrive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。
虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。
Claims (10)
1.一种页面布局方法，其特征在于，包括：
响应于目标页面中各个窗口的选择操作；
基于所述各个窗口的选择操作，形成至少一个展示窗口；
响应于所述至少一个展示窗口对应的组件的选择操作；
基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。
2.根据权利要求1所述的方法，其特征在于，所述基于所述各个窗口的选择操作，形成至少一个展示窗口，包括：
利用所述各个窗口的选择操作，确定所述选择操作对应的选择区域；
基于所述选择区域以及所述各个窗口对应区域的位置关系，确定与所述选择区域相交的窗口；
基于确定出的相交的窗口形成所述展示窗口。
3.根据权利要求2所述的方法，其特征在于，所述窗口与容器对象一一对应，所述基于所述各个窗口的选择操作，形成所述至少一个展示窗口，还包括：
对确定出的相交的窗口对应的所述容器对象进行合并，得到所述展示窗口对应的容器对象。
4.根据权利要求1-3中任一项所述的方法，其特征在于，所述基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容，包括：
获取所述选择操作对应的位置；
利用所述选择操作对应的位置与所述组件的位置，确定选择的组件的标识；其中，所述选择的组件的标识包括功能模块的标识，或视频播放的标识；
根据所述选择的组件的标识，确定所述至少一个展示窗口对应的展示内容。
5.根据权利要求4所述的方法，其特征在于，所述根据所述选择的组件的标识，确定所述至少一个展示窗口对应的展示内容，包括：
响应于选择的组件在所述至少一个展示窗口的释放操作；
获取所述释放操作对应的位置；
利用所述释放操作对应的位置与所述至少一个展示窗口的位置，确定所述选择的组件对应的目标展示窗口；
基于所述目标展示窗口以及所述选择的组件的标识，确定所述目标展示窗口的展示内容。
6.根据权利要求5所述的方法，其特征在于，所述目标展示窗口具有对应的容器对象；其中，所述基于所述目标展示窗口以及所述选择的组件的标识，确定所述目标展示窗口的展示内容，包括：
将所述选择的组件的标识传递给所述目标展示窗口对应的容器对象；
利用所述目标展示窗口对应的容器对象判断所述选择的组件的标识；
当所述选择的组件的标识为所述功能模块的标识时，利用所述目标展示窗口对应的容器对象在所述目标展示窗口中创建所述功能模块；
当所述选择的组件的标识为所述视频播放的标识时，将所述选择的组件的标识作为图像采集装置的通道标识，并调取对应的视频源显示在所述目标展示窗口中。
7.根据权利要求1所述的方法，其特征在于，所述基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容，还包括：
判断所述至少一个展示窗口是否进入组件就绪状态；
当所述至少一个展示窗口进入所述组件就绪状态时，将所述展示窗口中的组件关联至关闭控件；
响应于所述关闭控件的触发操作；
释放所述展示窗口中的组件及其数据。
8.一种页面布局装置，其特征在于，包括：
第一响应模块，用于响应于目标页面中各个窗口的选择操作；
选择模块，用于基于所述各个窗口的选择操作，形成至少一个展示窗口；
第二响应模块，用于响应于所述至少一个展示窗口对应的组件的选择操作；
确定模块，用于基于所述组件的选择操作，确定所述至少一个展示窗口对应的展示内容。
9.一种电子设备，其特征在于，包括：
存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行权利要求1-7中任一项所述的页面布局方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行权利要求1-7中任一项所述的页面布局方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010942680.4A CN112083915A (zh) | 2020-09-09 | 2020-09-09 | 页面布局方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010942680.4A CN112083915A (zh) | 2020-09-09 | 2020-09-09 | 页面布局方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112083915A true CN112083915A (zh) | 2020-12-15 |
Family
ID=73733003
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010942680.4A Pending CN112083915A (zh) | 2020-09-09 | 2020-09-09 | 页面布局方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112083915A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641277A (zh) * | 2021-07-01 | 2021-11-12 | 北京房江湖科技有限公司 | 菜单栏实现方法和系统、计算机程序产品及可读存储介质 |
| CN114201253A (zh) * | 2021-11-30 | 2022-03-18 | 北京奕斯伟计算技术有限公司 | 标签页调用方法、装置、电子设备及计算机可读存储介质 |
| CN114205535A (zh) * | 2021-11-09 | 2022-03-18 | 北京新奥特图腾科技有限公司 | 一种信息的显示方法和装置 |
| CN114237457A (zh) * | 2021-12-17 | 2022-03-25 | 上海商汤科技开发有限公司 | 一种显示方法和装置、电子设备及存储介质 |
| US12020655B2 (en) | 2021-08-16 | 2024-06-25 | Beijing Boe Optoelectronics Technology Co., Ltd. | Method for controlling display apparatus, display apparatus, device, and computer storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101025738A (zh) * | 2006-02-21 | 2007-08-29 | 广州保税区天懋数码电子商务有限公司 | 一种免模板动态网站生成方法 |
| CN109085977A (zh) * | 2018-08-10 | 2018-12-25 | 武汉优品楚鼎科技有限公司 | 一种自定义行情功能模块界面展示的方法、系统及装置 |
| CN109614424A (zh) * | 2018-11-28 | 2019-04-12 | 南京赛克蓝德网络科技有限公司 | 页面布局生成方法、装置、计算设备和介质 |
-
2020
- 2020-09-09 CN CN202010942680.4A patent/CN112083915A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101025738A (zh) * | 2006-02-21 | 2007-08-29 | 广州保税区天懋数码电子商务有限公司 | 一种免模板动态网站生成方法 |
| CN109085977A (zh) * | 2018-08-10 | 2018-12-25 | 武汉优品楚鼎科技有限公司 | 一种自定义行情功能模块界面展示的方法、系统及装置 |
| CN109614424A (zh) * | 2018-11-28 | 2019-04-12 | 南京赛克蓝德网络科技有限公司 | 页面布局生成方法、装置、计算设备和介质 |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641277A (zh) * | 2021-07-01 | 2021-11-12 | 北京房江湖科技有限公司 | 菜单栏实现方法和系统、计算机程序产品及可读存储介质 |
| CN113641277B (zh) * | 2021-07-01 | 2024-03-08 | 贝壳找房(北京)科技有限公司 | 菜单栏实现方法和系统、计算机程序产品及可读存储介质 |
| US12020655B2 (en) | 2021-08-16 | 2024-06-25 | Beijing Boe Optoelectronics Technology Co., Ltd. | Method for controlling display apparatus, display apparatus, device, and computer storage medium |
| CN114205535A (zh) * | 2021-11-09 | 2022-03-18 | 北京新奥特图腾科技有限公司 | 一种信息的显示方法和装置 |
| CN114205535B (zh) * | 2021-11-09 | 2023-12-19 | 图腾视界(广州)数字科技有限公司 | 一种信息的显示方法和装置 |
| CN114201253A (zh) * | 2021-11-30 | 2022-03-18 | 北京奕斯伟计算技术有限公司 | 标签页调用方法、装置、电子设备及计算机可读存储介质 |
| CN114201253B (zh) * | 2021-11-30 | 2024-05-17 | 北京奕斯伟计算技术股份有限公司 | 标签页调用方法、装置、电子设备及计算机可读存储介质 |
| CN114237457A (zh) * | 2021-12-17 | 2022-03-25 | 上海商汤科技开发有限公司 | 一种显示方法和装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112083915A (zh) | 页面布局方法、装置、电子设备及存储介质 | |
| DK180452B1 (en) | USER INTERFACES FOR RECEIVING AND HANDLING VISUAL MEDIA | |
| CN109164964B (zh) | 内容分享方法、装置、终端及存储介质 | |
| CN111008520B (zh) | 一种批注方法、装置、终端设备及存储介质 | |
| CN109101157B (zh) | 侧边栏图标设置方法、装置、终端及存储介质 | |
| CN108089786A (zh) | 用户界面显示方法、装置、设备及存储介质 | |
| WO2022205798A1 (zh) | 多媒体信息编辑方法及其装置 | |
| CN111770288B (zh) | 视频编辑方法、装置、终端及存储介质 | |
| US20240111473A1 (en) | Distributed display method and terminal for application interface | |
| CN111612873A (zh) | Gif图片生成方法、装置及电子设备 | |
| US20220417417A1 (en) | Content Operation Method and Device, Terminal, and Storage Medium | |
| CN110825289A (zh) | 操作用户界面的方法、装置、电子设备及存储介质 | |
| CN114095776B (zh) | 屏幕录制方法及电子设备 | |
| KR20140052697A (ko) | 저장 용량을 관리하는 단말 장치 및 그 관리방법 | |
| CN107566632A (zh) | 输入法界面显示方法、装置及终端 | |
| CN114363687B (zh) | 三维场景互动视频创建方法及创建装置 | |
| CN110286971B (zh) | 处理方法及系统、介质和计算设备 | |
| CN112752132A (zh) | 漫画图片弹幕显示方法、装置、介质及电子设备 | |
| WO2017012473A1 (zh) | 一种提供对象信息的方法和设备 | |
| CN114518822A (zh) | 应用图标管理方法、装置和电子设备 | |
| WO2024103958A1 (zh) | 基于多设备的影像素材处理方法及相关装置 | |
| KR20180027917A (ko) | 디스플레이장치 및 그 제어방법 | |
| EP4354883A1 (en) | Video processing method and apparatus, and electronic device | |
| CN112416486A (zh) | 信息引导方法、装置、终端及存储介质 | |
| CN107885807B (zh) | 一种文件保存方法、装置、智能平板和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201215 |