a real-time collaborative graphical editing system supporting multi

Download PDF
0 downloads 0 Views 2MB Size Report
Comment
the concurrent editing of the same documents by multi-clients. Keywords ... For example, in face of a complex ..... swaps the execution order of the two input ...
Multimed Tools Appl DOI 10.1007/s11042-017-5242-4

CoWebDraw: a real-time collaborative graphical editing system supporting multi-clients based on HTML5 Liping Gao 1,2 & Dongfang Gao 1 & Naixue Xiong 1 & Changhoon Lee 3

Received: 17 August 2016 / Revised: 23 April 2017 / Accepted: 20 September 2017 # Springer Science+Business Media, LLC 2017

Abstract Real-time collaborative graphical editing system allows a group of users simultaneously to view and edit the shared graphical documents from geographically dispersed sites connected by networks. The strategy of consistency maintenance is the key technique to ensure correctness in this editing system. This paper maps the two-dimensional drawing area into the linear structure in the real-time collaborative graphical editing system in the Web environment, and transforms the two-dimensional graphical operations to the linear operations. Based on the above, this paper improves the ABST algorithm to be suitable for this new environment. In order to verify the correctness and feasibility of the algorithm, this paper develops the real-time collaborative graphical editing system CoWebDraw based on Web, which adopts the HTML5 WebSocket protocol to achieve the real-time transformation of the information. In this system, geographically dispersed users can edit the shared graphical documents through web browsers. In the mobile internet era, the CoWebDraw system supports the concurrent editing of the same documents by multi-clients. Keywords Real-time collaboration . Consistency maintenance . Graphical editing . HTML5 . WebSocket

* Liping Gao [email protected]

1

School of Optical-Electrical and Computer Engineering, University of Shanghai for Science and Technology, Shanghai 200093, China

2

Shanghai Key Laboratory of Data Science, Fudan University, Shanghai, China

3

Department of Computer Science and Engineering, Seoul National University of Science and Technology, Nowon-gu, South Korea

Multimed Tools Appl

1 Introduction With the development of the mobile internet, it is common for people to work together under the help of the collaborative tools [1]. Collaborative systems allow a group of people from geographically dispersed locations to communicate and cooperate with each other through computer networks. There are many types of collaborative systems, such as collaborative text editing system [3, 15], collaborative graphical editing system [4, 19], and so forth. Users can edit the shared text documents concurrently by collaborative text editing system, while they can also edit the shared graphical documents concurrently by collaborative graphical editing system. Graph is much easier than word to be understood for people. For example, in face of a complex problem, people prefer using a graph to word to demonstrate and analyze it. Therefore, it is greatly significant to research on the collaborative graphical editing system. According to the previous researches [8, 21, 22], the collaborative graphical editing systems can be classified into three types: object-based model, bitmap-based model, and hybrid model. In the object-based model, the basic drawing unit is the graphical object (Such as Circle, Rectangle, etc.), such as AutoCAD, Microsoft Visio, etc. In the bitmap-based model, the basic drawing unit is the pixel, such as Microsoft Paint, etc. In the hybrid model, such systems include CorelDraw, Adobe Photoshop, etc. Although these systems have complete functions, they can only support the single-user application and cannot meet the demand of the concurrent editing of a shared graphical document. In the mobile internet era, there are many types of mobile devices, such as pad, phone and so on. With the development of mobile internet and cloud computing [16, 25], the collaborative work has become increasingly important for people. Therefore, it is also increasingly significant to research on the real-time and cross-platform collaborative editing systems. The HTML5 WebSocket protocol is a real-time communication protocol, it has been proposed in recent years. Thus, the development of the real-time collaborative system based on Web becomes possible. Nowadays, more and more researchers began to pay attention to this hot topic [2, 6, 7, 9, 10, 12, 23, 24]. Because of the complexity of the mobile network [5, 13, 18], a stable and efficient algorithm for the real-time collaborative editing system in this environment is badly in need. ABST is a fast operation sequence transformation algorithm based on admissibility [17], and its time complexity is only O(n), which makes it suitable to be adapted from the text editing field to the mobile devices, such as phone, pad, etc. In this paper, the twodimensional drawing area of the graphical editing system is mapped into the linear structure and the two-dimensional graphical operations are also transformed to the linear operations. Based on the above, in this paper, the ABST algorithm is improved to realize consistency maintenance of the real-time collaborative graphical editing system in the Web environment. Besides, the HTML5 WebSocket protocol is adopted to achieve the real-time transformation of the information. In order to verify the correctness and feasibility of the algorithm, the real-time collaborative graphical editing system CoWebDraw is developed based on Web. With this system, geographically dispersed users can edit the shared graphical documents concurrently through web browsers. It is efficiency and convenience to cooperate with each other for users by the system. The rest of this paper is organized as follows. Firstly, the definitions and related work are introduced in Section II. Secondly, the strategy of consistency maintenance is presented in Section III. Thirdly, the design and analysis of algorithms are introduced in Section IV. Then, the components and functions of the CoWebDraw system are presented in Section V. Finally, the conclusions and the future network are summarized in Section VI.

Multimed Tools Appl

2 Related work and definitions 2.1 Related work Collaborative systems allow a group of users to work together collaboratively from different locations by the computer network. The strategy of consistency maintenance is the key technique to ensure correctness in the collaborative editing systems. Traditionally, according to the previous researches, the strategies of consistency maintenance include lock mechanism [4, 14], multi-version technique [22], serialization technique [11] and operation transformation technique, etc. In the real-time collaborative editing system based on Web, there are also many strategies to achieve the consistency. For example, in the study of [12], the strategy of lock mechanism is used for maintaining consistency in the collaborative annotation system based on Web. Although, the lock mechanism technique has the advantage of simplicity, it reduces the system responsiveness dramatically. In the study of [2], the Etherpad system is an online real-time collaborative text editing system, and it adopts the operation transformation technique to achieve the consistency. Operation transformation technique is widely used in the real-time collaborative text editing system, but it is rare used in the real-time collaborative graphical editing system, especially in the system based on Web. In the study of [10], a new chat-driven architecture for collaborative rich-text and media editing and consuming is introduced, but it is less efficient than the strategy of the operation transformation. In the real-time collaborative editing system based on Web, real-time, stability and efficiency are the necessary conditions. According to the past study [17], the ABST algorithm is greatly efficient, but it is only used in the real-time collaborative text editing system based on the linear structure. In order to adapt it to the real-time collaborative graphical editing environment, some improvements must be made to achieve this. This paper maps the two-dimensional drawing area into the linear structure, adopts the strategy of operation transformation for the control process of the collaboration, and improves the ABST algorithm to be suitable for this new environment. Finally, in order to achieve the real-time transformation of the information, the HTML5 WebSocket protocol is adopted to achieve this. Algorithm details will be described in Section IV.

2.2 Definition of graphical document and graphical object The graphical document is a two-dimensional drawing area, which can be described as PAINT = {START, END, DOC}, where START and END are the start and end coordinates of the drawing area, and the DOC is a linear structure which stores all graphical objects. Assume that the START and END are (0,0) and (16,16) respectively, and there are two graphical objects OBJ1, OBJ2 in DOC. Then, the drawing area can be denoted as PAINT = {(0, 0), (16, 16), {OBJ1, OBJ2}}, which is shown in Fig. 1. In the object-based model, the basic drawing unit is the graphical object, which can be Line, Rectangle, Circle, Triangle, etc. Each graphical object has its own properties, such as coordinate, color and so on. The object-based graphical editing system is easy to be designed and maintained. And the graphical objects in the system can be stored

Multimed Tools Appl Fig. 1 The graphical document with two graphical objects

and managed with uniform manner. Thus, this paper adopts the object-based model. The graphical object is defined as OBJ = {TYPE, ATTR, Z-INDEX}, where: TYPE ATTR

POINTS

ZINDEX

indicates the type of the graphical object, which may be Line, Circle, Rectangle, Triangle, Curve, etc. indicates the attribution object of the graphical object, which is defined as ATTR = {FILL_COLOR, TRANS, POINTS}. For the simplicity, this paper only considers three attribution types: FILL_COLOR, TRANS and POINTS, with FILL_COLOR and TRANS denoting the fill color and the transparency of the graphical objects respectively. The value of TRANS is in the range of [0,1], with 0 indicating opaque while 1 indicating transparent. indicates a point array. It stores all the coordinates of the graphical object in the drawing area. These coordinate points can locate a graphical object in the drawing area. For example, we can use two points to represent a line, and use n points to represent a curve. indicates the display level of the graphical object in the z-axis. The z-axis is perpendicular to the drawing area. From above, it’s known that POINTS indicates the location of the graphical objects in the drawing area. However, the Z-INDEX value indicates the position of the objects in the z-axis. The paper makes the following regulations: (1) In the z-axis, each display level has only one graphical object. (2) The bigger the Z-INDEX value, the higher the priority of the graphical object. That’s to say, when two objects’ drawing areas overlap, the drawing effect of the object with the higher priority will cover that of the lower one. (3) The Z-INDEX value of a newly created graphical object is set to the length of the DOC (when before the new object is added to the DOC). For example, there are three graphical objects OBJ1, OBJ2, OBJ3 in the DOC, and their ZINDEX value are 0, 1, 2 respectively. Now, if a new graphical object is created, its Z-INDEX value will be set to 3.

Multimed Tools Appl

2.3 The operation type and the relationship of the operations This paper supports three types of operation: Create, Remove and Change, and they are defined as follows: (1) Create(OBJ): create a new graphical object OBJ, and the new object OBJ will be added to the DOC. (2) Remove(OBJ): delete a specified graphical object OBJ from the DOC. (3) Change(OBJ, ATTR.name, old, new): change a specified graphical object OBJ in the DOC, update its attribution value of the ATTR.name from old to new. In the previous studies [19, 20], there are three types of relationships among different operations. This paper concludes them as follows: (1) Causal ordering relation “→”. Given two operations O1 and O2, which are generated at sites i and j, O1 is causally ordered before O2, expressed as O1 → O2, if and only if: (1) i = j and the generation of O1 happens before the generation of O2; or (2) i! = j and the execution of O1 at site j happens before the generation of O2; or (3) there exists an operation Ox, such that O1 → Ox and Ox → O2. (2) Concurrent relations “||”. Given two operations O1 and O2, O1 and O2 are independent (or concurrent) with each other, expressed as O1 || O2, if and only if neither O1 → O2 nor O2 → O1. (3) Conflict relation “×”. Two operations O1 and O2 are conflict with each other, expressed as O1 × O2, if and only if: (1) O1 and O2 are concurrent; and (2) O1 and O2 are both Change operation. O1 = Change(OBJ, ATTR.name, old, new1) and O2 = Change(OBJ, ATTR.name, old, new2); and (3) new1! = new2.

3 Consistency maintenance 3.1 Mapping the two-dimensional area into the linear structure In the past studies [2, 17, 20], the operation transformation technique is widely used in collaborative text editing system based on the linear structure. However, in the graphical editing field, the drawing area is two-dimensional, thus, operation transformation technique cannot be used directly in this environment. In Section II, we have given the definition of the Z-INDEX, which indicates the position of a graphical object in the z-axis. According to the above definitions, we make use of the Z-INDEX value as the position to indicate the graphical object in the DOC. For example, assuming that there are three graphical objects OBJ1, OBJ2, OBJ3, and their Z-INDEX values are 0, 1, 2, respectively. Thus, the DOC is expressed as {OBJ1, OBJ2, OBJ3}. That is to say, the graphical object is ordered by Z-INDEX value in the DOC and the Z-INDEX value of the graphical object is always equal to the position of the graphical object in the DOC. If the DOC is the same in all sites, then, the PAINT will be the same. Therefore, this paper maps the two-dimensional drawing area into the linear structure in the collaborative graphical editing system by using the Z-INDEX value. As long as we ensure the consistency of the DOC, we can also ensure the consistency of the PAINT in all the collaborative sites.

Multimed Tools Appl

3.2 Transforming the two-dimensional operations into the linear operations According to the analysis of the above, we have mapped the two-dimensional drawing area into the linear structure by using the Z-INDEX value. Accordingly, we can also transform all the two-dimensional graphical operations into the linear operations, which are described as follows: (1) Create(OBJ) is mapped to Insert(OBJ, OBJ.Z-INDEX), that is to insert a graphical object into the DOC on the position of OBJ.Z-INDEX. (2) Remove(OBJ) is mapped to Delete(OBJ, OBJ.Z-INDEX), that is to delete the graphical object in the DOC on the position of OBJ.Z-INDEX. (3) Change(OBJ, ATTR.name, old, new) is mapped to Update (OBJ, OBJ.Z-INDEX, ATTR.name, old, new), that is to update the attribution value of the specified graphical object in the DOC from old to new.

3.3 The strategy of consistency maintenance ABST is a fast operation sequence transformation algorithm, and its time complex is only O(n). This paper improves the ABST algorithm to support the Update operation and adapts it to the real-time collaborative graphical editing system based on Web. With regard to conflict relation operations, the paper improves the MVSD [20] strategy to solve them. The design and analysis of the algorithms will be presented in Section IV.

4 Algorithm design and analysis 4.1 Algorithm design The technique of consistency maintenance is the key strategy of the collaborative editing system to guarantee the correctness of the system. The algorithm based on operation transformation is an important strategy of consistency maintenance. For the sake of the consistency maintenance of the real-time collaborative graphical editing system base on HTML5, this chapter improves ABST algorithm to be suit for it. ABST is a admissible-based operation sequence transformation algorithm, and suitable to be applied to the collaborative text editing system in the environment of mobile network. This chapter improves ABST algorithm to support the UPDATE operation. The improved ABST algorithm is shown in Algorithm 1. It can be divided into four sections: (1) (2) (3) (4)

Initialization (line1–2). The execution process of local operations (line3–12). The reception process of remote operations (line13–14). The execution process of remote operations (line15–20).

In the initialization process, the RQ, HB and sv is set to NULL, NULL and respectively. In the execution process of local operations, the local two-dimensional graphical operation O is firstly transformed to the linear operation O′ by the Algorithm 2.

Multimed Tools Appl

After that, the operation O′ is executed directly in the DOC. Then, all the graphical objects of the DOC are re-drawn one by one in the graphical document PAINT by the function showDOC(). A batch of graphical operations are performed locally, and propagated to the remote sites when the system feels “ready” for [17]. Before a local operation sequence T is send to the remote sites, it is firstly integrated into the HB by the Algorithm 3, and then the result T’ can be propagated to the remote sites. In the reception process of the remote operations, these remote operations are firstly added to the RQ, and then, they will be processed by the local site at an appropriate time. In the execution process of the remote operations, T is firstly integrated into the HB by the Algorithm 4, and then, the result T’ is executed immediately in the DOC. Finally, the local state vector is updated and all the graphical objects are also re-drawn one by one in the graphical document PAINT.

According to the section 3.1, the Z-INDEX indicates the position of graphics object in the linear document. This paper maps the two-dimension graphical document into the linear text document, and transforms the graphical editing operations into the linear text editing operations. Above all, the function conversionOP() is in charge of transforming a two-dimensional graphical operation into a linear operation, which can be executed immediately in the DOC. Thus, the function is defined as Algorithm 2:

In the previous study of [17], function endTransaction() is responsible for integrating a local operation sequence T into the local history buffer HB, then the result T’ can be propagated to

Multimed Tools Appl

the remote sites. This paper extends this function to support the Update operation. Function swapSQ(sq2, sq1) (includes swapSQui(), swapSQdi(), etc.) swaps the execution order of the two input sequences. Function mergeSQ(sq1, sq2) (includes mergeISQ(), mergeDSQ(), etc.) merges sequences sq1 and sq2 into a new sequence sq. Thus, the function endTransaction() is defined as Algorithm 3:

Function Integrate() is responsible for integrating a remote operation sequence T into the local history buffer HB to get the result of T’, which can be executed immediately in the DOC. Function getConcurrentSQ(T, H) extracts all operations that are concurrent with sequence T from sequence H. Function ITSQ(sq1, sq2) (includes ITSQii(), ITSQid(), etc.) inclusively transforms sequence sq1 with sq2, to incorporate the effects of sq2 into sq1. Thus, the function Integrate() is defined as Algorithm 4:

The getConcurrentSQ(), swapSQ(), ITSQ(), mergeSQ() methods have been presented in [17], you can consult to it for detailed description.

4.2 Efficiency analysis The Algorithm 1 is composed of conversionOP(), exec(), showDOC(), endTransaction(), and Integrate(). According to the analysis, the time complexity of conversionOP() and exec() are O(1), and the time complexity of showDOC() is O(n), where n is the number of graphical object in the DOC. According to the past researches of [17], the time complexity of swapSQ() and mergeSQ() are both O(k + l), where k and l are the length of two operation sequences

Multimed Tools Appl

respectively. Thus, the time complexity of the Algorithm 3 is O(6 l + 6 k), the time complexity of the Algorithm 4 is O(15 l + 15 k). As a result, the time complexity of the Algorithm 1 is O(1 + 1 + n + 6 l + 6 k + 15 l +15 k + n + n) = O(n). Because of the high efficiency of the algorithm, it is suitable for mobile device platform.

4.3 Case analysis As an example, consider a scenario in three sites site 1, site 2 and site 3 that are co-drawing the shared graphical document. As shown in Fig. 2. Suppose that the initial graphical document is empty, that is to say PAINT = {(0, 0), (16, 16), {}}, where DOC = {}. In Fig. 2, Site 1 generates two operation sequences T1 and T2. T1 = {Create(obj11), Create(obj12), Create(obj13)}, T2 = {Remove(obj12), Change(obj11, FILL_COLOR, blue, green), Change(obj13, FILL_COLOR, blue, red)}, where obj11 = {circle, {blue, 0, [(4,4), (8,8)]}, 0}, obj12 = {triangle, {blue, 0, [(10,4), (8,8), (12,8)]}, 1}, obj13 = {rectangle, {blue, 0, [(6,4), (10,8)]}, 2}. Site 2 generates an operation sequence T3. T3 = {Create(obj21), Create(obj22), o23 = Remove(obj21)}, where obj21 = {rectangle, {orange, 0, [(4,4), (12,8)]}, 0}, obj22 = {triangle, {orange, 0, [(8,8), (4,16), (12,16)]}, 1}. Site 3 generates an operation sequence T4. T4 = {Create(obj31), Change(obj31, POINTS, [(12,4), (16,8)], [(8,4), (16,12)])}, where obj31 = {circle, {blue, 0,[(12,4), (16,8)]}, 1}. Since the execution order of site 2 and site 3 are the same, so we only discuss the execution process of site 1 and site2. Detailed analysis is as follows.

4.3.1 The execution process of the local operations In site 1, T1 and T2 are local operation sequences. T1 is firstly transformed into the linear operation sequences T1’ by the Algorithm 2. The result T1’ = {Insert(obj11,0), Insert(obj12,1), Insert(obj13,2)}. After the execution of T1’, the result DOC = {obj11, obj12, obj13}. When T1’ is released, the local history buffer HB1 is set to empty. Thus, T1’ is propagated as-is. Then, T2 is transformed by the Algorithm 2, the result T2’ = {Delete(obj12, 1), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red)}. After the execution of T2’, the result DOC = {obj11, obj13}. When T2’ is released, the HB1 is not empty. Then, Algorithm 3 is called to integrate T2’ into the HB1, and the result T2” = {Delete(obj12, 1), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1,

Fig. 2 The co-drawing scenario of three sites

Multimed Tools Appl

FILL_COLOR, blue, red)}, and now it can be propagated to the remote sites. After that, the HB1 = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2), Delete(obj12, 1), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red)}. In site 1, after the execution of all the local operation sequences, the graphical document result is shown in Fig. 3-a. In site 2, T3 is the local operation sequence. T3 is firstly transformed to a liner operation T3’ by the Algorithm 2. The result T3’ = {Insert(obj21, 0), Insert(obj22, 1), Delete(obj21, 0)}. After the execution of T3’, the result DOC = {obj22}. When T3 is released, the local history buffer HB2 is set to empty. So, T3’ is propagated as-is. The graphical document result is shown in Fig. 3-b. Similarly, in site 3, after the execution of the T3 and T4, the graphical document status is shown in Fig. 3-c.

4.3.2 Processing operation sequences from remote sites In site 1. Algorithm 4 is firstly called to transform T3 to an executable operation sequence T3’ and merged it to the HB1. The result T3’ = {Insert(obj21, 2), Insert(obj22, 3), Delete(obj21, 2)}, and the HB1 = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2), Insert(obj21, 3), Insert(obj22, 4), Delete(obj12, 1), Delete(obj21, 2), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red)}. After the execution of the T3’, the result DOC = {obj11, obj13, obj22}. Also, when the T4 is reached, it is integrated into the HB1 by the Algorithm 4, the result T4’ = {Insert(obj31, 3),Update(obj31, 3, POINTS, [(12,4), (16,8)], [(8,4), (16,12)])}, and the HB1 = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2), Insert(obj21, 3), Insert(obj22, 4), Insert(obj31, 5), Delete(obj12, 1), Delete(obj21, 2), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red), Update(obj31, 3, POINTS, [(12,4), (16,8)], [(8,4), (16,12)])}. After the execution of T4’, the result DOC = {obj11, obj13, obj22, obj31}. Finally, the graphical document result is shown in Fig. 4-a. In site 2, according to the theory of operation transformation, it is obvious that T4 can be executed directly in the DOC. After the execution of T4, the result DOC = {obj22, obj31}, and HB2 = {Insert(obj21,0), Insert(obj22, 1), Insert(obj31, 2), Delete(obj21, 0), Update(obj31, 1, POINTS, [(12,4), (16,8)], [(8,4),(16,12)])}. After that, the Algorithm 4 is called to integrate T1 into the HB2, the result T1’ = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2)}, and the HB2 = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2), Insert(obj21, 3), Insert(obj22, 4),

a

b

Fig. 3 The state of graphical document after the execution of the local operation sequences

c

Multimed Tools Appl

a

b

c

Fig. 4 The graphical document status of three sites after the execution of all operations

Insert(obj31, 5), Delete(obj21, 3), Update(obj31, 4, POINTS, [(12,4), (16,8)], [(8,4), (16,12)])}. After the execution of T1’, the result DOC = {obj11, obj12, obj13, obj22, obj31}. Also, when the T2 is reached, it is integrated into the HB2 by the Algorithm 4, the result T2’ = {Delete(obj12, 1), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red)}, and the HB2 = {Insert(obj11, 0), Insert(obj12, 1), Insert(obj13, 2), Insert(obj21, 3), Insert(obj22, 4), Insert(obj31, 5), Delete(obj12, 1), Delete(obj21, 2), Update(obj11, 0, FILL_COLOR, blue, green), Update(obj13, 1, FILL_COLOR, blue, red), Update(obj31, 3, POINTS, [(12,4), (16,8)], [(8,4), (16,12)])}. After the execution of T2’, the result DOC = {obj11, obj13, obj22, obj31}. At the end, the graphical document result is shown in Fig. 4-b. Similarly, in site 3, the final graphical document status is shown in Fig. 4-c.

Fig. 5 The system architecture of the CoWebDraw

Multimed Tools Appl

5 The CoWebDraw system In order to verify the correctness of the above algorithms, the paper develops the real-time collaborative graphical editing system CoWebDraw based on Web. The system aim to support a group of users from geographically dispersed locations to edit the shared graphical documents concurrently by web browsers.

Fig. 6 The user interface of the CoWebDraw system

Multimed Tools Appl

5.1 The components of the CoWebDraw system The CoWebDraw system is based on the HTML5 WebSocket protocol, and developed by HTML, JavaScript, CSS and Java. The drawing function of the system is developed by the powerful API of the HTML5 canvas. The Web application is not support for P2P communication. Thus, the CoWebDraw system is not the fully replicated architecture, there is a central node, which we call as the server. All the operation sequences are generated from clients, and the server cannot generate any operation sequences. The server is mainly responsible for managing all clients and storing all the necessary operation data. The system architecture of the CoWebDraw is shown in the Fig. 5. In the client side, on the one hand, the user view manager module is mainly responsible for showing all the graphical objects released from the user interface. Because of the graphical operations in the client of PC are produced by operating the mouse, on the contrary, the graphical operations in the client of mobile phone are produced by touching the screen. Thus, on the other hand, the user view manager module should respond correctly to different operation behaviors from different clients. The graphical document module consists of all graphical objects in the system. The local history buffer module stores all operations that have been performed in the system. The remote data manager module is in charge of processing all operation sequences from the remote sites. In some time, the network is not available or the system is executing the local operations, under the circumstance of the above, in order to avoid the loss of the operation data, some operation data will be cached in the data buffer module. The data buffer module ensures the integrity of the operation data. The synchronization data module is used for exchanging data with the server. In the server side, the session manager module has two main function. On the one hand, it is responsible for managing and grouping all the clients. On the other hand, it is to take charge of synchronizing the data (includes the graphical document data and the all operations data) to the newly join clients. The data manager module is used for storing all data from the clients.

5.2 The user Interface People can edit the same graphical document concurrently by the CoWebDraw system. The CoWebDraw system allows users to view the real-time editing effects, and shows all online users. The user interface of the the CoWebDraw system is shown in Fig. 6.

6 Conclusion and future work In the mobile internet era, in order to support the collaborative work among users by multi-clients, some techniques must be adopted to achieve the real-time cooperation. This paper maps the twodimensional drawing area into the linear structure and transforms the two-dimensional graphical operations to the linear operations. Based on above, this paper has improved ABST algorithm to be suitable for the real-time collaborative graphical editing system based on Web. In order to verify the correctness of the above algorithms, this paper has developed the real-time collaborative graphical editing system CoWebDraw based on Web, and the HTML5 WebSocket protocol has been adopted to achieve the real-time transformation of the information in this system. In the CoWebDraw system, geographically dispersed users can edit the shared graphical documents concurrently through web browsers. It is efficient and convenient for users.

Multimed Tools Appl

The focus of this paper is to transform the two-dimensional drawing area into the linear structure and improve the ABST algorithm to support Update operation. However, Undo/Redo is also an important operation in the real-time collaborative graphical editing system. Therefore, in the future we plan to extend our work to support Undo/Redo operation. Acknowledgements We would like to thank the reviewers, whose valuable critique and comments helped to improve this paper. Moreover, this work is supported by the National Science Foundation of China (NSFC) under Grant No.61202376 and 61572325, Shanghai Natural Science Foundation under Grant No. No. 17ZR1419100 & No. 15ZR1429100, and the Open Project Program of Shanghai Key Laboratory of Data Science (No.201609060003).

References 1. Ellis CA, Gibbs SJ (1989) Concurrency control in groupware systems. In: Proceedings of the ACM Conference on the Management of Data 1989, Portland Oregon, May, pp 9–407 2. Etherpad (2015) The Etherpad Foundation. Available: http://etherpad.org/. Accessed Feb 2015 3. Google Docs (2011) Create and share your work online. http://docs.google.com/ 4. Greenberg S, Roseman M, Webster D, Bohnet R (1992) Issues and experiences designing and implementing two group drawing tools. Proc Of the 25th Annual Hawaii Intl. Conference on the System Science, Kuwaii, Hawaii, January, pp 138-150 5. Guo P, Wang J, Li B, Lee S (2014) A Variable Threshold-value Authentication Architecture for Wireless Mesh Networks. J Internet Technol 15(6):929–936 6. Gutwin C, Lippold M, Graham TCN (2011) Real-time groupware in the browser: testing the performance of web-based networking. In: CSCW, pp 167–176 7. Gutwin TC, Lippold M, Graham TCN (2011) Real-time groupware in the browser: testing the performance of web-based networking. In: CSCW, pp 167–176 8. Heinrich M, Lehmann F, Springer T, Gaedke M (2012) Exploiting single-user web applications for shared editing: a generic transformation approach. In: Proceedings of the 21st international conference on World Wide Web, ACM 9. Inoue R, Kato Y (2012) A Real-Time Collaborative Mechanism for Editing a Web Page and Its Applications. In: Parallel Architectures, Algorithms and Programming (PAAP), Fifth International Symposium on, pp 186–193 10. Ionescu B, Gadea C (2015) A chat-centric collaborative environment for web-based real-time collaboration. In: Applied Computational Intelligence and Informatics (SACI), IEEE 10th Jubilee International Symposium on, pp 105-110 11. Karsenty A, Beaudouin-Lafon M (1993) An algorithm for distributed groupware applications. Proc. of Conf. on Distributed Computing Systems, Pittsburg, Pennsylvania, USA, May, pp 195–202 12. Katayama S, Goda T (2013) A Fast Synchronization Mechanism for Collaborative Web Applications Based on HTML5. In Software Engineering, Artificial Intelligence, Networking and Parallel/Distributed Computing (SNPD), 14th ACIS International Conference on, pp 663-668 13. Y. Liu, N. Xiong*, Y. Zhao, A.V. Vasilakos, J. Gao, Y. Jia, Multi-layer clustering routing algorithm for wireless vehicular sensor networks. IET Commun 4 (7), 810–816, 2010 14. Newman-Wolfe RE, Webb M, Montes M (1992) Implicit locking in the Ensemble concurrent objectoriented graphics editor. Proc. of CSCW, Toronto, Canada, pp 265–272 15. OpenCoWeb (2011) Open Cooperative Web Framework Project intro. http://opencoweb.org 16. Ren Y, Shen J, Wang J, Han J, Lee S (2015) Mutual Verifiable Provable Data Auditing in Public Cloud Storage. J Internet Technol 16(2):317–323 17. Shao B, Li D, Gu N (2010) A Fast Operational Transformation Algorithm for Mobile and Asynchronous Collaboration. IEEE Trans Parallel Distrib Syst 21(12):1707–1720 18. Shen J, Tan H, Wang J, Wang J, Lee S (2015) A Novel Routing Protocol Providing Good Transmission Reliability in Underwater Sensor Networks. J Internet Technol 16(1):171–178 19. Sun C, Chen D (2002) Consistency maintenance in real-time collaborative graphics editing systems. ACM TOCHI 9:1–41 20. Sun D, Xia S, Sun CZ, etc (2004) Operational transformation for collaborative word processing. In: Proc. Of the ACM Conf. on CSCW, pp. 437–446

Multimed Tools Appl 21. Wang X, Bu JJ, Chen C (2002) Achieving undo in bitmap-based collaborative graphics editing systems. In: Proceedings of the Conference on Computer Supported Cooperative Work (pp. 68-76) 22. Wang SS, Wu CX, Gao LP etc (2014) Research on Consistency Maintenance of the Real-time Image Editing System based on Bitmap. In: Proceeding of the Conference on Computer Supported Cooperative Work in Design, pp 689–694 23. Xia Z, Wang X, Sun X, Liu Q, Xiong N (2016) Steganalysis of LSB matching using differences between nonadjacent pixels. Multimedia Tools and Applications 75(4):1947–1962 24. Xiong N, Vasilakos AV, Yang LT, Song L, Pan Y, Kannan R, Li Y (2009) Comparative analysis of quality of service and memory usage for adaptive failure detectors in healthcare systems. IEEE J Sel Areas Commun 27(4):495–509 25. Yin J, Lu X, Zhao X, Chen H, Liu X (2015) BURSE: A Bursty and Self-Similar Workload Generator for Cloud Computing. IEEE Trans Parallel Distrib Syst 26(3):668–680

Liping Gao .She graduated from Fudan U-niversity, China with a PhD in 2009 in Computer Science. She received her BSc and master degree in Computer Science from Shandong Normal University, China in 2002 and 2005 respectively. She is doing her research work in University of Shanghai for Science and Technology as an assistant professor. Her current research interests include CSCW, heterogeneous collaboration, consistency maintenance and collaborative engineering.

Dongfang Gao . He is a postgraduate student in University of Shanghai for Science and Technology. He obtained his BSc degree in Agriculture Engineering from Henan University of Science and Technology, China. His current research interests include CSCW, collaborative design and collaborative compute.

Multimed Tools Appl

Naixue Xiong is a Professor at School of Computer Science, Colorado Technical University, Colorado Spring, CO, USA and University of Shanghai for Science and Technology, China. He received his both PhD degrees in Wuhan University (about software engineering), and Japan Advanced Institute of Science and Technology(about dependable networks), respectively. Before attending Colorado Technical University, he worked in Wentworth Technology Institution, Georgia State University for many years. His research interests include Cloud Computing, Security and Dependability, Parallel and Distributed Computing, Networks, and Optimization Theory.

Changhoon Lee received his Ph.D. degree in Graduate School of Information Management and Security (GSIMS) from Korea University, Korea. In 2008, he was a research professor at the Center for Information Security Technologies in Korea University. In 2009-2011, he was a professor in the School of Computer Engineeringin Hanshin University. He is now a professor at the Department of Computer Science and Engineering, Seoul National University of Science and Technology(SeoulTech), Korea. He has been serving not only as chairs, program committee, or organizing committee chair for many international conferences and workshops but also as a (guest) editor for international journals by some publishers. His research interests include information security, cryptography, digital forensics, smart grid security, computer theory etc. He is currently a member of the IEEE, IEEE Computer Society, IEEE Communications, IACR, KIISC, KDFS, KIPS, KITCS, KMMS, KONI, and KIIT societies.