Multi-screen visual interaction switching method, device and equipment

Abstract

The invention relates to the technical field of large-screen display, and discloses a multi-screen visual interaction switching method, device and equipment. The method comprises the following steps: acquiring screen information of a plurality of visual large screens, and setting a canvas according to the screen information; based on an iframe technology, embedding a plurality of visual large screens into a canvas in a circular layout mode; a large navigation screen is arranged at the circle center of the circular layout; and accessing and switching a plurality of visual large screens based on the CSS animation technology and the navigation large screen. According to the method and the device, the multiple visual large screens are circularly arranged on the canvas through iframe nesting by applying technologies such as iframe preloading and CSS animation, the viewport of the browser is switched among the multiple visual large screens in a manner of moving and zooming the large screen set page, the switching is smooth, the white screen phenomenon is avoided, the set large screens do not need to be modified, the implementation is simple, and the efficiency is high. The application range is wide, and the method is compatible with large screens with any display resolution.

Description

Technical Field

[0001] The present invention relates to the technical field of large-screen display switching, and in particular to a multi-screen visualized interactive switching method, device and equipment. Background Art

[0002] With the rapid development of technologies such as big data visualization, digital twins, and the Internet of Things, large-screen display technology is also developing rapidly. In order to display data in various directions, several different big data visualization systems are usually developed. For example, systems for management, talent, finance, digital applications, digital twins, or specific business, these systems involve a large amount of data access, model loading, and material loading, which results in a lot of loading time when switching between systems, especially when explaining to multiple audiences, which is not conducive to smooth explanation.

[0003] At present, the main big data visualization system switching solutions include: 1. Clicking the tab to jump to the webpage address to achieve the purpose of switching to the large screen, but this solution loads slowly when switching, and a white screen will appear when switching for the first time. 2. Open the systems to be displayed in different tabs of the browser in advance, and switch the tabs to achieve the purpose of switching the system, but this solution is cumbersome to operate, requires preparation in advance, and requires exiting the full screen to switch the browser tab, which is a poor experience. Summary of the invention

[0004] The main purpose of the present invention is to provide a multi-screen visual interactive switching method, device and equipment, aiming to solve at least one of the above problems.

[0005] To achieve the above object, the present invention provides a multi-screen visualized interactive switching method, comprising:

[0006] Obtaining screen information of multiple large visualization screens, and setting a canvas according to the screen information;

[0007] Embedding the plurality of large visualization screens in a circular layout into the canvas based on the iframe technology;

[0008] A dynamic interactive navigation screen is arranged at the center of the circular layout;

[0009] Based on CSS animation technology and the dynamic interactive navigation large screen, multiple visualization large screens are accessed and switched.

[0010] In some embodiments, the obtaining of screen information of a plurality of large visualization screens and setting a canvas according to the screen information includes:

[0011] Get screen information of multiple large visualization screens;

[0012] Determine the display size and number of the plurality of large visualization screens based on the screen information;

[0013] A canvas is set according to the display size and the number of the large screens; wherein the canvas is used to accommodate a plurality of the visualization large screens.

[0014] In some embodiments, the width and height of the canvas are greater than the width and height of the large visualization screen multiplied by half of the number of large screens.

[0015] In some embodiments, the method of embedding the plurality of large visualization screens in a circular layout into the canvas based on the iframe technology includes:

[0016] Setting the radius of the circular layout of the visualization large screen based on the visualization large screen and the canvas;

[0017] Calculate the coordinates of each of the large visualization screens based on the radius;

[0018] According to the coordinates, multiple large visualization screens are distributed on the circumference of the circular layout through iframe nesting to be embedded in the canvas.

[0019] In some embodiments, the accessing and switching of the plurality of visualization large screens based on the CSS animation technology and the dynamic interactive navigation large screen includes:

[0020] Initialize and display the dynamic interactive navigation large screen based on the browser viewport;

[0021] Dynamically setting a button for switching to each of the visualization large screens on the dynamic interactive navigation large screen, and setting a click event on each of the buttons;

[0022] When receiving a click instruction, determining a target visualization large screen to be switched based on the click instruction and the click event;

[0023] The browser viewport is switched to the target visualization large screen based on CSS animation technology.

[0024] In some embodiments, switching the browser viewport to the target visualization large screen based on CSS animation technology includes:

[0025] The dynamic interactive navigation large screen and the target visualization large screen are reduced in proportion to each other to prompt that the screen switching is ready to start;

[0026] Set the translation value of the canvas;

[0027] Based on CSS animation technology and the translation value, the browser viewport is controlled to move smoothly until it moves to the coordinates of the target visualization large screen;

[0028] The dynamic interactive navigation large screen and the target visualization large screen are enlarged in equal proportion to indicate that the screen switching is completed.

[0029] In some embodiments, the method further comprises:

[0030] Determining the loading progress of resources according to the iframe.onload events of the plurality of visualization large screens;

[0031] Displaying the loading progress corresponding to the visualization screen on each button of the dynamic interactive navigation screen to visualize the resource loading progress of each visualization screen;

[0032] Obtaining the association relationship between the plurality of visualization large screens;

[0033] The connection between the visualization large screens is displayed on the dynamic interactive navigation large screen based on the association relationship.

[0034] In some embodiments, the method further comprises:

[0035] Determining a display resolution based on screen information of the plurality of large visualization screens;

[0036] Determine whether the display resolution is consistent with the physical resolution of the current display device;

[0037] If they are inconsistent, calculating the scaling ratio according to the physical resolution of the current display device;

[0038] The visualization large screen is scaled according to the scaling ratio and the scaled visualization large screen is displayed in the center.

[0039] In addition, to achieve the above purpose, the present invention also proposes a multi-screen visual interactive switching device, comprising:

[0040] A canvas setting module, used to obtain screen information of multiple large visualization screens and set the canvas according to the screen information;

[0041] A large screen layout module, used to embed the plurality of large visualization screens into the canvas in a circular layout based on iframe technology;

[0042] A navigation setting module, used to set a dynamic interactive navigation large screen at the center of the circular layout;

[0043] The large screen switching module is used to access and switch multiple visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen.

[0044] In addition, to achieve the above-mentioned purpose, the present invention also proposes an electronic device, which includes: a memory, a processor, and a multi-screen visualization interactive switching program stored in the memory and runnable on the processor, and the multi-screen visualization interactive switching program is configured to implement the multi-screen visualization interactive switching method described above.

[0045] The present invention provides a multi-screen visualization interactive switching method, including: obtaining screen information of multiple visualization large screens, and setting a canvas according to the screen information; embedding multiple visualization large screens into the canvas in a circular layout based on iframe technology; setting a dynamic interactive navigation large screen at the center of the circular layout; accessing and switching multiple visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen. In the present invention, iframe preloading, CSS animation and other technologies are applied to nest multiple visualization large screens in a circular layout on the canvas through iframe, and then the dynamic interactive navigation large screen at the center of the circle is scaled and moved to the browser viewport. By moving and scaling the large screen collection page, the browser viewport switches between multiple visualization large screens. The method of the present invention switches smoothly, does not have a white screen phenomenon, does not require modification of the large screen that has been set up, is simple to implement and has a wide range of applications, and is compatible with large screens of any display resolution. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 A schematic diagram of the structure of an electronic device in a hardware operating environment involved in an embodiment of the present invention;

[0047] Figure 2 A schematic diagram of a flow chart of an embodiment of a multi-screen visual interactive switching method of the present invention;

[0048] Figure 3 A schematic diagram of a visualization large-screen information statistics code involved in an embodiment of the present invention;

[0049] Figure 4 A schematic diagram of a visualization large screen coordinate calculation code involved in an embodiment of the present invention;

[0050] Figure 5 This is a schematic diagram of the code of iframes nested at equal angles distributed on a circle involved in the embodiment of the present invention;

[0051] Figure 6 A schematic diagram of click effect codes involved in an embodiment of the present invention;

[0052] Figure 7 This is a schematic diagram of the position status of the canvas DOM and the browser viewport during initialization involved in the embodiment of the present invention;

[0053] Figure 8It is a schematic diagram of the position status of the canvas DOM and the browser viewport during the switching process involved in the embodiment of the present invention;

[0054] Fig. 9 The position status of the canvas DOM and the browser viewport when the switching is completed in the embodiment of the present invention;

[0055] Fig.10 This is a structural block diagram of an embodiment of a multi-screen visual interactive switching device of the present invention.

[0056] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0057] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0058] It should be noted that all directional indications in the embodiments of the present invention (such as up, down, left, right, front, back, etc.) are only used to explain the relative position relationship, movement status, etc. between the components under a certain specific posture (as shown in the accompanying drawings). If the specific posture changes, the directional indication will also change accordingly.

[0059] In addition, the descriptions of "first", "second", etc. in the present invention are only used for descriptive purposes and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but it must be based on the ability of ordinary technicians in the field to implement. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such combination of technical solutions does not exist and is not within the scope of protection required by the present invention. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0060] Reference Figure 1 , Figure 1 The figure is a schematic diagram of the structure of an electronic device of the hardware operating environment involved in the embodiment of the present invention.

[0061] like Figure 1As shown, the electronic device may include: a processor 1001, such as a central processing unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a wireless fidelity (Wireless-Fidelity, Wi-Fi) interface). The memory 1005 may be a high-speed random access memory (Random Access Memory, RAM memory) or a stable non-volatile memory (Non-Volatile Memory, NVM), such as a disk memory. The memory 1005 may also be a storage device independent of the aforementioned processor 1001.

[0062] Those skilled in the art will understand that Figure 1 The structure shown in the figure does not constitute a limitation on the electronic device, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.

[0063] like Figure 1 As shown, the memory 1005 as a storage medium may include an operating system, a network communication module, a user interface module, and a multi-screen visualization interactive switching program.

[0064] exist Figure 1 In the electronic device shown, the network interface 1004 is mainly used for data communication with a network server; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 in the electronic device of the present invention can be set in the electronic device, and the electronic device calls the multi-screen visualization interactive switching program stored in the memory 1005 through the processor 1001, and executes the multi-screen visualization interactive switching method provided by an embodiment of the present invention.

[0065] The present invention provides a multi-screen visualized interactive switching method, device and equipment.

[0066] The embodiment of the present invention provides a multi-screen visual interactive switching method, referring to Figure 2 , Figure 2 The present invention is a flowchart of an embodiment of a multi-screen visual interactive switching method.

[0067] like Figure 2 As shown, the multi-screen visualization interactive switching method includes:

[0068] Step S100: obtaining screen information of multiple large visualization screens, and setting a canvas according to the screen information;

[0069] Step S200: embedding the plurality of large visualization screens into the canvas in a circular layout based on the iframe technology;

[0070] Step S300: Setting a dynamic interactive navigation screen at the center of the circular layout;

[0071] Step S400: accessing and switching the plurality of visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen.

[0072] It should be noted that the execution subject in this embodiment may be an electronic device, which may be a computer device with data processing functions, or other devices that can achieve the same or similar functions. This embodiment does not limit this. In this embodiment, a computer device is used as an example for explanation.

[0073] It is understandable that in response to the need for smooth switching of multiple big data display screens (such as visualization screens) generated during company development or business development on the same screen, this embodiment takes the seamless switching and interaction of multiple big data visualization screens on the same screen as an example to illustrate.

[0074] In this embodiment, based on the characteristics that iframe can preload data, models and other resources outside the viewport, and CSS3 animation can smoothly switch viewports, an innovative multi-screen display method is proposed. By embedding multiple large visualization screens in a circular layout using iframe into a main page (such as a canvas), a new visual layout and information display method is provided. A dynamic interactive navigation screen is set at the center of the circle. The dynamic interactive navigation screen can not only serve as the center of user operation to achieve quick access and switching to other large visualization screens, but also serve as a buffer for data loading time for other large visualization screens. A return button is added to the upper right corner of the browser viewport to return to the navigation screen. The iframe technology is combined with the CSS3 animation technology to achieve a smooth transition effect between large screens, improve user experience, and reduce visual and operational abruptness. The main working steps are introduced below in conjunction with the specific implementation method.

[0075] In one embodiment, screen information of multiple large visualization screens is obtained, and a canvas is set according to the screen information, including: obtaining screen information of multiple large visualization screens; determining the display size and the number of the multiple large visualization screens based on the screen information; setting the canvas according to the display size and the number of the large screens; wherein the canvas is used to accommodate the multiple large visualization screens.

[0076] In one embodiment, multiple visualization large screens are embedded in the canvas in a circular layout based on iframe technology, including: setting the radius of the circular layout of the visualization large screen based on the visualization large screen and the canvas; calculating the coordinates of each visualization large screen based on the radius; and distributing the multiple visualization large screens on the circumference of the circular layout through iframe nesting according to the coordinates to embed them in the canvas. The width and height of the canvas are greater than the width and height of the visualization large screen multiplied by half of the number of large screens.

[0077] Specifically, the screen information includes but is not limited to the name of the visualization screen, display resolution, access address, display size, etc. Based on the display size of each visualization screen and the number of visualization screens, a canvas DOM is defined with a size that can accommodate all visualization screens arranged in a circle.

[0078] For example, in step 1, the name, display resolution, access address and other information of each large visualization screen are counted. Figure 3 As shown, the APP_LIST corresponding to each visualization screen is counted, and the APP_LIST includes the name of the visualization screen (such as Figure 3 XXX digital applications shown), display resolution (such as Figure 3 [1920, 1080]), access address (such as Figure 3 http: / / xxx.com as shown).

[0079] Exemplarily, in step 2, based on the display size of each visualization screen and the number of screens, define a canvas DOM that can accommodate all visualization screens arranged in a circle. The width and height of this canvas DOM is preferably slightly larger than the width and height of the visualization screen multiplied by half of the number of screens. Calculate the coordinates of each visualization screen with an appropriate radius. Specifically, Figure 4 The code shown is the coordinate calculation process of each visualization screen. The upper left corner of the canvas DOM can be set as the origin (0, 0), such as Figure 4 As shown, the coordinates (x, y) of the visualization large screen are calculated according to the radius, canvas width (canvasDomWidth), canvas height (canvasDomHeight), screen length (screensLength), etc.

[0080] It should be noted that the radius cannot be set too large to exceed the canvas DOM, nor can it be set too small to overlap the visualization screen. Figure 5 As shown, according to the APP_LIST of the visualization large screen and the calculated coordinates and other information, each visualization large screen is evenly distributed at equal angles on the circumference of the circular layout by nesting iframes.

[0081] Exemplarily, in step 2, it should be noted that the canvas DOM can set a cyclic background image, or set a path image from the dynamic interactive navigation screen to each visualization screen, so that it is more beautiful when the canvas DOM moves.

[0082] In one embodiment, a large dynamic interactive navigation screen is provided at the center of the circular layout.

[0083] In one embodiment, multiple visualization large screens are accessed and switched based on CSS animation technology and the dynamic interactive navigation large screen, including: initializing the display of the dynamic interactive navigation large screen based on the browser viewport; dynamically setting a button for switching to each visualization large screen on the dynamic interactive navigation large screen, and setting a click event on each button; upon receiving a click instruction, determining a target visualization large screen to be switched based on the click instruction and the click event; and switching the browser viewport to the target visualization large screen based on CSS animation technology.

[0084] Specifically, step three: based on the name, access address, display resolution, coordinates and other information of each visualization screen, a dynamic interactive navigation screen is set at the center of the circle, so that a visualization screen will not pass through other screens when it moves to the browser viewport, and the moving distance to each visualization screen is equal. Set the translation value of the canvas DOM so that the browser viewport initializes the display of the dynamic interactive navigation screen. Dynamically set a button to switch to the corresponding visualization screen on the dynamic interactive navigation screen (the visualization screen can correspond to the button one by one), and set a click event on each button.

[0085] In one embodiment, the browser viewport is switched to the target visualization large screen based on CSS animation technology, including: reducing the dynamic interactive navigation large screen and the target visualization large screen in equal proportion to prompt that the screen switching is ready to start; setting the translation value of the canvas; controlling the browser viewport to move smoothly based on CSS animation technology and the translation value until it moves to the coordinates of the target visualization large screen; and enlarging the dynamic interactive navigation large screen and the target visualization large screen in equal proportion to prompt that the screen switching is finished.

[0086] Specifically, set the click event on each button, refer to Figure 6The code shown, when the button is clicked, the following animations occur in sequence: 1. The dynamic interactive navigation screen and the target visualization screen are smoothly scaled down (for example, to 0.8) to indicate that the screen switching is about to begin; 2. The translation value of the canvas DOM is set so that it starts to move smoothly based on CSS3 animation technology until it moves to the coordinates of the target visualization screen. Here, the translation value of the canvas DOM is set according to the coordinates from the dynamic interactive navigation screen to the coordinates of the target visualization screen; 3. The dynamic interactive navigation screen and the target visualization screen are scaled up to their original sizes to indicate that the screen switching is complete.

[0087] Specifically, step 4: a non-obtrusive return button can be fixed in the upper right corner of the browser viewport, and a click event for returning to the dynamic interactive navigation screen can be set. When the browser viewport switches to the target visualization screen, clicking the return button can return to the dynamic interactive navigation screen. The animation after clicking back is similar to step 3, the difference is that the translation value of the canvas DOM must be set to the dynamic interactive navigation screen. Here, the translation value of the canvas DOM is set according to the coordinates of the target visualization screen back to the coordinates of the dynamic interactive navigation screen.

[0088] In one embodiment, the method also includes: determining the display resolution based on screen information of multiple large visualization screens; judging whether the display resolution is consistent with the physical resolution of the current display device; if inconsistent, calculating the scaling ratio according to the physical resolution of the current display device; scaling the large visualization screen according to the scaling ratio and displaying the scaled large visualization screen in the center.

[0089] Specifically, in step one, if the display resolution of each large visualization screen is inconsistent with the physical resolution of the current display device, it is necessary to calculate the scaling ratio according to the physical resolution of the current display device and scale the large visualization screen, center it and add a suitable background (for example, make the large visualization screen adapt to the surrounding background color) so that the large visualization screen can be displayed normally.

[0090] In one embodiment, the method also includes: determining the loading progress of resources based on the iframe.onload events of multiple visualization large screens; displaying the loading progress corresponding to the visualization large screen on each button of the dynamic interactive navigation large screen to visualize the resource loading progress of each visualization large screen; obtaining the association relationship between multiple visualization large screens; and displaying the connection between the visualization large screens on the dynamic interactive navigation large screen based on the association relationship.

[0091] Specifically, in step 3, the large screen directory buttons of the dynamic interactive navigation screen can determine whether the model, image and other resources have been loaded based on the iframe.onload event of the corresponding large screen, and display it on the button (for example, through a resource loading progress bar), so that the resource loading status of each visualization large screen can be displayed on the dynamic interactive navigation screen. It is also possible to display the connection between the visualization large screens on the dynamic interactive navigation screen based on the relationship (association relationship) between the visualization large screens, so that when the large screen needs to be explained, the dynamic interactive navigation screen has more story coherence.

[0092] It should be noted that when switching between multiple large visualization screens, you can set the translation value of the canvas DOM or the translation value of the browser viewport. Figures 7 to 9 As shown, setting the translation value of the browser viewport is used as an example. Figure 7 For the position status of the canvas DOM and the browser viewport during initialization, visualization screens 1 to 12 are embedded in the canvas DOM in a circular layout, the navigation screen is set at the center of the circle, and the initial position of the browser viewport is located at the navigation screen. Figure 8 For the position status of the canvas DOM and the browser viewport during the switching process, the translation value of the browser viewport is set, and the browser viewport moves along the radius from the coordinates of the navigation screen to the coordinates of the target visualization screen (visualization screen 3). Fig. 9 The position status of the canvas DOM and the browser viewport when the switching is completed, the browser viewport moves to the visualization large screen 3, and the screen switching is completed.

[0093] It can be understood that this embodiment has the following advantages over the traditional visual large-screen switching solution: 1) The operation is simple after completion. You only need to click the navigation large screen and the return button, and no longer need to enter multiple large-screen addresses. 2) The switching is smooth and there will be no white screen phenomenon. 3) It has a wide range of applications and is compatible with large screens of any display resolution. 4) It is intuitive and highly interactive, and the connection between the large screens can be displayed on the navigation homepage.

[0094] The specific implementation of the method described in this embodiment is described in detail below through Example 1 and Example 2 in combination with specific application scenarios.

[0095] Specifically, Example 1: Urban Traffic Monitoring Center. 1. Background: The urban traffic monitoring center needs to monitor the conditions of multiple traffic intersections in real time in order to quickly respond to traffic events. Traditional monitoring systems usually require multiple displays or switch multiple windows, which are cumbersome and inefficient. 2. Implementation steps: Page layout: On the main display interface of the monitoring center, use HTML and CSS to create a circular iframe layout, and each iframe embeds a real-time video stream and data statistics interface of a traffic intersection. Navigation design: Set a large navigation screen at the center of the circle to display thumbnails and name tags of all intersections as the entrance for user interaction. Interaction logic: Use JavaScript to monitor user operations (such as clicking on thumbnails or touching the screen) to trigger the zoom and move animation of the corresponding iframe, and enlarge the large screen of the selected traffic intersection to the center position, and the other large screens are correspondingly reduced and moved to the background. 3. Animation effect: When the user selects an intersection, the target large screen is smoothly enlarged and moved to the center of the viewport through the scale and translate transformation of CSS3, while the other large screens are reduced and moved away, forming a smooth transition effect. During the animation process, use the transition attribute to add a time curve for scaling and movement to ensure the natural and smooth animation. 4. User experience optimization: In order to ensure the user experience, the animation speed is dynamically adjusted according to the smoothness of the current operation and the network conditions. During the movement and scaling of the large screen, the real-time monitoring data continues to update to ensure the real-time nature of the information. 5. Technical details: Responsive design: Use media queries to ensure that the layout and animation effects of the large screen can remain in the best state on display devices of different sizes. Performance optimization: In order to ensure the smoothness of the large screen switching, the embedded iframe page is optimized to reduce unnecessary resource loading.

[0096] Specifically, Embodiment 2: Visualization of enterprise data. 1. Background: The enterprise needs to display key information such as sales data, market analysis, operation status, and workshop operation status in real time on the internal display board. The traditional data display method is relatively static and lacks interactivity and intuitiveness. 2. Implementation steps: Page design: On the internal website of the enterprise, design a circular iframe layout, and each iframe displays different data visualization charts or reports. Navigation and interaction: Set a large navigation screen at the center of the circle to provide an overview of the enterprise data and the entrance to each data module. The access rights of each data module can be restricted by logging in to different accounts to achieve the effect of data confidentiality. Interaction logic: By touching the screen or operating the mouse, users can easily switch between different data visualization modules, and each module can be smoothly enlarged and moved to the center. 3. Animation and interaction: Use CSS3 animation to achieve smooth zooming and moving effects to enhance the visual experience. Use JavaScript to achieve instant response to user operations to ensure the sensitivity and accuracy of interaction. 4. Optimization: Optimize data loading and processing to ensure that even with large amounts of data, it can quickly respond to user operations. Through caching mechanism and data preloading strategy, the loading time can be reduced and the user experience can be improved.

[0097] Through the above-mentioned embodiment 1 and embodiment 2, the specific application mode and advantages of the method described in this embodiment in different application scenarios can be clearly reflected. These embodiments show how to achieve efficient, intuitive and interactive multi-screen data visualization and interactive switching through modern web page technology.

[0098] The present embodiment provides a multi-screen visualization interactive switching method, including: obtaining screen information of multiple visualization large screens, and setting a canvas according to the screen information; embedding multiple visualization large screens into the canvas in a circular layout based on iframe technology; setting a dynamic interactive navigation large screen at the center of the circular layout; accessing and switching multiple visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen. In this embodiment, iframe preloading, CSS animation and other technologies are applied to nest multiple visualization large screens in a circular layout on the canvas through iframe, and then the dynamic interactive navigation large screen at the center of the circle is scaled and moved to the browser viewport. By moving and scaling the large screen collection page, the browser viewport switches between multiple visualization large screens. The method of the present invention switches smoothly, and there is no white screen phenomenon. There is no need to modify the large screen that has been set up. It is simple to implement and has a wide range of applications. It is compatible with large screens of any display resolution.

[0099] In addition, an embodiment of the present invention further proposes a storage medium, on which a multi-screen visualization interactive switching program is stored. When the multi-screen visualization interactive switching program is executed by a processor, the steps of the multi-screen visualization interactive switching method described above are implemented.

[0100] Reference Fig.10 , Fig.10 This is a structural block diagram of an embodiment of a multi-screen visual interactive switching device of the present invention.

[0101] like Fig.10 As shown, the multi-screen visual interactive switching device includes:

[0102] A canvas setting module 10 is used to obtain screen information of multiple large visualization screens and set the canvas according to the screen information;

[0103] A large screen layout module 20, used to embed the plurality of large visualization screens into the canvas in a circular layout based on the iframe technology;

[0104] A navigation setting module 30, used to set a dynamic interactive navigation screen at the center of the circular layout;

[0105] The large screen switching module 40 is used to access and switch multiple visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen.

[0106] The present embodiment provides a multi-screen visual interactive switching device. In the present embodiment, iframe preloading, CSS animation and other technologies are applied to nest multiple large visual screens in a circular layout on the canvas through iframes, and then the dynamic interactive navigation large screen at the center of the circle is scaled and moved to the browser viewport. By moving and scaling the large screen collection page, the browser viewport switches between multiple large visual screens. The method of the present invention switches smoothly without the phenomenon of white screen. There is no need to modify the large screen that has been set up. It is simple to implement and has a wide range of applications. It is compatible with large screens of any display resolution.

[0107] It should be noted that the technical details that are not described in detail in the embodiment of the multi-screen visualization interactive switching device can be found in the multi-screen visualization interactive switching method described above provided in any embodiment of the present invention, and will not be repeated here.

[0108] It should be understood that the above is only an example and does not constitute any limitation on the technical solution of the present invention. In specific applications, technicians in this field can make settings as needed, and the present invention does not limit this.

[0109] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of the present invention. In practical applications, technicians in this field can select part or all of them according to actual needs to achieve the purpose of the present embodiment, and no limitation is made here.

[0110] In addition, it should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.

[0111] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0112] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as a read-only memory (ROM) / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0113] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A multi-screen visual interactive switching method, characterized in that: include: Obtaining screen information of multiple large visualization screens, and setting a canvas according to the screen information; Embedding the plurality of large visualization screens in a circular layout into the canvas based on the iframe technology; A dynamic interactive navigation screen is arranged at the center of the circular layout; Based on CSS animation technology and the dynamic interactive navigation large screen, multiple visualization large screens are accessed and switched.

2. The method according to claim 1, characterized in that The obtaining of screen information of a plurality of large visualization screens and setting a canvas according to the screen information includes: Get screen information of multiple large visualization screens; Determine the display size and number of the plurality of large visualization screens based on the screen information; A canvas is set according to the display size and the number of the large screens; wherein the canvas is used to accommodate a plurality of the visualization large screens.

3. The method according to claim 2, characterized in that The width and height of the canvas are greater than the width and height of the large visualization screen multiplied by half of the number of the large screens.

4. The method according to claim 1, characterized in that The method of embedding the plurality of large visualization screens in a circular layout into the canvas based on the iframe technology includes: Setting the radius of the circular layout of the visualization large screen based on the visualization large screen and the canvas; Calculate the coordinates of each of the large visualization screens based on the radius; According to the coordinates, multiple large visualization screens are distributed on the circumference of the circular layout through iframe nesting to be embedded in the canvas.

5. The method according to claim 1, characterized in that The access and switching of the plurality of visualization large screens based on the CSS animation technology and the dynamic interactive navigation large screen includes: Initialize and display the dynamic interactive navigation large screen based on the browser viewport; Dynamically setting a button for switching to each of the visualization large screens on the dynamic interactive navigation large screen, and setting a click event on each of the buttons; When receiving a click instruction, determining a target visualization large screen to be switched based on the click instruction and the click event; The browser viewport is switched to the target visualization large screen based on CSS animation technology.

6. The method according to claim 5, characterized in that The step of switching the browser viewport to the target visualization large screen based on CSS animation technology includes: The dynamic interactive navigation large screen and the target visualization large screen are reduced in proportion to each other to prompt that the screen switching is ready to start; Set the translation value of the canvas; Based on CSS animation technology and the translation value, the browser viewport is controlled to move smoothly until it moves to the coordinates of the target visualization large screen; The dynamic interactive navigation large screen and the target visualization large screen are enlarged in equal proportion to indicate that the screen switching is completed.

7. The method according to claim 1, characterized in that The method further comprises: Determining the loading progress of resources according to the iframe.onload events of the plurality of visualization large screens; Displaying the loading progress corresponding to the visualization screen on each button of the dynamic interactive navigation screen to visualize the resource loading progress of each visualization screen; Obtaining the association relationship between the plurality of visualization large screens; The connection between the visualization large screens is displayed on the dynamic interactive navigation large screen based on the association relationship.

8. The method according to claim 1, characterized in that The method further comprises: Determining a display resolution based on screen information of the plurality of large visualization screens; Determine whether the display resolution is consistent with the physical resolution of the current display device; If they are inconsistent, calculating the scaling ratio according to the physical resolution of the current display device; The visualization large screen is scaled according to the scaling ratio and the scaled visualization large screen is displayed in the center.

9. A multi-screen visual interactive switching device, characterized in that: include: A canvas setting module, used to obtain screen information of multiple large visualization screens and set the canvas according to the screen information; A large screen layout module, used to embed the plurality of large visualization screens into the canvas in a circular layout based on iframe technology; A navigation setting module, used to set a dynamic interactive navigation large screen at the center of the circular layout; The large screen switching module is used to access and switch multiple visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen.

10. An electronic device, characterized in that: The electronic device comprises: a memory, a processor, and a multi-screen visualization interactive switching program stored in the memory and executable on the processor, wherein the multi-screen visualization interactive switching program is configured to implement the multi-screen visualization interactive switching method according to any one of claims 1 to 8.

Images