WO2014012104A1 - Drawing package - Google Patents

Abstract

A method of online collaborative drawing comprising receiving a first drawn image from a user, the drawn image being defined by one or more boundaries, and storing on a server; in response to a request presenting on a screen the first drawing to the same or different user; receiving a second drawn image, defined by one or more boundaries, the second drawing associated with information which defines a common boundary between the first and second image defining the first and second image as single image.

Description

DRAWING PACKAGE

TECHNICAL FIELD

[0001] The present invention relates to a system for creating and sharing content, preferably in the form of drawings, in a collaborative online environment.

BACKGROUND

[0002] With the increasing popularity of online social media, it is common for groups of people with -similar interests to form collaborative groups in which content is created and shared amongst the group. In some examples, the content shared between users may be related, and the groups are created around the shared interest. In other examples the content may simply be a collection of user content which a specific user wishes to share with a specific group, or left open to the general public. Such content sharing may occur via a website where a user can create an account and follow other users in order to view the content uploaded by the user (s) which they are following.

[0003] This form of social media is increasing in popularity due to the increasing accessibility to the internet. This increased connectivity to the internet is a result of improvements made to smart phones, tablet computers, laptops etc as well as improvements in the speed of connection. Therefore, the amount of content shared and accessed is also increasing.

[0004] It is also known in online applications for a group of users to collaboratively work on one or more documents at the same time. Such collaborations may take the form of document editing where documents can be shared, and edited by multiple users simultaneously. Similarly, it is known in a "whiteboard" environment for multiple users to be able to add content to the whiteboard at the same time. However, such collaborative sharing is potentially expensive in terms of bandwidth requirements and or server requirements in order to store the documents .

[0005] It is also known in to use computer programs to not only allow a first user to produce a drawing, but allow the construction of that drawing to be "replayed" once they have been completed. During such a "replay" actions used to create the image are re-created so that other users may see the evolution of an image over time. Typically such replays are stored in the form of an animation (such as a gif or video format) comprising many frames with each frame representing a bitmap of the elements of the drawing that had been completed at a given time in its creation. Since many frames are needed to capture the complete drawing process the animation file required to produce a replay is typically much large than, say, bitmap of the final drawing. This is the case even when video compression techniques are. used. Due to the increased file sizes, this leads to increases in bandwidth and server capacity required to provide such content.

[0006] It is also takes time to download such animations and therefore displaying a large numbers of different drawings is problematic, particularly if it is wished to viewed by users, such as mobile users, with limited connection speeds and/or limited amounts of data they are allowed to download.

[0007] When image content is shared across multiple different platforms (mobile, tablet computer, desktop etc) scalability becomes an issue, as content shown on a small screen (such as on a smartphone) may lack resolution on a larger screen (such as on a desktop) .

To mitigate at least some of the above problems associated with the prior art, there ca be provided a system for the online creation and subsequent sharing of user created contents. In particular, the user created content is in the form of drawings, preferably small drawings or sketches.

Further aspects and features of the invention are set out in the claims

BRIEF DESCRIPTION OF THE DRAWINGS

[0008] Embodiments of the invention are now described, by way of example only, with reference to the accompanying drawing in which:

[0009] Figure 1 is a schematic representation of a online collaborative sharing of the user created content;

[0010] Figures 2a, 2b and 2c show schematic representations of information presented to a user;

[0011] Figure 3 shows a representation of a collaborative effort between multiple users; and

[0012] Figure 4 shows a schematic representation of the process of creating content on a touch screen device.

DETAILED DESCRIPTION

[0013] User created content is formed by the users using a drawing application stored on a computing device. Such devices are known across multiple platforms, such as smart phones, tablet computers as well as laptop or desk top computers. Therefore, the present invention provides a multi- platform system for the creation and sharing of the user created drawings. In a preferred example, the drawing application is in the form of a downloadable programme or "app" which the user may install on their device. Advantageously, such programs are configurable in the known manner such as a user only has to register with the program once in order to access an account, in order to create and access a social network. Furthermore, such an app may include an equivalent to a media player to ensure that content distributed to the app may be rendered on the client device.

[0014] The user may draw new images using a drawing application, similar to existing drawing applications. The drawing application is described with reference to a touch screen device, but may be used in non-touch screen embodiments. The user is presented with a blank screen, or canvas, on which to draw their image. Optionally, there are a number of backgrounds or canvases which the user may select before drawing. This can ensure that images created in the program may be recognisable by the background canvas . In an example, lines drawn by the user on the touch screen are rendered at a constant thickness, though in other embodiments the user may select different line thicknesses. Optionally, the use may select the colour of the line. Images are drawn by the user performing a number of stroke gestures on the touch screen, and lines are drawn on the canvas in the known manner. [0015] Figure 1 shows a schematic representation of a system used to implement the online collaborative sharing of the user created content.

[0016] There is shown in Figure 1 the file server 10, connection to internet 12, a tablet computer device 14, a mobile phone device 16, a laptop device 18, and a browser plugin client 20 for use on a known web browser.

[0017] In use a user registers with a website in a known manner in order to provide a user identifier or login, and preferably provides further information regarding the user (such as age, sex, interests, location etc.) which may be used to identify other users with similar interests.

[0018] The user information, and created and shared content, is stored on the server 10. The server 10 accesses the various devices such as the tablet computer 14, mobile device 16 etc via a known internet connection 12. In a preferred embodiment, the user accesses the content held on the server via a browser plugin client 20 which is installed as an extension or plugin on an existing web browser, or an application which is downloaded and stored on the tablet computer device 14, mobile device 16, or PC Device 18. In further embodiments the user may also access a website in the known manner, and login with their login details in order to access the content held on the server 10.

[0019] As is known in online social networking, a user may specify how content created by themselves is shared. In an example, the user may specify that the content is only shared to approved "friends" or maybe made public to all users or followers on the online sharing platform.

[0020] Therefore the user created content which is created by the client preferably using the applications and/or website plug-in 20 is sent to the central server 10 and presented to other users upon request. As the content is associated with the creator, it is stored with data identifying the originating user. In an embodiment the creator may add tags to describe the image, and preferably to allow the image to be found in a search.

[0021] Figures 2a, 2b and 2c show schematic representations of the information presented to a user when they have logged into the website or client device application. As is known in the social networking users may form social "friend relationships" with other users, or followers, in order to see content created by the specific user. Figure 2a shows a schematic representation of the home screen presented to a user when they access the online collaborative drawing sharing network .

[0022] In Figure 2a the user is presented with a screen which contains information regarding their biography 30, friends 32, followers 34 as well as a live stream 36 which shows drawings submitted by users in the online network in reverse chronological order. The live stream 36 preferably only contains content from users identified as friends, though in other embodiments may contain further contents. Preferably, the live stream 36 is updated, when new drawings are submitted, though a manual update may also be used.

[0023] The biography 30 is filled in by the user in order for the other users to easily identify the users. The biography 30 typically contains information such as name, age, sex, interests etc. The friends 32 and followers 34 of a particular user may be displayed as a list or grid of icons, preferably with an image or photo associated with the user so that they may be visually recognised. In use, the user may select their own profile, or that of a friend 32 or follower 34 and are presented with a user's page as shown in Figure 2b. [0024] In Figure 2b, the user's page presents information relating to a specific user. In an example, there is shown the user information 40, drawings created by the user 42 and drawings created by friends of the user 32. The drawings created by the user define a user stream 42, and drawings created by friends define a friends stream 32.

[0025] As with the biographical details 30 the user information 40 contains information related to the specific user. The drawings created by the user 42 are also preferably shown in reverse chronological order showing all drawings created by the user.

[0026] The uploaded drawings shown in the friend stream 32 or user stream 42 maybe individually selected in order to view a construction progression, or replay, of the drawing of the image. When selecting an individual image, the replay is presented with a page which is schematically represented in Figure 2c. The process of saving and subsequently rendering an image in a replay is discussed in greater detail below.

[0027] In Figure 2c there is shown the replay screen 44 and user information 40. In the replay screen 44 a construction replay of the selected drawing is shown so that other users may view the formation and progression of a drawing overtime. The user is presented with an interface, which allows them to play or pause the reconstruction of the drawing. The page also preferably contains user information 40 identifying the creator of the content which is being viewed in the animation window 44.

[0028] Therefore, the invention provides a simple and easy to navigate interface for a user to view content from other users either in the form of the stream 36, 42 or as an animation in the animation window 44.

[0029] The information presented on each screen, and the layout of how the information is presented, may vary according to the platform on which the information is presented. For example a mobile device 16 which has a much smaller screen than a tablet device 14 and they require the information to be presented in a different manner in order maintain user experience.

[0030] Preferably the user can interact with a selected piece of user created content in order to "star" the drawings which they like or find interesting. By starring a drawing the starred drawing is republished in the user's personal stream 42 and is seen by the friends of the user in their streams. Therefore, the starring of a drawing results in the image being republished and shared across a greater audience. In further embodiments, drawings which have multiple stars may be promoted to other users.

[0031] A further feature of the invention is that as well as viewing drawings created by other users it is possible to comment or respond to the drawings in the form of either a comment box or a further drawing. Responses in the form of a comment are widely known in the art and are implemented in a similar manner. As well as being a wall to provide written comments on an uploaded image other users, or even the same user, may provide a further drawing in response to the presented image. This may also be used to for two or more users to create a collaborative drawing.

[0032] In such an embodiment a first user may present a picture as a topic for discussion. Other users submit responses in the form of further images. Preferably, the images are placed in their own stream (not shown) with the responses submitted forming the stream. In such an embodiment, the user is presented with the option of viewing the stream associated with each image. Therefore, it is possible to see the originating images and the subsequent responses. In a further embodiment the first image and the images posted in response may be posted in the known message board type format, where a user starts a thread with an image, and images are drawn as responses.

[0033] In the above embodiments, it is possible for a user to reserve their place in the stream, or message board thread, in response to another image. For example, if a user is viewing the stream on a desktop computer 20 and prefers to draw images using their tablet computer 14, or does not have sufficient time to draw response, they may ^reserve" a place in the stream in which their drawn response is to be placed. To reserve a place, the user selects a reserve button (not shown) and information identifying the user (e.g. user name) is recorded, along with the position in the stream. When the user logs in, or starts to draw a new image, they are presented with a reminder regarding their reserved place. Once the image has been drawn and is uploaded to the server, it is placed in the stream at the reserved place. In an example of the invention there is a time limit for how long a place in a stream may be reserved.

[0034] Figure 3 shows a schematic representation of a collaborative effort between two or more users in order to create related content.

[0035] There is shown the overall image 48 which consists of the source drawing 50, and responses to the source drawing 52 -62 numbered in order of the drawings being added to the source drawing. The source drawing 50 is defined by four boundaries 50a, 50b, 50c and 50d.

[0036] Each drawing in a preferred example is stored in a rectangle four square image and therefore provides a four sided image in which the site defines the boundary of the pictures. A user can add further drawings by tagging one of the four boundaries in the drawings and one of the four boundaries of the source image, which are to be the common boundary.

[0037] As the responses are made in response to an initial image, the overall image would therefore be seen as expanding both conceptually and spatially. The spatial extension of the original image may extend along any of the four boundaries of the source image 50a, 50b, 50c and 50d.

[0038] The source image 50 is uploaded by a user and can be commented on by other users using further drawings. The first comment is drawing 52 has been placed along the top horizontal edge of the source drawing 50, that is to say boundary 50a. No further images have been made to response 52 have been submitted. A second response 54 has also been submitted and this has been tagged to be placed on the left side vertical edge of the original image 50, that is to say boundary 50d. Two further responses 56 and 58 have also been filed in response to image 54. Therefore, the overall image 48 has been expanded in multiple directions with the content of the drawings preferably being related to the original source image 50 depending on the contents created by the users this may not necessarily be the case.

[0039] In some embodiments multiple responses may be filed at the same edge. For example, the source image 50 has two responses filed at the vertical left hand edge (i.e. drawings 54 and 60) . Therefore the overall image 48 may be considered to be expanding the horizontal plain. It is also possible to respond to the drawings which are stacked, for example image 62 has been submitted in response to image 60 and not image 54. As the response as shown in image 54 and image 60 it is likely to be different the overall picture 48 may therefore be considered to be expanding conceptually as well as spatially in multiple directions. In a preferred embodiment a view of the overall picture 48 is able to explore the expanded image in all directions.

[0040] Users can select a collaborative effort and navigate through the images. In an example, the user starts at the source image 50, though in other embodiments they may start at one of the responses. A single is presented on the user's screen, and if responses have been placed at boundary, markers indicating that responses have been filed are presented at the appropriate boundary. Preferably, for each response filed a separate marker is shown, though in the event that multiple responses are filed, multiple responses may be indicated with a single marker. To view the responses the user selects a marker or may navigate using keypad arrows or swipe gestures. If images are stacked (e.g. images 54 and 60) the user is presented with the option of viewing the other images in the stack. Therefore, the user may navigate the responses in three dimensions .

[0041] Optionally, the user may zoom out in order to view multiple images on the screen at the same time. In a further example, the user may reserve a space for response, in the same manner as described above.

[0042] In an example of the invention, users can also create a collaborative drawing in a single plane. In such an embodiment the source image 50 is commented on and tags placed to position the image. A single image may be placed at a boundary (50a, 50b, 50c or 50d) and responses added as described above, with tags placed on the response to position the response at the relevant boundary. Therefore, multiple users may collaborate to form a larger image.

[0043] Optionally, the creator of the source image 50, or another user such as moderator, is given the option of approving a submitted response before it is accepted and forms part of the overall picture 48. [0044] Preferably provided is the ability to replay the creation of the user created content. In particular, it is desirable to be able to replay the creation to multiple users in a manner that can be rendered well across all platforms. It is also desirable to minimise the bandwidth and storage requirements needed in order to serve and store the content at the server 10 and client device 14.

[0045] Figure 4 shows a schematic representation of the process of a user creating content on a user device such as a touch screen device. Whilst the following is described with reference to a touch screen device, and is designed to of especially suitable and useful when used with such devices the process can be used with other forms of user input such as selection by a mouse.

[0046] The user is presented with the option to create new content, such as via a button or icon. When selected the user is subsequently presented with a blank screen or canvas 70 on which to draw the image. The screen is defined by four boundary edges 70a, 70b, 70c and 70d. As described above, the boundary edges are used to define the edges in which further pictures, or responses, may be added to form the collaborative image .

[0047] The user creates the drawing on the canvas using a series of gestures, or strokes, on the touch screen display. In order to replay the creation of the image, the starting point of a stroke 72, the time at which the stroke began, the end point of a stroke 74 and the time at which the stroke ended are recorded on the device, and when the image is completed sent to the server 10. The path of the stroke 76 is converted in real-time as a smoothed vector path 78 described by mathematical equations (as shown in Figure 4c) . This allows for any minor deviation in the gesture on the touch screen to produce the stroke (such as due to variations in pressure, or surface area of finger touching the screen) to be smoothed out producing a more visually pleasing effect. Further only the mathematical equation that describe the stroke need to be stored and not the positions of all the pixels that make up the path. The smoothed path 78 can be represented using scalable vector graphics (SVG) .

[0048] In order to recreate a stroke the system records the start position 72 and start time, end position 74 and end time as well as the mathematical vector representations of the smoothed path 78. Thus not only is a very small amount of information is required to define the path reducing storage and bandwidth requirements, but the storage of the start and end times and start and end positions, enables the path to be redrawn form start point to finish point without the storage of any intermediate animation frames. This process is repeated for all strokes made by the user, and are compiled to form define a replayable structure for the creation of the drawing. According all of the strokes can be individually recreated and using the stored start and finish times, all of the stokes that make up a drawing can be recreated in the correct sequence and direction allowing for the replay of the user creating the drawing without requiring any intermediate frames representing partially complete drawings in their entirety at any given time. The whole drawing can be recreated by considering each stoke separately.

[0049] Once completed the drawing, as well as the file defining the times for replay of the drawing, are stored on the server 10. Optionally, the creator may provide text data with the drawing, such as a title and/or description and/or keywords associated with the image so that the image may be searched. Preferably, further information regarding the originating user (i.e. creator), time of creation, star count and friend and/or follower data is also stored with the image. Any user wishing to view the image would be served from the server 10 the image file as well as the animation file which is then rendered on the client device.

[0050] In particular, when a user wishes to replay the creation of a drawing, the server 10 sends to the user's device a file, such as an XML based file, which contains the aforementioned SVG information. As the client device (14, 16 or 18), has the app for the program installed thereon, or the browser plug-in 20, the path may be recreated at the client device using the media player equivalent. This reduces the amount of information which needs to be sent as well reducing the server 10 requirements, as less information needs to be stored .

[0051] A further advantage is that by using vectors such as SVGs to define the animation problems regarding rendering due to the difference in sizes of, say, the screen of a smartphone 16 and a large monitor for a desktop computer using a browser plug-in 20 are overcome as SVGs are able to scale drawings without blockiness associated with the magnification of bitmaps. This has particular benefits for these systems because small mobile devices have been found to be amongst the most suitable devices for creation of drawings. This is because they are currently more likely to be touch screen based and because they allow a user to quickly draw using small strokes across a small screen. However, the best devices for viewing the drawings may be large monitors without touch screens, particularly for viewing collaborations like those depicted in Figure 3. The use of vectors enables the most suitable devices to be used for both creation and viewing.

[0052] In an example of the invention, the width of the line drawn in each stroke is constant. The constant weighting of each line has a twofold advantage. As the width of each line is constant, there is no need to store any information regarding line thickness, thereby reducing . the amount of information required to render and animate the image. Advantageously as the invention uses SVGs the line thickness may be set as any number of default thicknesses or even shapes or colours. Furthermore, as the line weighting is constant the image has a recognisable look and feel and may be easily associated with the invention. This may be further reinforced by using the same canvas backgrounds across all images. In further examples, the line thickness, shape and colour of the line may be selected and information regarding thickness, shape and colour are also stored with the vectors defining the path of the strokes.

[0053] The present invention therefore provides a social network platform in which users can share user created content in the form of images. Such a platform allows users to share, and like images as well as respond to images in the form of other images.

[0054] The platform provides a user with a personalised image stream in which images of interest, or from persons of interest, are shown to the user.

Claims

WHAT IS CLAIMED IS:

1. A method of online collaborative drawing comprising receiving at a server a first drawn image from a first user device, the first image being defined by one or more boundaries, and storing the first image on the server;

in response to a request from the first, or a second user device, sending the first image from the server to the user device and presenting the first image on a screen of the user device ;

receiving a second drawn image, defined by one or more boundaries, from the first or second user device, the second drawing associated with information which defines a common boundary between the first and second image;

joining the first and second image at the common boundary.

2. The method of claim 1 wherein the method further comprises the step of defining the first and second joined images as single image,

3. The method of any preceding claim wherein one or more further images may be joined at the common boundary.

4. The method of any preceding claim wherein the method further comprises:

presenting to a user, on a device with a display, a first image with indicia of one or more joined images at boundary of the displayed image;

the user selecting the indicia of one of the joined images;

displaying the image associated with the selected indicia on the display.

5. The method of claim 4 further comprising the step of presenting on the displayed image associated with the selected indicia, further indicia indicative of one or more further joined images at boundary of the displayed image and repeating the steps of selecting and presenting images in order to allow a user to navigate the joined images.

6. The method of any preceding claim wherein the indicia is a thumbnail of part or all of the respective image.

7. The method of any preceding claim wherein the images is associated with text or metadata preferably describing the image .

8. The method of any preceding claim wherein a user is enabled to share or like an image to other users within the collaborative environment.

9. A method of animating a picture created on a computer device within a drawing environment;

identifying a first stroke created within the drawing environment ;

determining a start point and a start time for the first stroke;

determining an end point and an end time for the first stroke;

describing the path of the first stroke between the start and end point as one or more vectors;

storing on a memory the start and end point and the one or more vectors for the first stroke;

repeating the identifying, determining, describing and storing steps for multiple subsequent strokes which define an image within the drawing environment; and

rendering a recreation of the image on a screen by recreating each stroke using the stored points and description, the strokes being rendered in a timed sequence using the stored start and end times.

10 The method of claim 9 wherein the strokes are defined as vector graphics, preferably scalable vector graphics .

11. The method claim 9 or 10 wherein a plurality of strokes, preferably all of the strokes, are defined with a predefined thickness.

12. The method of any of claims 8 to 11 wherein the drawing environment on the computer device comprises a media player configured to perform the step of rendering.

13. The method of any of claims 8 to 12 wherein the information regarding the one or more strokes is stored with information identifying the creator of the image.

14. The method of any of claims 8 to 13 wherein the information regarding the one or more strokes is stored in an extensible markup language such as XML.

15. The method of any of claims 8 to 14 wherein further information regarding the one or more strokes, such as colour and line shape, are also recorded.

16. The method of any of claims 8 to 15 wherein the describing step occurs in substantially real-time.

17. The method of any of claims 8 to 16 wherein the image is associated with text, and/or metadata describing the image .

18. Apparatus for online collaborative drawing, the apparatus comprising:

a server configured to receive a first drawn image from a first user device, the first image being defined by one or more boundaries, and storing the first image on the server; the server further configured to send in response to a request from the first, or a second user device, the first image stored on the server to the user device,

the user device configured to present the first image on a screen of the user device;

the server configured to receive and store a second drawn image, defined by one or more boundaries, from the first or second user device, the second drawing associated with information which defines a common boundary between the first and second image, and join the first and second image at the common boundary.

19. Apparatus configured to enable the method of any preceding method claim.