KR101380898B1 - Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same - Google Patents
Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same Download PDFInfo
- Publication number
- KR101380898B1 KR101380898B1 KR1020130146077A KR20130146077A KR101380898B1 KR 101380898 B1 KR101380898 B1 KR 101380898B1 KR 1020130146077 A KR1020130146077 A KR 1020130146077A KR 20130146077 A KR20130146077 A KR 20130146077A KR 101380898 B1 KR101380898 B1 KR 101380898B1
- Authority
- KR
- South Korea
- Prior art keywords
- whiteboard
- web
- web whiteboard
- client
- canvas
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q10/00—Administration; Management
- G06Q10/10—Office automation; Time management
- G06Q10/101—Collaborative creation, e.g. joint development of products or services
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F15/00—Digital computers in general; Data processing equipment in general
- G06F15/16—Combinations of two or more digital computers each having at least an arithmetic unit, a program unit and a register, e.g. for a simultaneous processing of several programs
Landscapes
- Engineering & Computer Science (AREA)
- Business, Economics & Management (AREA)
- Human Resources & Organizations (AREA)
- Theoretical Computer Science (AREA)
- Entrepreneurship & Innovation (AREA)
- Computer Hardware Design (AREA)
- Strategic Management (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Economics (AREA)
- Marketing (AREA)
- Operations Research (AREA)
- Quality & Reliability (AREA)
- Tourism & Hospitality (AREA)
- General Business, Economics & Management (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Description
본 발명은 인터넷으로 연결된 웹 상에서 실시간으로 업데이트 공유되는 화이트보드를 구현하는 기술에 관한 것이다. 더욱 상세하게는, 본 발명은 다수의 사용자가 특정의 인터넷 웹페이지에 접속한 후에 당해 웹페이지에 구현된 화이트보드 상에서 컨텐츠를 수정하면 그 수정된 컨텐츠를 다수의 사용자들이 실시간으로 공유할 수 있도록 제공하되, 특히 인터넷에 접속하는 여러 단말장치들에 채택된 다양한 플랫폼 환경(예: 단말장치의 종류, 단말장치의 운영체제, UI 조작체계)에 대응하고 컨텐츠 업데이트를 효율적으로 수행함으로써 동일 공간에서 로컬 네트워크를 통해 작업하고 있는 듯한 실시간성을 나타낼 수 있는 실시간 웹 화이트보드 기술에 관한 것이다.
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.
또한, 이처럼 개방적인 형태의 화이트보드 기술에서는 각종의 단말장치가 접속될 수 있는데, 이들 단말장치는 각자 나름대로의 플랫폼을 가지고 있다. 예를 들어, 개인용컴퓨터(PC)는 마우스 조작을 수행하고, 랩톱 컴퓨터는 터치패드와 마우스 조작을 수행하며, 태블릿 컴퓨터이나 스마트폰은 터치스크린 조작을 수행한다. 그에 따라, 개방적 방식을 채택하면서도 다양한 플랫폼의 단말장치를 모두 수용할 수 있는 화이트보드 기술의 개발이 요구되고 있다.
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.
본 발명의 목적은 인터넷으로 연결된 웹 상에서 실시간으로 업데이트 공유되는 화이트보드 구현 기술을 제공하는 것이다. 더욱 상세하게는, 본 발명의 목적은 다수의 사용자가 특정의 인터넷 웹페이지에 접속한 후에 당해 웹페이지에 구현된 화이트보드 상에서 컨텐츠를 수정하면 그 수정된 컨텐츠를 다수의 사용자들이 실시간으로 공유할 수 있도록 제공하되, 특히 인터넷에 접속하는 여러 단말장치들에 채택된 다양한 플랫폼 환경(예: 단말장치의 종류, 단말장치의 운영체제, UI 조작체계)에 대응하고 컨텐츠 업데이트를 효율적으로 수행함으로써 동일 공간에서 로컬 네트워크를 통해 작업하고 있는 듯한 실시간성을 나타낼 수 있는 실시간 화이트보드 기술을 제공하는 것이다.
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.
이러한 기술적 과제를 달성하기 위한 본 발명은 네트워크를 통해 연결된 웹 화이트보드 서버와 복수 개의 웹 화이트보드 클라이언트 간에 멀티플랫폼 환경의 실시간 웹 화이트보드를 제공하는 방법으로서, 웹 화이트보드 서버가 실시간 웹 화이트보드 서비스에 대해 캔버스 및 유저그룹을 위한 메모리 DB를 설정하는 제 1 단계; 복수 개의 웹 화이트보드 클라이언트가 웹 화이트보드 서버에 대응되는 특정의 인터넷주소에 접속함으로써 각자의 클라이언트 브라우저 상에 캔버스와 편집툴바를 표시하는 제 2 단계; 웹 화이트보드 클라이언트가 멀티플랫폼 환경에 대응하도록 캔버스 상에서 드로잉 오브젝트를 조작하기 위한 마우스다운 이벤트, 마우스무브 이벤트, 마우스업 이벤트를 추상화 설정하는 제 3 단계; 제 1 웹 화이트보드 클라이언트가 편집툴바의 오브젝트 생성 메뉴 선택과 캔버스에서의 마우스 다운/무브/업 시퀀스를 식별함에 따라 자신의 클라이언트 브라우저에 표시된 캔버스 상에 드로잉 오브젝트를 생성하고 웹 화이트보드 서버로 드로잉 오브젝트에 대한 애드/체인지 커맨드 시퀀스를 전송하여 드로잉 오브젝트의 생성 이벤트를 웹 화이트보드 서버에 제공하는 제 4 단계; 웹 화이트보드 서버가 제 1 웹 화이트보드 클라이언트로부터 전송되는 애드/체인지 커맨드 시퀀스를 메모리 DB에 반영하고 중계함으로써 드로잉 오브젝트의 생성 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 제 5 단계;를 포함하여 구성된다.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 the web whiteboard client to manipulate the drawing object on the canvas so as to correspond to the multiplatform environment; As the first web whiteboard client identifies the Create Object menu selection on the Edit toolbar and the mouse down / move / up sequence on the canvas, it creates a drawing object on the canvas displayed in its client browser and draws it to the web whiteboard server. Transmitting an add / change command sequence to the web whiteboard server to generate a drawing object creation event; And 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 the ad / change command sequence transmitted from the first web whiteboard client to the memory DB. .
이때, 제 1 웹 화이트보드 클라이언트가 수행하는 제 4 단계는, 편집툴바에서 특정 오브젝트에 대한 선택을 식별하는 제 41 단계; 캔버스에서 마우스다운을 식별하는 제 42 단계; 마우스다운의 식별지점에 대해 위 선택된 오브젝트에 대한 미리 설정된 기본 포맷을 설정하는 애드 커맨드를 웹 화이트보드 서버로 전송하는 제 43 단계; 캔버스에서 마우스무브를 하나 이상 식별하는 제 44 단계; 위 선택된 오브젝트에 대하여 마우스무브의 식별지점을 반영하는 체인지 커맨드를 웹 화이트보드 서버로 전송하는 제 45 단계; 캔버스에서 마우스업을 식별하는 제 46 단계; 위 선택된 오브젝트를 확정하기 위한 체인지 커맨드를 웹 화이트보드 서버로 전송하는 제 47 단계;를 포함하여 구성되는 것이 바람직하다.In this case, the fourth step performed by the first web whiteboard client may include a step 41 for identifying a selection for a specific object in the editing toolbar; A 42nd step of identifying a mouse down on the canvas; A 43rd step of sending an add command to a web whiteboard server to set 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 with respect to the selected object; A forty-sixth step of identifying mouse-ups on the canvas; And a fifty-seventh step of transmitting a change command for confirming the selected object to the web whiteboard server.
또한, 제 4 단계는, 마우스다운의 식별지점과 마우스업의 식별지점 간의 거리가 미리 설정된 임계범위 이내인 경우에는 위 선택된 오브젝트에 대한 제거 커맨드를 웹 화이트보드 서버로 전송하는 제 48 단계;를 더 포함하여 구성되는 것이 바람직하다.In addition, the fourth step may further include the step 48 of transmitting a removal command for the selected object to the web whiteboard server when the distance between the identification point of the mouse down and the identification point of the mouse up is within a preset threshold range. It is preferable to comprise.
또한, 제 43 단계에서 기본 포맷은 캔버스의 전역 좌표계 상에서 마우스다운의 식별지점에 위 선택된 오브젝트의 미리 설정된 프로토타입을 배치하는 것이고, 제 47 단계는 오브젝트를 포함하는 최적 사각형의 좌상단 좌표를 레퍼런스 좌표로 설정하고 오브젝트 상의 각 좌표를 레퍼런스 좌표를 기준으로 한 상대 오프셋 좌표로 설정한 로컬 좌표계 상으로 위 선택된 오브젝트의 표현 좌표계를 변경 설정하여 체인지 커맨드를 웹 화이트보드 서버로 전송하는 것이 바람직하다.In addition, in step 43, the basic format is to place a preset prototype of the selected object on 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 optimal rectangle including the object is referred to as the reference coordinate. It is preferable to change and set the representation coordinate system of the above-selected object on the local coordinate system in which the coordinates on the object are set to the relative offset coordinates based on the reference coordinates, and transmit a change command to the web whiteboard server.
또한, 본 발명에 따른 실시간 웹 화이트보드 제공방법은, 제 1 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스 상에 생성된 오브젝트를 변경하기 위한 마우스 다운/무브/업 시퀀스를 식별함에 따라 마우스 다운/무브/업 시퀀스에 따른 오브젝트 변경 사항에 대응하는 체인지 커맨드를 웹 화이트보드 서버로 전송하는 단계; 웹 화이트보드 서버가 제 1 웹 화이트보드 클라이언트로부터 전송되는 체인지 커맨드를 메모리 DB에 반영하고 나머지 웹 화이트보드 클라이언트로 중계하는 단계; 복수의 웹 화이트보드 클라이언트는 웹 화이트보드 서버로부터 오브젝트 변경 사항에 대응하는 체인지 커맨드를 제공받으면 변경랜더링을 마킹하고 오브젝트 변경 사항을 저장하는 단계; 복수의 웹 화이트보드 클라이언트는 변경랜더링을 검사하여 마킹 설정되어 있으면 위 저장된 하나이상의 오브젝트 변경 사항을 로딩하여 자신의 캔버스 상에 반영하는 단계;를 더 포함하여 구성되는 것이 바람직하다.In addition, the real-time web whiteboard providing method according to the present invention, as the first web whiteboard client identifies the mouse down / move / up sequence for changing the object created on the canvas of the client browser mouse down / move / Transmitting a change command corresponding to the object change according to the up sequence to the web whiteboard server; 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 further include loading the one or more object changes stored above and reflecting them on their canvas, if the marking is set by checking the change rendering.
또한, 본 발명에서 웹 화이트보드 서버와 복수 개의 웹 화이트보드 클라이언트는 비동기 방식으로 커맨드 송수신을 수행하여 네트워크에 문제가 발생한 클라이언트로 인해 웹 화이트보드 서버가 블락 당하는 상황을 회피하고, 본 발명은 웹 화이트보드 서버가 제 2 단계에서 접속한 복수 개의 웹 화이트보드 클라이언트 중에서 미리 설정된 시간동안 데이터 송수신이 없는 웹 화이트보드 클라이언트가 식별되면 핑퐁 커맨드를 전송하여 응답이 없는 경우에는 접속 해제하는 단계;를 더 포함하여 구성되는 것이 바람직하다.In addition, in the present invention, 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 problem in the network. If a web whiteboard client without data transmission and reception is identified for a predetermined time from among the plurality of web whiteboard clients accessed by the board server in the second step, transmitting a ping-pong command and disconnecting if there is no response. It is preferred to be configured.
또한, 본 발명에 따른 실시간 웹 화이트보드 제공방법은, 제 1 웹 화이트보드 클라이언트가 미리 설정된 이미지 오브젝트 생성 조작과 캔버스에서의 마우스 다운/업 시퀀스를 식별함에 따라 스토리지로부터 이미지 파일을 readAsDataURL에 의해 텍스트로 로딩하여 클라이언트 브라우저에 표시된 캔버스 상에 이미지 파일을 랜더링하고, 웹 화이트보드 서버로 readAsDataURL에 의해 로딩한 텍스트 데이터와 마우스다운 식별지점 또는 마우스업 식별지점을 이미지 오브젝트에 대한 애드 커맨드로 전송함으로써 이미지 오브젝트의 생성 이벤트를 웹 화이트보드 서버에 제공하는 단계; 웹 화이트보드 서버가 제 1 웹 화이트보드 클라이언트로부터 전송되는 애드 커맨드를 메모리 DB에 반영하고 중계함으로써 이미지 오브젝트의 생성 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 단계;를 더 포함하여 구성될 수 있다.In addition, the real-time web whiteboard providing method according to the present invention, as the first web whiteboard client identifies a predetermined image object creation operation and the mouse down / up sequence on the canvas, the image file from the storage as a text by readAsDataURL 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.
본 발명에서 제 2 단계는 상이한 단말장치 운영체제에서 상이하게 정의되어 있는 복수 개의 마우스 조작 API와 복수 개의 터치 조작 API를 웹 화이트보드 서버가 조작 시퀀스의 순서에 따라 마우스다운 API, 마우스무브 API, 마우스업 API로 매칭시켜 변환 설정하는 것이 바람직하다.In the present invention, the second step includes a plurality of mouse manipulation APIs and a plurality of touch manipulation APIs defined differently in different terminal operating systems, and the web whiteboard server according to the sequence of the manipulation sequence. It is preferable to set conversion by matching with API.
또한, 본 발명에 따른 실시간 웹 화이트보드 제공방법은, 제 1 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스 상에 생성된 오브젝트를 이동하기 위한 마우스 다운/무브/업 시퀀스를 식별함에 따라 마우스다운의 식별지점으로부터 마우스업의 식별지점 간의 디스플레이스먼트에 대응하여 오브젝트의 로컬 좌표계에서 레퍼런스 좌표를 변경하는 체인지 커맨드를 웹 화이트보드 서버로 전송하는 단계; 웹 화이트보드 서버가 제 1 웹 화이트보드 클라이언트로부터 전송되는 체인지 커맨드를 메모리 DB에 반영하고 중계함으로써 오브젝트의 무브 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 단계;를 더 포함하여 구성되는 것이 바람직하다.In addition, the real-time web whiteboard providing method according to the present invention, the identification point of the mouse down as the first web whiteboard client identifies the 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 reflects the change command transmitted from the first web whiteboard client to the memory DB and relays the move event of the object to the remaining web whiteboard clients.
본 발명에서 웹 클라이언트 언어는 자바스크립트를 포함하여 구성되고, 웹 화이트보드 클라이언트는 웹 화이트보드를 통해 구현되는 드로잉 오브젝트의 기본 속성과 메쏘드에 대한 상속성을 웹 클라이언트 언어에 구현하고 멀티플랫폼에 따른 API 추상화를 구현하는 적응 모듈을 구비한 것이 바람직하다.In the present invention, the web client language is configured to include JavaScript, and the web whiteboard client implements the inheritance of the basic properties and methods of the drawing object implemented through the web whiteboard in the web client language, and abstracts the API according to the multiplatform. It is desirable to have an adaptation module that implements.
또한, 본 발명에 따른 실시간 웹 화이트보드 제공방법은, 복수 개의 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스에 포함된 하나이상의 오브젝트에 대해 디폴트로는 생성 시점을 기준으로 레이어를 할당하고, 캔버스 상에서 선택된 특정 오브젝트에 대해 삭제 기능, 레이어 다운 기능, 레이어 업 기능을 제공하는 오브젝트 콘트롤러를 구현하며, 레이어 다운 기능과 레이어 업 기능에 의해 위 선택된 오브젝트의 레이어를 낮추거나 올려서 하나이상의 오브젝트에 대한 레이어를 재할당하는 단계; 복수 개의 웹 화이트보드 클라이언트가 일차로 오브젝트를 레이어 순서대로 랜더링하고, 이차로 편집툴바를 랜더링하고, 삼차로 캔버스 상에서 오브젝트 선택이 식별되면 위 선택된 오브젝트에 대한 오브젝트 콘트롤러를 랜더링함에 의해 캔버스를 랜더링하는 단계;를 더 포함하여 구성될 수 있다.In addition, the real-time web whiteboard providing method according to the present invention, a plurality of web whiteboard client by default assigns a layer on the basis of the creation time for one or more objects included in the canvas of the client browser, the specific selected on the canvas It implements an object controller that provides delete, layer-down, and layer-up functions for objects, and reassigns layers for one or more objects by lowering or raising the layer of the object selected by the layer-down and layer-up functions. step; The plurality of web whiteboard clients first render the canvas by rendering the objects in layer order, secondly rendering the editing toolbar, and thirdly rendering the 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 executing 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 the use of the whiteboard for multi-party meetings or document sharing is necessary suddenly occurs 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]은 본 발명에 따른 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법이 구현되는 전체 시스템의 구성을 개념적으로 도시한 도면.
[도 2]는 본 발명에서 캔버스와 편집툴바를 개념적으로 나타내는 도면.
[도 3]은 본 발명에서 오브젝트 콘트롤러의 일 예를 나타내는 도면.
[도 4]는 본 발명에서 캔버스 상에 놓여진 오브젝트를 전역 좌표계와 로컬 좌표계로 표기하는 개념을 나타내는 도면.
[도 5]는 본 발명에서 웹 화이트보드 서버와 웹 화이트보드 클라이언트 간에 이루어지는 전체 데이터 송수신을 개념적으로 나타내는 도면.
[도 6]은 본 발명에서 드로잉 오브젝트의 생성 과정을 나타내는 도면.
[도 7]은 본 발명에서 이미지 오브젝트의 생성 과정을 나타내는 도면.
[도 8]은 본 발명에서 실시간 웹 화이트보드 서비스에서 탈퇴한 웹 화이트보드 클라이언트를 웹 화이트보드 서버가 실시간으로 검출하여 접속 해제하는 과정을 나타내는 도면.
[도 9]는 본 발명에서 웹 화이트보드 서버와 웹 화이트보드 클라이언트 간에 송수신되는 커맨드의 예를 나타내는 도면.1 is a diagram conceptually showing a 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 is a view conceptually showing a canvas and an editing toolbar in the present invention.
3 is a diagram illustrating 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.
5 is a view conceptually showing the entire data transmission and reception between the web whiteboard server and the web whiteboard client in the present invention.
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]은 본 발명에 따른 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법이 구현되는 전체 시스템의 구성을 개념적으로 도시한 도면이다. [도 1]을 참조하면, 본 발명에 따른 전체 시스템은 웹 화이트보드 서버(200)와 다수의 웹 화이트보드 클라이언트(101 ~ 104; 100)가 네트워크(인터넷)를 통해 연결되어 있다. 이때, 웹 화이트보드 클라이언트는 랩톱 컴퓨터(101), 태블릿 컴퓨터(102), 스마트폰(103), 개인용 컴퓨터(104) 등으로 구현될 수 있으며, 이들 장치의 운영체제도 윈도우즈, 안드로이드, 리눅스, 맥OS, iOS 등으로 다양하게 구현될 수 있다. 또한, 웹 화이트보드 서버(200)는 실시간 웹 화이트보드 서비스에서 발생된 각종 이벤트를 디렉토리 데이터로서 저장하기 위한 메모리 DB(201)를 내장하거나 외부 스토리지로 구비한다.1 is a diagram conceptually illustrating 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
실시간 웹 화이트보드 서비스를 제공하기 위한 웹페이지는 특정의 웹 클라이언트 언어(예: 자바스크립트)로 작성하여 특정의 인터넷주소(예: URL)에 대응시켜 마련해두고 있다. 또한, 실시간 웹 화이트보드 서비스를 위해 화이트보드 별로 캔버스(110)가 설정되어 있다. 캔버스(110)는 각종의 오브젝트(드로잉 오브젝트, 이미지 오브젝트)를 표시하기 위한 화이트보드 패널의 역할을 하는 부분이다. 한편, 웹 화이트보드 클라이언트(100)의 브라우저 화면에서 캔버스(110)가 구현될 때에는 오브젝트를 편집하기 위한 기능메뉴들의 집합인 편집툴바(120)가 표시된다. 이때, 편집툴바(120)는 편이상 붙인 것으로 반드시 TOOLBAR 형태로 화면에 표시되어야 하는 것은 아니다.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
웹 화이트보드 클라이언트(100)에는 브라우저 소프트웨어(예: 익스플로러, 크롬, 사파리 등)가 설치되어 있다. 사용자는 이러한 브라우저 소프트웨어를 활용하여 실시간 웹 화이트보드 서비스를 위해 미리 설정된 인터넷주소를 접속하는데, 당해 접속한 페이지에 웹 화이트보드 클라이언트(100)가 접속할 웹 화이트보드 서버의 주소가 명시되어 있어 웹 페이지를 오픈하면 웹 화이트보드 서버(200)에 접속하게 된다. 본 발명을 구현함에 있어서 웹 화이트보드 서비스를 위해 미리 설정된 인터넷 주소를 접속하면 일차적으로 해당 웹 서버로부터 웹 페이지를 서비스받고 그 웹페이지 안에 식별된 웹 화이트보드 서버(200)의 주소로 접속하여 화이트보드 서비스가 활성화되도록 구현되는 것이 일반적이다. 이때, 웹 페이지를 서비스하는 웹서버(미도시)와 웹 화이트보드 서버(200)는 상이하게 마련되는 것이 일반적이다. 물리적으로 전혀 다른 서버에 설치될수도 있고, 또는 물리적으로는 동일한 서버이나 별도의 프로세스로 설치될수도 있다. 웹 화이트보드 클라이언트(100)의 브라우저(즉, 클라이언트 브라우저)가 해당 웹페이지를 오픈하면 브라우저 상에 캔버스(110)와 편집툴바(120)가 표시되며, 그에 따라 실시간 웹 화이트보드 서비스를 이용할 수 있게 된다.The
본 발명은 '화이트보드 서비스'에 관한 것이다. 따라서, 여러 클라이언트 단말장치(101 ~ 104) 중에서 어느 하나의 단말장치(예: 101)에서 화면 조작(예: 드로잉, 이미지 삽입, 내용 수정, 텍스트 작성 등)이 발생하면 그러한 사항이 나머지 단말장치(예: 102 ~ 104)에도 그대로 반영되도록 한다. 즉, 다수의 클라이언트들(101 ~ 104)이 동일한 화면을 공유하도록 해준다.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
또한, 본 발명은 '실시간' 서비스에 관한 것이다. 따라서, 어느 하나의 단말장치(101)에서 발생한 화면 조작 사항이 별다른 시간지연 없이 나머지 단말장치(102 ~ 104)에도 반영되도록 한다.The invention also relates to a 'real time' service. Therefore, the screen operation matters generated in any one
또한, 본 발명은 '웹 화이트보드' 서비스에 관한 것이다. 따라서, 로컬 네트워크 내에서 화이트보드 전용 소프트웨어를 미리 설치하여 동작하는 것이 아니라, 클라이언트 단말장치(100)에 설치된 브라우저 소프트웨어가 웹 서버를 접속함으로써 서비스가 동작하는 방식을 채택하고 있다. 그에 따라 본 발명은 개방된 인터넷 환경에서 원격지에 설치된 웹 서버(200)를 활용하여 동작시키는 것도 가능하다. 이처럼 원격지의 웹 서버(200)를 인터넷을 통해 클라이언트 단말장치(100)가 접속하도록 시스템을 구현하면 로컬 네트워크에 전용 소프트웨어를 설치하는 것에 비해 시간 지연이 추가되는 것이 일반적인데, 본 발명에서는 이러한 시간 지연에도 불구하고 실시간 성능을 보장할 수 있도록 캔버스(110) 상의 내용물(컨텐츠)을 효율적으로 관리한다.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
본 발명에서 웹 화이트보드 서버(200)는 웹소켓 서버(WebSocket server)로 구성될 수 있으며, 이때 웹 화이트보드 클라이언트(100)와의 이미지 데이터 송수신은 베이스64 방식(base64)으로 인코딩되고 그 외의 데이터 송수신은 JSON 형태의 스트링 데이터로 인코딩된다. 웹소켓 기술에서는 서버와 클라이언트가 최초 접속될 때를 제외하고는 메세지 헤더를 보내지 않기 때문에 네트워크 비용 측면에서 이득이 클 뿐만 아니라, 특히 서버/클라이언트 간의 양방향 통신이 가능하여 웹 화이트보드 서버(200)에서 메세지를 신속하게 처리할 수 있다. 이때, 웹 화이트보드 서버(200)는 웹소켓 프로토콜을 구현할 수 있는 언어, 예컨대 C#.NET으로 구현되는 것이 바람직하다.In the present invention, the
메모리 DB(201)는 본 발명에 따른 실시간 웹 화이트보드 서비스에서 오브젝트 관련 데이터를 저장하기 위한 스토리지 공간이다. 후술하는 바와 같이, 본 발명에 따른 실시간 웹 화이트보드 서비스에서는 다수의 웹 화이트보드 클라이언트(100)에서 드로잉 오브젝트와 이미지 오브젝트에 관한 생성, 변경, 삭제 이벤트가 발생하고 그에 따라 다수의 커맨드가 웹 화이트보드 서버(200)로 전달된다. 웹 화이트보드 서버B(200)는 이렇게 모인 커맨드로부터 오브젝트 관련 데이터를 추출하는데, 메모리 DB(201)는 이렇게 추출된 오브젝트 관련 데이터를 저장한다. 이들 데이터는 실시간 웹 화이트보드 서비스를 운용하는 목적으로 사용되며, 특히 신규의 웹 화이트보드 클라이언트가 추가로 연결될 때 웹 화이트보드의 동기화를 달성하기 위해 활용된다.
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
[도 2]는 본 발명에서 웹 화이트보드 클라이언트에 구현되는 캔버스(110)와 편집툴바(120)를 개념적으로 나타내는 도면이다.2 is a diagram conceptually illustrating a canvas 110 and an editing toolbar 120 implemented in a web whiteboard client according to the present invention.
캔버스(110)는 실시간 웹 화이트보드 서비스를 구현하기 위해 웹 화이트보드 클라이언트(100)의 브라우저 화면에 표시되는 영역으로서 각종의 오브젝트(드로잉 오브젝트, 이미지 오브젝트)를 표시하는 화이트보드 패널의 역할을 하는 부분이다. 또한, 편집툴바(120)는 사용자 조작에 대응하여 캔버스(110) 상에 오브젝트를 생성하거나 기 생성된 오브젝트의 속성을 수정하기 위한 기능메뉴들의 집합이다. 편집툴바(120)는 기능버튼이나 컬러피커(color picker) 등으로 구현되는데, 바람직하게는 캔버스(110) 내에 자바스크립트로 구현된다.The canvas 110 is an area displayed on a browser screen of the
본 명세서에서는 캔버스(110)에 표시되어 웹 화이트보드 서비스에 의해 클라이언트 단말장치들 간에 동기화가 이루어지는 대상물을 오브젝트(object)라고 부른다. 이와 같은 오브젝트를 편이상 구분하면 다음과 같다.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) 드로잉 오브젝트 : 편집툴바(120)에 마련된 드로잉 툴(drawing tool)에 의해 그려지는 것으로서 라인(line), 펜(pen), 써클(circle), 사각형(rectangle) 등이 여기에 해당된다. 캔버스(110)의 웹페이지 코드는 그 생성된 드로잉 오브젝트를 정의하는 정보를 [표 1]과 같이 관리한다.(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].
(2) 이미지 오브젝트 : 편집툴바(120)에 마련된 임포트 툴(import tool)을 사용하여 특정 파일을 선택하거나 탐색기 화면에서 드래그&드롭 조작을 사용하여 특정 파일을 캔버스(110)에 드롭하면 해당 파일을 스토리지(예: 로컬 스토리지, 웹디스크, 클라우드 디스크)로부터 로딩하여 캔버스(110)에 삽입한다. 일반적으로는 이미지 파일(예: JPG)을 의미하지만 음악 파일(예: WAV, MP3)이나 동영상 파일(예: AVI)로 구현될 수도 있다. 캔버스(110)의 웹페이지 코드는 그 삽입된 이미지 오브젝트를 정의하는 정보로서 해당 파일의 데이터와 좌상단 좌표, 크기 정보를 관리한다. 본 발명에서 이미지 오브젝트는 전역 좌표계 상에서 이미지 좌상단의 좌표를 이용하여 표한하는 것이 바람직하다.(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) : 편집툴바(120)에 마련된 쉐이프 툴(shape tool)에 의해 복수 개의 오브젝트(드로잉 오브젝트, 이미지 오브젝트)를 그룹으로 묶어서 단일 오브젝트처럼 조작할 수도 있도록 제공한다. (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.
한편, 오브젝트를 관리함에 있어서 레이어 개념을 적용하는 것이 바람직하다. 웹 화이트보드 클라이언트(100)의 화면에 오브젝트를 랜더링할 때 레이어 순서에 따라 가장 바닥에 있는 오브젝트부터 화면에 그리므로 레이어는 서로 중첩되는 오브젝트에 대해 어느 것이 화면에 표시될 것인가를 결정한다. [도 2]를 참조하면 레이어 설정에 의해 오브젝트(115)의 일부가 오브젝트(111)에 의해 가려져 있음을 확인할 수 있다. 레이어 할당과 관련하여, 디폴트로는 캔버스(110)에 생성(삽입)되는 순서에 의해 레이어가 설정되는데, [도 3]을 참조하여 후술하는 바와 같이 오브젝트(116)를 선택한 후 오브젝트 콘트롤러(118)에 의해 레이어를 올리거나 내릴 수 있다.On the other hand, it is preferable to apply a layer concept in managing objects. When rendering an object on the screen of the
본 발명에서 캔버스(110)에 포함된 다수의 오브젝트를 랜더링하는 순서의 바람직한 실시예는 다음과 같다. 먼저 오브젝트들을 레이어 순서에 따라 화면에 나타내고, 편집툴바(120)를 캔버스(110) 위에 나타낸다. 그리고 나서, 현재 사용자에 의해 선택된 오브젝트(116)에 대해 하이라이트(117)를 표시하고 오브젝트 콘트롤러(118a ~ 118c)를 나타낸다.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
한편, 본 발명에서 웹 화이트보드 서비스를 위한 웹페이지는 일반적인 웹 클라이언트 언어(예: 자바스크립트)로 구현함으로써 범용성과 개방성을 제공하는데, 이때 캔버스(110)에 생성될 각종 오브젝트에 대해 기본속성과 메쏘드를 정의해둔다. 즉, 드로잉 오브젝트(라인, 펜, 써클, 사각형) 및 이미지 오브젝트는 디스플레이오브젝트(DisplayObject)를 상속하며, 개별 오브젝트 별로 각자 필요한 메쏘드를 오버라이드하여 정의한다.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.
웹 화이트보드 클라이언트(100)를 구성하는 자바스크립트 언어에는 일반 OOP(Object-Oriented Programming) 언어와 같은 상속 개념이 없기에 본 발명에서는 별도의 적응 모듈(adaptive module)을 삽입하여 오브젝트 상속성을 추가로 구현한다. 오브젝트의 생성, 변경과 관련하여 사용자 조작에 따른 마우스 이벤트를 참조하므로 캔버스(110)에서 활용되는 모든 오브젝트(드로잉 오브젝트, 이미지 오브젝트)에 대해 마우스 다운/무브/업 이벤트에 대응되는 onMouseDown, onMouseMove, onMouseUp 메쏘드를 기본적으로 상속받아 정의한다.Since the JavaScript language constituting the
또한, [도 1]에 나타낸 바와 같이 웹 화이트보드 클라이언트(100)는 단말장치의 종류도 다양하고 이들 단말장치에 사용되는 운영체제도 다양한 소위 '멀티플랫폼 환경'을 구성하고 있다. 이처럼 단말장치의 종류가 다양함에 따라 사용자의 조작 방식도 단말장치 별로 상이하고(예: 마우스, OTP, 트랙볼, 터치패드, 터치스크린 등), 단말장치에 대해 각자 채택하고 있는 운영체제 별로 이벤트 API 함수도 상이하다. 그에 따라, 적응 모듈에서는 웹 화이트보드 클라이언트(100)의 멀티플랫폼에 따른 다양한 API들을 onMouseDown, onMouseMove, onMouseUp 메쏘드로 추상화한다.In addition, as shown in FIG. 1, the
예를 들어, 개인용 컴퓨터에서 마우스를 조작할 때에는 API 함수로서 mousedown, mousemove, mouseup가 사용되고, 안드로이드 스마트폰에서 터치스크린을 조작할 때에는 API 함수로서 touchstart, touchmove, touchend, touchcancel이 사용된다. 이러한 2가지 멀티플랫폼 환경을 적응 모듈이 통합하여 추상화하는 예는 [표 2]와 같다.For example, when operating 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 by the adaptation module.
이와 같은 마우스 이벤트(마우스다운, 마우스무브, 마우스업)의 조합에 의해 캔버스(110) 상에 드로잉 오브젝트 및 이미지 오브젝트가 생성, 변경, 삭제되는데, 이들 과정의 상세한 흐름은 [도 5] 내지 [도 7]을 참조하여 이후에 상세하게 설명한다.
Drawing objects and image objects are created, changed, and deleted on the canvas 110 by the combination of mouse events (mouse down, mouse move, and mouse up). The detailed flow of these processes is shown in FIGS. 7] will be described in detail later.
[도 3]은 본 발명에서 웹 화이트보드 클라이언트(100)의 캔버스(110) 상에 구현된 오브젝트(116)를 조작하는 기능을 제공하는 오브젝트 콘트롤러(118a ~ 118c, 119a ~ 119h; 118, 119)의 구현 예를 나타내는 도면이다. 캔버스(110) 상에서 사용자가 마우스 조작이나 터치 조작을 수행하여 선택한 오브젝트(116)에 대해서는 하이라이트(117)가 표시되며, 그 위에 오브젝트 콘트롤러(118, 119)가 표시되어 해당 오브젝트(116)에 대한 다양한 편집조작을 제공한다.3 is an
[도 3]의 (a)는 오브젝트를 조작하기 위한 기본 기능만 구현된 오브젝트 콘트롤러(118a ~ 118c; 118)를 도시한다. 오브젝트 콘트롤러(118, 119)에 표시된 기본 기능을 정리하면 다음과 같다.3 shows
(1) 버튼(118a)는 레이어 업(LAYER UP) 기능 버튼으로 해당 오브젝트(116)의 레이어를 올린다. 이를 통해 해당 오브젝트에서 다른 오브젝트에 의해 가려져있던 부분이 드러나도록 한다.(1) The
(2) 버튼(118b)는 레이어 다운(LAYER DOWN) 기능 버튼으로 해당 오브젝트(116)의 레이어를 내린다. 이를 통해 해당 오브젝트에서 다른 오브젝트와 중첩되는 부분이 가려져서 안보이도록 한다.(2) The
(3) 버튼(118c)는 삭제(DELETE) 기능 버튼으로 캔버스(110)로부터 해당 오브젝트(116)를 삭제한다.(3) The
다음으로, [도 3]의 (b)는 오브젝트를 조작하기 위한 확장 기능까지 구현된 오브젝트 콘트롤러(119a ~ 119h; 119)를 도시한다. 오브젝트 콘트롤러(119)에 표시된 확장 기능을 정리하면 다음과 같다. 이때, 버튼(119a ~ 119c)는 기본 기능과 관련하여 버튼(118a ~ 118c)에서 전술하였던 바와 동일하므로, 이하에서는 확장 기능에서 추가된 기능에 대해서만 기술한다.Next, (b) of FIG. 3 shows object
(1) 버튼(119d)는 로테이트(ROTATE) 기능 버튼으로 해당 오브젝트(116)를 시계방향으로 90도 회전시킨다.(1) The
(2) 버튼(119e)는 수직 플립(VERTICAL-FLIP) 기능 버튼으로서 해당 오브젝트(116)를 상하 방향으로 뒤집는다.(2) The
(3) 버튼(119f)는 수직 줌(VERTICAL-ZOOM) 기능 버튼으로서 해당 오브젝트(116)를 상하 방향으로 늘리거나 줄인다.(3) The
(4) 버튼(119g)는 수평 플립(HORIZONTAL-FLIP) 기능 버튼으로서 해당 오브젝트(116)를 좌우 방향으로 뒤집는다.(4) The
(5) 버튼(119h)는 수평 줌(HORIZONTAL-ZOOM) 기능 버튼으로서 해당 오브젝트(116)를 좌우 방향으로 늘리거나 줄인다.The
이상과 같은 오브젝트 콘트롤러(118, 119)를 통해 사용자는 웹 화이트보드 클라이언트(100)의 브라우저에 표시된 캔버스(110) 상에 표시된 오브젝트(예: 116)에 대해 각종의 편집 조작을 수행할 수 있다. 어느 하나의 웹 화이트보드 클라이언트(예: 101)에서 그와 같은 편집 조작이 이루어지면 그러한 사항은 커맨드의 형식으로 웹 화이트보드 서버(200)를 통해 나머지 웹 화이트보드 클라이언트(202 ~ 104)로 그대로 중계되며, 그에 따라 모든 웹 화이트보드 클라이언트(100)에서 동일한 캔버스(110) 화면을 실시간으로 유지하게 된다.Through the
한편, [도 3]에 도시된 기능 버튼들은 오브젝트 콘트롤러(118, 119)를 구현하기 위한 일 예로서 제시된 것이며, 설계자의 선택에 따라 기능 버튼의 종류와 배치는 다양하게 이루어질 수 있다.
Meanwhile, the function buttons illustrated in FIG. 3 are provided as an example for implementing the
[도 4]는 본 발명에서 캔버스(110) 상에 놓여진 오브젝트를 전역 좌표계와 로컬 좌표계로 표기하는 개념을 나타내는 도면이다. [도 4]에서는 비교적 간단한 형태인 라인 오브젝트(131, 133)를 기준으로 설명하였는데, 이해의 편이를 위해 라인의 시작점에 도트(dot)를 표시하고 종료점에 화살표(arrow)를 표시하였다. 라인의 시작점은 마우스다운 이벤트가 식별된 지점이고 라인의 종료점은 마우스업 이벤트가 식별된 지점이다.FIG. 4 is a diagram illustrating a concept of marking an object placed on the canvas 110 in a global coordinate system and a local coordinate system. In FIG. 4, descriptions have been made on the basis of line objects 131 and 133 having a relatively simple form. For ease of understanding, a dot is displayed at a start point of a line and an arrow is displayed at an end point. 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.
캔버스(110) 위에 2개의 라인 오브젝트(131, 133)가 생성되어 있는데, 라인 오브젝트(131)는 시작점(110, 100)으로부터 종료점(170, 190)까지 형성된 라인이고, 라인 오브젝트(133)는 시작점(300, 240)으로부터 종료점(420, 90)까지 형성된 라인이다.Two line objects 131 and 133 are created on the canvas 110. The
전역 좌표계(global coordinates)는 캔버스(110)의 좌상단을 기준 좌표 (0, 0)으로 설정하고 캔버스(110) 전체 영역을 대상으로 오브젝트의 좌표를 표기하는 방식이다. 라인 오브젝트(131)을 전역 좌표계에서 표시한다면 제 1 좌표 (x1, y1)은 시작점(110, 100)으로 표기하고 제 2 좌표 (x2, y2)는 종료점(170, 190)으로 표기한다. 마찬가지로 라인 오브젝트(133)을 전역 좌표계에서 표시한다면 제 1 좌표 (x1, y1)은 시작점(300, 240)으로 표기하고 제 2 좌표 (x2, y2)는 종료점(420, 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
로컬 좌표계(local coordinates)는 개별 오브젝트를 포함하는 최적 사각형을 먼저 설정하고 그 내부에서 좌표계를 따로 정의하는 방식이다. 라인 오브젝트(131)을 로컬 좌표계에서 표시하려면, 먼저 라인 오브젝트(131)을 포함한는 최적 사각형(132)를 설정하고 그 좌상단 좌표인 (110, 100)를 기준 좌표 (0, 0)으로 하는 로컬 좌표계를 정의한다. 최적 사각형(132) 내부의 로컬 좌표계 상에서는 라인 오브젝트(131)의 시작점은 (0, 0)이고 종료점은 (60, 90)이다. 라인 오브젝트(131)에 대한 레퍼런스 좌표 (x, y)로 최적 사각형(132)의 좌상단 좌표인 (110, 100)를 함께 제공한다. 마찬가지로 라인 오브젝트(133)을 로컬 좌표계로 표시하면 레퍼런스 좌표 (x, y)가 (300, 90)이고 시작점 (x1, y1)이 (0, 150)이며 종료점 (x2, y2)는 (120, 0)이다.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
본 발명에서는 오브젝트 표기에 있어서 바람직하게는 로컬 좌표계를 사용한다. 로컬 좌표계를 사용하면 오브젝트의 변경, 특히 오브젝트의 이동 이벤트가 발생하였을 때, 체인지 커맨드를 활용함으로써 다수의 웹 화이트보드 클라이언트(101 ~ 104)와 웹 화이트보드 서버(200) 간의 메시지 송수신이 간단해지고 캔버스(110) 상에서 오브젝트의 랜더링이 간편해지는 장점이 있다. 또한, 이러한 장점이 결합되어 궁극적으로는 웹 화이트보드 서비스의 실시간 응답성이 개선되는 효과를 얻을 수 있다.
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
[도 5]는 본 발명에서 실시간 화이트보드 서비스를 제공하기 위해 웹 화이트보드 서버(200)와 웹 화이트보드 클라이언트(101, 102) 간에 이루어지는 전체 데이터 송수신을 개념적으로 나타내는 도면이다.FIG. 5 is a diagram conceptually showing overall data transmission and reception between the
먼저, [도 1]을 참조하여 전술한 바와 같이 단계(S10)에서 다수의 웹 화이트보드 클라이언트(101 ~ 104)가 실시간 웹 화이트보드 서비스를 제공받기 위해 웹 화이트보드 서버(200)에 접속한다. 이때, 웹 화이트보드 클라이언트(100)는 실시간 웹 화이트보드 서비스에 할당된 특정의 인터넷주소(예: URL)를 접속함으로써 웹 화이트보드 서버(200)에 접속한다.First, as described above with reference to FIG. 1, in step S10, a plurality of
단계(S11)에서 웹 화이트보드 서버(200)는 위 접속된 웹 화이트보드 클라이언트(100)에 관한 유저 정보를 저장한다.In step S11, the
웹 화이트보드 서버(200)는 실시간 웹 화이트보드 서비스에서 발생된 각종 이벤트를 메모리 DB(201)에 디렉토리 데이터로 저장 관리한다. 웹 화이트보드 클라이언트(100)가 신규로 접속하면 단계(S12)에서 웹 화이트보드 서버(200)는 디렉토리 데이터를 당해 접속된 웹 화이트보드 클라이언트(100)로 제공하면서 초기화 커맨드를 전송한다.The
단계(S13)에서 웹 화이트보드 클라이언트(100)는 그 제공받은 디렉토리 데이터를 사용하여 캔버스(110)를 랜더링함으로써 실시간 웹 화이트보드 서비스에서 그 이전에 미리 접속되어 있던 웹 화이트보드 클라이언트에 의해 조작되었던 캔버스(110)의 오브젝트 상태와 동기화를 달성할 수 있다. 이러한 초기화 과정에서는 오브젝트 자체에 대한 정보 뿐만 아니라 후술하는 레이어 할당에 관한 정보까지 디렉토리 데이터에 포함되어 제공됨으로써 완벽한 동기화가 이루어지도록 한다. 또한, 웹 화이트보드 클라이언트(100)의 클라이언트 브라우저 화면에는 캔버스(110)와 편집툴바(120)도 추가로 표시되며, 이로써 실시간 웹 화이트보드 서비스를 활용하기 위한 준비가 완료된다.In step S13, the
웹 화이트보드 클라이언트(100)는 단계(S13)의 초기화 랜더링 과정에서 변경랜더링 마킹을 활용하는 것이 바람직하다. 초기화 커맨드에서는 그동안 누적된 다수의 오브젝트(예: 오브젝트 100개)에 관한 정보가 웹 화이트보드 서버(200)로부터 전달되는데, 일반적인 구현에서는 이들 100개의 오브젝트를 생성할 때마다 랜더링 프로세스를 수행해야 한다. 즉, 이 경우에는 랜더링 프로세스를 100회 수행하는 것이 된다. 본 발명에서는 이들 100개의 오브젝트를 생성할 때에는 변경랜더링을 마킹만 해두고 초기화 랜더링 과정의 마지막에서 랜더링 프로세스를 1회만 수행하도록 구현하는 것이 바람직하다. 당해 랜더링 프로세스가 100개의 오브젝트를 한번에 화면에 표시하는 것이다. 이와 같은 방식은 100회의 랜더링 프로세스를 동작시키는 것에 비하여 훨씬더 효과적인데, 특히 그래픽 성능이 열악한 모바일 단말장치에서는 확연하게 부드러운 디스플레이 조작을 제공해줄 수 있다.The
단계(S14)에서 제 1 웹 화이트보드 클라이언트(101)의 사용자가 편집툴바(120)를 통해 오브젝트 생성 메뉴를 선택하여 드로잉 오브젝트를 선택한 후 캔버스(110) 상에서 마우스 다운/무브/업 시퀀스를 수행한다. 또는, 탐색기와 캔버스(110) 사이에서 드래그&드롭을 통해 이미지 오브젝트를 캔버스(110) 상에 내려놓을 수도 있다. 제 1 웹 화이트보드 클라이언트(101)는 이러한 이벤트를 식별하면 클라이언트 브라우저에 표시된 캔버스(110) 상에 드로잉 오브젝트 또는 이미지 오브젝트를 생성 표시한다.In operation S14, a user of the first
단계(S15)에서 제 1 웹 화이트보드 클라이언트(101)는 오브젝트 생성에 관련된 애드/체인지 커맨드 시퀀스를 웹 화이트보드 서버(200)로 전송한다. 오브젝트 생성 과정에서 사용자의 마우스 조작 단계에 대응하여 일련의 애드 커맨드와 체인지 커맨드가 웹 화이트보드 서버(200)로 전송되는데, 그 구체적인 과정에 대해서는 [도 6]과 [도 7]을 참조하여 후술한다.In operation S15, the first
이어서, 웹 화이트보드 서버(200)는 제 1 웹 화이트보드 클라이언트(101)로부터 오브젝트 생성에 관련된 애드/체인지 커맨드 시퀀스를 수신하면 단계(S16)에서 메모리 DB(201)에 반영하여 디렉토리 데이터를 업데이트하고, 단계(S17)에서 이들 애드/체인지 커맨드 시퀀스를 중계함으로써 제 1 웹 화이트보드 클라이언트(101)에서 발생된 오브젝트 생성 이벤트가 나머지 웹 화이트보드 클라이언트(102 ~ 104)에도 반영되도록 한다.Subsequently, when the
나머지 웹 화이트보드 클라이언트(102 ~ 104)는 웹 화이트보드 서버(200)로부터 애드/체인지 커맨드 시퀀스를 전달받을 때마다 자신의 브라우저 화면에 표시되어 있는 캔버스(110)에 랜더링할 수도 있지만, 구현 예에 따라서는 랜더링이 필요하다는 마킹(즉, 변경랜더링 마킹)만 해두었다가 나중에 랜더링을 수행하는 루틴에서 한꺼번에 랜더링을 처리하는 것이 바람직하다. 그러한 실시예를 기준으로 설명하면, 나머지 웹 화이트보드 클라이언트(102 ~ 104)는 웹 화이트보드 서버(200)로부터 애드/체인지 커맨드 시퀀스를 중계받으면 단계(S18)에서 변경랜더링을 마킹하고 오브젝트 생성 사항을 스토리지에 저장해둔다.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
이후, 단계(S19)에서 제 1 웹 화이트보드 클라이언트(101)가 캔버스(110) 상에 기 생성된 드로잉 오브젝트 또는 이미지 오브젝트를 변경(이동) 내지 삭제하거나 오브젝트 콘트롤러(118, 119)를 조작하여 레이어 순서를 변경하기 위한 마우스 다운/무브/업 시퀀스를 식별한다.Subsequently, in step S19, the first
단계(S20)에서 제 1 웹 화이트보드 클라이언트(101)는 오브젝트의 변경 내지 삭제에 관련된 마우스 다운/무브/업 시퀀스에 대응하여 체인지 커맨드를 웹 화이트보드 서버(200)로 전송한다.In operation S20, the first
이때, 제 1 웹 화이트보드 클라이언트(101)에서 발생된 사용자 조작이 오브젝트 이동이라면 [도 4]를 참조하여 전술하였던 로컬 좌표계를 활용하여 오브젝트 이동을 간편하게 구현할 수 있다. 즉, 오브젝트 이동 조작에 대해서는 마우스다운의 식별지점으로부터 마우스업의 식별지점 간의 디스플레이스먼트(displacement)에 대응하여 로컬 좌표계에서 단순히 레퍼런스 좌표 (x, y)를 변경하는 체인지 커맨드를 제공하는 것으로 충분하다.In this case, if the user manipulation generated in the first
웹 화이트보드 서버(200)는 제 1 웹 화이트보드 클라이언트(101)로부터 오브젝트 변경 내지 삭제에 관련된 체인지 커맨드를 수신하면 단계(S21)에서 메모리 DB(201)에 반영하여 디렉토리 데이터를 업데이트하고, 단계(S22)에서 체인지 커맨드를 중계함으로써 제 1 웹 화이트보드 클라이언트(101)에서 발생된 오브젝트 변경 내지 삭제 이벤트가 나머지 웹 화이트보드 클라이언트(102 ~ 104)에도 반영되도록 한다.When the
오브젝트 생성과 관련하여 전술한 바와 마찬가지로 나머지 웹 화이트보드 클라이언트(102 ~ 104)는 웹 화이트보드 서버(200)로부터 체인지 커맨드를 중계받으면 단계(S23)에서 캔버스(110)를 랜더링하거나 혹은 전술한 바와 같이 변경랜더링을 마킹하고 오브젝트 변경 내지 삭제 사항을 스토리지에 저장한다.As described above in connection with object generation, the remaining
이후에, 단계(S24)에서 복수의 웹 화이트보드 클라이언트(100)는 변경랜더링을 검사하여 마킹 여부를 체크한다. 만일 변경랜더링이 설정되어 있으면 웹 화이트보드 클라이언트(100)는 그 저장된 오브젝트 생성/변경/삭제 사항을 로딩하여 자신의 캔버스(110) 상에 반영한다. 웹 화이트보드 클라이언트(100)가 변경랜더링을 검사하는 시점은 다양하게 구현될 수 있다. 예를 들어, (1/30)초마다 변경랜더링을 검사하도록 구현될 수도 있고, 캔버스(110) 상에서 마우스 무브/업 이벤트가 발생될 때에 변경랜더링을 검사하도록 적용할 수도 있다. 후자의 경우에는 사용자가 캔버스(110)에서 오브젝트가 없는 빈 공간에 대해 마우스 조작을 하는 경우에는 랜더링 프로세스가 수행되지 않고 오브젝트를 다루는 경우에만 랜더링 프로세스가 수행되도록 구분해주는 장점이 있다.Subsequently, in step S24, the plurality of
또한, 랜더링 시점과 관련하여 오브젝트 생성은 애드/체인지 커맨드 시퀀스를 전달받은 즉시 랜더링을 수행하는 반면, 오브젝트 변경, 삭제의 경우에만 변경랜더링을 활용하는 방식의 구현도 가능하다.
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.
[도 6]은 본 발명에서 캔버스(110) 상에 드로잉 오브젝트(예: 112)를 생성하는 과정을 상세하게 나타내는 도면이다. 특히, [도 6]은 제 1 웹 화이트보드 클라이언트(101)에서 사용자가 마우스나 터치조작을 통해 드로잉 오브젝트(112)를 생성할 때, 드로잉 오브젝트(112)가 나머지 웹 화이트보드 클라이언트(102 ~ 104)에서도 효과적으로 반영되도록 하는 기술을 나타낸다.FIG. 6 illustrates in detail a process of generating a drawing object (eg, 112) on the canvas 110 in the present invention. In particular, FIG. 6 illustrates that when the user generates the
먼저, 단계(S31)에서 제 1 웹 화이트보드 클라이언트(101)에서 사용자가 클라이언트 브라우저에 표시된 편집툴바(120)를 조작하여 특정 오브젝트를 선택하는 이벤트를 식별한다. 이를 통해 캔버스(110) 상에 신규로 생성하려는 드로잉 오브젝트가 무엇인지 식별하게 된다.First, in step S31, the first
단계(S32)에서 제 1 웹 화이트보드 클라이언트(101)는 캔버스(110)에서 마우스다운 이벤트를 식별한다.In operation S32, the first
마우스다운 이벤트를 식별함에 따라 단계(S33)에서 제 1 웹 화이트보드 클라이언트(101)는 마우스다운의 식별지점에 대해 드로잉 오브젝트의 기본 포맷을 설정하는 애드 커맨드를 웹 화이트보드 서버(200)로 전송한다. 이때, 기본 포맷의 바람직한 구현예는 캔버스(110)의 전역 좌표계 상에서 마우스다운의 식별지점에 위 선택된 드로잉 오브젝트의 프로토타입(prototype)을 배치하는 것이다. [도 9]의 (a)에서 첫번째 커맨드는 라인 오브젝트에 대해 단계(S33)에서 사용할 수 있는 애드 커맨드의 예이다.In step S33, the first
웹 화이트보드 서버(200)는 애드 커맨드를 수신하면 단계(S34)에서 나머지 웹 화이트보드 클라이언트(102 ~ 104)로 중계한다.When the
나머지 웹 화이트보드 클라이언트(102 ~ 104)는 특정 오브젝트에 대한 애드 커맨드를 수신하면 단계(S35)에서 자신의 브라우저에 표시된 캔버스(110) 상에 해당 드로잉 오브젝트의 기본 포맷을 생성한다. [도 9]의 (a)의 첫번째 커맨드의 경우라면 캔버스(110)에서 좌표 (80, 100)에서 시작하는 길이 0의 라인 오브젝트를 생성하는 것이다.The remaining
그리고 나서, 제 1 웹 화이트보드 클라이언트(101)에서는 사용자의 조작에 의해 반복적으로 마우스무브 이벤트가 발생한다(S36). 이는 사용자가 해당 드로잉 오브젝트를 캔버스(110) 상에 정확하게 그리기 위해 마우스 또는 터치스크린을 조작하는 과정에서 발생하게 된다.Then, in the first
제 1 웹 화이트보드 클라이언트(101)는 마우스무브 이벤트가 발생되면 단계(S37)에서 마우스무브 식별지점을 반영하는 체인지 커맨드를 작성하여 웹 화이트보드 서버(200)로 전송한다. [도 9]의 (a)에서 두번째와 세번째 커맨드는 라인 오브젝트에 대해 단계(S37)에서 사용할 수 있는 체인지 커맨드의 예인데, 라인의 종료점이 변화하고 있는 상태를 나타낸다.When the mouse move event is generated, the first
웹 화이트보드 서버(200)는 체인지 커맨드를 수신하면 단계(S38)에서 나머지 웹 화이트보드 클라이언트(102 ~ 104)로 중계한다.When the
나머지 웹 화이트보드 클라이언트(102 ~ 104)는 드로잉 오브젝트에 대한 체인지 커맨드를 수신하면 단계(S39)에서 자신의 브라우저에 표시된 캔버스(110) 상에 해당 드로잉 오브젝트에 대한 변경사항을 반영한다. [도 9]의 (a)의 두번째와 세번째 커맨드의 경우라면 라인의 시작점이 좌표 (80, 100)으로 설정된 상태에서 종료점이 좌표 (100, 150)으로 설정되었다가 다시 좌표 (120, 450)으로 변경되는 과정에 해당한다. 이를 통해, 제 1 웹 화이트보드 클라이언트(101)에서 드로잉 오브젝트를 생성하는 디테일한 과정이 실시간으로 나머지 웹 화이트보드 클라이언트(102 ~ 104)에서도 화면에 반영된다.When the remaining
그리고 나서, 제 1 웹 화이트보드 클라이언트(101)에서는 사용자의 조작에 의해 마우스업 이벤트가 발생한다(S40). 이는 사용자가 해당 드로잉 오브젝트를 캔버스(110) 상에 그리는 작업을 완료하여 마우스 클릭을 릴리스하거나 터치스크린에서 손을 뗀 것을 의미한다.Then, the first
제 1 웹 화이트보드 클라이언트(101)는 마우스업 이벤트가 발생되면 단계(S41)에서 해당 오브젝트를 확정하기 위한 체인지 커맨드를 작성하여 웹 화이트보드 서버(200)로 전송한다. [도 9]의 (a)에서 네번째 커맨드는 라인 오브젝트에 대해 단계(S41)에서 사용할 수 있는 체인지 커맨드의 예인데, 라인의 종료점이 확정된 상태를 나타낸다. 드로잉 오브젝트를 확정하는 체인지 커맨드를 작성할 때, 오브젝트의 좌표계 표기를 전역 좌표계에서 로컬 좌표계로 변경하는 것이 바람직하다. 즉, 마우스다운 식별지점을 레퍼런스 좌표로 설정하고 마우스무브의 마지막 식별지점을 상대 오프셋 좌표로 설정한 로컬 좌표계 상으로 드로잉 오브젝트의 표현 좌표계를 변경 설정하는 것이다.When the mouse-up event occurs, the first
웹 화이트보드 서버(200)는 체인지 커맨드를 수신하면 단계(S42)에서 나머지 웹 화이트보드 클라이언트(102 ~ 104)로 중계한다.When the
나머지 웹 화이트보드 클라이언트(102 ~ 104)는 드로잉 오브젝트에 대한 체인지 커맨드를 수신하면 단계(S43)에서 자신의 브라우저에 표시된 캔버스(110) 상에 해당 드로잉 오브젝트를 확정한다. [도 9]의 (a)의 네번째 커맨드의 경우라면 레퍼런스 좌표가 (80, 100)인 로컬 좌표계에서 시작점 (0, 0)과 종료점 (40, 350)을 갖는 라인 오브젝트로 확정하는 것이다.The remaining
한편, 드로잉 오브젝트가 신규로 생성할 때, 해당 드로잉 오브젝트의 사이즈가 너무 작은 경우라면 사용자 조작에 있어서 오류가 발생한 것으로 판단하고 자동적으로 삭제하는 것이 바람직하다.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.
그에 따라, 단계(S44)에서 제 1 웹 화이트보드 클라이언트(101)는 마우스다운 식별지점과 마우스업 식별지점 간의 거리가 미리 설정된 임계범위(예: 5 포인트) 이내인지 여부를 체크한다.Accordingly, in step S44, the first
만일 임계범위 이내인 경우라면, 제 1 웹 화이트보드 클라이언트(101)는 단계(S45)에서 해당 오브젝트에 대한 제거 커맨드를 작성하여 웹 화이트보드 서버(200)로 전송한다. [도 9]의 (c)의 커맨드가 이러한 경우에 사용할 수 있는 제거 커맨드의 일 예이다.If it is within the threshold range, the first
웹 화이트보드 서버(200)는 제거 커맨드를 수신하면 단계(S46)에서 나머지 웹 화이트보드 클라이언트(102 ~ 104)로 중계하며, 나머지 웹 화이트보드 클라이언트(102 ~ 104)는 제거 커맨드에 대응하여 해당 드로잉 오브젝트를 캔버스(110)에 생성하는 즉시 제거한다. 만일 드로잉 오브젝트를 생성하는 과정에서 변경랜더링 설정을 활용하는 경우라면 캔버스(110)에 랜더링하는 과정이 아예 발생하지 않게 될 수도 있다.
When the
[도 7]은 본 발명에서 캔버스(110) 상에 이미지 오브젝트(예: 114)를 생성하는 과정을 상세하게 나타내는 도면이다.FIG. 7 illustrates in detail a process of generating an image object (eg, 114) on the canvas 110 in the present invention.
먼저, 단계(S51)에서 제 1 웹 화이트보드 클라이언트(101)에서 특정의 이미지 파일(예: JPG)을 캔버스(110) 상에 드래그&드롭 하는데, 이 과정에서 그 생성될 이미지 오브젝트에 대한 이미지 파일이 특정되면서 캔버스(110) 상에서 마우스 다운/업 시퀀스가 식별된다.First, in step S51, the first
제 1 웹 화이트보드 클라이언트(101)는 단계(S52)에서 그 특정된 이미지 파일을 로컬 스토리지 또는 웹 디스크(클라우드 디스크)로부터 readAsDataURL에 의해 텍스트로 로딩한다. 이때, 이미지 파일을 readArrayBuffer에 의해 로딩하는 것보다 readAsDataURL에 의해 텍스트로 로딩하는 것이 웹 화이트보드 서버(200)로 전송하는 과정에서 효율적이다. 본 발명은 개방되고 범용인 웹 환경에서 실시간 화이트보드 서비스를 제공하려는 것이므로 이처럼 디테일한 부분에서까지 효율성을 높을 필요가 있다.The first
제 1 웹 화이트보드 클라이언트(101)는 단계(S53)에서 자신의 브라우저에 표시된 캔버스(110) 상에 이미지 파일을 랜더링하고, 앞서 readAsDataURL에 의해 로딩한 텍스트 데이터와 마우스다운 식별지점 또는 마우스업 식별지점을 단계(S54)에서 이미지 오브젝트에 대한 애드 커맨드로 작성하여 웹 화이트보드 서버(200)로 전송한다. The first
웹 화이트보드 서버(200)는 애드 커맨드를 수신하면 단계(S55)에서 나머지 웹 화이트보드 클라이언트(102 ~ 104)로 중계한다.When the
나머지 웹 화이트보드 클라이언트(102 ~ 104)는 이미지 오브젝트에 대한 애드 커맨드를 수신하면 단계(S56)에서 자신의 브라우저에 표시된 캔버스(110) 상에 해당 이미지 오브젝트를 생성한다.
When the remaining
[도 8]은 본 발명에서 실시간 웹 화이트보드 서비스에서 탈퇴한 웹 화이트보드 클라이언트를 웹 화이트보드 서버(200)가 실시간으로 검출하여 접속 해제하는 과정을 나타내는 도면이다.FIG. 8 is a diagram illustrating a process in which the
먼저, 단계(S71)에서 웹 화이트보드 서버(200)가 웹 화이트보드 서비스에 참여하고 있다고 디렉토리 데이터에 기록되어 있는 복수 개의 웹 화이트보드 클라이언트(100) 중에서 미리 설정된 임계 시간동안 데이터 송수신이 없는 웹 화이트보드 클라이언트(예: 103, 104)를 식별한다.First, the
그러면, 단계(S72)에서 웹 화이트보드 서버(200)는 이들 웹 화이트보드 클라이언트(103, 104)에 핑퐁 커맨드를 전송한다.Then, in step S72, the
본 발명에 따르면 핑퐁 커맨드를 수신한 웹 화이트보드 클라이언트(100)는 핑퐁 리스폰스를 반환하게 되어 있는데, 단계(S73)에서는 제 4 웹 화이트보드 클라이언트(104)만이 핑퐁 리스폰스를 반환하였다.According to the present invention, the
그렇다면, 단계(S74)에서 웹 화이트보드 서버(200)는 핑퐁 커맨드에 대해 응답이 없는 제 3 웹 화이트보드 클라이언트(103)를 더이상 웹 화이트보드 서비스에 참여하지 않는 것으로 간주하고 접속 해제한다. 이러한 과정을 통해서 웹 화이트보드 서비스를 위한 데이터 송수신의 양이 부적절하게 증가하는 경우가 발생하지 않도록 통제할 수 있으며, 이를 통해 웹 화이트보드 서비스의 참여자 용량을 증가시키는 한편 실시간성도 보장할 수 있게 된다.If so, in step S74, the
한편, 웹 화이트보드 서버(200)와 웹 화이트보드 클라이언트(100)는 비동기 방식으로 커맨드 송수신을 수행함으로써 네트워크에 문제가 발생한 클라이언트로 인해 웹 화이트보드 서버(200)가 블락당하는(blocked) 상황을 회피하고, 이를 통해 데이터 패킷의 송수신 과정에서 속도 향상과 안정성 제고를 달성할 수 있다. 즉, 서버/클라이언트 간의 통신에서 비동기 방식을 채택함으로써 웹 화이트보드 클라이언트(100) 중에서 하나가 네트워크 접속이 일시적으로 끊어져 이를 해결하는 시간이 오래 걸리더라도 다른 클라이언트에 대한 웹 화이트보드 서비스에는 영향이 생기지 않는다. 만일 동기 방식은 하나의 클라이언트로 인해 다른 클라이언트의 응답속도가 느려지게 되어 웹 화이트보드 서비스의 실시간성을 보장할 수 없게 되므로 본 발명에 부적합하다.
Meanwhile, the
[도 9]는 본 발명에 따른 실시간 웹 화이트보드 서비스를 제공하기 위해 웹 화이트보드 서버(200)와 웹 화이트보드 클라이언트(100) 간에 송수신되는 각종의 커맨드를 제이슨(JavaScript Object Notation; JSON) 타입으로 구성한 예를 나타내는 도면이다.FIG. 9 illustrates various commands transmitted / received between the
먼저, [도 9]의 (a)는 캔버스(110)에 라인 오브젝트를 신규로 생성하기 위한 커맨드 시퀀스를 나타낸다. [도 9]의 (a)는 [도 6]을 참조하여 전술하였던 프로세스에서 제 1 웹 화이트보드 클라이언트(101)가 전송하는 애드/체인지 커맨드 시퀀스를 나타낸 것인데, 순서대로 설명하면 다음과 같다.First, (a) of FIG. 9 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
(1) 신규 생성할 드로잉 오브젝트가 라인이라는 것을 편집툴바(120)에서 선택한 후에 캔버스(110)에 최초로 마우스다운 이벤트가 발생한 좌표, 즉 라인의 한쪽 끝 좌표가 (80, 100)이라고 가정한다. 제 1 웹 화이트보드 클라이언트(101)는 라인 오브젝트의 기본 포맷으로 마우스다운 지점에 대한 애드 커맨드를 전역 좌표계 상에서 생성하여 전송한다.(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
{"cmd":"add", "type":"line", "x":0, "y":0, "x1":80, "y1":100, "x2":80, "y2":100, "uid":"…"}{"cmd": "add", "type": "line", "x": 0, "y": 0, "x1": 80, "y1": 100, "x2": 80, "y2" : 100, "uid": "…"}
즉, 라인 오브젝트에 대한 애드 커맨드이며, 이때 레퍼런스 좌표는 (0, 0)으로 설정하여 전역 좌표계이고, 라인의 양 끝점은 둘다 (80, 100)으로 설정한 상태로 애드 커맨드를 생성하여 전송한다.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) 캔버스(110) 상에서 마우스무브 이벤트가 발생함에 따라 라인 오브젝트의 종료점이 지속적으로 변경되는데, 제 1 웹 화이트보드 클라이언트(101)는 그러한 상황을 체인지 커맨드로 계속 발송함으로써 나머지 웹 화이트보드 클라이언트(102 ~ 104)에서도 화면에 그대로 나타나도록 한다.(2) As the mouse move event occurs on the canvas 110, the end point of the line object is continuously changed, and the first
{"cmd":"chg", "x2":100, "y2":150, "uid":"…"}{"cmd": "chg", "x2": 100, "y2": 150, "uid": "…"}
{"cmd":"chg", "x2":120, "y2":450, "uid":"…"}{"cmd": "chg", "x2": 120, "y2": 450, "uid": "…"}
즉, 라인 오브젝트의 시작점이 (80, 100)으로 지정된 상태에서 사용자가 브라우저 화면 상에서 마우스를 계속 이동시킴에 따라 종료점이 (100, 150)으로 변경되었다가 다시 (120, 450)으로 변경되고 있는 상황을 나타낸다. 이렇게 일련의 체인지 커맨드가 전송됨에 따라 웹 화이트보드 서버(200)에 연결된 모든 웹 화이트보드 클라이언트(101 ~ 104)의 화면 상에서 라인 오브젝트의 종료점이 동일한 패턴으로 변경되어 화면에 나타난다.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
(3) 캔버스(110) 상에서 마우스업 이벤트가 발생함에 따라 라인 오브젝트의 종료점이 확정된다. 본 구현예에서는 좌표 (120, 450)에서 마우스업 이벤트가 발생하여 마우스다운 지점인 (80, 100)과 마우스업 지점인 (120, 450)을 연결한 라인 오브젝트로 확정되었다고 가정한다. (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).
이렇게 라인 오브젝트가 확정되면 제 1 웹 화이트보드 클라이언트(101)는 오브젝트의 표시를 로컬 좌표계로 변경하는 체인지 커맨드를 생성하여 다른 웹 화이트보드 클라이언트(102 ~ 104)로 전송한다.When the line object is confirmed in this way, the first
{"cmd":"chg", "x":80, "y":100, "x1":0, "y1":0, "x2":40, "y2":350, "uid":"…"}{"cmd": "chg", "x": 80, "y": 100, "x1": 0, "y1": 0, "x2": 40, "y2": 350, "uid": " … "}
즉, 해당 라인 오브젝트를 포함하는 최적 사각형을 가정하여 그 좌상단 좌표를 레퍼런스 좌표로서 (x, y)라 지정하고, 그 최적 사각형 내에서 라인의 시작점을 (x1, y1)으로 설정하고 라인의 종료점을 (x2, y2)라고 지정하는 로컬 좌표계를 운용하는 것이 바람직한데, 이는 그 이후에 오브젝트 이동을 다룰 때에 유리하기 때문이다. 본 구현예에서는 사각형의 좌상단이 (80, 100)이므로 (x, y)를 (80, 100)이라 설정하고, 라인의 시작점이 좌상단 지점과 일치하므로 (x1, y1)은 (0, 0)으로 설정하며, 라인의 종료점인 (120, 450)은 좌상단 (80, 100)을 레퍼런스로 하여 (x2, y2)를 (40, 350)으로 설정한다. 따라서, 이상의 체인지 커맨드는 오브젝트를 확정함과 동시에 오브젝트를 표현하는 방식을 전역 좌표계에서 로컬 좌표계로 변경하는 것이다. That is, assuming the optimal rectangle containing the line object, specify the upper left coordinate as (x, y) as the reference coordinate, set the start point of the line to (x1, y1) within the optimal rectangle, and set the end 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.
[도 9]의 (b)는 캔버스(110)에 이미 생성되어 있는 특정 오브젝트를 이동시키는 커맨드이다. 오브젝트 자체는 변경하지 않는 대신 위치만 이동시키는 것이므로 좌상단 위치를 나타내는 (x, y) 좌표만 변경하는 체인지 커맨드를 제공하면 오브젝트를 이동시킬 수 있다. [도 9]의 (a)에서 생성된 라인 오브젝트의 좌상단 위치(즉, 레퍼런스 좌표)가 (80, 100)이었는데 오브젝트를 수평으로 +170 포인트 이동시키는 것이므로 레퍼런스 좌표를 (250, 100)으로 변경하는 체인지 커맨드를 발송하였다. 이때, 체인지 커맨드의 오브젝트 식별정보(uid)는 [도 9]의 (a)에서 할당된 uid 값을 그대로 사용함으로써 체인지 커맨드의 대상 오브젝트를 간편하게 식별할 수 있다.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 upper left position (that is, the reference coordinate) of the line object generated in (a) of FIG. 9 is (80, 100), but the reference coordinate is changed to (250, 100) since the object is moved horizontally by +170 points. A change command has been sent. At this time, 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 (a) of FIG. 9 as it is.
[도 9]의 (c)는 캔버스(110)에 이미 생성되어 있는 특정 오브젝트를 삭제하는 커맨드이고, [도 9]의 (d)는 특정 오브젝트에 대해 레이어 순서를 올리거나 낮추는 커맨드를 나타낸다. 전술한 바와 같이, 오브젝트 식별정보(uid)를 통해 간편하게 대상 오브젝트를 특정할 수 있다.(C) of FIG. 9 is a command for deleting a specific object already created on the canvas 110, and (d) of FIG. 9 shows a command of raising or lowering the layer order for the specific object. As described above, the target object can be easily specified through the object identification information uid.
한편, 이상의 커맨드 신택스(command syntax)를 살펴보면 오브젝트를 식별하기 위해 유니크식별자(uid)를 활용하고 있음을 발견할 수 있다. 드로잉 오브젝트나 이미지 오브젝트를 생성할 때 클라이언트에서 uid를 생성하여 전체 웹 화이트보드 클라이언트(100)와 웹 화이트보드 서버(200)로 전달하며, 이후부터는 uid를 키 값으로 하여 오브젝트를 다루게 된다. 이렇게 함으로써 인터넷을 통해 송수신되는 데이터의 분량을 감소시켜 네트워크 트래픽을 최소화하고 웹 화이트보드 클라이언트(100)에서 파싱 부담을 경감시킬 수 있다.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
또한, 웹 화이트보드 서버(200)에서는 디렉토리 데이터에서 오브젝트 별로 uid 값을 매칭시켜 관리하고, 추가로 uid용 배열을 생성하여 오브젝트의 레이어 할당을 관리하고 업데이트한다.
In addition, the
본 발명은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 프로그램 코드의 형태로 구현하는 것이 가능하다. 이때, 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록 장치를 포함한다.The present invention can also be embodied in the form of computer readable program code on a computer readable recording medium. At this time, the computer-readable recording medium includes all kinds of recording apparatuses in which data that can be read by a computer system is stored.
본 발명에서 컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, CD-ROM, 자기테이프, 플로피디스크, 광 데이터 저장장치 등이 있으며, 캐리어웨이브(예: 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다. 또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산된 방식으로 컴퓨터가 읽을 수 있는 프로그램 코드가 저장되고 실행될 수 있다. 그리고 본 발명을 구현하기 위한 기능적인 프로그램, 코드, 코드 세그먼트들은 본 발명이 속하는 기술 분야의 프로그래머들에 의해 용이하게 추론될 수 있다.Examples of computer-readable recording media in the present invention include ROM, RAM, CD-ROM, magnetic tape, floppy disk, optical data storage device, and the like, which are implemented in the form of a carrier wave (for example, transmission through the Internet). It also includes. The computer readable recording medium can also store and execute computer readable program code in a distributed manner over network coupled computer systems. And functional programs, codes, and code segments for implementing the present invention can be easily deduced by programmers skilled in the art to which the present invention belongs.
이상과 같이, 본 명세서와 도면에는 본 발명의 실시예에 대하여 개시하였으며, 비록 특정 용어들이 사용되었으나 이는 단지 본 발명의 기술 내용을 쉽게 설명하고 발명의 이해를 돕기 위한 일반적인 의미에서 사용된 것이지, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시예 외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형예가 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명하다.
As described above, the embodiments of the present invention have been disclosed in the present specification and drawings, and although specific terms have been used, they have been used only in a general sense to easily describe the technical contents of the present invention and to facilitate understanding of the invention. And is not intended to limit the scope of the invention. It will be apparent to those skilled in the art that other modifications based on the technical idea of the present invention are possible in addition to the embodiments disclosed herein.
101, 102, 103, 104 : 웹 화이트보드 클라이언트(단말장치)
200 : 웹 화이트보드 서버
201 : 메모리 DB
110 : 캔버스
120 : 편집툴바
111, 112, 113, 114, 115, 116 : 오브젝트
117 : 오브젝트 하이라이트
118a ~ 118c, 119a ~ 119h : 오브젝트 콘트롤러101, 102, 103, 104: Web whiteboard client (terminal device)
200: web whiteboard server
201: memory DB
110: canvas
120: edit toolbar
111, 112, 113, 114, 115, 116: objects
117: object highlights
118a to 118c, 119a to 119h: object controller
Claims (12)
웹 화이트보드 서버가 실시간 웹 화이트보드 서비스에 대해 캔버스 및 유저그룹을 위한 메모리 DB를 설정하는 제 1 단계;
상기 복수 개의 웹 화이트보드 클라이언트가 상기 웹 화이트보드 서버에 대응되는 특정의 인터넷주소에 접속함으로써 각자의 클라이언트 브라우저 상에 상기 캔버스와 편집툴바를 표시하는 제 2 단계;
복수 개의 웹 화이트보드 클라이언트가 멀티플랫폼 환경에 대응하도록 상기 캔버스 상에서 드로잉 오브젝트를 조작하기 위한 마우스다운 이벤트, 마우스무브 이벤트, 마우스업 이벤트를 추상화 설정하는 제 3 단계;
상기 복수 개의 웹 화이트보드 클라이언트 중의 제 1 웹 화이트보드 클라이언트가 상기 편집툴바의 오브젝트 생성 메뉴 선택과 상기 캔버스에서의 마우스 다운/무브/업 시퀀스를 식별함에 따라 자신의 클라이언트 브라우저에 표시된 캔버스 상에 드로잉 오브젝트를 생성하고 상기 웹 화이트보드 서버로 상기 드로잉 오브젝트에 대한 애드/체인지 커맨드 시퀀스를 전송하여 드로잉 오브젝트의 생성 이벤트를 상기 웹 화이트보드 서버에 제공하는 제 4 단계;
상기 웹 화이트보드 서버가 상기 제 1 웹 화이트보드 클라이언트로부터 전송되는 애드/체인지 커맨드 시퀀스를 상기 메모리 DB에 반영하고 중계함으로써 상기 드로잉 오브젝트의 생성 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 제 5 단계;
를 포함하여 구성되는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
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 is configured to include.
상기 제 1 웹 화이트보드 클라이언트가 수행하는 상기 제 4 단계는,
상기 편집툴바에서 특정 오브젝트에 대한 선택을 식별하는 제 41 단계;
상기 캔버스에서 마우스다운을 식별하는 제 42 단계;
상기 마우스다운의 식별지점에 대해 상기 선택된 오브젝트에 대한 미리 설정된 기본 포맷을 설정하는 애드 커맨드를 상기 웹 화이트보드 서버로 전송하는 제 43 단계;
상기 캔버스에서 마우스무브를 하나 이상 식별하는 제 44 단계;
상기 선택된 오브젝트에 대하여 상기 마우스무브의 식별지점을 반영하는 체인지 커맨드를 상기 웹 화이트보드 서버로 전송하는 제 45 단계;
상기 캔버스에서 마우스업을 식별하는 제 46 단계;
상기 선택된 오브젝트를 확정하기 위한 체인지 커맨드를 상기 웹 화이트보드 서버로 전송하는 제 47 단계;
를 포함하여 구성된 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
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.
상기 제 43 단계에서 상기 기본 포맷은 상기 캔버스의 전역 좌표계 상에서 상기 마우스다운의 식별지점에 상기 선택된 오브젝트의 미리 설정된 프로토타입을 배치하는 것이고,
상기 제 47 단계는 상기 오브젝트를 포함하는 사각형의 좌상단 좌표를 레퍼런스 좌표로 설정하고 상기 상기 오브젝트 상의 각 좌표를 상기 레퍼런스 좌표를 기준으로 한 상대 오프셋 좌표로 설정한 로컬 좌표계 상으로 상기 선택된 오브젝트의 표현 좌표계를 변경 설정하여 체인지 커맨드를 상기 웹 화이트보드 서버로 전송하는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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 by changing the setting to transmit a change command to the web whiteboard server.
상기 제 4 단계는,
상기 마우스다운의 식별지점과 상기 마우스업의 식별지점 간의 거리가 미리 설정된 임계범위 이내인 경우에는 상기 선택된 오브젝트에 대한 제거 커맨드를 상기 웹 화이트보드 서버로 전송하는 제 48 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 제 5 단계 이후에 수행되는,
상기 제 1 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스 상에 생성된 오브젝트를 변경하기 위한 마우스 다운/무브/업 시퀀스를 식별함에 따라 상기 마우스 다운/무브/업 시퀀스에 따른 오브젝트 변경 사항에 대응하는 체인지 커맨드를 상기 웹 화이트보드 서버로 전송하는 단계;
상기 웹 화이트보드 서버가 상기 제 1 웹 화이트보드 클라이언트로부터 전송되는 체인지 커맨드를 상기 메모리 DB에 반영하고 나머지 웹 화이트보드 클라이언트로 중계하는 단계;
상기 복수의 웹 화이트보드 클라이언트는 상기 웹 화이트보드 서버로부터 오브젝트 변경 사항에 대응하는 체인지 커맨드를 제공받으면 변경랜더링을 마킹하고 오브젝트 변경 사항을 저장하는 단계;
상기 복수의 웹 화이트보드 클라이언트는 상기 변경랜더링을 검사하여 마킹 설정되어 있으면 상기 저장된 하나이상의 오브젝트 변경 사항을 로딩하여 자신의 캔버스 상에 반영하는 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 웹 화이트보드 서버와 상기 복수 개의 웹 화이트보드 클라이언트는 비동기 방식으로 커맨드 송수신을 수행함으로써 네트워크에 문제가 발생한 클라이언트로 인해 상기 웹 화이트보드 서버가 블락 당하는 상황을 회피하고,
상기 웹 화이트보드 서버가 상기 제 2 단계에서 접속한 복수 개의 웹 화이트보드 클라이언트 중에서 미리 설정된 시간동안 데이터 송수신이 없는 웹 화이트보드 클라이언트가 식별되면 핑퐁 커맨드를 전송하여 응답이 없는 경우에는 접속 해제하는 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 제 3 단계 이후에 수행되는,
상기 제 1 웹 화이트보드 클라이언트가 미리 설정된 이미지 오브젝트 생성 조작과 상기 캔버스에서의 마우스 다운/업 시퀀스를 식별함에 따라 스토리지로부터 이미지 파일을 readAsDataURL에 의해 텍스트로 로딩하여 클라이언트 브라우저에 표시된 상기 캔버스 상에 상기 이미지 파일을 랜더링하고, 상기 웹 화이트보드 서버로 상기 readAsDataURL에 의해 로딩한 텍스트 데이터와 상기 마우스다운 식별지점 또는 마우스업 식별지점을 상기 이미지 오브젝트에 대한 애드 커맨드로 전송함으로써 상기 이미지 오브젝트의 생성 이벤트를 상기 웹 화이트보드 서버에 제공하는 단계;
상기 웹 화이트보드 서버가 상기 제 1 웹 화이트보드 클라이언트로부터 전송되는 애드 커맨드를 상기 메모리 DB에 반영하고 중계함으로써 상기 이미지 오브젝트의 생성 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 제 3 단계는 상이한 단말장치 운영체제에서 상이하게 정의되어 있는 복수 개의 마우스 조작 API와 복수 개의 터치 조작 API를 상기 웹 화이트보드 서버가 조작 시퀀스의 순서에 따라 마우스다운 API, 마우스무브 API, 마우스업 API로 매칭시켜 변환 설정하는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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. Real-time web whiteboard providing method of the multi-platform environment, characterized in that by setting the conversion to match.
상기 제 5 단계 이후에 수행되는,
상기 제 1 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스 상에 생성된 오브젝트를 이동하기 위한 마우스 다운/무브/업 시퀀스를 식별함에 따라 상기 마우스다운의 식별지점으로부터 상기 마우스업의 식별지점 간의 디스플레이스먼트에 대응하여 상기 오브젝트의 로컬 좌표계에서 레퍼런스 좌표를 변경하는 체인지 커맨드를 상기 웹 화이트보드 서버로 전송하는 단계;
상기 웹 화이트보드 서버가 상기 제 1 웹 화이트보드 클라이언트로부터 전송되는 체인지 커맨드를 상기 메모리 DB에 반영하고 중계함으로써 상기 오브젝트의 무브 이벤트를 나머지 웹 화이트보드 클라이언트에 반영시키는 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 웹 클라이언트 언어는 자바스크립트를 포함하여 구성되고,
상기 웹 화이트보드 클라이언트는 상기 웹 화이트보드를 통해 구현되는 드로잉 오브젝트의 기본 속성과 메쏘드에 대한 상속성을 상기 웹 클라이언트 언어에 구현하고 멀티플랫폼에 따른 API 추상화를 구현하는 적응 모듈을 구비한 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
상기 제 5 단계 이후에 수행되는,
상기 복수 개의 웹 화이트보드 클라이언트가 클라이언트 브라우저의 캔버스에 포함된 하나이상의 오브젝트에 대해 디폴트로는 생성 시점을 기준으로 레이어를 할당하고, 상기 캔버스 상에서 선택된 특정 오브젝트에 대해 삭제 기능, 레이어 다운 기능, 레이어 업 기능을 제공하는 오브젝트 콘트롤러를 구현하며, 상기 레이어 다운 기능과 레이어 업 기능에 의해 상기 선택된 오브젝트의 레이어를 낮추거나 올려서 상기 하나이상의 오브젝트에 대한 레이어를 재할당하는 단계;
상기 복수 개의 웹 화이트보드 클라이언트가 일차로 상기 오브젝트를 레이어 순서대로 랜더링하고, 이차로 상기 편집툴바를 랜더링하고, 삼차로 상기 캔버스 상에서 오브젝트 선택이 식별되면 상기 선택된 오브젝트에 대한 오브젝트 콘트롤러를 랜더링함에 의해 상기 캔버스를 랜더링하는 단계;
를 더 포함하여 구성되는 것을 특징으로 하는 멀티플랫폼 환경의 실시간 웹 화이트보드 제공방법.
The method of 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.
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020130146077A KR101380898B1 (en) | 2013-11-28 | 2013-11-28 | Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same |
PCT/KR2014/010278 WO2015080386A1 (en) | 2013-11-28 | 2014-10-30 | Method for providing web whiteboard in real time in multi-platform environment |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020130146077A KR101380898B1 (en) | 2013-11-28 | 2013-11-28 | Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same |
Publications (1)
Publication Number | Publication Date |
---|---|
KR101380898B1 true KR101380898B1 (en) | 2014-04-01 |
Family
ID=50656393
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR1020130146077A KR101380898B1 (en) | 2013-11-28 | 2013-11-28 | Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same |
Country Status (2)
Country | Link |
---|---|
KR (1) | KR101380898B1 (en) |
WO (1) | WO2015080386A1 (en) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR101737070B1 (en) * | 2016-06-08 | 2017-05-17 | 재단법인 아산사회복지재단 | Medical information providing system, method and computer program |
KR20170079419A (en) * | 2015-12-30 | 2017-07-10 | 삼성전자주식회사 | Display apparatus, user terminal, control method thereof, computer-readable medium, system thereof |
WO2017213431A1 (en) * | 2016-06-08 | 2017-12-14 | 재단법인 아산사회복지재단 | System and method for providing medical information |
KR20190003449A (en) | 2018-12-31 | 2019-01-09 | 주식회사 오시리스시스템즈 | Providing apparatus for hierarchical type real time canvas |
KR20190003450A (en) | 2018-12-31 | 2019-01-09 | 주식회사 오시리스시스템즈 | Providing apparatus for hierarchical type real time canvas |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106201494A (en) * | 2016-06-30 | 2016-12-07 | 广州视睿电子科技有限公司 | A kind of menu that suspends automatically move method and apparatus |
US11509863B2 (en) | 2021-03-22 | 2022-11-22 | Google Llc | Multi-user interaction slates for improved video conferencing |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20000063224A (en) * | 2000-05-24 | 2000-11-06 | 천두배 | Method of materials sharing, mouse emulation and recording for visual meeting |
KR20010109578A (en) * | 2000-05-30 | 2001-12-12 | 노수영 | The Real time/Nonreal time Interactive Web Presention Method and System applicated Multimedia Technology |
JP2006164177A (en) * | 2004-12-10 | 2006-06-22 | Ricoh Co Ltd | Electronic conference system |
KR101274426B1 (en) * | 2006-09-12 | 2013-06-17 | 삼성전자주식회사 | Method and apparatus for video conference using white board service |
-
2013
- 2013-11-28 KR KR1020130146077A patent/KR101380898B1/en active IP Right Grant
-
2014
- 2014-10-30 WO PCT/KR2014/010278 patent/WO2015080386A1/en active Application Filing
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20000063224A (en) * | 2000-05-24 | 2000-11-06 | 천두배 | Method of materials sharing, mouse emulation and recording for visual meeting |
KR20010109578A (en) * | 2000-05-30 | 2001-12-12 | 노수영 | The Real time/Nonreal time Interactive Web Presention Method and System applicated Multimedia Technology |
JP2006164177A (en) * | 2004-12-10 | 2006-06-22 | Ricoh Co Ltd | Electronic conference system |
KR101274426B1 (en) * | 2006-09-12 | 2013-06-17 | 삼성전자주식회사 | Method and apparatus for video conference using white board service |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20170079419A (en) * | 2015-12-30 | 2017-07-10 | 삼성전자주식회사 | Display apparatus, user terminal, control method thereof, computer-readable medium, system thereof |
KR102532071B1 (en) | 2015-12-30 | 2023-05-15 | 삼성전자주식회사 | Display apparatus, user terminal, control method thereof, computer-readable medium, system thereof |
US11693535B2 (en) | 2015-12-30 | 2023-07-04 | Samsung Electronics Co., Ltd. | Display apparatus, user terminal, control method, and computer-readable medium |
KR101737070B1 (en) * | 2016-06-08 | 2017-05-17 | 재단법인 아산사회복지재단 | Medical information providing system, method and computer program |
WO2017213431A1 (en) * | 2016-06-08 | 2017-12-14 | 재단법인 아산사회복지재단 | System and method for providing medical information |
KR20190003449A (en) | 2018-12-31 | 2019-01-09 | 주식회사 오시리스시스템즈 | Providing apparatus for hierarchical type real time canvas |
KR20190003450A (en) | 2018-12-31 | 2019-01-09 | 주식회사 오시리스시스템즈 | Providing apparatus for hierarchical type real time canvas |
Also Published As
Publication number | Publication date |
---|---|
WO2015080386A1 (en) | 2015-06-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
KR101380898B1 (en) | Method of providing real-time web-whiteboard under multi-platform environment, and computer-readable recording medium for the same | |
CN110703966B (en) | File sharing method, device and system, corresponding equipment and storage medium | |
US10402483B2 (en) | Screenshot processing device and method for same | |
RU2611041C9 (en) | Methods and systems for collaborative application sharing and conferencing | |
JP6064381B2 (en) | Information sharing system | |
CN105745637A (en) | Sharing a file via email | |
CN110456956A (en) | Screenshot method, device, computer equipment and storage medium | |
CN104636139A (en) | Visualized cross-platform mobile application development and generation system | |
CN108959444A (en) | Homepage cluster system management method and device based on tree | |
CN106164904A (en) | Client-side individual voice WEB navigates | |
CN104540027A (en) | Multimedia display interaction control system under multi-screen environment | |
CN104239315A (en) | Picture correlation method | |
CN105474206A (en) | Virtual synchronization with on-demand data delivery | |
US11144275B1 (en) | Method for sharing content and tools independently from devices, applications, users, and times | |
CN110597472A (en) | Whiteboard content display method and device, whiteboard equipment and server | |
CN103902520A (en) | Theme editing method and mobile terminal | |
CN110347425A (en) | A kind of configuration and method, apparatus, equipment and storage medium using template page | |
JP2012194625A (en) | Document management device, document editing method and program | |
CN105824517A (en) | Implementation method and apparatus of desktop | |
CN105554290A (en) | Wallpaper sharing method and device | |
CN111324398B (en) | Method, device, terminal and storage medium for processing latest content | |
CN112274910A (en) | Virtual key configuration method, virtual key method and related device | |
JP2015005063A (en) | System control method, mobile information terminal control method, and mobile information terminal | |
CN107533425A (en) | Cross-platform order scalability | |
US20080104524A1 (en) | System and Method for Facilitating Ip Telephony Applications |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A201 | Request for examination | ||
A302 | Request for accelerated examination | ||
E902 | Notification of reason for refusal | ||
E701 | Decision to grant or registration of patent right | ||
GRNT | Written decision to grant | ||
FPAY | Annual fee payment |
Payment date: 20170221 Year of fee payment: 4 |
|
FPAY | Annual fee payment |
Payment date: 20180212 Year of fee payment: 5 |
|
FPAY | Annual fee payment |
Payment date: 20200205 Year of fee payment: 7 |