WO2015080386A1

WO2015080386A1 - Method for providing web whiteboard in real time in multi-platform environment

Info

Publication number: WO2015080386A1
Application number: PCT/KR2014/010278
Authority: WO
Inventors: 정대영; 박상용
Original assignee: 주식회사 가온소프트
Priority date: 2013-11-28
Filing date: 2014-10-30
Publication date: 2015-06-04
Also published as: KR101380898B1

Abstract

The present invention relates to a real-time web whiteboard technology provided such that when a plurality of users connect to a specific internet web page, and correct contents on a whiteboard implemented on the corresponding web page, the plurality of users can share the corrected contents in real time. Particularly, the present invention corresponds to various platform environments (for example, the kind of terminal device, an operating system of the terminal device and a UI operation system) adopted by various terminal devices connecting to the internet and efficiently updates the contents, thereby providing, through a local network, real-time capabilities as if working in the same space. According to the present invention, the whiteboard is implemented in a form of the internet web page by using a web client language such as java script such that anyone who connects to the internet can use the whiteboard.

Description

How to provide real-time web whiteboard in multiplatform environment

The present invention relates to a technology for implementing a whiteboard that is updated and shared in real time on a web connected to the Internet. More specifically, the present invention provides a plurality of users can share the modified content in real time when the content is modified on the whiteboard implemented on the web page after a plurality of users access a particular Internet web page In particular, the local network can be installed in the same space by responding to various platform environments (e.g., type of terminal device, operating system of the terminal device, UI operating system) adopted in various terminal devices connected to the Internet, and efficiently updating contents. It is about real-time web whiteboard technology that can show real-time as if you are working through it.

Today, due to the development of network technology, users are provided with various services. Among them, the whiteboard service (digital bulletin board service) connects a plurality of terminal devices to a high-speed network, and shares the same contents among multiple parties by mutually transmitting and receiving graphic data generated by a user operating each terminal device through the connected network. It's a technology that makes it possible.

These whiteboard services are used for lectures or conferences between multiple users. This is because lecture facilitators or conference attendees' inputs from their terminal devices are reflected in the terminal devices of other participants, so it is very efficient because there is no fear of missing or taking notes.

To this end, conventionally, whiteboard software is announced in advance when a lecture or a meeting is announced, and users who participate in a lecture or a meeting have the corresponding whiteboard software installed in their terminal device in advance. When a lecture or meeting begins, users launch the whiteboard software on their terminal devices, and real-time whiteboard services are initiated accordingly.

However, in the conventional whiteboard service, participants are notified of the kind of whiteboard software in advance, and there is an inconvenience in that the corresponding software must be installed in advance. The whiteboard service is to develop and apply whiteboard-specific software optimized for it, because various data must be quickly transmitted and updated between a plurality of terminal devices through a network.

Currently, a number of whiteboard software is presented, and it is inconvenient for the user to know and install the software announced by the organizer whenever the whiteboard is utilized. If you are notified of attendance at the meeting, you may not be convinced, but if you are suddenly called to attend the meeting, this inconvenience in terms of users becomes serious. In a real business environment, such a sudden call to the meeting occurs many times, this problem is very realistic.

In addition, there was a lot of difficulties in the past in terms of companies developing whiteboard software. In a multiplatform environment, it is necessary to cope with various operating systems. Therefore, whiteboard software should be developed and prepared for every platform. In other words, you need to develop whiteboard software for Windows, Mac, Android, and Linux, as well as version-specific development for individual platforms. Neglecting any of these can be very burdensome for developers because they will receive serious claims from users of the whiteboard software.

This solves the inconvenience of users who have to install the whiteboard software in advance in the technical field, and overcomes the inefficiency of data processing commonly found in open systems through optimization design while providing openness as if using the Internet. Therefore, the development of whiteboard technology that can show real-time performance in the Internet environment is required.

In addition, in the open-type whiteboard technology, various terminal devices can be connected, and each terminal device has its own platform. For example, a personal computer (PC) performs a mouse operation, a laptop computer performs a touch pad and a mouse operation, and a tablet computer or a smartphone performs a touch screen operation. Accordingly, the development of a whiteboard technology that can accommodate all the terminal devices of various platforms while adopting an open method is required.

[Preceding technical literature]

1. Republic of Korea Patent Publication No. 10-2001-0094087 "Document co-editing device and method thereof"

2. Republic of Korea Patent Publication No. 10-2012-0079636 "Document sharing method in the multi-party meeting"

An object of the present invention is to provide a whiteboard implementation technology that is updated in real time on the web connected to the Internet. More specifically, an object of the present invention is to modify the content on a whiteboard implemented on the web page after a plurality of users access a particular Internet web page, the plurality of users can share the modified content in real time In particular, it responds to various platform environments (e.g., type of terminal device, operating system of the terminal device, UI operating system) adopted in various terminal devices accessing the Internet, and efficiently updates contents locally in the same space. It provides real-time whiteboard technology that can show real-time as if you are working on a network.

The present invention for achieving the technical problem is a method for providing a real-time web whiteboard in a multi-platform environment between a web whiteboard server and a plurality of web whiteboard clients connected through a network, the web whiteboard server is a real-time web whiteboard service Setting a memory DB for the canvas and the user group for the first step; A second step of displaying a canvas and an editing toolbar on a respective client browser by connecting a plurality of web whiteboard clients to a specific internet address corresponding to the web whiteboard server; A third step of abstractly setting a mouse down event, a mouse move event, and a mouse up event for manipulating a drawing object on a canvas so that a plurality of web whiteboard clients correspond to a multiplatform environment; The first web whiteboard client of the plurality of web whiteboard clients generates a drawing object on the canvas displayed in its client browser as the object selection menu selection of the editing toolbar and the mouse down / move / up sequence on the canvas are identified. Transmitting an add / change command sequence for the drawing object to the web whiteboard server to provide a creation event of the drawing object to the web whiteboard server; A fifth step in which the web whiteboard server reflects the generation event of the drawing object to the remaining web whiteboard clients by reflecting and relaying an ad / change command sequence transmitted from the first web whiteboard client to the memory DB. Can be.

The fourth step performed by the first web whiteboard client in the present invention includes: a 41 step of identifying a selection for a specific object in the editing toolbar; A 42nd step of identifying a mouse down on the canvas; Sending an add command to a web whiteboard server for setting a preset default format for the selected object for the identification point of the mouse down; A forty-fourth step of identifying one or more mousemoves on the canvas; Transmitting a change command reflecting the identification point of the mouse move to the web whiteboard server for the selected object; A forty-sixth step of identifying mouse-ups on the canvas; And a step 47 of transmitting a change command for confirming the selected object to the web whiteboard server.

At this time, in step 43, the basic format is to place a preset prototype of the selected object at the identification point of the mouse down on the global coordinate system of the canvas, and in step 47, the upper left coordinate of the rectangle including the object is set as the reference coordinate. And change the representation coordinate system of the selected object on a local coordinate system in which each coordinate on the object is set to a relative offset coordinate based on the reference coordinate, and transmit a change command to the web whiteboard server.

Also, in the present invention, the fourth step may include: if the distance between the identification point of the mouse down and the identification point of the mouse up is within a preset threshold range, transmitting the removal command for the selected object to the web whiteboard server; It may be configured to include more.

In addition, the real-time web whiteboard providing method of the multi-platform environment according to the present invention, the first web whiteboard client performed after the fifth step, the mouse down / move for changing the object created on the canvas of the client browser Transmitting a change command corresponding to the object change according to the mouse down / move / up sequence to the web whiteboard server as the / up sequence is identified; The web whiteboard server reflecting the change command transmitted from the first web whiteboard client to the memory DB and relaying the change command to the remaining web whiteboard clients; If the web whiteboard client receives a change command corresponding to the object change from the web whiteboard server, marking the change rendering and storing the object change; The plurality of web whiteboard clients may be configured to inspect the change rendering, and if the marking is set, loading the stored one or more object changes and reflecting them on their canvases.

In addition, the present invention, the web whiteboard server and the plurality of web whiteboard clients perform a command transmission and reception asynchronously to avoid the situation that the web whiteboard server is blocked by the client having a network problem, the web whiteboard server If a web whiteboard client without data transmission and reception for a predetermined time is identified among the plurality of web whiteboard clients connected in the second step, transmitting a ping-pong command and disconnecting if there is no response. Can be.

In addition, the present invention is directed to a text by means of readAsDataURL the image file from storage as the first web whiteboard client, performed after the third step, identifies a preset image object creation operation and mouse down / up sequence on the canvas. Loads and renders an image file on the canvas displayed in the client browser, and sends the text data and mouse-down or mouse-up identification point loaded by readAsDataURL to the web whiteboard server as an add command to the image object. Providing a generation event to a web whiteboard server; And reflecting, by the web whiteboard server, the generated event of the image object to the remaining web whiteboard clients by reflecting and relaying an ad command transmitted from the first web whiteboard client to the memory DB.

In this case, the third step includes a plurality of mouse manipulation APIs and a plurality of touch manipulation APIs that are differently defined in different terminal device operating systems. It is preferable to set the conversion by matching with.

In addition, the present invention provides a point of identification of a mouse down as the first web whiteboard client, performed after the fifth step, identifies a mouse down / move / up sequence for moving the object created on the canvas of the client browser. A change command for changing a reference coordinate in the local coordinate system of the object in response to the displacement between the identification points of the mouse-up from the web whiteboard server; The web whiteboard server may reflect the move event of the object to the remaining web whiteboard client by reflecting and relaying a change command transmitted from the first web whiteboard client to the memory DB.

At this time, the web client language includes JavaScript, and the web whiteboard client implements the inheritance of basic properties and methods of drawing objects implemented through the web whiteboard in the web client language and implements API abstractions according to multiplatforms. It is desirable to have an adaptation module to implement.

In addition, the present invention, a plurality of web whiteboard clients, performed after the fifth step, assigns a layer to one or more objects included in the canvas of the client browser by default at the time of creation, Implement an object controller that provides delete, layer down, and layer up functions for objects, and assigns layers to one or more objects by lowering or raising the layer of the selected object by using layer down and layer up functions. step; The plurality of web whiteboard clients render the canvas by first rendering the objects in layer order, secondly by rendering the editing toolbar, and thirdly by rendering an object controller for the selected object once the object selection on the canvas is identified. It may be configured to include more.

On the other hand, the computer-readable recording medium according to the present invention records a real-time web whiteboard program for causing a computer to execute the real-time web whiteboard providing method of the multi-platform environment as described above.

According to the present invention, by implementing a whiteboard in the form of an internet webpage using a web client language such as JavaScript, anyone can use the whiteboard as long as they are connected to the Internet.

In addition, according to the present invention has the advantage that it is not necessary to install the whiteboard software in the terminal device in order to utilize the whiteboard by implementing the JavaScript to handle the object. Considering that the situation where whiteboard utilization is necessary for multi-party meetings or document sharing occurs suddenly without notice, the practical value of the present invention is doubled due to the advantage that the whiteboard software is not pre-installed on the terminal device.

In addition, according to the present invention, through the optimal design of data processing efficiently updates the content consisting of a plurality of objects on the whiteboard, even though it is a web whiteboard that operates on the Internet, it works as if it is working through the local network in the same space. It has the advantage of showing real-time as if there is. Application of web technology improves versatility by using a browser, while inefficiency inherent in web technology causes time delays and sacrifices real-time. However, in the present invention, when the content of the whiteboard is changed, by efficiently configuring the process of updating the content with the terminal devices connected to the whiteboard, there is an advantage in that it is possible to maintain real time despite the web whiteboard.

1 is a diagram conceptually showing the configuration of an entire system in which a real-time web whiteboard providing method of a multiplatform environment according to the present invention is implemented.

2 conceptually illustrates a canvas and an editing toolbar in the present invention;

3 is a view showing an example of an object controller in the present invention.

4 is a view showing the concept of representing the object placed on the canvas in the global coordinate system and the local coordinate system in the present invention.

FIG. 5 is a diagram conceptually illustrating overall data transmission and reception between a web whiteboard server and a web whiteboard client in the present invention. FIG.

6 is a view showing a process of generating a drawing object in the present invention.

7 is a view showing a process of generating an image object in the present invention.

FIG. 8 is a diagram illustrating a process in which a web whiteboard server detects and disconnects a web whiteboard client that has left the real-time web whiteboard service in real time according to the present invention.

9 is a view showing an example of commands transmitted and received between a web whiteboard server and a web whiteboard client in the present invention.

DETAILED DESCRIPTION Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings so that those skilled in the art may easily implement the present invention. As those skilled in the art would realize, the described embodiments may be modified in various different ways, all without departing from the spirit or scope of the present invention. In order to clearly describe the present invention, parts not directly related to the configuration of the present invention are selectively omitted to make drawings, and like reference numerals refer to like parts throughout the specification.

In addition, in the present specification, for convenience of description, when the content of the whiteboard is modified on one terminal device among a plurality of terminal devices connected to the web whiteboard, the content is updated to a plurality of different terminal devices. Deploy. However, the right to modify the content on the web whiteboard is not given only to a specific terminal device, and the present invention is preferably implemented in a manner in which the content can be modified by a user's manipulation in various terminal devices.

1 is a diagram conceptually showing a configuration of an entire system in which a method for providing a real-time web whiteboard in a multiplatform environment according to the present invention is implemented. Referring to FIG. 1, in the entire system according to the present invention, a web whiteboard server 200 and a plurality of web whiteboard clients 101 to 104; 100 are connected through a network (internet). In this case, the web whiteboard client may be implemented as a laptop computer 101, a tablet computer 102, a smartphone 103, a personal computer 104, and the operating systems of these devices are also Windows, Android, Linux, macOS. , iOS, etc. can be variously implemented. In addition, the web whiteboard server 200 includes a memory DB 201 for storing various events generated by a real-time web whiteboard service as directory data or includes external storage.

Web pages for providing real-time web whiteboard services are written in a specific web client language (eg, JavaScript) and correspond to specific Internet addresses (eg, URLs). In addition, the canvas 110 is set for each whiteboard for the real-time web whiteboard service. The canvas 110 serves as a whiteboard panel for displaying various objects (drawing objects, image objects). Meanwhile, when the canvas 110 is implemented on the browser screen of the web whiteboard client 100, the editing toolbar 120, which is a set of function menus for editing an object, is displayed. In this case, the editing toolbar 120 is attached to one or more pieces and is not necessarily displayed on the screen in the form of a toolbar.

The web whiteboard client 100 has browser software (eg, Explorer, Chrome, Safari, etc.) installed. The user accesses a preset Internet address for real-time web whiteboard service by using the browser software. The web page of the web whiteboard server 100 to be accessed by the web whiteboard client 100 is specified in the accessed page. When opened, the web whiteboard server 200 is accessed. In implementing the present invention, when accessing a preset Internet address for a web whiteboard service, the webpage is first received from the web server, and the whiteboard is accessed by the address of the web whiteboard server 200 identified in the webpage. It is common to implement a service to be activated. In this case, the web server (not shown) serving the web page and the web whiteboard server 200 are generally provided differently. It can be installed on a completely different server, or it can be installed on the same server or in a separate process. When the browser of the web whiteboard client 100 (i.e., the client browser) opens the web page, the canvas 110 and the editing toolbar 120 are displayed on the browser, so that the real-time web whiteboard service can be used. do.

The present invention relates to a 'whiteboard service'. Therefore, when a screen operation (eg, drawing, inserting an image, modifying content, writing text, etc.) occurs in any one terminal device (for example, 101) among the various client terminal devices 101 to 104, such matters are applied to the remaining terminal device ( Example: 102 ~ 104). That is, multiple clients 101 to 104 share the same screen.

The invention also relates to a 'real time' service. Therefore, the screen operation matters generated in any one terminal device 101 are reflected in the remaining terminal devices 102 to 104 without any time delay.

The invention also relates to a 'web whiteboard' service. Therefore, the whiteboard-dedicated software is not installed and operated in the local network, but the browser software installed in the client terminal device 100 connects the web server to adopt the manner in which the service operates. Accordingly, the present invention can operate by using the web server 200 installed in a remote place in an open Internet environment. As such, when the system is implemented so that the client terminal device 100 connects the remote web server 200 through the Internet, it is common to add a time delay compared to installing a dedicated software in the local network. Nevertheless, the contents (contents) on the canvas 110 are efficiently managed to ensure real-time performance.

In the present invention, the web whiteboard server 200 may be configured as a websocket server, and at this time, image data transmission and reception with the web whiteboard client 100 is encoded in a base64 method (base64) and other data transmission and reception are performed. Is encoded as string data in JSON format. In the websocket technology, the message header is not sent except when the server and the client are initially connected. Therefore, the websocket technology is not only advantageous in terms of network cost but also enables bi-directional communication between the server and the client. The message can be processed quickly. At this time, the web whiteboard server 200 is preferably implemented in a language that can implement the WebSocket protocol, for example, C # .NET.

The memory DB 201 is a storage space for storing object related data in a real-time web whiteboard service according to the present invention. As described below, in the real-time web whiteboard service according to the present invention, a plurality of web whiteboard clients 100 generate, change, and delete events related to drawing objects and image objects, and thus, a plurality of commands generate a web whiteboard. It is delivered to the server 200. The web whiteboard server B 200 extracts object related data from the collected commands, and the memory DB 201 stores the object related data thus extracted. These data are used for the purpose of operating a real-time web whiteboard service, especially to achieve synchronization of the web whiteboard when a new web whiteboard client is additionally connected.

2 conceptually illustrates the canvas 110 and the editing toolbar 120 implemented in the web whiteboard client according to the present invention.

The canvas 110 is an area displayed on a browser screen of the web whiteboard client 100 to implement a real-time web whiteboard service, and serves as a whiteboard panel displaying various objects (drawing objects, image objects). to be. In addition, the editing toolbar 120 is a set of function menus for creating an object on the canvas 110 or modifying a property of a previously created object in response to a user manipulation. The editing toolbar 120 is implemented as a function button or a color picker, preferably in JavaScript in the canvas 110.

In the present specification, an object that is displayed on the canvas 110 and synchronized between client terminal devices by a web whiteboard service is called an object. More than one such object can be classified as follows:

(1) Drawing object: As drawn by a drawing tool provided on the editing toolbar 120, a line, a pen, a circle, a rectangle, and the like correspond to this. The web page code of the canvas 110 manages information defining the generated drawing object as shown in Table 1.

Table 1

Kinds	Management Information
line	Top-left coordinate of the best rectangle containing the line, two-point coordinates of the line
pen	The coordinates of the various points on which the line is drawn
Circle	Center coordinates, radius values
Square	Top left coordinate, bottom right coordinate

(2) Image object: Selecting a specific file using an import tool provided in the editing toolbar 120 or using a drag and drop operation on the explorer screen to drop a specific file onto the canvas 110 to download the file. Loading from storage (eg, local storage, web disk, cloud disk) is inserted into the canvas (110). Generally, it means an image file (eg JPG), but it can also be implemented as a music file (eg WAV, MP3) or a video file (eg AVI). The web page code of the canvas 110 is information defining the inserted image object and manages data of the file, upper left coordinates, and size information. In the present invention, the image object is preferably expressed using the coordinates of the upper left of the image on the global coordinate system.

(3) Container: A shape tool provided in the editing toolbar 120 provides a group of objects (drawing objects, image objects) to be manipulated as a single object.

On the other hand, it is preferable to apply a layer concept in managing objects. When rendering an object on the screen of the web whiteboard client 100, the object is drawn on the screen from the bottommost object in the layer order so that the layer determines which of the objects overlapping each other is displayed on the screen. 2, it can be seen that part of the object 115 is covered by the object 111 by the layer setting. Regarding layer assignment, layers are set by default in the order of creation (insertion) on the canvas 110. After selecting the object 116 as described below with reference to FIG. 3, the object controller 118 selects the layer. You can raise or lower the layer.

In the present invention, a preferred embodiment of the order of rendering a plurality of objects included in the canvas 110 is as follows. First, objects are displayed on the screen in the layer order, and the editing toolbar 120 is displayed on the canvas 110. Then, highlight 117 is displayed for the object 116 currently selected by the user and object controllers 118a-118c.

Meanwhile, in the present invention, the web page for the web whiteboard service provides generality and openness by implementing in a general web client language (eg, JavaScript). In this case, basic properties and methods for various objects to be created on the canvas 110 are provided. Define the. In other words, drawing objects (lines, pens, circles, rectangles) and image objects inherit DisplayObjects and are defined by overriding the required methods for individual objects.

Since the JavaScript language constituting the web whiteboard client 100 has no inheritance concept like a general object-oriented programming (OOP) language, the present invention further implements object inheritance by inserting a separate adaptive module. . Refers to mouse events according to user manipulation regarding object creation and modification, so onMouseDown, onMouseMove, onMouseUp corresponding to mouse down / move / up events for all objects (drawing objects, image objects) utilized in canvas 110 Defined by inheriting methods.

In addition, as shown in FIG. 1, the web whiteboard client 100 has various types of terminal devices, and the operating systems used in these terminal devices also form various so-called 'multi-platform environments'. As the types of terminal devices vary, the user's operation method is different for each terminal device (e.g., mouse, OTP, trackball, touch pad, touch screen, etc.), and event API functions for each operating system adopted for each terminal device Different. Accordingly, the adaptation module abstracts various APIs according to the multiplatform of the web whiteboard client 100 with onMouseDown, onMouseMove, and onMouseUp methods.

For example, when manipulating a mouse on a personal computer, mousedown, mousemove, and mouseup are used as API functions, and touchstart, touchmove, touchend, and touchcancel are used as API functions when manipulating a touch screen on an Android smartphone. Table 2 shows an example of integrating and abstracting these two multiplatform environments.

TABLE 2

API in a multiplatform environment	Abstracted API
mousedown, touchstart	onMouseDown
mousemove, touchmove	onMouseMove
mouseup, touchend, touchcancel	onMouseUp

Drawing objects and image objects are created, changed, and deleted on the canvas 110 by the combination of such mouse events (mouse down, mouse move, mouse up), and the detailed flow of these processes will be described with reference to FIGS. 5 to 7. It will be described in detail later.

3 is an implementation of the object controllers 118a to 118c, 119a to 119h; 118 and 119 to provide a function of manipulating the object 116 implemented on the canvas 110 of the web whiteboard client 100 in the present invention. It is a figure which shows an example. The highlight 117 is displayed on the object 116 selected by the user by performing a mouse operation or a touch operation on the canvas 110, and the

object controllers

118 and 119 are displayed thereon to display various objects for the object 116. Provide editing operations.

FIG. 3A illustrates object controllers 118a to 118c 118 which implement only basic functions for manipulating objects. The basic functions displayed on the

object controllers

118 and 119 are summarized as follows.

(1) The button 118a is a layer up function button to raise the layer of the object 116. This allows the object to be hidden by other objects.

(2) The button 118b is a LAYER DOWN function button to lower the layer of the object 116. This hides the overlapping parts of other objects in the object.

(3) The button 118c deletes the object 116 from the canvas 110 as a DELETE function button.

Next, FIG. 3B illustrates the object controllers 119a to 119h 119 implemented to extend functions for manipulating an object. The extended functions displayed on the object controller 119 are summarized as follows. In this case, since the buttons 119a to 119c are the same as described above with respect to the basic functions in the buttons 118a to 118c, only the functions added in the extended function will be described below.

(1) The button 119d is a ROTATE function button that rotates the object 116 90 degrees clockwise.

(2) The button 119e is a vertical flip (VERTICAL-FLIP) function button that flips the object 116 in the vertical direction.

(3) The button 119f is a vertical zoom (VERTICAL-ZOOM) function button to increase or decrease the object 116 in the vertical direction.

(4) The button 119g is a horizontal flip (HORIZONTAL-FLIP) function button that flips the object 116 in the left-right direction.

The button 119h is a horizontal zoom (HORIZONTAL-ZOOM) function button that stretches or shrinks the object 116 in the horizontal direction.

Through the

object controllers

118 and 119 described above, the user may perform various editing operations on the object (eg, 116) displayed on the canvas 110 displayed in the browser of the web whiteboard client 100. When such an editing operation is performed on one web whiteboard client (eg, 101), such matter is relayed as it is to the remaining web whiteboard clients 202 to 104 through the web whiteboard server 200 in the form of a command. Accordingly, the same canvas 110 screen is maintained in real time in all web whiteboard clients 100.

Meanwhile, the function buttons illustrated in FIG. 3 are provided as an example for implementing the

object controllers

118 and 119. The type and arrangement of the function buttons may be variously selected according to a designer's selection.

4 is a diagram illustrating the concept of marking an object placed on the canvas 110 in a global coordinate system and a local coordinate system in the present invention. In FIG. 4, the description has been made based on the line objects 131 and 133 having a relatively simple shape. For ease of understanding, a dot is displayed at the start of the line and an arrow is displayed at the end. The start point of the line is the point where the mouse down event is identified and the end point of the line is the point where the mouse up event is identified.

Two line objects 131 and 133 are created on the canvas 110. The line object 131 is a line formed from the start point 110 and 100 to the end point 170 and 190, and the line object 133 is the start point. A line formed from 300 and 240 to the end points 420 and 90.

Global coordinates are a method of setting an upper left corner of the canvas 110 as reference coordinates (0, 0) and indicating coordinates of an object with respect to the entire canvas 110 area. If the line object 131 is displayed in the global coordinate system, the first coordinates (x1, y1) are denoted by the start points 110 and 100 and the second coordinates (x2, y2) are denoted by the end points 170 and 190. Similarly, if the line object 133 is displayed in the global coordinate system, the first coordinates (x1, y1) are represented by starting points 300 and 240 and the second coordinates (x2, y2) are represented by end points 420 and 90.

Local coordinates are a method of first setting an optimal rectangle that includes individual objects and defining the coordinate system separately therein. To display the line object 131 in the local coordinate system, first set an optimal rectangle 132 including the line object 131 and set the local coordinate system having the upper left coordinate (110, 100) as the reference coordinate (0, 0). define. On the local coordinate system inside the optimal rectangle 132, the start point of the line object 131 is (0, 0) and the end point is (60, 90). Reference coordinates (x, y) for the line object 131 are provided together with (110, 100), which is the upper left coordinate of the optimal rectangle 132. Likewise, if the line object 133 is displayed in the local coordinate system, the reference coordinate (x, y) is (300, 90), the start point (x1, y1) is (0, 150), and the end point (x2, y2) is (120, 0). )to be.

In the present invention, the local coordinate system is preferably used for object notation. The local coordinate system simplifies the transmission and reception of messages between the plurality of web whiteboard clients 101 to 104 and the web whiteboard server 200 by utilizing the change command when an object change, particularly an object movement event occurs. There is an advantage in that the rendering of the object is simplified on (110). In addition, these advantages are combined to ultimately improve the real-time responsiveness of the web whiteboard service.

FIG. 5 is a diagram conceptually illustrating overall data transmission and reception between the web whiteboard server 200 and the

web whiteboard clients

101 and 102 to provide a real-time whiteboard service in the present invention.

First, as described above with reference to FIG. 1, in step S10, a plurality of web whiteboard clients 101 to 104 access the web whiteboard server 200 to receive a real-time web whiteboard service. At this time, the web whiteboard client 100 accesses the web whiteboard server 200 by accessing a specific Internet address (eg, a URL) assigned to the real-time web whiteboard service.

In step S11, the web whiteboard server 200 stores user information about the web whiteboard client 100 connected above.

The web whiteboard server 200 stores and manages various events generated in the real-time web whiteboard service as directory data in the memory DB 201. When the web whiteboard client 100 newly connects, in step S12, the web whiteboard server 200 transmits an initialization command while providing directory data to the connected web whiteboard client 100.

In step S13, the web whiteboard client 100 renders the canvas 110 using the provided directory data, thereby rendering the canvas that has been manipulated by the web whiteboard client previously connected in the real-time web whiteboard service. Synchronization with the object state of 110 may be achieved. In this initialization process, not only the information on the object itself but also information on the layer assignment to be described later is included in the directory data to provide perfect synchronization. In addition, the canvas 110 and the editing toolbar 120 are additionally displayed on the client browser screen of the web whiteboard client 100, thereby preparing for utilizing the real-time web whiteboard service.

The web whiteboard client 100 preferably utilizes the change rendering marking in the initialization rendering process of step S13. In the initialization command, information about a plurality of accumulated objects (for example, 100 objects) is transmitted from the web whiteboard server 200. In a general implementation, a rendering process must be performed every time these 100 objects are generated. In this case, the rendering process is performed 100 times. In the present invention, it is preferable to implement only one rendering process at the end of the initialization rendering process while marking only the change rendering when generating these 100 objects. The rendering process displays 100 objects on the screen at one time. This method is much more effective than running 100 rendering processes. Especially, a mobile terminal device having poor graphic performance can provide a significantly smooth display operation.

In operation S14, a user of the first web whiteboard client 101 selects an object creation menu through the editing toolbar 120, selects a drawing object, and performs a mouse down / move / up sequence on the canvas 110. . Alternatively, the image object may be placed on the canvas 110 through drag and drop between the explorer and the canvas 110. When the first web whiteboard client 101 identifies the event, the first web whiteboard client 101 generates and displays a drawing object or an image object on the canvas 110 displayed in the client browser.

In operation S15, the first web whiteboard client 101 transmits an ad / change command sequence related to object generation to the web whiteboard server 200. In the object generation process, a series of add commands and change commands are transmitted to the web whiteboard server 200 in response to a user's mouse manipulation step, which will be described later with reference to FIGS. 6 and 7.

Subsequently, when the web whiteboard server 200 receives an ad / change command sequence related to object generation from the first web whiteboard client 101, the web whiteboard server 200 updates the directory data by reflecting the memory DB 201 in step S16. In step S17, these ad / change command sequences are relayed so that the object generation event generated in the first web whiteboard client 101 is reflected in the remaining web whiteboard clients 102 to 104.

The remaining web whiteboard clients 102-104 may render on the canvas 110 displayed on their browser screen whenever they receive an ad / change command sequence from the web whiteboard server 200. Therefore, it is preferable to mark only that rendering is required (that is, change rendering marking) and to process rendering at once in a routine that performs rendering later. Based on such an embodiment, when the remaining web whiteboard clients 102 to 104 relay the add / change command sequence from the web whiteboard server 200, the change rendering is marked at step S18 and the object creation items are displayed. Save it to storage.

Subsequently, in step S19, the first web whiteboard client 101 changes (moves) or deletes a drawing object or an image object previously created on the canvas 110, or manipulates the

object controllers

118 and 119. Identifies the mouse down / move / up sequence to change the order.

In operation S20, the first web whiteboard client 101 transmits a change command to the web whiteboard server 200 in response to a mouse down / move / up sequence related to changing or deleting an object.

In this case, if the user manipulation generated in the first web whiteboard client 101 is an object movement, the object movement may be simply implemented by utilizing the local coordinate system described above with reference to FIG. 4. That is, for the object movement operation, it is sufficient to provide a change command that simply changes the reference coordinate (x, y) in the local coordinate system in response to the displacement between the identification point of the mouse-down and the identification point of the mouse-up. .

When the web whiteboard server 200 receives the change command related to object change or deletion from the first web whiteboard client 101, the web whiteboard server 200 updates the directory data by reflecting the memory DB 201 in step S21, By relaying the change command in S22, the object change or delete event generated in the first web whiteboard client 101 is reflected in the remaining web whiteboard clients 102 to 104.

As described above in connection with object generation, the remaining web whiteboard clients 102 to 104 receive the change command from the web whiteboard server 200 and render the canvas 110 in step S23 or as described above. Mark change rendering and store object changes or deletions in storage.

Subsequently, in step S24, the plurality of web whiteboard clients 100 check the change rendering to check whether marking is performed. If change rendering is set, the web whiteboard client 100 loads the stored object creation / modification / deletion and reflects it on its canvas 110. The time point at which the web whiteboard client 100 checks the change rendering may be variously implemented. For example, it may be implemented to check change rendering every (1/30) seconds, or apply to check change rendering when a mouse move / up event occurs on the canvas 110. In the latter case, when the user performs a mouse operation on an empty space without an object on the canvas 110, the rendering process is performed only when the object is handled and the rendering process is not performed.

In addition, in relation to the rendering time, the object generation is performed immediately after receiving the ad / change command sequence, but it is possible to implement a method of utilizing change rendering only in case of object change or deletion.

FIG. 6 is a diagram illustrating a process of generating a drawing object (eg, 112) on the canvas 110 in detail according to the present invention. In particular, FIG. 6 illustrates that when the user generates the drawing object 112 through a mouse or a touch operation in the first web whiteboard client 101, the drawing object 112 may also be used in the remaining web whiteboard clients 102 to 104. Indicates techniques that allow for effective reflection.

First, in step S31, the first web whiteboard client 101 identifies an event in which the user selects a specific object by manipulating the editing toolbar 120 displayed in the client browser. Through this, the drawing object to be newly created on the canvas 110 is identified.

In operation S32, the first web whiteboard client 101 identifies a mouse down event on the canvas 110.

In step S33, the first web whiteboard client 101 transmits an add command to the web whiteboard server 200 to set a basic format of the drawing object with respect to the identification point of the mousedown. . At this time, a preferred embodiment of the basic format is to place a prototype of the selected drawing object at the identification point of the mouse down on the global coordinate system of the canvas 110. In FIG. 9A, the first command is an example of an add command that can be used in step S33 for the line object.

When the web whiteboard server 200 receives the add command, it relays to the remaining web whiteboard clients 102 to 104 in step S34.

The remaining web whiteboard clients 102 to 104 generate the basic format of the corresponding drawing object on the canvas 110 displayed in their browser in step S35 when receiving the add command for the specific object. In the case of the first command of FIG. 9A, a line object having a length of 0 starting at the coordinates 80 and 100 is generated on the canvas 110.

Then, in the first web whiteboard client 101, a mouse move event is repeatedly generated by user's operation (S36). This occurs while the user manipulates the mouse or touch screen to accurately draw the corresponding drawing object on the canvas 110.

When the mouse move event is generated, the first web whiteboard client 101 creates a change command reflecting the mouse move identification point in step S37 and transmits the change command to the web whiteboard server 200. In FIG. 9A, the second and third commands are examples of change commands that can be used in step S37 for the line object, and show a state where the end point of the line is changing.

When the web whiteboard server 200 receives the change command, the web whiteboard server 200 relays to the remaining web whiteboard clients 102 to 104 in step S38.

When the remaining web whiteboard clients 102 to 104 receive the change command for the drawing object, the web whiteboard clients 102 to 104 reflect the change to the corresponding drawing object on the canvas 110 displayed in their browser in step S39. In the case of the second and third commands of FIG. 9 (a), the end point is set to the coordinates (100, 150) in the state where the start point of the line is set to the coordinates (80, 100) and then changed back to the coordinates (120, 450). Corresponds to the process. Through this, the detailed process of generating the drawing object in the first web whiteboard client 101 is reflected on the screen in the remaining web whiteboard clients 102 to 104 in real time.

Then, the first web whiteboard client 101 generates a mouse-up event by the user's operation (S40). This means that the user finishes drawing the corresponding drawing object on the canvas 110 to release the mouse click or release the touch screen.

When the mouse-up event occurs, the first web whiteboard client 101 creates a change command for determining the object in step S41 and transmits the change command to the web whiteboard server 200. In FIG. 9A, the fourth command is an example of a change command that can be used in step S41 for the line object, and shows a state where an end point of a line is determined. When creating a change command to confirm a drawing object, it is preferable to change the coordinate system notation of the object from the global coordinate system to the local coordinate system. That is, the expression coordinate system of the drawing object is changed and set on the local coordinate system where the mouse-down identification point is set as the reference coordinate and the last identification point of the mouse move is set as the relative offset coordinate.

When the web whiteboard server 200 receives the change command, the web whiteboard server 200 relays the remaining web whiteboard clients 102 to 104 in step S42.

The remaining web whiteboard clients 102 to 104 determine the drawing object on the canvas 110 displayed in their browser in step S43 when receiving the change command for the drawing object. In the case of the fourth command of FIG. 9A, the line command has a line object having a start point (0, 0) and an end point (40, 350) in a local coordinate system whose reference coordinate is (80, 100).

On the other hand, when a drawing object is newly created, if the size of the drawing object is too small, it is preferable to determine that an error has occurred in user operation and to delete the drawing object automatically.

Accordingly, in step S44, the first web whiteboard client 101 checks whether the distance between the mouse-down identification point and the mouse-up identification point is within a preset threshold range (eg, 5 points).

If it is within the threshold range, the first web whiteboard client 101 creates a removal command for the object in step S45 and transmits it to the web whiteboard server 200. The command of Fig. 9C is an example of a removal command that can be used in this case.

When the web whiteboard server 200 receives the removal command, the web whiteboard server 200 relays to the remaining web whiteboard clients 102 to 104 in step S46, and the remaining web whiteboard clients 102 to 104 correspond to the removal command. As soon as the object is created on the canvas 110, it is removed. If a change rendering setting is used in the process of generating a drawing object, the process of rendering on the canvas 110 may not occur at all.

FIG. 7 illustrates in detail a process of generating an image object (eg, 114) on the canvas 110 in the present invention.

First, in step S51, the first web whiteboard client 101 drags and drops a specific image file (for example, JPG) onto the canvas 110, and in this process, an image file for the image object to be created. As this is specified, the mouse down / up sequence on the canvas 110 is identified.

The first web whiteboard client 101 loads the specified image file as text from the local storage or web disk (cloud disk) by readAsDataURL in step S52. In this case, loading of the image file as text by readAsDataURL is more efficient in the process of transmitting to the web whiteboard server 200 than loading the image file by readArrayBuffer. Since the present invention intends to provide a real-time whiteboard service in an open and general-purpose web environment, it is necessary to increase efficiency even in such detail.

The first web whiteboard client 101 renders the image file on the canvas 110 displayed in its browser in step S53, and the text data and mouse-down identification point or mouse-up identification point previously loaded by readAsDataURL. In step S54 to create an add command for the image object and transmits to the web whiteboard server 200.

When the web whiteboard server 200 receives the add command, it relays to the remaining web whiteboard clients 102 to 104 in step S55.

When the remaining web whiteboard clients 102 to 104 receive the add command for the image object, the web whiteboard clients 102 to 104 generate the corresponding image object on the canvas 110 displayed in their browser in step S56.

FIG. 8 is a diagram illustrating a process in which the web whiteboard server 200 detects and disconnects from a web whiteboard client 200 in real time.

First, the web whiteboard server 200 does not transmit or receive data for a predetermined threshold time among a plurality of web whiteboard clients 100 recorded in the directory data that the web whiteboard server 200 participates in the web whiteboard service in step S71. Identifies the board client (eg 103, 104).

Then, in step S72, the web whiteboard server 200 transmits ping pong commands to these web whiteboard clients 103 and 104.

According to the present invention, the web whiteboard client 100 receiving the ping-pong command returns a ping-pong response. In step S73, only the fourth web whiteboard client 104 returns the ping-pong response.

If so, in step S74, the web whiteboard server 200 regards the third web whiteboard client 103, which has no response to the ping-pong command, as no longer participating in the web whiteboard service and disconnects. Through this process, the amount of data transmission and reception for the web whiteboard service can be prevented from being increased inadequately, thereby increasing the participant capacity of the web whiteboard service and ensuring real-time performance.

Meanwhile, the web whiteboard server 200 and the web whiteboard client 100 asynchronously transmit and receive commands to avoid a situation in which the web whiteboard server 200 is blocked due to a client having a network problem. Through this, it is possible to achieve speed improvement and stability in data packet transmission and reception. That is, by adopting an asynchronous method in server / client communication, even if one of the web whiteboard clients 100 temporarily loses network connection and takes a long time to resolve it, the web whiteboard service for other clients is not affected. . If the synchronous method is slow because the response of the other client due to one client can not guarantee the real-time of the web whiteboard service is not suitable for the present invention.

FIG. 9 illustrates an example in which various commands transmitted and received between the web whiteboard server 200 and the web whiteboard client 100 are configured as a Jason (JavaScript Object Notation; JSON) type to provide a real-time web whiteboard service according to the present invention. It is a figure which shows.

First, FIG. 9A illustrates a command sequence for newly creating a line object on the canvas 110. FIG. 9A illustrates an ad / change command sequence transmitted by the first web whiteboard client 101 in the process described above with reference to FIG. 6.

(1) After selecting that the drawing object to be newly created is a line in the editing toolbar 120, it is assumed that the coordinate at which the mouse-down event first occurs on the canvas 110, that is, the coordinate at one end of the line is (80, 100). The first web whiteboard client 101 generates and sends an add command for a mouse down point in a global coordinate system in a basic format of a line object.

{"cmd": "add", "type": "line", "x": 0, "y": 0, "x1": 80, "y1": 100, "x2": 80, "y2" : 100, "uid": "…"}

That is, the command is an add command for a line object. In this case, the reference coordinate is set to (0, 0) to be a global coordinate system, and both end points of the line are set to (80, 100) to generate and transmit the add command.

(2) As the mouse move event occurs on the canvas 110, the end point of the line object is continuously changed, and the first web whiteboard client 101 continues to send such a situation as a change command so that the remaining web whiteboard client ( 102 ~ 104) also appear on the screen as it is.

{"cmd": "chg", "x2": 100, "y2": 150, "uid": "…"}

{"cmd": "chg", "x2": 120, "y2": 450, "uid": "…"}

That is, the end point is changed to (100, 150) and then back to (120, 450) as the user continuously moves the mouse on the browser screen while the start point of the line object is designated as (80, 100). Indicates. As the series of change commands are transmitted in this way, the end points of the line objects are changed to the same pattern on the screens of all the web whiteboard clients 101 to 104 connected to the web whiteboard server 200 and appear on the screen.

(3) As the mouse-up event occurs on the canvas 110, the end point of the line object is determined. In the present exemplary embodiment, it is assumed that a mouse-up event occurs at coordinates 120 and 450 and is determined as a line object connecting the mouse-down point (80, 100) and the mouse-up point (120, 450).

When the line object is confirmed in this way, the first web whiteboard client 101 generates a change command for changing the display of the object to the local coordinate system and transmits the change command to other web whiteboard clients 102 to 104.

{"cmd": "chg", "x": 80, "y": 100, "x1": 0, "y1": 0, "x2": 40, "y2": 350, "uid": " … "}

That is, assuming the optimal rectangle containing the line object, specify the upper left coordinate as (x, y) as the reference coordinate, set the starting point of the line to (x1, y1) within the optimal rectangle, and set the ending point of the line. It is desirable to operate a local coordinate system that specifies (x2, y2), since it is advantageous when dealing with object movements afterwards. In this embodiment, the upper left corner of the rectangle is (80, 100), so (x, y) is set to (80, 100), and since the starting point of the line coincides with the upper left point, (x1, y1) is (0, 0). The end point of the line (120, 450) sets (x2, y2) to (40, 350) with the upper left end (80, 100) as a reference. Therefore, the above change command is to change the method of expressing the object from the global coordinate system to the local coordinate system while confirming the object.

FIG. 9B illustrates a command for moving a specific object already created on the canvas 110. Since the object itself is not changed but only a position, a change command that changes only the (x, y) coordinates representing the upper left position can be used to move the object. The change command to change the reference coordinate to (250, 100) since the upper left position (that is, the reference coordinate) of the line object generated in FIG. 9 (a) was (80, 100) but the object is moved +170 points horizontally. Sent. In this case, the object identification information uid of the change command can easily identify the target object of the change command by using the uid value allocated in FIG. 9A as it is.

FIG. 9C illustrates a command for deleting a specific object already created on the canvas 110, and FIG. 9D illustrates a command for increasing or decreasing the layer order for the specific object. As described above, the target object can be easily specified through the object identification information uid.

On the other hand, looking at the command syntax above, it can be seen that a unique identifier (uid) is used to identify an object. When generating a drawing object or an image object, a client generates a uid and delivers it to the entire web whiteboard client 100 and the web whiteboard server 200, and the uid is used as a key value from now on. By doing so, the amount of data transmitted and received through the Internet can be reduced to minimize network traffic and to reduce the parsing burden on the web whiteboard client 100.

In addition, the web whiteboard server 200 matches and manages uid values for each object in the directory data, and additionally generates an array for uids to manage and update layer allocation of objects.

On the other hand, the present invention can be implemented in the form of program code that the computer can execute the above process, the program code is stored in a computer-readable recording medium. Such recording media include all kinds of recording devices for storing digital data, such as ROM, RAM, CD-ROM, magnetic tape, floppy disks, optical data storage devices, etc., and carrier waves (e.g., transmission over the Internet). It also includes the implementation in the form of. Program code may be stored and executed in a distributed fashion on networked computer systems.

Claims

A method for providing a real-time web whiteboard in a multiplatform environment between a web whiteboard server and a plurality of web whiteboard clients connected through a network,

A first step of the web whiteboard server setting up a memory DB for the canvas and the user group for the real-time web whiteboard service;

A second step of displaying the canvas and the editing toolbar on respective client browsers by accessing a specific internet address corresponding to the web whiteboard server by the plurality of web whiteboard clients;

A third step of abstractly setting a mouse down event, a mouse move event, and a mouse up event for manipulating a drawing object on the canvas such that a plurality of web whiteboard clients correspond to a multiplatform environment;

A drawing object on a canvas displayed in its client browser as a first web whiteboard client of the plurality of web whiteboard clients identifies an object creation menu selection of the editing toolbar and a mouse down / move / up sequence on the canvas. Generating a drawing object and transmitting an ad / change command sequence for the drawing object to the web whiteboard server to provide a drawing event of the drawing object to the web whiteboard server;

A fifth step in which the web whiteboard server reflects the generation event of the drawing object to the remaining web whiteboard clients by reflecting and relaying an ad / change command sequence transmitted from the first web whiteboard client to the memory DB;

Real-time web whiteboard providing method of the multi-platform environment, including.
The method according to claim 1,

The fourth step performed by the first web whiteboard client may include:

Step 41, identifying a selection for a specific object in the editing toolbar;

A 42nd step of identifying a mouse down on the canvas;

Transmitting an add command to the web whiteboard server to set a preset default format for the selected object with respect to the identification point of the mouse down;

A 44th step of identifying at least one mouth move on the canvas;

Transmitting a change command to the web whiteboard server to reflect the identification point of the mouse move with respect to the selected object;

A forty-sixth step of identifying a mouse-up on the canvas;

Transmitting a change command for confirming the selected object to the web whiteboard server;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that configured to include.
The method according to claim 2,

In the 43rd step, the basic format is to place a preset prototype of the selected object at an identification point of the mouse down on the global coordinate system of the canvas.

In the forty-seventh step, a representation coordinate system of the selected object is set on a local coordinate system in which upper left coordinates of the rectangle including the object are set as reference coordinates and each coordinate on the object is set as a relative offset coordinate based on the reference coordinates. Method of providing a real-time web whiteboard in a multi-platform environment, characterized in that for changing and transmitting a change command to the web whiteboard server.
The method according to claim 3,

The fourth step,

If the distance between the identification point of the mouse-down and the identification point of the mouse-up is within a preset threshold range, transmitting a removal command for the selected object to the web whiteboard server;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
The method according to claim 3,

After the fifth step,

A change command corresponding to an object change according to the mouse down / move / up sequence as the first web whiteboard client identifies a mouse down / move / up sequence for changing an object created on the canvas of the client browser. Transmitting to the web whiteboard server;

The web whiteboard server reflecting a change command transmitted from the first web whiteboard client to the memory DB and relaying the change command to the remaining web whiteboard clients;

When the plurality of web whiteboard clients receive a change command corresponding to an object change from the web whiteboard server, marking a change rendering and storing the object change;

The web whiteboard client inspecting the change rendering and if the marking is set, loading the stored one or more object changes and reflecting them on their canvases;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
The method according to claim 5,

The web whiteboard server and the plurality of web whiteboard clients perform a command transmission and reception asynchronously to avoid a situation in which the web whiteboard server is blocked due to a client having a network problem.

Transmitting a ping-pong command when a web whiteboard client without data transmission / reception is identified for a predetermined time among the plurality of web whiteboard clients accessed by the web whiteboard server in the second step, and disconnecting when there is no response;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
The method according to claim 6,

Performed after the third step,

As the first web whiteboard client identifies a preset image object creation operation and mouse down / up sequence on the canvas, the image file is loaded from storage as text by readAsDataURL to display the image on the canvas displayed in the client browser. Rendering the file and sending a text event loaded by the readAsDataURL to the web whiteboard server and the mouse-down identification point or mouse-up identification point as an add command for the image object to inform the web event of creation of the image object. Providing to the whiteboard server;

Reflecting, by the web whiteboard server, a generation event of the image object to the remaining web whiteboard clients by reflecting and relaying an add command transmitted from the first web whiteboard client to the memory DB;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
The method according to claim 7,

The third step includes a plurality of mouse manipulation APIs and a plurality of touch manipulation APIs that are differently defined in different terminal device operating systems, and the mouse white API, mouse move API, and mouse up API according to the sequence of the manipulation sequence of the web whiteboard server. Real-time web whiteboard providing method of the multi-platform environment, characterized in that by setting the conversion to match.
The method according to claim 7,

After the fifth step,

As the first web whiteboard client identifies a mouse down / move / up sequence for moving the object created on the canvas of the client browser, the first web whiteboard client is used to determine the displacement between the identification point of the mouse up and the identification point of the mouse up. Correspondingly transmitting a change command for changing a reference coordinate in the local coordinate system of the object to the web whiteboard server;

Reflecting, by the web whiteboard server, a move event of the object to the remaining web whiteboard clients by reflecting and relaying a change command transmitted from the first web whiteboard client to the memory DB;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
The method according to claim 9,

The web client language comprises JavaScript,

The web whiteboard client includes an adaptation module that implements the inheritance of basic properties and methods of drawing objects implemented through the web whiteboard in the web client language and implements an API abstraction according to a multiplatform. How to provide real-time web whiteboard in multiplatform environment.
The method according to claim 10,

After the fifth step,

The plurality of web whiteboard clients assign a layer to one or more objects included in the canvas of the client browser by default at the time of creation, and delete, layer down, and layer up the specific objects selected on the canvas. Reallocating a layer for the one or more objects by lowering or raising the layer of the selected object by the layer down function and the layer up function;

The plurality of web whiteboard clients first render the object in layer order, secondly render the editing toolbar, and thirdly render the object controller for the selected object if object selection is identified on the canvas. Rendering the canvas;

Real-time web whiteboard providing method of a multi-platform environment, characterized in that the configuration further comprises.
A computer-readable recording medium having recorded thereon a real-time web whiteboard program for executing a method for providing a real-time web whiteboard in a multiplatform environment according to any one of claims 1 to 11.