Selectron framework-based target application, method and device and intelligent interaction panel

By creating transparent and permeable service process windows and function cards within the Electron framework, the problem of Electron-based applications not being able to simultaneously support window dragging and mouse events was solved, resulting in a user-friendly interactive experience.

CN119556811APending Publication Date: 2025-03-04GUANGZHOU SHIZHEN INFORMATION TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202311073218.5
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2023-08-23
Publication Date
2025-03-04

AI Technical Summary

Technical Problem

Applications built on the Electron framework cannot simultaneously support window drag events and mouse events, resulting in limited user interaction.

Method used

Create a transparent and passable first service process window, and set function cards and passable areas in it, allowing function cards to move freely, while passing mouse and drag events to the lower-level objects.

Benefits of technology

It enables coordination between mouse events and drag-and-drop events, allowing users to drag and drop windows using the drag-and-drop function card without affecting the use of other applications.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119556811A_ABST
    Figure CN119556811A_ABST
Patent Text Reader

Abstract

The embodiment of the invention relates to the technical field of desktop application development, and discloses a target application, method and device based on an Selectron framework and an intelligent interaction panel, and the method comprises the steps: creating a first service process window of the target application based on the Selectron framework, and setting the first service process window to be transparent and penetrable, the hierarchy of the first service process window is located at the uppermost layer; a first DOM node is created in the first service process window, the first DOM node serves as a function card of the target application, and the function card is set to be non-penetrable. In the embodiment of the invention, the window dragging function can be realized from the perspective of the user only by dragging the function card, and the collaboration of the mouse event and the dragging event is realized. In addition, the area outside the area occupied by the function card in the first service process window is a penetrable area, and the penetrable area enables a mouse event and / or a drag event aiming at an object under the first service process window to be executed.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of desktop application development, and in particular to a target application, method, device and intelligent interactive panel based on the electron framework. Background Art

[0002] electron is a desktop application framework built with javascript, hypertext markup language (HTML) and cascading style sheets (css). It can run cross-platform on macOs and windows platforms.

[0003] In Windows systems, applications built based on electron do not allow window drag events to be coordinated with mouse events. This means that applications built based on electron only support one type of event, either window drag events or mouse events, but not both. Summary of the invention

[0004] The embodiments of the present application provide a target application, method, device and intelligent interactive panel based on the electron framework to solve the problem that applications built based on electron cannot support window drag events and mouse events at the same time.

[0005] The purpose of the embodiment of the present application is achieved through the following technical solutions:

[0006] To solve the above technical problems, in a first aspect, an embodiment of the present application provides a method for building an application based on the electron framework, including:

[0007] Creating a first service process window of the target application based on the electron framework, wherein the first service process window is set to be transparent and penetrable, and the first service process window is located at the top layer;

[0008] Creating a first DOM node in the first service process window, the first DOM node serving as a function card of the target application, the function card being set to be non-penetrable;

[0009] Among them, the window size of the first service process window is larger than the card size of the function card, so that the function card can be moved freely in the first service process window; and, the area in the first service process window except the area occupied by the function card is set to a penetrable area, and the penetrable area enables target operation events to be executed, and the target operation events include mouse events and / or drag events for objects located at a level below the first service process window, and the objects include objects in the target application and objects in other applications.

[0010] Furthermore, the window size of the first service process window can be adaptively changed based on the display where the target application is located, so that the window size of the first service process window is not larger than the screen size of the display.

[0011] Furthermore, the method for building an application based on the electron framework also includes:

[0012] Create a second service process window of the target application based on the electron framework;

[0013] Creating a second DOM node and a third DOM node in the second service process window, wherein the second DOM node serves as a collaboration card of the target application, and the third DOM node serves as a button card of the target application, wherein the button card is used to turn on or off the function card;

[0014] The button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card;

[0015] When both the first service process window and the second service process window are called, the first service process window is located above the second service process window.

[0016] Further, the target application is applied in a collaborative conference scenario, the function card is an audio and video card, and the button card includes an audio and video button;

[0017] When the audio and video button is in the turned-on state, the function card is loaded on the first service process window;

[0018] When the audio and video button is in the off state, the function card is closed and the first service process window is kept open.

[0019] Furthermore, the mouse events include hover events, click events, scroll events, zoom-in events and zoom-out events.

[0020] To solve the above technical problems, in a second aspect, an embodiment of the present application provides a target application based on the electron framework, wherein the target application includes a first service process window, wherein the first service process window has a first DOM node, and the first DOM node serves as a function card of the target application, and the function card is set to be non-penetrable;

[0021] The first service process window is set to be transparent and penetrable, and the layer of the first service process window is located at the top layer;

[0022] The window size of the first service process window is larger than the card size of the function card, and the area of ​​the first service process window except the area occupied by the function card is set as a penetrable area.

[0023] Further, the target application also includes a second service process window, the second service process window includes a second DOM node and a third DOM node, the second DOM node serves as a collaboration card of the target application, the third DOM node serves as a button card of the target application, and the button card is used to turn on or off the function card;

[0024] The button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card;

[0025] When both the first service process window and the second service process window are called, the first service process window is located above the second service process window.

[0026] To solve the above technical problems, in a third aspect, an embodiment of the present application provides a method for coordinating mouse events and drag events, the method being applied to the target application described in the second aspect, comprising:

[0027] When the target application is opened, the first service process window is loaded, and the first service process window is placed on the top layer of the display interface;

[0028] Displaying the function card, and displaying the objects corresponding to the transparent area of ​​the first service process window and located below the first service process window; the objects include objects in the target application and objects in other applications;

[0029] If a mouse event for the function card is obtained, respond to the mouse event;

[0030] If a drag event for the function card is obtained, responding to the drag event to drag the function card within the first service process window;

[0031] If a mouse event and a drag event for the function card are obtained, respond to the mouse event and the drag event;

[0032] If a mouse event is detected in the penetration area, the mouse event is passed to an object under the first service process window;

[0033] If a drag event is detected in the penetration area, passing the drag event to an object under the first service process window;

[0034] If a mouse event and a drag event are detected in the penetration area, the mouse event and the drag event are transferred to the object under the first service process window.

[0035] Further, the mouse event includes a hover event, and if a mouse event and a drag event for the function card are obtained, responding to the mouse event and the drag event includes:

[0036] If a hover event for the function card is obtained, a visual effect matching the hover event is displayed;

[0037] If a drag event for the function card is further obtained, the visual effect continues to be displayed, and the drag event is executed to drag the function card within the first service process window.

[0038] Further, the target application is applied in a collaborative conference scenario, and the target application includes a first service process window and a second service process window;

[0039] Before displaying the function card, the method further includes:

[0040] When the target application is opened, loading the second service process window, wherein the second service process window is located below the first service process window;

[0041] Displaying a collaboration card and a button card located in the second service process window, wherein the button card includes an audio and video button;

[0042] After the audio and video button is turned on, the function card is displayed.

[0043] To solve the above technical problems, in a fourth aspect, an embodiment of the present application provides a device for building an application based on an electron framework, comprising: at least one processor; and,

[0044] a memory communicatively connected to the at least one processor; wherein,

[0045] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for building an application based on the electron framework as described in the first aspect.

[0046] In order to solve the above technical problems, in a fifth aspect, an embodiment of the present application provides an intelligent interactive panel, including:

[0047] at least one processor; and,

[0048] a memory communicatively connected to the at least one processor; wherein,

[0049] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method for coordinating mouse events and drag events described in the first aspect.

[0050] To solve the above technical problems, in the sixth aspect, an embodiment of the present application provides a non-volatile computer storage medium, wherein the computer storage medium stores computer executable instructions, which are executed by one or more processors to complete the method of coordinating mouse events and drag events described in the first aspect.

[0051] Compared with the prior art, the beneficial effects of the present application are as follows: in the present application, the size of the first service process window of the target application is larger than the size of the function card, the first service process window is transparent, and the function card, as the first DOM node created in the first service process window, can be moved within the first service process window (this process is essentially that the first service process window re-renders and displays the function card as the function card moves). Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, the service process window corresponding to the function card is the same size as the service process window itself. Then, the movement of the function card is seen by the user as the realization of the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and drag events is realized.

[0052] In addition, the area outside the area occupied by the function card in the first service process window is a permeable area, and the permeable area enables mouse events and / or drag events for objects under the first service process window to be executed. That is, mouse events and / or drag events can be directly executed on the objects under the first service process window from the user's perspective without affecting the use of other applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] One or more embodiments are exemplarily described by pictures in the corresponding drawings, and these exemplified descriptions do not constitute limitations on the embodiments. Elements / modules and steps with the same reference numerals in the drawings are represented as similar elements / modules and steps. Unless otherwise specified, the figures in the drawings do not constitute proportional limitations.

[0054] Figure 1 It is a flowchart of a method for building an application based on the electron framework provided in an embodiment of the present application;

[0055] Figure 2 is a schematic diagram of a function card moving in a first service process window provided by an embodiment of the present application;

[0056] Figure 3 It is a schematic diagram of an interface display of an object located below the first service process window provided by an embodiment of the present application;

[0057] Figure 4 This is another interface display diagram of an object located below the first service process window provided by an embodiment of the present application;

[0058] Figure 5 It is a flowchart of another method for building an application based on the electron framework provided in an embodiment of the present application;

[0059] Figure 6 This is a schematic diagram of an interface display of a target application based on the electron framework provided in an embodiment of the present application;

[0060] Figure 7 This is another schematic diagram of the interface display of a target application based on the electron framework provided in an embodiment of the present application;

[0061] Figure 8 This is another interface display diagram of a target application based on the electron framework provided in an embodiment of the present application;

[0062] Fig. 9 It is a flowchart of a method for coordinating mouse events and drag events provided in an embodiment of the present application;

[0063] Fig.10 It is a structural schematic diagram of an intelligent interactive panel provided in an embodiment of the present application;

[0064] Fig.11 It is a structural schematic diagram of another intelligent interactive panel provided in an embodiment of the present application. DETAILED DESCRIPTION

[0065] The present application is described in detail below in conjunction with specific embodiments. The following embodiments will help those skilled in the art to further understand the present application, but do not limit the present application in any form. It should be noted that, for those of ordinary skill in the art, several variations and improvements can also be made without departing from the concept of the present application. These all belong to the protection scope of the present application.

[0066] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0067] It should be noted that, if there is no conflict, the various features in the embodiments of the present application can be combined with each other, and all are within the scope of protection of the present application. In addition, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flow chart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flow chart.

[0068] Unless otherwise defined, all technical and scientific terms used in this specification have the same meaning as those commonly understood by those skilled in the art of the present application. The terms used in the specification of this application are only for the purpose of describing specific embodiments and are not intended to limit this application. In addition, the technical features involved in each embodiment of this application described below can be combined with each other as long as they do not conflict with each other.

[0069] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, the features defined as "first" and "second" may explicitly or implicitly include one or more features. In the description of this application, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0070] electron (formerly Atom Shell) is a cross-platform desktop application development tool developed by GitHub, which supports the development of desktop applications using Web technologies. It allows the use of Node.js and Chromium to complete the development of desktop applications, and has been used by multiple open source web applications for front-end and back-end development. electron is equivalent to a browser shell, which can embed web page programs into the shell and package web pages into a program that runs on the desktop, which is generally referred to as software, such as QQ, Youku, NetEase Music, etc.

[0071] In actual use, applications created based on the electron framework need to support mouse events and drag events. Among them, drag events include the entire window being draggable and the Document Object Model (DOM) in the window being draggable. Mouse events include hover events (i.e., hover events), click events, scroll events, zoom in events, and zoom out events. To facilitate understanding of this solution, the aforementioned events are briefly described here, as follows:

[0072] A drag event refers to moving an element. In actual use, you can place the mouse on the element you want to move, and then press and hold the left mouse button to trigger a drag event. The aforementioned elements include application icons, windows, and DOM nodes in windows. The following elements also refer to the same concept and will not be repeated in the following text.

[0073] A hover event is an event triggered when the mouse cursor hovers over an element. For example, it can display a drop-down box, change the interface color, or display hidden content. The hover event must satisfy at least the following effects: the entire window can be hovered, and the Document Object Model (DOM) in the window can be hovered.

[0074] A scroll event is when the scroll bar of a window process scrolls. Usually, it refers to scrolling the up and down scroll bars. In actual use, a scroll event can be triggered by rolling the mouse wheel or by sliding the mouse. The specific way in which a scroll event is triggered depends on the type of mouse.

[0075] Click event refers to the event that is triggered after clicking an element. In actual use, it can be achieved by clicking the left mouse button.

[0076] The zoom event refers to: enlarging the size of a window or DOM node. In actual use, you can put the mouse on the border of the window or DOM node, and then press and hold the left mouse button to enlarge the size of the window or DOM node.

[0077] The shrink event means: enlarging the size of a window or DOM node. In actual use, you can put the mouse on the border of the window or DOM node, and then press and hold the left mouse button to shrink the size of the window or DOM node.

[0078] In addition, it should be noted that the specific triggering method of the aforementioned events can be determined by the type of mouse or the corresponding underlying code. The aforementioned only lists a certain triggering method and does not limit the triggering method of each event.

[0079] In Windows systems, applications built based on the electron framework do not allow window drag events to be coordinated with mouse events. This means that applications built based on electron only support one type of event, either window drag events or mouse events, but not both.

[0080] In order to solve the aforementioned problems, an embodiment of the present application provides a method for building an application based on the electron framework, including: creating a first service process window of a target application based on the electron framework, the first service process window being set to be transparent and penetrable, and the hierarchy of the first service process window being located at the topmost layer; creating a first DOM node in the first service process window, the first DOM node serving as a function card of the target application, and the function card being set to be non-penetrable; wherein the window size of the first service process window is larger than the card size of the function card, so that the function card can be freely moved in the first service process window; and, the area in the first service process window except the area occupied by the function card is set to a penetrable area, the penetrable area enables a target operation event to be executed, the target operation event including a mouse event and / or a drag event for an object whose hierarchy is below the first service process window, the object including objects in the target application and objects in other applications.

[0081] Embodiment 1:

[0082] See also Figure 1 This embodiment provides a method for building an application based on the electron framework. The application built based on the method for building an application based on the electron framework can realize the coordination of drag events and mouse events on the windows system or the iOS system, and specifically includes the following steps:

[0083] Step 10: Create a first service process window of the target application based on the electron framework, wherein the first service process window is set to be transparent and penetrable, and the layer of the first service process window is located at the top.

[0084] The functions that can be realized by the target application can be set according to the actual situation and are not specifically limited here. For example, the target application can be an application that can support multi-party collaboration (such as a collaborative conference application).

[0085] The first service process window can be understood as a browser kernel, and the first service process window is used to load a Hypertext Markup Language (HTML) document, interpret the HTML document, and convert the HTML document in code form into a visible page.

[0086] In one embodiment, a first service process window is created through new BrwoserWindow, and the first service process window is set to be transparent and permeable, wherein the transparency is to show the transparency effect; the permeability is to be able to pass the target operation event to the object under the first service process window. The target operation event includes a mouse event and / or a drag event.

[0087] In one embodiment, since the first service process window is at the top layer, no matter how many service process windows are opened, the first service process window is always above other service process windows. From a display perspective, the function card in the first service process window is always displayed at the top and will not be covered by other service process windows.

[0088] Step 11: Create a first DOM node in the first service process window, the first DOM node serves as a function card of the target application, and the function card is set to be non-penetrable.

[0089] The purpose of non-penetrability is that the target operation event can act on the function card. The specific functions that the function card can realize can be determined according to the actual situation and are not specifically limited here.

[0090] HTML is a basic technology in Web development. It describes the content and structure of a web page through tags. The aforementioned tags include various contents such as text, images, audio and video, thus forming a rich interface display. The service process window of the target application reads the content of the HTML document and interprets the content of the HTML document into a web page that people can understand. The HTML document includes multiple DOM nodes, and all DOM nodes form a node tree. Each element, attribute, text, etc. in the HTML document represents a DOM node of the tree. All DOM nodes in a node tree are related to each other.

[0091] From the perspective of the node tree hierarchy, the first service process window is also a DOM node. The first service process window and the first DOM node are both DOM nodes in the HTML document. The first DOM node is a node under the first service process window, that is, the first service process window is the parent node of the first DOM node.

[0092] In one embodiment, if multiple function cards need to be displayed in the first service process window, multiple first DOM nodes need to be created in the first service process window, and each first DOM node serves as a function card of the target application.

[0093] In one embodiment, if a new function interface needs to appear after clicking a function card, a corresponding child DOM node may be created under the function card.

[0094] That is, in actual use, a node tree can be created according to actual needs, and a parent DOM node can have multiple child DOM nodes.

[0095] Take the following HTML document as an example:

[0096]

[0097]

[0098] <div id=’透明部分’>

[0099] <div id=’黑色卡片’>

[0100]

[0101]

[0102] )

[0103] Node is the document node of the entire HTML document. Except for the document node, all other nodes have a parent node. For example, the parent node of node is node, <div id=’透明部分’>The parent of a node is a node, <div id=’黑色卡片’>The parent of the node is <div id=’透明部分’>node.

[0104] Among them, the first service process window is equivalent to <div id=’透明部分’>Node, the first DOM node is equivalent to <div id=’黑色卡片’>node.

[0105] In this embodiment, the window size of the first service process window is larger than the card size of the function card, so that the function card can be freely moved in the first service process window. This process is essentially that the first service process window re-renders and displays the function card as the function card moves; wherein the function card can be freely moved in areas other than the area occupied by the function card. Figure 2 For example, the area occupied by the function card is as follows Figure 2 As shown in the filled area, the other unfilled areas are the areas where the function card can move freely in the penetrable area except the area occupied by the function card (hereinafter referred to as the penetrable area). As the position of the function card changes, the area referred to by the penetrable area also changes accordingly. For example, in Figure 2 In the figure, the interface display on the left is a schematic display diagram before the function card is moved, and the interface display on the right is a schematic display diagram after the function card is moved. The penetrable areas of the two are not the same, and the penetrable area depends on the position of the function card relative to the first service process window.

[0106] Moreover, the area in the first service process window except the area occupied by the function card is set as a penetrable area, and the penetrable area enables target operation events to be executed. The target operation events include mouse events and / or drag events for objects located hierarchically below the first service process window, and the objects include objects in the target application and objects in other applications.

[0107] The mouse events include hover events, click events, scroll events, zoom-in events and zoom-out events.

[0108] In one embodiment, different types of mouse events may be synchronized, for example, a click event and a hover event may be synchronized, a scroll event and a click event may be synchronized, and a hover event and a scroll event may be synchronized.

[0109] The following combination Figure 3 and Figure 4 , explaining the specific meaning of the object located below the first service process window, such as Figure 3 As shown, after application a is opened, service process window a is displayed, and card a is loaded in service process window a, wherein service process window a and card a are both objects located hierarchically below the first service process window, and if the target operation event is triggered in the penetrable area, the target operation event can penetrate the penetrable area and be transmitted to service process window a or display card a, so that the target operation event can be executed.

[0110] like Figure 4 , the target application also includes a second service process window, the second service process window has a second DOM node and a third DOM node, the second DOM node serves as a collaboration card of the target application, the third DOM node serves as a button card of the target application, and the button card is used to turn on or off the function card; wherein the button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card; when both the first service process window and the second service process window are called, the first service process window is located above the second service process window, which means that the level of the first service process window is above the level of the second service process window.

[0111] In this case, both the collaboration card and the button card are objects located below the first service process window. If the target operation event is triggered in the penetrable area, the target operation event can penetrate the penetrable area and be transmitted to the collaboration card or the button card, so that the target operation event can be executed.

[0112] That is, the object hierarchically located below the first service process window can be an object of the target application or an object of other applications. No matter which application the object is, as long as it is located below the penetrable area of ​​the first service process window, the target operation event can penetrate the penetrable area and act on the corresponding object.

[0113] In an embodiment of the present application, the size of the first service process window of the target application is larger than the size of the function card, the first service process window is transparent, and the function card, as the first DOM node created in the first service process window, can be moved within the first service process window (this process is essentially that the first service process window re-renders and displays the function card as the function card moves). Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, the service process window corresponding to the function card is the same size as the service process window itself. Then, the movement of the function card is considered by the user to have realized the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and drag events is realized.

[0114] In addition, the area outside the area occupied by the function card in the first service process window is a permeable area, and the permeable area enables mouse events and / or drag events for objects under the first service process window to be executed. That is, mouse events and / or drag events can be directly executed on the objects under the first service process window from the user's perspective without affecting the use of other applications.

[0115] In one embodiment, the window size of the first service process window can be adaptively changed based on the display where the target application is located, so that the window size of the first service process window is not larger than the screen size of the display.

[0116] In one embodiment, the target application obtains the screen size of the display on which it is installed, and adaptively changes the window size of the service process window according to the screen size.

[0117] In one embodiment, when the target application detects that it is dragged onto the extended display, the extended screen size of the extended display is reacquired, and the window size of the service process window is adaptively changed according to the extended screen size.

[0118] In this way, the target application can change the window size of the first service process window according to the display where it is located to adapt to displays of different sizes.

[0119] The window size of the first service process window limits the range in which the function card can be moved. In one embodiment, in order to ensure that the function card can be globally moved on the display interface corresponding to the display, the window size of the first service process window is equal to the screen size of the display.

[0120] In one embodiment, the target application is mainly used in collaborative conference scenarios. The aforementioned function card carries the subsidiary functions of the target application. The target application also includes a main function. In order to carry the main function, a second service process window needs to be constructed. Figure 5 , the method for building an application based on the electron framework also includes:

[0121] Step 12: Create a second service process window of the target application based on the electron framework.

[0122] In one embodiment, a second service process window is created through new BrwoserWindow.

[0123] Step 13: Create a second DOM node and a third DOM node in the second service process window, wherein the second DOM node serves as a collaboration card of the target application, and the third DOM node serves as a button card of the target application, wherein the button card is used to turn on or off the function card.

[0124] Among them, the button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card.

[0125] like Figure 6 As shown, when both the first service process window and the second service process window are called, the first service process window is located above the second service process window, which means that the level of the first service process window is above the level of the second service process window. After the target application is opened, the second service process window is called first to load the collaboration card and button card, and then the first service process window is called again during idle time to avoid a long buffering time when the function card is opened later, and shorten the time to load the function card.

[0126] In a specific application scenario, the target application is applied in a collaborative conference scenario, the function card is an audio and video card, and the button card includes an audio and video button;

[0127] When the audio and video button is in the on state, the function card is loaded on the first service process window (such as Figure 4 ); when the audio and video button is in the off state, close the function card and keep the first service process window in the open state.

[0128] In one embodiment, a communication interface is provided between the first service process window and the second service process window. After the second service process window monitors that the audio and video button is turned on, it sends an opening event to the first service process window, and the first service process window loads the first DOM node corresponding to the function card. After the second service process window monitors that the audio and video button is turned off, it sends a closing event to the first service process window, and the first service process window deletes the first DOM node corresponding to the function card to close the function card. After the function card is closed, the first service process window is not closed, mainly to avoid a long buffering time when the function card is opened later.

[0129] In one embodiment, a plurality of first DOM nodes may be set in the first service process window, and each first DOM node serves as a function card (as shown in 7 ).

[0130] The collaboration card carries the main function of the target application, for example, participants edit or record meeting minutes through the collaboration card. The function card is an audio and video card, which mainly displays the avatars of the participants. The button card includes not only audio and video buttons, but also microphone mute buttons, camera buttons, and screen projection buttons to assist in turning on or off other functions. For example, Figure 8 As shown, the collaboration card can display the projection interface from other participants; or, by turning on the projection button, you can project your own interface onto the collaboration cards of other participants.

[0131] In the scenario where the audio and video function is an auxiliary function, the avatar is not required to be particularly large. It is limited to seeing the avatar of the participant and hearing the voice of the participant, and the participant's attention is focused on the collaboration card. The size of the audio and video card is small, so the first service process window where the audio and video card is located is at the top layer and will not interfere with the application of the main function. However, in actual use, as an auxiliary function, the audio and video card may block the notes taken by the participants. Therefore, the audio and video card needs to be set to be movable.

[0132] In this embodiment, although the function card itself is to realize auxiliary functions and the required container size is relatively small, the size of the first service process window is not set to the same size as the size of the function card according to conventional thinking, but the size of the first service process window is set to be larger than the card size of the function card itself, so that the drag event of the window can be converted into the drag event of the DOM node in the window. Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, it is believed that the service process window corresponding to the function card is the same size as itself. Then, the movement of the function card is considered by the user to realize the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and window drag events is realized.

[0133] Embodiment 2:

[0134] Based on the aforementioned embodiment 1, this embodiment provides a target application based on the electron framework, wherein the target application includes a first service process window, wherein the first service process window has a first DOM node, wherein the first DOM node serves as a function card of the target application, and the function card is set to be non-penetrable.

[0135] The purpose of non-penetrability is that the target operation event can act on the function card.

[0136] The first service process window is set to be transparent and permeable, and the hierarchy of the first service process window is located at the top; wherein, the window size of the first service process window is larger than the card size of the function card, and the area in the first service process window except the area occupied by the function card is set to be a permeable area.

[0137] Among them, transparency is to show the transparency effect; penetrability is to be able to transmit the target operation event to the object under the first service process window.

[0138] In this embodiment, the window size of the first service process window is larger than the card size of the function card, so that the function card can be freely moved in the first service process window. This process is essentially that the first service process window re-renders and displays the function card as the function card moves; wherein the function card can move freely in areas other than the area occupied by the function card.

[0139] Moreover, the area in the first service process window except the area occupied by the function card is set as a penetrable area, and the penetrable area enables target operation events to be executed. The target operation events include mouse events and / or drag events for objects located hierarchically below the first service process window, and the objects include objects in the target application and objects in other applications.

[0140] In an embodiment of the present application, the size of the first service process window of the target application is larger than the size of the function card, the first service process window is transparent, and the function card, as the first DOM node created in the first service process window, can be moved within the first service process window (this process is essentially that the first service process window re-renders and displays the function card as the function card moves). Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, the service process window corresponding to the function card is the same size as the service process window itself. Then, the movement of the function card is considered by the user to have realized the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and drag events is realized.

[0141] In addition, the area outside the area occupied by the function card in the first service process window is a permeable area, and the permeable area enables mouse events and / or drag events for objects under the first service process window to be executed. That is, mouse events and / or drag events can be directly executed on the objects under the first service process window from the user's perspective without affecting the use of other applications.

[0142] In one embodiment, the target application is mainly used in collaborative conference scenarios. The aforementioned function card carries the subsidiary functions of the target application. The target application also includes a main function. In order to carry the main function, the target application also includes a second service process window. The second service process window contains a second DOM node and a third DOM node. The second DOM node serves as a collaborative card of the target application, and the third DOM node serves as a button card of the target application. The button card is used to turn on or off the function card.

[0143] Among them, the button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card.

[0144] When both the first service process window and the second service process window are called, the first service process window is located above the second service process window.

[0145] The collaboration card carries the main function of the target application, for example, participants edit or record meeting minutes through the collaboration card. The function card is an audio and video card, which mainly displays the avatars of the participants. The button card includes not only audio and video buttons, but also microphone mute buttons, camera buttons, and screen projection buttons, etc., to assist in turning on or off other functions.

[0146] In actual use, the audio and video cards are auxiliary functions, and the audio and video cards may block the notes taken by the participants. Therefore, the audio and video cards need to be moved.

[0147] For details about the interface display, construction method and usage of the target application, please refer to Example 1, which will not be repeated here.

[0148] In this embodiment, although the function card itself is to realize auxiliary functions and the required container size is relatively small, the size of the first service process window is not set to the same size as the size of the function card according to conventional thinking, but the size of the first service process window is set to be larger than the card size of the function card itself, so that the drag event of the window can be converted into the drag event of the DOM node in the window. Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, it is believed that the service process window corresponding to the function card is the same size as itself. Then, the movement of the function card is considered by the user to realize the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and window drag events is realized.

[0149] Embodiment 3:

[0150] Based on the target application of the aforementioned embodiment 2, such as Fig. 9 As shown, this embodiment provides a method for coordinating mouse events and drag events, including:

[0151] Step 20: When the target application is opened, the first service process window is loaded, and the first service process window is placed on the top layer of the display interface.

[0152] In one embodiment, since the first service process window is at the top layer, no matter how many service process windows are opened, the first service process window is always above other service process windows. From a display perspective, the function card in the first service process window is always displayed at the top and will not be covered by other service process windows.

[0153] Step 21: Display the function card, and display the objects corresponding to the transparent area of ​​the first service process window and located below the first service process window; the objects include objects in the target application and objects in other applications.

[0154] The object located below the first service process window can be the object of the target application or other applications. No matter which application the object is, as long as it is located below the penetrable area of ​​the first service process window, the target operation event can penetrate the penetrable area and act on the corresponding object. For detailed explanation, please refer to Figure 3 , Figure 4 As well as the corresponding textual explanations, I will not go into details here.

[0155] Step 22: If a mouse event for the function card is obtained, respond to the mouse event.

[0156] Wherein, the mouse events include hover events, click events, scroll events, zoom-in events and zoom-out events. In one embodiment, different types of mouse events can be synchronized, for example, click events and hover events can be synchronized, scroll events and click events can be synchronized, and hover events and scroll events can be synchronized.

[0157] Since the function card is not penetrable, the mouse event for the function card can act on the function card.

[0158] Step 23: If a drag event for the function card is obtained, respond to the drag event to drag the function card within the first service process window.

[0159] As the first DOM node created in the first service process window, the function card can be moved within the first service process window. This process is essentially that as the function card moves, the first service process window re-renders and displays the function card, and converts the drag event of the window into the drag event of the DOM node in the window.

[0160] Step 24: If a mouse event and a drag event for the function card are obtained, respond to the mouse event and the drag event.

[0161] In this embodiment, not only can the mouse events and drag events be supported in time-sharing, but also the mouse events and drag events can be supported simultaneously.

[0162] In one embodiment, the mouse event includes a hover event, and if a hover event for the function card is obtained, a visual effect matching the hover event is displayed; if a drag event for the function card is further obtained, the visual effect continues to be displayed, and the drag event is executed to drag the function card within the first service process window. The visual effect may include displaying a drop-down box, changing the interface color, or displaying hidden content.

[0163] Step 25: If a mouse event is detected in the penetration area, the mouse event is passed to the object under the first service process window.

[0164] Step 26: If a drag event is detected in the penetration area, the drag event is passed to the object under the first service process window.

[0165] Step 27: If a mouse event and a drag event are detected in the penetration area, the mouse event and the drag event are passed to the object under the first service process window.

[0166] That is, the object under the first service process window refers to the object located below the first service process window, which can be the object of the target application or the object of other applications. No matter which application the object is, as long as it is located under the penetrable area of ​​the first service process window, the target operation event can penetrate the penetrable area and act on the corresponding object. The target operation event includes a mouse event and / or a drag event.

[0167] In one embodiment, the target application is applied in a collaborative conference scenario, and the target application includes a first service process window and a second service process window; before displaying the function card, the second service process window is loaded when the target application is opened, and the second service process window is located below the first service process window. The collaborative card and button card located in the second service process window are displayed, and the button card includes an audio and video button; after the audio and video button in the button card is turned on, the function card is displayed.

[0168] Specifically, after the target application is opened, the second service process window is called first to load the collaboration card and button card. During idle time, the first service process window is called again to avoid long buffering time when opening the function card later and shorten the time to load the function card.

[0169] In one embodiment, a communication interface is provided between the first service process window and the second service process window. After the second service process window monitors that the audio and video button is turned on, it sends an opening event to the first service process window, and the first service process window loads the first DOM node corresponding to the function card. After the second service process window monitors that the audio and video button is turned off, it sends a closing event to the first service process window, and the first service process window deletes the first DOM node corresponding to the function card to close the function card.

[0170] In an embodiment of the present application, the size of the first service process window of the target application is larger than the size of the function card, the first service process window is transparent, and the function card, as the first DOM node created in the first service process window, can be moved within the first service process window (this process is essentially that the first service process window re-renders and displays the function card as the function card moves). Since the first service process window is transparent, the function card is loaded on the first service process window. From the user's perspective, the service process window corresponding to the function card is the same size as the service process window itself. Then, the movement of the function card is considered by the user to have realized the window drag event of the function card. Therefore, there is no need to use full-window dragging. You only need to drag the function card to realize the window dragging function from the user's perspective, and the coordination of mouse events and drag events is realized.

[0171] In addition, the area outside the area occupied by the function card in the first service process window is a permeable area, and the permeable area enables mouse events and / or drag events for objects under the first service process window to be executed. That is, mouse events and / or drag events can be directly executed on the objects under the first service process window from the user's perspective without affecting the use of other applications.

[0172] Embodiment 4:

[0173] Based on the method for building an application based on the electron framework in Example 1, this embodiment provides a device for building an application based on the electron framework, including: at least one processor; and

[0174] a memory communicatively connected to the at least one processor; wherein,

[0175] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for building an application based on the electron framework as described in Example 1.

[0176] For example, devices for building applications based on the electron framework include software development equipment, computers, and the like.

[0177] Embodiment 5:

[0178] Based on the above-mentioned embodiments 1 to 3, Fig.10 As shown, this embodiment also provides an intelligent interactive panel, including: at least one processor 21; and a memory 22 communicatively connected to the at least one processor 21; wherein the memory 22 stores instructions executable by the at least one processor 21, and the instructions are executed by the at least one processor 21 so that the at least one processor 21 can execute the method of coordinating mouse events and drag events described in the aforementioned embodiment.

[0179] The processor 21 and the memory 22 may be connected via a bus or other means. Fig.10 The example of connecting through bus is taken in the following.

[0180] The memory 22, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer executable programs and modules, such as program instructions / modules corresponding to the method for coordinating mouse events and drag events in the embodiment of the present application. The processor 21 executes various functional applications and data processing of the server by running the non-volatile software programs, instructions and modules stored in the memory 22, that is, the method for coordinating mouse events and drag events in the above method embodiment is implemented.

[0181] The memory 22 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the smart interactive panel, etc. In addition, the memory 22 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 22 may optionally include a memory remotely arranged relative to the processor 21, and these remote memories may be connected to the smart interactive panel via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0182] The one or more modules are stored in the memory 22, and when executed by the one or more processors 21, execute the method of coordinating mouse events and drag events in any of the above-mentioned method embodiments, for example, execute the method steps of the method of coordinating mouse events and drag events described above.

[0183] The above-mentioned product can execute the method provided in the embodiment of the present application, and has the functional modules and beneficial effects corresponding to the execution method. For technical details not fully described in this embodiment, please refer to the method provided in the embodiment of the present application.

[0184] Furthermore, the intelligent interactive panel may also include: Wi-Fi device 23, display screen 24, Bluetooth device 25, audio circuit 26, power system 27, peripheral interface 28, sensor module 29, data conversion module 30 and other components. These components can communicate through one or more communication buses or signal lines. Those skilled in the art will understand that Fig.11 The hardware structure shown in the figure does not constitute a limitation on the smart interactive panel. The smart interactive panel may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0185] The processor 21 is the control center of the intelligent interactive panel, and uses various interfaces and lines to connect various parts of the intelligent interactive panel. It executes various functions of the intelligent interactive panel and processes data by running or executing applications stored in the memory 22, and calling data and instructions stored in the memory 22. In some embodiments, the processor 21 may include one or more processing units; the processor 21 may also integrate an application processor 21 and a modem processor 21; wherein the application processor 21 mainly processes the operating system, user interface, and application programs, and the modem processor 21 mainly processes wireless communications. It is understandable that the above-mentioned modem processor 21 may not be integrated into the processor 21.

[0186] In some other embodiments of the present application, the processor 21 may further include an AI chip. The learning and processing capabilities of the AI ​​chip include image understanding capabilities, natural language understanding capabilities, and speech recognition capabilities, etc. The AI ​​chip can enable the smart interactive panel to have better performance, longer battery life, and better security and privacy. For example, if the smart interactive panel processes data through the cloud, the data needs to be uploaded and processed before the results are returned, which is very inefficient under existing technical conditions. If the local end of the smart interactive panel has strong AI learning capabilities, then the smart interactive panel does not need to upload the data to the cloud, and can be processed directly on the local end, thereby improving the security and privacy of the data while improving processing efficiency.

[0187] The memory 22 is used to store applications and data. The processor 21 executes various functions and data processing of the intelligent interactive panel by running the applications and data stored in the memory 2212. The memory 22 mainly includes a program storage area and a data storage area, wherein the program storage area can store an operating system and an application required for at least one function (such as a sound playback function, an image playback function, etc.); the data storage area can store data created when using the intelligent interactive panel (such as audio data, video data, etc.). In addition, the memory 22 may include a high-speed random access memory 22, and may also include a non-volatile memory 22, such as a disk memory 22, a flash memory device or other non-volatile solid-state memory 22. The memory 22 can store various operating systems, such as an operating system developed by Apple, an operating system developed by Microsoft, etc.

[0188] The display screen 24 is used to display images, videos, etc. The display screen 24 can be a touch screen. In some embodiments, the intelligent interactive panel may include 1 or N display screens 24, where N is a positive integer greater than 1. The intelligent interactive panel implements the display function through a GPU, a display screen 24, and an application processor 21. The GPU is a microprocessor 21 for image processing, which connects the display screen 24 and the application processor 21. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 21 may include one or more GPUs that execute program instructions to generate or change display information.

[0189] The Wi-Fi device 23 is used to provide network access that complies with Wi-Fi related standard protocols for the smart interactive panel. The smart interactive panel can access the Wi-Fi access point through the Wi-Fi device 23, thereby helping to browse web pages and access streaming media, etc. It provides users with wireless broadband Internet access. The smart interactive panel can also establish a Wi-Fi connection with a terminal device connected to the Wi-Fi access point through the Wi-Fi device 23 and the Wi-Fi access point for mutual data transmission. In some other embodiments, the Wi-Fi device 23 can also serve as a Wi-Fi wireless access point, which can provide Wi-Fi network access for other electronic devices. Exemplarily, the Wi-Fi device 23 includes a first wireless network card, a second wireless network card, and a third wireless network card.

[0190] The Bluetooth device 25 is used to realize data exchange between the smart interactive panel and other short-range electronic devices (such as terminals, smart watches, etc.). The Bluetooth device 25 in the embodiment of the present application can be an integrated circuit or a Bluetooth chip.

[0191] The audio circuit 26, the speaker, and the microphone can provide an audio interface between the user and the smart interactive panel. The audio circuit 26 can convert the received audio data into an electrical signal and transmit it to the speaker, which then converts it into a sound signal for output; on the other hand, the microphone converts the collected sound signal into an electrical signal, which is then received by the audio circuit 26 and converted into audio data, and then the audio data is sent to the terminal via the Internet, Wi-Fi network, or Bluetooth, or the audio data is output to the memory 22 for further processing.

[0192] The power system 27 is used to charge various components of the intelligent interactive panel. The power system 27 may include a battery and a power management module. The battery may be logically connected to the processor 21 through a power management chip, so that the power system 27 can manage charging, discharging, and power consumption.

[0193] The peripheral interface 28 is used to provide various interfaces for external input / output devices (external display, external memory 22, user identification module card, etc.). For example, the storage capacity of the intelligent interactive panel can be expanded by connecting to the external memory 22 through the external memory 22 interface, such as a MicroSD card. The peripheral interface 28 can be used to couple the above-mentioned external input / output peripheral devices to the processor 21 and the memory 22.

[0194] The sensor module 29 may include at least one sensor. For example, a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor. Among them, the ambient light sensor can adjust the brightness of the display screen 24 according to the brightness of the ambient light. As a kind of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary, which can be used for applications that identify the posture of the smart interactive panel (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), etc. Of course, according to actual needs, the sensor module 29 can also include any other feasible sensors.

[0195] The data conversion module 30 may include a digital-to-analog converter and an analog-to-digital converter. The relevant functions of the digital-to-analog converter and the analog-to-digital converter can be referred to the corresponding explanations in the above-mentioned related technical terms, which will not be repeated here.

[0196] An embodiment of the present application also provides a non-volatile computer-readable storage medium, which stores computer-executable instructions. The computer-executable instructions are executed by one or more processors, for example, to execute the method steps of the method for coordinating mouse events and drag events described above.

[0197] An embodiment of the present application also provides a computer program product, including a computer program stored on a non-volatile computer-readable storage medium, wherein the computer program includes program instructions, and when the program instructions are executed by a computer, the computer executes the method of coordinating mouse events and drag events in any of the above-mentioned method embodiments, for example, executing the method steps of the method of coordinating mouse events and drag events described above.

[0198] It should be noted that the device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0199] Through the description of the above implementation methods, ordinary technicians in this field can clearly understand that each implementation method can be implemented by means of software plus a general hardware platform, and of course, it can also be implemented by hardware. Ordinary technicians in this field can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (Read-Only Memory, abbreviated as ROM) or a random access memory (Random Access Memory, abbreviated as RAM), etc.

[0200] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Under the concept of the present application, the technical features in the above embodiments or different embodiments may also be combined, the steps may be implemented in any order, and there are many other changes in different aspects of the present application as described above, which are not provided in detail for the sake of simplicity. Although the present application has been described in detail with reference to the aforementioned embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for building an application based on the electron framework, characterized in that: include: Creating a first service process window of the target application based on the electron framework, wherein the first service process window is set to be transparent and penetrable, and the first service process window is located at the top layer; Creating a first DOM node in the first service process window, the first DOM node serving as a function card of the target application, the function card being set to be non-penetrable; Among them, the window size of the first service process window is larger than the card size of the function card, so that the function card can be moved freely in the first service process window; and, the area in the first service process window except the area occupied by the function card is set to a penetrable area, and the penetrable area enables target operation events to be executed, and the target operation events include mouse events and / or drag events for objects located at a level below the first service process window, and the objects include objects in the target application and objects in other applications.

2. The method for building an application based on the electron framework according to claim 1, characterized in that: The window size of the first service process window can be adaptively changed based on the display where the target application is located, so that the window size of the first service process window is not larger than the screen size of the display.

3. The method for building an application based on the electron framework according to claim 1, characterized in that: The method for building an application based on the electron framework also includes: Create a second service process window of the target application based on the electron framework; Creating a second DOM node and a third DOM node in the second service process window, wherein the second DOM node serves as a collaboration card of the target application, and the third DOM node serves as a button card of the target application, wherein the button card is used to turn on or off the function card; The button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card; When both the first service process window and the second service process window are called, the first service process window is located above the second service process window.

4. The method for building an application based on the electron framework according to claim 3, characterized in that: The target application is used in a collaborative conference scenario, the function card is an audio and video card, and the button card includes an audio and video button; When the audio and video button is in the turned-on state, the function card is loaded on the first service process window; When the audio and video button is in the off state, the function card is closed and the first service process window is kept open.

5. The method for building an application based on the electron framework according to any one of claims 1 to 4, characterized in that: The mouse events include hover events, click events, scroll events, zoom-in events, and zoom-out events.

6. A target application based on the electron framework, characterized in that: The target application includes a first service process window, the first service process window includes a first DOM node, the first DOM node serves as a function card of the target application, and the function card is set to be non-penetrable; The first service process window is set to be transparent and penetrable, and the layer of the first service process window is located at the top layer; The window size of the first service process window is larger than the card size of the function card, and the area of ​​the first service process window except the area occupied by the function card is set as a penetrable area.

7. The target application based on the electron framework according to claim 6, characterized in that: The target application also includes a second service process window, wherein the second service process window includes a second DOM node and a third DOM node, wherein the second DOM node serves as a collaboration card of the target application, and the third DOM node serves as a button card of the target application, wherein the button card is used to turn on or off the function card; The button card and the collaboration card are both set to be non-penetrable; the card size of the collaboration card is equal to the window size of the second service process window, and the card size of the collaboration card is larger than the card size of the button card; When both the first service process window and the second service process window are called, the first service process window is located above the second service process window.

8. A method for coordinating mouse events and drag events, characterized in that: The method is applied to the target application as claimed in claim 6 or 7, comprising: When the target application is opened, the first service process window is loaded, and the first service process window is placed on the top layer of the display interface; Displaying the function card, and displaying the objects corresponding to the transparent area of ​​the first service process window and located below the first service process window; the objects include objects in the target application and objects in other applications; If a mouse event for the function card is obtained, respond to the mouse event; If a drag event for the function card is obtained, responding to the drag event to drag the function card within the first service process window; If a mouse event and a drag event for the function card are obtained, respond to the mouse event and the drag event; If a mouse event is detected in the penetration area, the mouse event is passed to an object under the first service process window; If a drag event is detected in the penetration area, passing the drag event to an object under the first service process window; If a mouse event and a drag event are detected in the penetration area, the mouse event and the drag event are passed to an object under the first service process window.

9. The method for coordinating mouse events and drag events according to claim 8, characterized in that: The mouse event includes a hover event, and if a mouse event and a drag event for the function card are obtained, responding to the mouse event and the drag event includes: If a hover event for the function card is obtained, a visual effect matching the hover event is displayed; If a drag event for the function card is further obtained, the visual effect continues to be displayed, and the drag event is executed to drag the function card within the first service process window.

10. The method for coordinating mouse events and drag events according to claim 8, characterized in that: The target application is applied in a collaborative conference scenario, and the target application includes a first service process window and a second service process window; Before displaying the function card, the method further includes: When the target application is opened, loading the second service process window, wherein the second service process window is located below the first service process window; Displaying a collaboration card and a button card located in the second service process window, wherein the button card includes an audio and video button; After the audio and video button is turned on, the function card is displayed.

11. A device for building applications based on the electron framework, characterized in that: include: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for building an application based on the electron framework as described in any one of claims 1-5.

12. An intelligent interactive panel, characterized in that: include: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method for coordinating mouse events and drag events as described in any one of claims 8 to 10.