Control method and device of whiteboard application and intelligent interactive panel

Abstract

This invention discloses a control method, device, and intelligent interactive whiteboard application. The whiteboard application includes a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The method includes: when the selection box component detects a preset operation event generated within the first selection box, sending the event attribute information of the preset operation event to the parent component; the parent component determining, based on position information, whether the preset operation event is used to select display elements within the first selection box; and, if it is determined that the preset operation event is used to select display elements within the first selection box, selecting the target display element selected by the preset operation event. This invention solves the technical problem in the prior art where, when multiple handwritings are selected, it is impossible to directly select from the already selected handwritings.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and more specifically, to a control method, device, and intelligent interactive whiteboard application. Background Technology

[0002] In internet technology, web collaboration whiteboards often require element selection, such as choosing a pen, text, or file on the whiteboard, and displaying the selected effect. The selected effect is usually displayed on top of the Canvas element using a browser DOM node.

[0003] Currently, when selecting elements, we combine Figure 1a As shown, elements on the canvas are selected, and the handwriting on the canvas is generated using the browser's Canvas drawing function; a selection box is placed around the note, generated using a DOM element, and its properties are set to place it above the handwriting, so that the user sees no visual difference between the selection box and the handwriting element.

[0004] However, when a user selects multiple strokes, they cannot directly select any one stroke from among the selected strokes. Figure 1b As shown, when the three strokes "123" are selected, it is not possible to directly select any one of the three strokes. You can only select any one of the three strokes again by clicking to cancel the selection of "123" in the blank area.

[0005] There is currently no effective solution to the above problems. Summary of the Invention

[0006] This invention provides a whiteboard application control method, device, and smart interactive whiteboard to at least solve the technical problem in the prior art where, when multiple handwritings are selected, it is impossible to directly select from the already selected handwritings.

[0007] According to one aspect of the present invention, a control method for a whiteboard application is provided. The whiteboard application includes a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control method for the whiteboard application includes: when the selection box component detects a preset operation event generated within the first selection box, sending event attribute information of the preset operation event to the parent component, wherein the event attribute information includes position information of the preset operation event; determining, based on the position information, whether the preset operation event is used to select display elements within the first selection box; and, if it is determined that the preset operation event is used to select display elements within the first selection box, selecting the target display element selected by the preset operation event.

[0008] According to another aspect of the present invention, a control device for a whiteboard application is also provided. The whiteboard application includes: a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control device for the whiteboard application includes: a sending module, configured to send event attribute information of a preset operation event generated within the first selection box to the parent component when the selection box component detects such an event, wherein the event attribute information includes position information of the preset operation event; a judging module, configured to determine, based on the position information, whether the preset operation event is used to select a display element within the first selection box; and a selection module, configured to select the target display element selected by the preset operation event when it is determined that the preset operation event is used to select a display element within the first selection box.

[0009] According to another aspect of the present invention, a computer storage medium is also provided, which stores a plurality of instructions adapted for loading by a processor and executing any of the method steps described above.

[0010] According to another aspect of the present invention, a smart interactive flat panel is also provided, comprising: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and executed the method steps of any of the above.

[0011] In the above embodiments of this application, the whiteboard application includes: a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control method of the whiteboard application includes: when the selection box component detects a preset operation event generated within the first selection box, sending the event attribute information of the preset operation event to the parent component, wherein the event attribute information includes the position information of the preset operation event; determining, based on the position information, whether the preset operation event is used to select a display element within the first selection box; and, if it is determined that the preset operation event is used to select a display element within the first selection box, selecting the target display element selected by the preset operation event. The above solution, upon receiving a preset operation event generated on the first selection box, sends the event attribute information of the preset operation event to the parent component. After the parent component determines, based on the position information, that the preset operation event is used to select the display element within the first selection box, it selects the target display element selected by the preset operation event. This uses a parent-child component passing method to indirectly simulate the effect of sibling component communication. Furthermore, the selection process does not involve redrawing the Canvas; instead, it uses the DOM to draw, improving browser performance and reducing the performance loss of Canvas redrawing. This solves the technical problem in existing whiteboards where, when multiple strokes are selected, it is impossible to directly select from the already selected strokes. Attached Figure Description

[0012] The accompanying drawings, which are included to provide a further understanding of the invention and form part of this application, illustrate exemplary embodiments of the invention and, together with their description, serve to explain the invention and do not constitute an undue limitation thereof. In the drawings:

[0013] Figure 1a This is a schematic diagram of the interface of a whiteboard application in the prior art;

[0014] Figure 1b This is a schematic diagram of another whiteboard application in the existing technology.

[0015] Figure 2a This is a schematic diagram of a whiteboard application interface according to an embodiment of the present invention;

[0016] Figure 2b It is based on Figure 2a A modified interface diagram of a whiteboard application;

[0017] Figure 3 This is a schematic diagram of a whiteboard application control method according to an embodiment of the present invention;

[0018] Figure 4 This is a flowchart of a whiteboard application control method according to an embodiment of the present invention;

[0019] Figure 5a This is a schematic diagram of another whiteboard application according to an embodiment of the present invention;

[0020] Figure 5b It is based on Figure 5a A modified interface diagram of a whiteboard application;

[0021] Figure 6 This is a layout diagram of a whiteboard application according to an embodiment of the present invention;

[0022] Figure 7 This is a layout diagram of another whiteboard application according to an embodiment of the present invention;

[0023] Figure 8 This is a schematic diagram of operating a selection box in a whiteboard application according to an embodiment of the present invention;

[0024] Figure 9 This is a schematic diagram of a control device for a whiteboard application according to an embodiment of the present invention;

[0025] Figure 10 This is a schematic diagram of an intelligent interactive flat panel provided in an embodiment of the present invention. Detailed Implementation

[0026] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0027] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0028] Example 1

[0029] In the whiteboard application control method provided in this embodiment, the whiteboard application includes a selection box component, a canvas and a parent component, and the interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements.

[0030] The aforementioned display elements can be handwriting on the Canvas, edited text, image elements, and shape elements, etc., and this application embodiment does not limit them.

[0031] Combination Figure 1b As shown, the Canvas uses the browser's HTML5 API, which allows multiple display elements to be drawn on a single Canvas. The first selection box for selecting multiple display elements is generated by overlaying a DOM element onto the Canvas. Figure 1b In the image, multiple display elements "1", "2", and "3" are selected. If you need to select "2" again from these three selected elements, you must click in a blank area to deselect "1", "2", and "3", and then reselect "2". You cannot directly select "2" on top of the already selected "1", "2", and "3". This will result in an image like the one shown. Figure 2a The effect.

[0032] In related technologies, since the selection box component is an element overlaid on the Canvas, its events cannot be triggered on the Canvas. To enable direct selection among multiple selected display elements, a data penetration problem needs to be solved. However, the browser's event propagation principle dictates that events can only be passed from child events to parent events, thus making it impossible to directly solve the aforementioned data penetration problem. Therefore, this embodiment proposes a whiteboard application control method to pass selection box component events to sibling nodes.

[0033] Figure 3 This is a schematic diagram of a whiteboard application control method according to an embodiment of the present invention, combined with... Figure 3 As shown in the diagram, Selector is a selection box component that implements the UI of the selection box display and the callback after the click event is triggered; the parent component is responsible for receiving the events passed by Selector and processing the events; the Canvas is the carrier in the browser that carries the rendering of display elements. When the selection box component triggers events such as moving or stretching, the data on the canvas changes and will be redrawn on the Canvas.

[0034] According to an embodiment of the present invention, a method embodiment for controlling a whiteboard application is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0035] Figure 4 This is a flowchart of a whiteboard application control method according to an embodiment of the present invention, such as... Figure 4 As shown, the method includes the following steps:

[0036] Step S402: When the selection box component detects a preset operation event generated within the first selection box, it sends the event attribute information of the preset operation event to the parent component.

[0037] The aforementioned preset operation events can be detected using the selection box component. Optionally, the selection box component can be bound to preset operation events using the open-source gesture library hammer.js. These preset operation events can include single-click and double-click operation events, as well as swipe operation events. Single-click operation events are used to select a single element, while double-click operation events are used to edit an element.

[0038] When the selection box component detects a click event generated within the first selection box, the event attribute information of the click event can include the location information of the click event. That is, the event attribute information of the click event that can be obtained includes at least the location information. When the selection box component detects a double-click event generated within the first selection box, the event attribute information of the double-click event can also include the location information of the double-click event.

[0039] In one alternative implementation, when the checkbox component is built, it passes a callback function to the parent component. When the checkbox component detects a preset operation event, it passes the event attribute information of the preset operation event to the parent component through this callback function. The parent component can then execute the following steps.

[0040] Step S404: The parent component determines whether a preset operation event is used to select the display element in the first selection box based on the position information.

[0041] The shape of the first selection box can be a regular shape such as a rectangle or a circle, or it can be an irregular shape. This application embodiment does not impose specific limitations on this.

[0042] In the above steps, the parent component determines whether the preset operation event is used to select a display element within the first selection box based on the position information of the preset operation event. The display element within the first selection box is the already selected display element. When a user selects a display element, they usually operate on the element to be selected. Therefore, the parent component can first determine whether the position indicated by the position information collides with any display element within the first selection box. If a collision occurs, it means that the preset operation event is used to select a display element within the first selection box; if no collision occurs, it means that the preset operation event is not used to select a display element within the first selection box.

[0043] Step S406: If it is determined that the preset operation event is used to select the display element in the first selection box, select the target display element selected by the preset operation event.

[0044] In one optional implementation, the aforementioned preset operation event is a click operation event. When it is determined that the click operation event is used to select any display element within the first selection box, a second selection box can be generated, and the target element can be moved, stretched, or otherwise manipulated through the second selection box.

[0045] In another optional implementation, the displayed element is typed text, and the preset operation event is a double-click operation event. When the double-click operation event is used to edit the displayed element within the first display box, the target displayed element selected by the preset operation event can be edited by double-clicking. Figure 5a and Figure 5b As shown, Figure 5a The target element "2" within the editing area can be changed by double-clicking to edit it. Figure 5b The target element displayed within the editing area is "3".

[0046] As can be seen from the above, in the embodiments of this application, the whiteboard application includes: a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control method of the whiteboard application includes: when the selection box component detects a preset operation event generated in the first selection box, sending the event attribute information of the preset operation event to the parent component, wherein the event attribute information includes the position information of the preset operation event; determining, based on the position information, whether the preset operation event is used to select a display element in the first selection box; and, if it is determined that the preset operation event is used to select a display element in the first selection box, selecting the target display element selected by the preset operation event. The above solution, upon receiving a preset operation event generated on the first selection box, sends the event attribute information of the preset operation event to the parent component. After the parent component determines, based on the position information, that the preset operation event is used to select the display element within the first selection box, it selects the target display element selected by the preset operation event. This uses a parent-child component passing method to indirectly simulate the effect of sibling component communication. Furthermore, the selection process does not involve redrawing the Canvas; instead, it uses the DOM to draw, improving browser performance and reducing the performance loss of Canvas redrawing. This solves the technical problem in existing whiteboards where, when multiple strokes are selected, it is impossible to directly select from the already selected strokes.

[0047] As an optional embodiment, the canvas has a viewport, and the position information in the event attribute information is the relative coordinate of the preset operation event relative to the viewport. The parent component determines whether the preset operation event is used to select the display element in the first selection box based on the position information, including: obtaining the absolute coordinate of the preset operation event relative to the canvas according to the relative coordinate; and determining whether the preset operation event is used to select the display element in the first selection box according to the absolute coordinate.

[0048] Figure 6 This is a schematic diagram of a whiteboard application according to an embodiment of the present invention, combined with... Figure 6 As shown, in one optional implementation, there is a virtual origin on the canvas. A Cartesian coordinate system can be established on the canvas based on this origin, so that the position of the displayed elements on the canvas can be represented in the form of coordinates. The position information of the preset operation event is represented on the canvas in the form of coordinates. The origin coordinates are (0, 0), and view represents the browser viewport, which is the area that the user can see. The displayed elements on the canvas within the viewport range can be seen through this viewport.

[0049] Furthermore, the absolute coordinates of the viewport relative to the canvas can be determined by the origin coordinates of the canvas and the position of the viewport relative to the canvas, such as... Figure 6As shown, in this example, the absolute coordinates of the top left corner of the viewport relative to the canvas are (1, 1). Since the position information in the event attribute information is the relative coordinates of the preset operation event relative to the viewport, that is, the above relative coordinates relative to the viewport take the top left corner of the viewport as the origin coordinates, and the coordinates of this origin coordinates relative to the canvas are (1, 1), the absolute coordinates of the preset operation event relative to the canvas can be determined by the relative coordinates relative to the viewport and the absolute coordinates of the viewport relative to the canvas. Then, it can be determined whether the preset operation event is used to select the display element in the first selection box based on the absolute coordinates.

[0050] As an optional embodiment, obtaining the absolute coordinates of a preset operation event relative to the canvas based on relative coordinates includes: obtaining the coordinates of the reference point of the upper left corner of the viewport in the canvas, obtaining the scaling offset coordinates and the scaling ratio of the canvas, wherein the scaling offset coordinates are used to compensate for the offset generated when scaling the canvas; obtaining the sum of the relative coordinates, the reference point coordinates and the scaling offset coordinates; and determining the ratio of the sum to the scaling ratio as the absolute coordinates.

[0051] In one optional implementation, the relative coordinate of the preset operation event with respect to the top left corner of the viewport is e, the reference point coordinate of the top left corner of the viewport in the canvas is drawOriginPoint, the scaling offset coordinate is canvasTranslateOffset, and the scaling ratio is curScale. Then, the absolute coordinate of the preset operation event with respect to the canvas is oEvent = (e + drawOriginPoint + canvasTranslateOffset) / curScale, where the initial value of the scaling ratio is 1.

[0052] As an optional embodiment, determining whether a preset operation event is used to select a display element within a first selection box based on absolute coordinates includes: detecting the distance between the absolute coordinates and each display element within the first selection box; and determining the display element whose distance from the absolute coordinates to any display element within the first selection box is less than a preset distance as the target display element if the distance between the absolute coordinates and any display element within the first selection box is less than a preset distance.

[0053] After obtaining the absolute coordinates of the preset operation event relative to the canvas through the above calculation method, the absolute coordinates are compared with the absolute coordinates of each display element in the data manager to determine whether the relative distance between the absolute coordinates of the preset operation event and the absolute coordinates of each display element is less than the preset distance.

[0054] In one optional implementation, if the parent component detects that the distance between the absolute coordinates of a display element and the absolute coordinates of a display element within the first selection box is less than a preset distance (e.g., 10px), it determines that the display element within the first selection box has collided with a preset operation event. The parent component then passes the display element's attribute information to the selection box component. The selection box component generates a second selection box around the display element based on this attribute information. The display element's attribute information includes the width and height of the display element's minimum bounding rectangle, as well as the coordinates of any vertex of the minimum bounding rectangle. From a user experience perspective, the user clicks on a display element on the canvas, and that display element is selected.

[0055] In another optional implementation, if the distance between the absolute coordinates of the obtained element and the absolute coordinates of a display element within the first selection box is less than a preset distance (e.g., less than 10px), and it is determined that the absolute coordinates of the display element within the first selection box collide with a preset operation event whose absolute coordinates are less than 10px apart, then the absolute coordinates of the preset operation event are passed to the first selection box. After receiving the absolute coordinates of the preset operation event, the first selection box is re-rendered, and a second selection box is drawn. The display element within the second selection box is the target display element. From a user experience perspective, the user clicks on a display element on the canvas, and that display element is selected.

[0056] It should be noted that for overlapping display elements, the priority of selection can be based on the creation time. The elements created earlier will be selected first. Therefore, for overlapping display elements, the element being drawn can be selected first.

[0057] As an optional embodiment, a preset operation event is used to select display elements in a first selection box. When it is determined that the preset operation event is used to select display elements in the first selection box, after selecting the target display element selected by the preset operation event, the method further includes: sending the display element attribute information of the target display element selected by the preset operation event to the selection box component; and generating a second selection box around the target display element by the selection box component according to the display element attribute information of the target display element.

[0058] The display element attribute information of the target display element selected by the aforementioned preset operation event is sent to the selection box component through the parent component. The attribute information of the target display element may include the width and height of the minimum bounding shape of the target display element, as well as the coordinates of any vertex of the minimum bounding shape.

[0059] Figure 7 This is a layout diagram of another whiteboard application according to an embodiment of the present invention, combined with Figure 7As shown, in one optional implementation, both the first and second selection boxes are rectangular in shape. When a preset operation event is determined to select a display element within the first selection box, after selecting the target display element chosen by the preset operation event, the display element information of the target display element selected by the preset operation event is sent to the selection box component via a callback function. When the preset operation event is triggered, the selection box component generates a second selection box around the target display element based on the target display element's attribute information (e.g., ...). Figure 7 (As shown).

[0060] As an optional embodiment, a second selection box is generated around the target display element by a selection box component based on the display element attribute information of the target display element, including: obtaining the width information, height information, and position information of the target display element from the display element attribute information; obtaining preset color information; and generating a second selection box around the target display element according to the color information based on the width information, height information, and position information of the target display element.

[0061] When the second selection box is a rectangle, the width and height information of the target display element are the width and height of the minimum bounding rectangle of the target display element, as well as the coordinates of any vertex on the minimum bounding rectangle.

[0062] Combined again Figure 7 As shown, in one optional implementation, the width information of the target display element is a, the height information is b, and the preset color information is black. Based on the width information, height information, and position information of the target display element, a black second selection box is generated around the target display element.

[0063] As an optional embodiment, a preset operation event is used to edit the display element in the first selection box. When it is determined that the preset operation event is used to select the display element in the first selection box, after selecting the target display element selected by the preset operation event, the method further includes: sending the display element attribute information of the target display element selected by the preset operation event to the editing component; and generating an editing area on the target display element by the editing component according to the display element attribute information of the target display element.

[0064] In one optional implementation, multiple target display elements are drawn on a Canvas. The display element attribute information of the target display element selected by the preset operation event is sent to the editing component. Accordingly, an editing area is generated on the target display element based on the position, width, and height information of the target display element. By editing the editing area, some of the target display elements are redrawn and rendered on the Canvas.

[0065] Specifically, combined again Figure 5a For example, if the target display element is "123" and we need to edit the "2" in the target display element to "3", then the attribute information of the target display element "123" is sent to the editing component. The editing component then generates an editing area on the target display element "2" based on its display element attribute information. This editing area is then edited to change the original attribute information of the target display element "2". Figure 5b The target element "3" displays attribute information and is then redrawn on the Canvas.

[0066] As an optional embodiment, the above method further includes: receiving a change operation on the first selection box through the selection box component, wherein the change operation includes any one of the following: a move operation and a stretch operation; retrieving the selection box attribute information of the first selection box from the data manager, modifying it, and passing the modified selection box attribute information to the parent component; passing the modified selection box attribute information to the data manager through the parent component, so that the data manager modifies the stored selection box attribute information; and passing the modified selection box attribute information to the rendering manager through the data manager, so that the rendering manager renders the modified first selection box.

[0067] Figure 8 This is a schematic diagram illustrating the operation of a selection box in a whiteboard application according to an embodiment of the present invention, in conjunction with... Figure 8 As shown, in one optional implementation, taking a movement operation as an example, the selection box component receives a movement operation on the first selection box. The first selection box is moved by dx and dy, where dx represents the horizontal distance of the first selection box and dy represents the vertical distance of the first selection box. Based on the above movement information, the selection box attribute information of the first selection box is retrieved from the data manager and modified. After modification, the modified selection box attribute information is passed to the parent component. After receiving the modified selection box attribute information, the parent component passes the selection box attribute information to the data manager for updating. After the data manager completes the update, the latest selection box attribute information is passed to the rendering manager. The first selection box is rendered according to the selection box attribute information to generate the modified first selection box. From the user's visual experience, it appears that the position of the target display element relative to the viewport has been moved, but in reality, the selection box attribute information of the first selection box has been modified, causing the content to be drawn to change.

[0068] Example 2

[0069] Figure 9 This is a schematic diagram of a control device for a whiteboard application according to an embodiment of the present invention, combined with... Figure 9As shown, the device can perform the relevant steps in the embodiments of the present invention.

[0070] The whiteboard application includes a selection box component, a canvas, and a parent component. The whiteboard application's interface includes multiple display elements and a first selection box for selecting multiple display elements. The device includes:

[0071] The sending module 900 is used to send the event attribute information of the preset operation event to the parent component when the selection box component detects the preset operation event generated in the first selection box. The event attribute information includes the position information of the preset operation event.

[0072] The judgment module 902 is used to determine whether a preset operation event is used to select the display element in the first selection box based on the position information of the parent component;

[0073] The selection module 904 is used to select the target display element selected by the preset operation event when it is determined that the preset operation event is used to select the display element in the first selection box.

[0074] As an optional embodiment, the canvas has a viewport, and the position information in the event attribute information is the relative coordinates of a preset operation event relative to the viewport. The selection module mentioned above includes:

[0075] The acquisition module is used to obtain the absolute coordinates of a preset operation event relative to the canvas based on the relative coordinates.

[0076] The judgment submodule is used to determine whether a preset operation event is used to select the display element in the first selection box based on the absolute coordinates.

[0077] As an optional embodiment, the acquisition module includes:

[0078] The first acquisition submodule is used to acquire the coordinates of the reference point of the upper left corner of the viewport in the canvas, acquire the scaling offset coordinates and the scaling ratio of the canvas. The scaling offset coordinates are used to compensate for the offset generated when scaling the canvas.

[0079] The second acquisition submodule is used to obtain the sum of relative coordinates, reference point coordinates, and scaling offset coordinates;

[0080] The first determining submodule is used to determine the ratio of the sum to the scaling factor as absolute coordinates.

[0081] As an optional embodiment, the determination submodule includes:

[0082] The detection submodule is used to detect the distance between the absolute coordinates and each displayed element within the first selection box;

[0083] The second determination submodule is used to determine the display element whose absolute coordinates are less than a preset distance from any display element within the first selection box as the target display element, provided that the distance between the absolute coordinates and any display element is less than a preset distance.

[0084] As an optional embodiment, a preset operation event is used to select the display elements in the first selection box. After the selection module, the above-mentioned device further includes:

[0085] The first sending submodule is used to send the display element attribute information of the target display element selected by the preset operation event to the selection box component;

[0086] The first generation module is used to generate a second selection box around the target display element based on the display element attribute information of the target display element through the selection box component.

[0087] As an optional embodiment, the generation module includes:

[0088] The third acquisition submodule is used to acquire the width, height and position information of the target display element from the display element attribute information;

[0089] The fourth submodule is used to obtain preset color information;

[0090] The first generation submodule is used to generate a second selection box around the target display element based on the width, height, and position information of the target display element, and according to the color information.

[0091] As an optional embodiment, a preset operation event is used to edit the display elements in the first selection box. After the selection module, the above-mentioned device further includes:

[0092] The second sending submodule is used to send the display element attribute information of the target display element selected by the preset operation event to the editing component;

[0093] The second generation module is used to generate an editing area on the target display element based on the display element attribute information of the target display element through the editing component.

[0094] As an optional embodiment, the above-described apparatus further includes:

[0095] The receiving module is used to receive a change operation on the first selection box through the selection box component, wherein the change operation includes any one of the following: a move operation and a stretch operation;

[0096] The modification module is used to retrieve the selection box property information of the first selection box from the data manager, modify it, and pass the modified selection box property information to the parent component;

[0097] The pass module is used to pass the modified selection box attribute information to the data manager through the parent component, so that the data manager can modify the stored selection box attribute information;

[0098] The rendering module is used to pass the modified selection box attribute information to the rendering manager through the data manager, and the rendering manager renders the modified first selection box.

[0099] Example 3

[0100] According to an embodiment of this application, a computer storage medium is provided, which stores a plurality of instructions adapted for loading by a processor and executing the method steps of any one of Embodiment 1 or Embodiment 2.

[0101] Example 4

[0102] According to an embodiment of this application, a smart interactive flat panel is provided, including: a processor and a memory; wherein, the memory stores a computer program, the computer program being adapted to be loaded by the processor and executed the method steps of any one of Embodiment 1 or Embodiment 2.

[0103] Figure 10 This is a schematic diagram of a smart interactive flat panel provided in an embodiment of the present invention. The smart interactive flat panel includes the aforementioned interactive device body and touch frame, combined with... Figure 10 As shown, the intelligent interactive flat panel 1300 may include: at least one processor 1301, at least one network interface 1304, user interface 1303, memory 1305, and at least one communication bus 1302.

[0104] The communication bus 1302 is used to realize the connection and communication between these components.

[0105] The user interface 1303 may include a display screen and a camera. Optionally, the user interface 1303 may also include a standard wired interface and a wireless interface.

[0106] The network interface 1304 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface).

[0107] The processor 1301 may include one or more processing cores. The processor 1301 connects to various parts within the smart interactive flat panel 1300 using various interfaces and lines. It executes various functions and processes data of the smart interactive flat panel 1300 by running or executing instructions, programs, code sets, or instruction sets stored in the memory 1305, and by calling data stored in the memory 1305. Optionally, the processor 1301 may be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor 1301 may integrate one or a combination of several of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), and modem. The CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content to be displayed on the screen; and the modem handles wireless communication. It is understood that the modem may also be implemented as a separate chip without being integrated into the processor 1301.

[0108] The memory 1305 may include random access memory (RAM) or read-only memory. Optionally, the memory 1305 may include a non-transitory computer-readable storage medium. The memory 1305 can be used to store instructions, programs, code, code sets, or instruction sets. The memory 1305 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the above-described method embodiments, etc.; the data storage area may store data involved in the above-described method embodiments, etc. Optionally, the memory 1305 may also be at least one storage device located remotely from the aforementioned processor 1301. Figure 10 As shown, the memory 1305, which serves as a computer storage medium, may include an operating system, a network communication module, a user interface module, and operating applications for the smart interactive flat panel.

[0109] exist Figure 10In the smart interactive flat panel 1300 shown, the user interface 1303 is mainly used to provide an input interface for the user and obtain the user input data; while the processor 1301 can be used to call the operating application of the smart interactive flat panel stored in the memory 1305 and specifically execute any one of the operations in Embodiment 1 or Embodiment 2.

[0110] The sequence numbers of the above embodiments of the present invention are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0111] In the above embodiments of the present invention, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0112] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units can be a logical functional division, and in actual implementation, there may be other division methods. For instance, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

[0113] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0114] Furthermore, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0115] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0116] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A control method for whiteboard applications, characterized in that, The whiteboard application includes: a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control method of the whiteboard application includes: When the selection box component detects a preset operation event generated within the first selection box, it sends the event attribute information of the preset operation event to the parent component, wherein the event attribute information includes the position information of the preset operation event; The parent component determines, based on the location information, whether the preset operation event is used to select the display element within the first selection box; If it is determined that the preset operation event is used to select the display element in the first selection box, then the target display element selected by the preset operation event is selected.

2. The method according to claim 1, characterized in that, The canvas has a viewport, and the position information in the event attribute information is the relative coordinate of the preset operation event with respect to the viewport. The parent component determines whether the preset operation event is used to select the display element within the first selection box based on the position information, including: The absolute coordinates of the preset operation event relative to the canvas are obtained based on the relative coordinates. The preset operation event is used to select the display element within the first selection box based on the absolute coordinates.

3. The method according to claim 2, characterized in that, Obtaining the absolute coordinates of the preset operation event relative to the canvas based on the relative coordinates includes: The coordinates of the reference point of the upper left corner of the viewport in the canvas are obtained, as well as the scaling offset coordinates and the scaling ratio of the canvas. The scaling offset coordinates are used to compensate for the offset generated when scaling the canvas. Obtain the sum of the relative coordinates, the reference point coordinates, and the scaling offset coordinates; The ratio of the sum to the scaling factor is determined to be the absolute coordinate.

4. The method according to claim 2, characterized in that, Determining whether the preset operation event is used to select the display element within the first selection box based on the absolute coordinates includes: Detect the distance between the absolute coordinates and each displayed element within the first selection box; If the distance between the absolute coordinates and any display element within the first selection box is less than a preset distance, the display element whose distance from the absolute coordinates is less than the preset distance is determined as the target display element.

5. The method according to claim 1, characterized in that, The preset operation event is used to select display elements in the first selection box. When it is determined that the preset operation event is used to select display elements within the first selection box, after selecting the target display element selected by the preset operation event, the method further includes: Send the display element attribute information of the target display element selected by the preset operation event to the selection box component; The selection box component generates a second selection box around the target display element based on the display element attribute information of the target display element.

6. The method according to claim 5, characterized in that, The selection box component generates a second selection box around the target display element based on the display element attribute information of the target display element, including: Obtain the width, height, and position information of the target display element from the display element attribute information; Obtain the preset color information; Based on the width, height, and position information of the target display element, a second selection box is generated around the target display element according to the color information.

7. The method according to claim 1, characterized in that, The preset operation event is used to edit the display element in the first selection box. When it is determined that the preset operation event is used to select a display element within the first selection box, after selecting the target display element selected by the preset operation event, the method further includes: Send the display element attribute information of the target display element selected by the preset operation event to the editing component; The editing component generates an editing area on the target display element based on the display element attribute information of the target display element.

8. The method according to claim 1, characterized in that, The method further includes: The selection box component receives a change operation on the first selection box, wherein the change operation includes any one of the following: a move operation and a stretch operation; Retrieve the selection box attribute information of the first selection box from the data manager, modify it, and pass the modified selection box attribute information to the parent component; The modified selection box attribute information is passed to the data manager through the parent component, so that the data manager can modify the stored selection box attribute information; The modified selection box attribute information is passed to the rendering manager through the data manager, and the rendering manager renders the modified first selection box.

9. A control device for whiteboard applications, characterized in that, The whiteboard application includes: a selection box component, a canvas, and a parent component. The interface of the whiteboard application includes multiple display elements and a first selection box for selecting multiple display elements. The control device of the whiteboard application includes: The sending module is used to send the event attribute information of the preset operation event to the parent component when the selection box component detects a preset operation event generated in the first selection box, wherein the event attribute information includes the position information of the preset operation event; The judgment module is used to determine, based on the position information, whether the preset operation event is used to select the display element in the first selection box; The selection module is used to select the target display element selected by the preset operation event when it is determined that the preset operation event is used to select the display element in the first selection box.

10. A computer storage medium, characterized in that, The computer storage medium stores a plurality of instructions adapted for loading by a processor and executing the method steps as claimed in any one of claims 1 to 8.

11. A smart interactive flat panel, characterized in that, include: A processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and executed the method steps as claimed in any one of claims 1 to 8.

Images