Multi-screen visual interaction switching method, device and equipment

Abstract

The application relates to the technical field of large-screen display, and discloses a multi-screen visual interactive switching method, device and equipment.The method comprises the following steps: acquiring screen information of multiple visual large screens, and setting a canvas according to the screen information; embedding the multiple visual large screens in the canvas in a circular layout mode based on iframe technology; setting a navigation large screen at the center position of the circular layout; and performing access and switching of the multiple visual large screens based on CSS animation technology and the navigation large screen.In the application, the multiple visual large screens are embedded in the canvas in a circular layout mode through iframe nesting by applying iframe preloading, CSS animation and other technologies, the browser viewport is switched between the multiple visual large screens in the form of moving and zooming the large-screen collection page, the switching is smooth, the white screen phenomenon does not occur, the large screen which has been set is not required to be modified, the method is simple to implement, the application range is wide, and the method is compatible with large screens of any display resolution.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of large screen display switching, in particular to a multi-screen visual interactive switching method, device and equipment. BACKGROUND

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

[0003] At present, the main big data visualization system switching scheme includes: 1. Clicking on the label to jump to the web address to achieve the purpose of switching the large screen. However, this scheme has slow loading when switching, and a white screen phenomenon occurs during the first switching. 2. The systems to be displayed are opened in different tabs of the browser in advance, and the label switching method is used to achieve the purpose of switching the system. However, this scheme is troublesome to operate, needs to be prepared in advance, and the full screen needs to be exited to switch the browser tab, which has poor experience. SUMMARY

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

[0005] To achieve the above purpose, the present application provides a multi-screen visual interactive switching method, which comprises:

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

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

[0008] Setting a dynamic interactive navigation large screen at the center of the circular layout;

[0009] Accessing and switching a plurality of visual large screens based on CSS animation technology and the dynamic interactive navigation large screen.

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

[0011] Obtaining screen information of a plurality of visual large screens;

[0012] determine display sizes and a number of the visual big screens based on the screen information;

[0013] set a canvas according to the display sizes and the number of the visual big screens, wherein the canvas is used to accommodate the visual big screens.

[0014] In some embodiments, a width and a height of the canvas are greater than a width and a height of the visual big screens multiplied by half of the number of the visual big screens.

[0015] In some embodiments, the iframe technology is used to embed the visual big screens in a circular layout in the canvas, including:

[0016] set a radius of the circular layout of the visual big screens based on the visual big screens and the canvas;

[0017] calculate coordinates of each of the visual big screens based on the radius;

[0018] distribute the visual big screens on a circumference of the circular layout according to the coordinates through iframe nesting to embed in the canvas.

[0019] In some embodiments, the CSS animation technology is used to access and switch the visual big screens based on the dynamic interactive navigation big screen, including:

[0020] initialize the dynamic interactive navigation big screen based on a browser viewport to display;

[0021] dynamically set buttons on the dynamic interactive navigation big screen to switch to each of the visual big screens, and set a click event on each of the buttons;

[0022] when a click instruction is received, determine a target visual big screen to be switched based on the click instruction and the click event;

[0023] switch the browser viewport to the target visual big screen based on the CSS animation technology.

[0024] In some embodiments, the CSS animation technology is used to switch the browser viewport to the target visual big screen, including:

[0025] scale down the dynamic interactive navigation big screen and the target visual big screen in a similar ratio to prompt a screen switching preparation to start;

[0026] set a translation value of the canvas;

[0027] control the browser viewport to move smoothly based on the CSS animation technology and the translation value until the browser viewport moves to a coordinate of the target visual big screen;

[0028] The dynamic interactive navigation large screen and the target visualization large screen are scaled up in a same ratio to prompt the end of screen switching.

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

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

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

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

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

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

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

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

[0037] If not, calculating a scaling ratio according to the physical resolution of the current display device;

[0038] Scaling the visualization large screens according to the scaling ratio and displaying the scaled visualization large screens in the center.

[0039] In addition, to achieve the above-mentioned purpose, the application further provides a multi-screen visualization interaction switching device, comprising:

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

[0041] A large screen layout module, configured to embed the multiple visualization large screens in the canvas in a circular layout based on iframe technology;

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

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

[0044] In addition, to achieve the above object, the application further provides an electronic device, comprising a memory, a processor, and a multi-screen visual interactive switching program stored in the memory and executable on the processor, the multi-screen visual interactive switching program being configured to implement the multi-screen visual interactive switching method as described above.

[0045] The application provides a multi-screen visual interactive switching method, comprising: acquiring screen information of a plurality of visual large screens, and setting a canvas according to the screen information; embedding the plurality of visual large screens in the canvas in a circular layout based on iframe technology; setting a dynamic interactive navigation large screen at a center position of the circular layout; and performing access and switching of the plurality of visual large screens based on CSS animation technology and the dynamic interactive navigation large screen. In the application, iframe preloading, CSS animation and other technologies are applied, the plurality of visual large screens are embedded in the canvas in a circular layout through iframe nesting, and the dynamic interactive navigation large screen at the center is scaled and moved to the browser viewport. The browser viewport is switched between the plurality of visual large screens in the manner of moving and scaling the large screen collection page. The method has smooth switching and does not cause a white screen phenomenon, does not need to modify the large screen that has been set, is simple to implement, and is widely applicable and compatible with large screens of any display resolution. BRIEF DESCRIPTION OF DRAWINGS

[0046] Figure 1 A structural schematic diagram of an electronic device related to a hardware running environment of an embodiment of the application;

[0047] Figure 2 A flowchart of a multi-screen visual interactive switching method according to an embodiment of the application;

[0048] Figure 3 A visual large screen information statistical code related to an embodiment of the application;

[0049] Figure 4 A visual large screen coordinate calculation code related to an embodiment of the application;

[0050] Figure 5 An iframe nesting isometric distribution on a circumference code related to an embodiment of the application;

[0051] Figure 6 A click dynamic effect code related to an embodiment of the application;

[0052] Figure 7 A position state diagram of a canvas DOM and a browser viewport at initialization time related to an embodiment of the application;

[0053] Figure 8The position state diagram of the canvas DOM and the browser viewport in the switching process is related to the embodiment scheme of the present application.

[0054] Figure 9 The position state of the canvas DOM and the browser viewport when the switching is completed is related to the embodiment scheme of the present application.

[0055] Figure 10 The structural block diagram of an embodiment of the multi-screen visual interactive switching device is related to the present application.

[0056] The implementation, functional features and advantages of the present application will be further described with reference to the embodiments and the accompanying drawings. DETAILED DESCRIPTION

[0057] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work fall within the protection scope of the present application.

[0058] It should be noted that all directional indications (such as up, down, left, right, front, back, etc.) in the embodiments of the present application are only used to explain the relative positional relationship, movement condition, etc. between components in a certain posture (as shown in the drawings), and if the certain posture changes, the directional indications also change accordingly.

[0059] In addition, the description of "first", "second" and the like in the present application is only for the purpose of description, and cannot be understood as indicating or implying the relative importance of the indicated technical features or implicitly indicating the number of the indicated technical features. Therefore, the features limited by "first", "second" can explicitly or implicitly include at least one of the features. In addition, the technical solutions of each embodiment can be combined with each other, but it must be based on the realization of those skilled in the art, and when the combination of technical solutions appears contradictory or unachievable, it should be considered that the combination of technical solutions does not exist, and is not within the protection scope of the present application. 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.

[0060] Reference Figure 1 , Figure 1 The electronic device structural schematic diagram of the hardware running environment related to the embodiment scheme of the present application is related to the present application.

[0061] As Figure 1As shown in the figure, the electronic device can 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. The communication bus 1002 is used to realize the connection and communication between the components. The user interface 1003 can include a display, an input unit such as a keyboard, and can also include a standard wired interface, a wireless interface. The network interface 1004 can optionally include a standard wired interface, a wireless interface (such as a wireless fidelity (Wi-Fi) interface). The memory 1005 can be a high-speed random access memory (RAM memory) or a stable non-volatile memory (NVM), such as a disk memory. The memory 1005 can also be a storage device independent of the aforementioned processor 1001.

[0062] Those skilled in the art can understand that Figure 1 The structure shown in the figure does not constitute a limitation on the electronic device, and can include more or fewer components than the figure, or combine certain components, or different component arrangements.

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

[0064] In Figure 1 As shown in the figure, 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 application can be arranged in the electronic device, and the electronic device calls the multi-screen visual interactive switching program stored in the memory 1005 through the processor 1001, and executes the multi-screen visual interactive switching method provided by the embodiment of the present application.

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

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

[0067] As Figure 2 shown, the multi-screen visual interactive switching method comprises:

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

[0069] Step S200: embedding the plurality of visual large screens in a circular layout in the canvas based on an iframe technology.

[0070] Step S300: setting a dynamic interactive navigation large screen at a center position of the circular layout.

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

[0072] It should be noted that the execution subject in the embodiment can be an electronic device, which can be a computer device having a data processing function, and can also be other devices that can realize the same or similar functions, and the embodiment does not limit this. In the embodiment, the computer device is taken as an example for description.

[0073] It can be understood that a plurality of big data display large screens (for example, visual large screens) generated in company development or business development need to be smoothly switched under the same screen. The embodiment takes seamless switching and interaction of a plurality of big data visual large screens under the same screen as an example for description.

[0074] In the embodiment, based on the characteristics that iframe can preload data, models and other resources outside the viewport and CSS3 animation can smoothly switch the viewport, an innovative multi-screen display method is proposed. A plurality of visual large screens are embedded in a main page (for example, a canvas) in a circular layout by using iframe, to provide a brand-new visual layout and information display method. A dynamic interactive navigation large screen is set at the center position, which can not only serve as the center of user operation to realize quick access and switching of other visual large screens, but also serve as a buffer for data loading time of other visual large screens. A return button is added to the upper right corner of the browser viewport to return to the navigation large screen. The iframe technology is combined with the CSS3 animation technology to realize smooth transition effect between large screens, to improve user experience and reduce the sense of abruptness in vision and operation. The main working steps are introduced below in combination with the specific implementation manner.

[0075] In an embodiment, obtaining screen information of a plurality of visual large screens, and setting a canvas according to the screen information, comprises: obtaining screen information of a plurality of visual large screens; determining display sizes and a number of the plurality of visual large screens based on the screen information; and setting a canvas according to the display sizes and the number of the visual large screens; wherein the canvas is used to accommodate the plurality of visual large screens.

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

[0077] Specifically, the screen information includes, but is not limited to, the name, display resolution, access address, display size, and the like of the visual large screen. Based on the display size of each visual large screen and the number of visual large screens, a canvas DOM is defined which can accommodate all visual large screens in a circular arrangement.

[0078] Illustratively, in step one, the name, display resolution, access address, and the like of each visual large screen are counted. As shown in Figure 3 , the APP_LIST corresponding to each visual large screen is counted, which includes the name (such as Figure 3 XXX digital application) of the visual large screen, the display resolution (such as Figure 3 [1920, 1080]), and the access address (such as Figure 3 http: / / xxx.com).

[0079] Illustratively, in step two, based on the display size of each visual large screen and the number of large screens, a canvas DOM is defined which can accommodate all visual large screens in a circular arrangement. The width and height of the canvas DOM are slightly larger than the width and height of the visual large screen multiplied by half of the number of large screens. The coordinates of each visual large screen are calculated with a suitable radius. Specifically, Figure 4 The code shown in Figure 4 sets the upper left corner of the canvas DOM as the origin (0, 0), and calculates the coordinates (x, y) of the visual large screen according to the radius, the canvas width (canvasDomWidth), the canvas height (canvasDomHeight), and the screen length (screensLength).

[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 cause the visual large screens to overlap. As shown in Figure 5 , according to the APP_LIST of the visual large screen and the calculated coordinates, each visual large screen is distributed equiangularly and uniformly on the circumference of the circular layout in the iframe nesting.

[0081] Exemplarily, in step two, it is noted that the canvas DOM can set a looped background picture or set a picture of the path from the dynamic interactive navigation large screen to each visualization large screen, so that the movement of the canvas DOM is more beautiful.

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

[0083] In an embodiment, the access and switching of the plurality of visualization large screens based on the CSS animation technology and the dynamic interactive navigation large screen comprises: initializing display of the dynamic interactive navigation large screen based on a 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; 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 the CSS animation technology.

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

[0085] In an embodiment, the switching of the browser viewport to the target visualization large screen based on the CSS animation technology comprises: reducing the dynamic interactive navigation large screen and the target visualization large screen in equal proportions to prompt the start of screen switching; setting the translation value of the canvas; controlling the smooth movement of the browser viewport based on the CSS animation technology and the translation value until the movement 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 proportions to prompt the end of screen switching.

[0086] Specifically, the click event is set on each button, as shown in Figure 6The codes shown, when the button is clicked, the following effects occur in turn: 1, the dynamic interactive navigation large screen and the target visualization large screen are smoothly scaled down (for example, to 0.8) in equal proportion to prompt the screen switching preparation; 2, the translation value of the canvas DOM is set to start a smooth movement based on the CSS3 animation technology until it moves to the coordinates of the target visualization large screen, here, the translation value of the canvas DOM is set according to the movement from the coordinates of the dynamic interactive navigation large screen to the coordinates of the target visualization large screen; 3, the dynamic interactive navigation large screen and the target visualization large screen are scaled up to the original size in equal proportion to prompt the end of the screen switching.

[0087] Specifically, step four: a non-obtrusive return button can be fixedly arranged at the upper right corner of the browser viewport, and a click event of returning to the dynamic interactive navigation large screen is set. When the browser viewport is switched to the target visualization large screen, clicking the return button can return to the dynamic interactive navigation large screen. The post-click effect is similar to step three, except that the translation value of the canvas DOM is set to the dynamic interactive navigation large screen, here, the translation value of the canvas DOM is set according to the return from the coordinates of the target visualization large screen to the coordinates of the dynamic interactive navigation large screen.

[0088] In an embodiment, the method further comprises: determining a display resolution based on screen information of a plurality of the visualization large screens; judging whether the display resolution is consistent with a physical resolution of a current display device; if not, calculating a scaling ratio according to the physical resolution of the current display device; scaling the visualization large screen according to the scaling ratio and displaying the scaled visualization large screen in the center.

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

[0090] In an embodiment, the method further comprises: determining the loading progress of resources according to the iframe.onload event of a plurality of the 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 of a plurality of the 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 three, the buttons for each major screen in the dynamic interactive navigation dashboard can determine whether resources such as models and images have been loaded based on the iframe.onload event of the corresponding screen, and display this information on the buttons (e.g., through a resource loading progress bar). This allows the dynamic interactive navigation dashboard to display the resource loading status of each visualization screen. Furthermore, based on the relationships (associations) between the visualization screens, the dynamic interactive navigation dashboard can showcase the connections between them, making the narrative more coherent when explaining the screens.

[0092] It should be noted that when switching between multiple visualization dashboards, you can set the translation values ​​of the canvas DOM or the browser viewport. In one example, such as... Figures 7 to 9 As shown, the example of setting the pan value of the browser viewport is used for illustration. Figure 7 To initialize the position and state of the canvas DOM and browser viewport, visualization screens 1 to 12 are embedded in the canvas DOM in a circular layout, with the navigation screen set at the center of the circle, and the browser viewport initially positioned at the navigation screen. Figure 8 To determine the position and state of the canvas DOM and browser viewport during the switching process, set the translation value of the browser viewport. The browser viewport moves from the coordinates of the navigation screen along the radius to the coordinates of the target visualization screen (visual screen 3). Figure 9 To indicate the position and state of the canvas DOM and browser viewport when the switch is complete, the browser viewport moves to the visualization screen 3, and the screen switch ends.

[0093] It is understood that this embodiment has the following advantages compared to traditional visual large screen switching solutions: 1) Simple operation after completion; only the navigation large screen and the back button need to be clicked, eliminating the need to enter multiple large screen addresses. 2) Smooth switching without any white screen issues. 3) Wide applicability; compatible with large screens of any display resolution. 4) Intuitive and highly interactive; the connections between large screens can be displayed on the navigation homepage.

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

[0095] Specifically, Example One: Urban Traffic Monitoring Center. 1. Background: Urban traffic monitoring centers need to monitor the status of multiple intersections in real-time to quickly respond to traffic incidents. Traditional monitoring systems often require multiple displays or switching multiple windows, which is 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 arrangement of iframe layouts, each iframe embedding a real-time video stream and data statistics interface of a traffic intersection. Navigation Design: Set a navigation large screen in the center position, displaying the thumbnails and name tags of all intersections as the user's interactive entry. Interaction Logic: Through JavaScript, listen to the user's operations (such as clicking on the thumbnail or touching the screen), trigger the zoom and move animation of the corresponding iframe, and enlarge the selected traffic intersection large screen to the center position, while other large screens are correspondingly reduced and moved to the background. 3. Animation Effects: When the user selects an intersection, the target large screen is smoothly enlarged and moved to the center of the viewport through CSS3 scale and translate transformations, while 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 moving to ensure the natural and smooth flow of the animation. 4. User Experience Optimization: To ensure user experience, dynamically adjust the animation speed according to the current operation smoothness and network conditions. During the large screen moving and scaling process, real-time monitoring data continues to update, ensuring 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 remain optimal on different sizes of display devices. Performance Optimization: To ensure the smoothness of large screen switching, optimize the performance of the embedded iframe pages to reduce unnecessary resource loading.

[0096] Specifically, embodiment two: enterprise data visualization display. 1. Background: Enterprises need to display real-time sales data, market analysis, operational status, workshop running status and other key information on internal display boards. Traditional data display methods are relatively static, lacking interactivity and intuitiveness. 2. Implementation steps: Page design: On the enterprise internal website, design a circular arrangement of iframe layout, each iframe displays different data visualization charts or reports. Navigation and interaction: Set a navigation large screen in the center position, provide an overview of enterprise data and access to each data module. Access to each data module can be limited by logging into different accounts to achieve data security. Interaction logic: Through touch screen or mouse operation, users can easily switch between different data visualization modules, and each module can be smoothly enlarged and moved to the center position. 3. Animation and interaction: Use CSS3 animation to achieve smooth scaling and moving effects to enhance visual experience. Through JavaScript, the system responds to user operations in real time to ensure the sensitivity and accuracy of the interaction. 4. Optimization: Optimize data loading and processing to ensure fast response to user operations even in large data volume situations. Through caching mechanism and data preloading strategy, reduce loading time and improve user experience.

[0097] Through the above embodiment one and embodiment two, the specific application mode and advantages of the method described in this embodiment in different application scenarios can be clearly embodied. These embodiments show how to realize efficient, intuitive and interactive multi-screen data visualization display and interactive switching through modern web technologies.

[0098] The embodiment provides a multi-screen visualization interactive switching method, which comprises the following steps: acquiring screen information of a plurality of visualization large screens, and setting a canvas according to the screen information; embedding the plurality of visualization large screens in the canvas in a circular layout based on iframe technology; setting a dynamic interactive navigation large screen at the center of the circular layout; and performing access and switching of the plurality of visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen. In the embodiment, iframe preloading, CSS animation and other technologies are applied, the plurality of visualization large screens are embedded in the canvas in a circular layout through iframe nesting, and the dynamic interactive navigation large screen at the center is scaled and moved to the browser viewport. The browser viewport is switched between the plurality of visualization large screens in the manner of moving and scaling the large screen collection page. The method has smooth switching and does not cause a white screen phenomenon, does not need to modify the large screen that has been set, is simple to implement, and is widely applicable and compatible with large screens of any display resolution.

[0099] Further, the embodiment of the present application also provides a storage medium, wherein the storage medium stores a multi-screen visual interactive switching program, and the multi-screen visual interactive switching program is executed by a processor to realize the steps of the multi-screen visual interactive switching method.

[0100] Referring to Figure 10 , Figure 10 FIG. 1 is a structural block diagram of an embodiment of a multi-screen visual interactive switching device according to the present application.

[0101] As Figure 10 shown, the multi-screen visual interactive switching device comprises:

[0102] a canvas setting module 10 configured to acquire screen information of a plurality of visual large screens and set a canvas according to the screen information;

[0103] a large screen layout module 20 configured to embed the plurality of visual large screens in the canvas in a circular layout based on an iframe technology;

[0104] a navigation setting module 30 configured to set a dynamic interactive navigation large screen at a center position of the circular layout;

[0105] a large screen switching module 40 configured to access and switch the plurality of visual large screens based on a CSS animation technology and the dynamic interactive navigation large screen.

[0106] The embodiment provides a multi-screen visual interactive switching device, in which iframe preloading, CSS animation and other technologies are applied to embed a plurality of visual large screens in a circular layout on a canvas through iframe nesting, and then a dynamic interactive navigation large screen at the center is scaled and moved to a browser viewport. The browser viewport is switched between the plurality of visual large screens by moving and scaling the large screen collection page. The method provided by the present application is smooth in switching and does not cause a white screen phenomenon. The method does not need to modify the large screen that has been set, is simple to implement and has a wide range of application, and is compatible with large screens of any display resolution.

[0107] It should be noted that technical details not described in detail in the embodiment of the multi-screen visual interactive switching device can be referred to the application of the multi-screen visual interactive switching method provided by any embodiment of the present application, and will not be described herein.

[0108] It should be understood that the above is only for illustration, and does not constitute any limitation on the technical solutions of the present application. In specific applications, those skilled in the art can set according to needs, and the present application does not limit this.

[0109] It should be noted that the above-described workflow is merely illustrative and does not limit the scope of protection of the present application, and in actual application, a person skilled in the art can select part or all of them to achieve the purpose of the embodiment scheme according to actual needs, which is not limited here.

[0110] In addition, it should be noted that in this paper, the term "includes", "contains" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or system including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or includes elements inherent to such process, method, article or system. Without more limitations, the element defined by the sentence "includes a" does not exclude the presence of other identical elements in the process, method, article or system including the element.

[0111] The above-mentioned embodiment numbers of the present application are only for description, not representing the advantages and disadvantages of the embodiments.

[0112] From the above description of the embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be realized by software and necessary general hardware platform, of course, also can be realized by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of software product, which is stored in a storage medium (such as read only memory (Read Only Memory, ROM) / RAM, magnetic disc, optical disc), including a plurality of instructions for making a terminal device (which can be a mobile phone, computer, server, or network device, etc.) execute the method described in each embodiment of the present application.

[0113] The above is only the preferred embodiment of the present application, and does not limit the patent scope of the present application, and any equivalent structure or equivalent process transformation made by using the content of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A multi-screen visual interaction switching method, characterized in that, The method comprises the following steps: obtaining screen information of a plurality of visualization large screens, and setting a canvas according to the screen information; embedding a plurality of the visualization large screens in 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 the plurality of visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen; wherein accessing and switching the plurality of visualization large screens based on CSS animation technology and the dynamic interactive navigation large screen comprises: initializing the display of 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; 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.

2. The method of claim 1, wherein, The method further comprises: obtaining screen information of a plurality of visualization large screens; determining the display size and the number of large screens of the plurality of visualization large screens based on the screen information; setting a canvas according to the display size and the number of large screens; wherein the canvas is used to accommodate the plurality of visualization large screens.

3. The method of claim 2, wherein, The width and height of the canvas are greater than half the product of the width and height of the visualization large screen and the number of large screens.

4. The method of claim 1, wherein, The method further comprises: setting the radius of the circular layout of the visualization large screens based on the visualization large screens and the canvas; calculating the coordinates of each of the visualization large screens based on the radius; distributing the plurality of visualization large screens on the circumference of the circular layout through iframe nesting according to the coordinates, so as to be embedded in the canvas.

5. The method of claim 1, wherein, The method further comprises: scaling down the dynamic interactive navigation large screen and the target visualization large screen in equal proportions to prompt the start of screen switching; setting the translation value of the canvas; controlling the smooth movement of the browser viewport based on CSS animation technology and the translation value until the browser viewport moves to the coordinates of the target visualization large screen; scaling up the dynamic interactive navigation large screen and the target visualization large screen in equal proportions to prompt the end of screen switching.

6. The method of claim 1, wherein, The method further comprises: determining the loading progress of resources according to the iframe.onload event of the plurality of visualization large screens; displaying the loading progress corresponding to the visualization large screen on each of the buttons of the dynamic interactive navigation large screen to visualize the resource loading progress of each of the visualization large screens; obtaining the association relationship of the plurality of visualization large screens; displaying the relationship between the visualization large screens on the dynamic interactive navigation large screen based on the association relationship.

7. The method of claim 1, wherein, The method further comprises: determining the display resolution based on the screen information of the plurality of visualization large screens; determining whether the display resolution is consistent with the physical resolution of the current display device. If not, a scaling ratio is calculated according to a physical resolution of the current display device; The visual large screen is scaled according to the scaling ratio and is displayed in the center.

8. A multi-screen visual interaction switching device, characterized in that, Comprise: A canvas setting module configured to acquire screen information of a plurality of visual large screens and set a canvas according to the screen information; A large screen layout module configured to embed the plurality of visual large screens in the canvas in a circular layout based on iframe technology; A navigation setting module configured to set a dynamic interactive navigation large screen at a center position of the circular layout; A large screen switching module configured to access and switch the plurality of visual large screens based on CSS animation technology and the dynamic interactive navigation large screen; The accessing and switching of the plurality of visual large screens based on CSS animation technology and the dynamic interactive navigation large screen comprises: initializing the display of the dynamic interactive navigation large screen based on a browser viewport; dynamically setting a button for switching to each of the visual large screens on the dynamic interactive navigation large screen and setting a click event on each of the buttons; determining a target visual large screen to be switched based on a click instruction and the click event when the click instruction is received; and switching the browser viewport to the target visual large screen based on CSS animation technology.

9. An electronic device, comprising: The electronic device comprises a memory, a processor, and a multi-screen visual interactive switching program stored on the memory and executable on the processor, and the multi-screen visual interactive switching program is configured to implement the multi-screen visual interactive switching method of any one of claims 1 to 7.

Images