CN109657171B - 一种基于移动终端和浏览器的网页内容同屏批注方法 - Google Patents
一种基于移动终端和浏览器的网页内容同屏批注方法 Download PDFInfo
- Publication number
- CN109657171B CN109657171B CN201811426734.0A CN201811426734A CN109657171B CN 109657171 B CN109657171 B CN 109657171B CN 201811426734 A CN201811426734 A CN 201811426734A CN 109657171 B CN109657171 B CN 109657171B
- Authority
- CN
- China
- Prior art keywords
- annotation
- point
- screen
- webpage
- misoperation
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/169—Annotation, e.g. comment data or footnotes
Abstract
本发明公开了一种基于移动终端和浏览器的网页内容同屏批注。发明首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。本发明通过筛选误操作批注，节约网络资源，改善用户对于批注讲解端的体验。
Description
技术领域
本发明属于计算机同屏批注显示领域，涉及一种基于移动终端和浏览器的网页内容同屏批注的方法。
背景技术
随着互联网的发展，人们工作学习生活的方式早已渗透了互联网元素，出现了越来越多的互联网+，例如本发明中涉及到的场景，在网络环境下多人协同办公学习，更多的应用到了我们的日常，在这个场景下少不了网页数据同屏显示的问题，当需要一端对显示的网页进行批注讲解时，需要一种技术实现将批注的数据同屏显示到其它设备的浏览器上，这其中能够准确快速的将批注信息同屏到其它设备上是问题的关键，目前实现这一功能解决办法大致分为两类，第一类是将网页数据转为另外一种文件如图片等，再在转化后的文件上进行批注操作，继而将带有批注信息转化后的文件发送给其它设备上进行同屏显示，这种方法优点是可以准确的将批注信息同屏给其它终端浏览器，但同时由于发送给其它终端的是转化后的文件，包含网页信息数据及批注数据，这其中存在冗余的网页数据信息对传输的带宽要求很高，不适合终端数量较多的情况。另一类是将批注信息与网页数据分离，只传输网页上的批注信息，这种方式传输数据量较小，传输速度快，用户体验比较流畅，但由于不同终端设备的屏幕参数存在差异，在同屏显示批注信息时不能很好的保证显示的准确性，即批注信息在网页上的显示有时会出现变形或是错位，现有技术不能够保证，在同一系统终端数量较多时，准确快速的同屏显示网页批注信息，为了解决现有技术的不足，特提出本发明中所述的解决方案。
发明内容
本发明的目的是针对现有技术的不足，提供一种基于移动终端和浏览器的网页内容同屏批注的方法。
本发明的主要思想是，首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。
本发明的具体实现步骤如下：
步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；
步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性。
所述的网页的原点指屏幕左上角的点；
步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注。
步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注(这里认为极小范围内的快速批注为误操作)，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好。
具体实现过程如下：
(1)设批注端显示的网页宽为Width，高为Height；设每笔(每次手指触摸屏幕到抬起即为一笔)批注的笔迹点集序列为Pi，设所有批注操作笔迹序列为S，那么S＝[P1,P2,……，Pn]，其中i＝1、2……n，n为自然数。
(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M0(x/Width，y/Height),将M0放置到序列Pi中，M0即为序列Pi的初始点。
(3)以初始点M0为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真。
(4)监听手指移动事件(这里的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点)，取当下坐标点按照转化方式进行转换后形成点Mi，将Mi追加到序列Pi中。
(5)将点Mi与误操作范围R进行比对，如点Mi落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如Mi落在误操作范围R内，则后续返回到步骤(4)。
(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点Mn,将Mn追加到序列Pi的末尾，作为这笔批注点集的终止点。若此时F为真，则需对Mn与误操作范围R进行判断，如点Mn落在误操作范围R外则将F改为假。
(7)将点集序列Pi追加到批注序列S中，判断判定条件F，如F为真则需判断序列Pi中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。
步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能。
Wpcf：通信服务，采用的Apache的MINA框架为核心进行了二次封装的通信服务。
本发明有益效果如下：
本发明首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。
本发明通过筛选误操作批注，节约网络资源，改善用户对于批注讲解端的体验。
具体实施方式
下面结合实施方式对本发明作进一步说明。
本发明的主要思想是，首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听其上的绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作。
本发明的具体实现步骤如下：
步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；
步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性。
所述的网页的原点指屏幕左上角的点；
步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注。
步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注(这里认为极小范围内的快速批注为误操作)，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好。
具体实现过程如下：
(1)设批注端显示的网页宽为Width，高为Height；设每笔(每次手指触摸屏幕到抬起即为一笔)批注的笔迹点集序列为Pi，设所有批注操作笔迹序列为S，那么S＝[P1,P2,……，Pn]，其中i＝1、2……n，n为自然数。
(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M0(x/Width，y/Height),将M0放置到序列Pi中，M0即为序列Pi的初始点。
(3)以初始点M0为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真。
(4)监听手指移动事件(这里的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点)，取当下坐标点按照转化方式进行转换后形成点Mi，将Mi追加到序列Pi中。
(5)将点Mi与误操作范围R进行比对，如点Mi落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如Mi落在误操作范围R内，则后续返回到步骤(4)。
(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点Mn,将Mn追加到序列Pi的末尾，作为这笔批注点集的终止点。若此时F为真，则需对Mn与误操作范围R进行判断，如点Mn落在误操作范围R外则将F改为假。
(7)将点集序列Pi追加到批注序列S中，判断判定条件F，如F为真则需判断序列Pi中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。
步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能。
Wpcf：通信服务，采用的Apache的MINA框架为核心进行了二次封装的通信服务。
Claims (1)
1.一种基于移动终端和浏览器的网页内容同屏批注方法，其特征在于首先在同一系统下保证各终端等比缩放同屏显示的网页，之后在用户移动端网页页面上层添加一层用于批注涂鸦的绘制图层，在绘制图层上监听绘制操作并存储绘制的笔迹信息，每完成一笔绘制操作，如果绘制的路径满足非误操作规则便将当前存储的信息通过自定义的通信服务发送给服务器端，再由服务器端通过定义的通信服务将信息转发给除这个设备外的其它浏览器端，以实现移动终端和浏览器端网页批注信息同屏显示的操作；
具体实现如下：
步骤一、创建服务连接即各移动终端与服务器端建立wpcf通信服务；
步骤二、将同屏显示的网页在各移动终端设备浏览器上进行等比例缩放的渲染，并使网页的原点与浏览器的原点重合，以保证在接收同屏批注信息时，批注信息显示在网页上不会产生错位，从根本上保证批注信息显示的准确性；
所述的网页的原点指屏幕左上角的点；
步骤三、在显示的网页上层添加一层与网页大小一致，且与网页重合的透明绘制图层，用于显示或进行批注；
步骤四、对绘制图层设置手指触摸屏幕的监听操作，用于记录批注数据；同时需要筛选误操作批注，如果存在误操作的批注，则每次都撤销误操作；如不进行误操作的批注筛选，则向各终端传输批注数据的次数就会增加误操作次数*2，造成网络资源浪费的同时对批注讲解端的用户体验也不是很好；
步骤五、各终端设备通过wpcf通信服务接收到批注信息后，按照网页的宽高将接收到的点集S转化为当前屏幕坐标序列，之后调用Js在网页上层的透明绘制图层进行批注信息的复现，以达到同屏批注的功能；
步骤四具体实现如下：
(1)设批注端显示的网页宽为Width，高为Height；设每笔批注的笔迹点集序列为Pi，设所有批注操作笔迹序列为S，那么S＝[P1,P2,……，Pn]，其中i＝1、2……n，n为自然数；
每次手指触摸屏幕到抬起即为一笔；
(2)监听手指点击屏幕事件，获取当下屏幕坐标点Q(x，y),根据当前显示网页的宽高将点Q(x,y)转化为点M0(x/Width，y/Height),将M0放置到序列Pi中，M0即为序列Pi的初始点；
(3)以初始点M0为原点，同时以屏幕高度的1％为半径设置为误操作范围R，设定是否为误操作批注的判定条件F为真；
(4)监听手指移动事件，取当下坐标点按照转化方式进行转换后形成点Mi，将Mi追加到序列Pi中；
所述的移动事件监听是按照系统设定的固定时间间隔，每隔一个时间间隔便触发一次手指移动事件返回当前手指在屏幕中的坐标点；
(5)将点Mi与误操作范围R进行比对，如点Mi落在误操作范围R外，则将判定条件F设为假，即认为此笔批注是非误操作，后续只需返回步骤(4)即可，直至监听手指抬起事件后跳转到步骤(6)；如Mi落在误操作范围R内，则后续返回到步骤(4)；
(6)监听手指抬起事件，获取当前坐标点按转化方式进行转化设为点Mn,将Mn追加到序列Pi的末尾，作为这笔批注点集的终止点；若此时F为真，则需对Mn与误操作范围R进行判断，如点Mn落在误操作范围R外则将F改为假；
(7)将点集序列Pi追加到批注序列S中，判断判定条件F，如F为真则需判断序列Pi中点的个数，当个数少于10个，则此次批注操作为误操作，即前文提到的范围极小而快的操作，将不会把当前序列S发送给服务器，除此种情况外，认为此次批注操作为非误操作的，则会将序列S交由服务器端分发送给其它各终端设备。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811426734.0A CN109657171B (zh) | 2018-11-27 | 2018-11-27 | 一种基于移动终端和浏览器的网页内容同屏批注方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811426734.0A CN109657171B (zh) | 2018-11-27 | 2018-11-27 | 一种基于移动终端和浏览器的网页内容同屏批注方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109657171A CN109657171A (zh) | 2019-04-19 |
| CN109657171B true CN109657171B (zh) | 2022-05-20 |
Family
ID=66111533
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811426734.0A Active CN109657171B (zh) | 2018-11-27 | 2018-11-27 | 一种基于移动终端和浏览器的网页内容同屏批注方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109657171B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116820792B (zh) * | 2023-08-30 | 2024-01-26 | 路九阳 | 一种应用于网页同屏交流的交互处理方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102609401A (zh) * | 2011-12-26 | 2012-07-25 | 北京大学 | 一种网页批注方法 |
| CN104571521A (zh) * | 2015-01-21 | 2015-04-29 | 京东方科技集团股份有限公司 | 手写记录装置和手写记录方法 |
| CN104679421A (zh) * | 2013-11-29 | 2015-06-03 | 中国移动通信集团公司 | 一种触摸屏边缘的防误触方法和设备 |
| CN105446689A (zh) * | 2015-12-16 | 2016-03-30 | 广州视睿电子科技有限公司 | 远程批注同步的方法与系统 |
| CN108092873A (zh) * | 2017-10-27 | 2018-05-29 | 颜厥护 | 一种即时通讯方法及系统 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104635985B (zh) * | 2015-01-30 | 2017-02-15 | 努比亚技术有限公司 | 移动终端防误触控方法及装置 |
| CN104899361B (zh) * | 2015-05-19 | 2018-01-16 | 华为技术有限公司 | 一种远程操控方法及装置 |
-
2018
- 2018-11-27 CN CN201811426734.0A patent/CN109657171B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102609401A (zh) * | 2011-12-26 | 2012-07-25 | 北京大学 | 一种网页批注方法 |
| CN104679421A (zh) * | 2013-11-29 | 2015-06-03 | 中国移动通信集团公司 | 一种触摸屏边缘的防误触方法和设备 |
| CN104571521A (zh) * | 2015-01-21 | 2015-04-29 | 京东方科技集团股份有限公司 | 手写记录装置和手写记录方法 |
| CN105446689A (zh) * | 2015-12-16 | 2016-03-30 | 广州视睿电子科技有限公司 | 远程批注同步的方法与系统 |
| CN108092873A (zh) * | 2017-10-27 | 2018-05-29 | 颜厥护 | 一种即时通讯方法及系统 |
Non-Patent Citations (1)
| Title |
|---|
| 视屏作业触摸屏指向操作工效学评价方法研究;韩承等;《职业与健康》;20170701(第13期);122-126+130 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109657171A (zh) | 2019-04-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102800065B (zh) | 基于二维码识别跟踪的增强现实设备及方法 | |
| CN105447139B (zh) | 一种数据采集统计方法及其系统、终端、服务设备 | |
| CN105404620A (zh) | 一种表单校验的方法和装置 | |
| CN103309728B (zh) | 异步请求处理方法和设备 | |
| CN104102734B (zh) | 数据展示方法及系统 | |
| CN106549989B (zh) | 一种数据传输方法及其系统、用户终端、应用服务器 | |
| CN109657171B (zh) | 一种基于移动终端和浏览器的网页内容同屏批注方法 | |
| CN109635216A (zh) | 一种移动终端和浏览器的图片进行同屏批注的方法 | |
| CN103678100B (zh) | 终端的应用自动化测试方法及其系统 | |
| CN111694488B (zh) | 一种云手机翻屏控制方法、系统和存储介质 | |
| CN104580552A (zh) | 家庭网关中错误域名解析服务器解析重定向的实现方法 | |
| CN103631563B (zh) | 一种基于全触屏移动终端的操作方法及装置 | |
| CN113127250B (zh) | 一种故障上报方法、装置、电子设备及存储介质 | |
| CN113824627B (zh) | 群聊消息显示方法、装置、电子设备及存储介质 | |
| CN208079095U (zh) | 一种电梯远程信息集成系统 | |
| CN114995675B (zh) | 触控跳点故障的检测方法、电子设备和可读存储介质 | |
| CN114706610A (zh) | 一种业务流程图生成方法、装置、设备及存储介质 | |
| CN110334301A (zh) | 一种页面还原方法及装置 | |
| CN110334142B (zh) | 智能数据采集方法、终端、服务器和交互系统 | |
| CN104035813A (zh) | 跨平台交互的检测方法及装置 | |
| CN104571895B (zh) | 对信息应用中的信息进行调整的方法和设备 | |
| CN109922100B (zh) | 一种信息处理方法、终端及服务器 | |
| CN112486847B (zh) | 错误复现的方法、装置、系统、设备以及存储介质 | |
| US20240005182A1 (en) | Streaming Media Processing Method, Device and Electronic Equipment Based on Inference Service | |
| CN115203599B (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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051 Applicant after: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD. Address before: Room 1406, Hangzhou e-commerce building, 118 Wensan West Road, Xihu District, Hangzhou City, Zhejiang Province, 310013 Applicant before: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051 Patentee after: Zhejiang Wanpeng Digital Intelligence Technology Co.,Ltd. Address before: 12 / F, building 8, No. 19, Jugong Road, Xixing street, Binjiang District, Hangzhou City, Zhejiang Province, 310051 Patentee before: ZHEJIANG WANPENG EDUCATION SCIENCE AND TECHNOLOGY STOCK CO.,LTD. |