Content display methods, devices, terminals and storage media

Abstract

This application discloses a content display method, apparatus, terminal, and storage medium, relating to the field of human-computer interaction technology. It includes: a canvas container for displaying a canvas application, the canvas container for embedding a content view, the content view including an application view, and the application view corresponding to the application view being different from the canvas application; and updating the content view in the canvas container in response to a canvas adjustment operation within the canvas container. This application utilizes a canvas container to improve the efficiency of transaction processing and view adjustment.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction technology, and in particular to a content display method, device, terminal and storage medium. Background Technology

[0002] With the continuous development of terminal technology, the processing performance of terminals is getting higher and higher, so more and more users tend to use terminals as a productivity tool.

[0003] To improve the efficiency of transaction processing using the terminal, the terminal provides functions such as split screen and floating window, enabling users to process transactions in multiple applications simultaneously. Summary of the Invention

[0004] This application provides a content display method, apparatus, terminal, and storage medium. The technical solution is as follows:

[0005] On one hand, embodiments of this application provide a content display method, the method comprising:

[0006] A canvas container for displaying a canvas application is provided, the canvas container being used to embed a content view, the content view including an application view, and the application corresponding to the application view being different from the canvas application.

[0007] In response to a canvas adjustment operation within the canvas container, update the content view within the canvas container.

[0008] On the other hand, embodiments of this application provide a content display device, the device comprising:

[0009] A canvas display module is used to display a canvas container for a canvas application. The canvas container is used to embed a content view, which includes an application view, and the application corresponding to the application view is different from the canvas application.

[0010] A canvas adjustment module is used to update the content view in the canvas container in response to a canvas adjustment operation within the canvas container.

[0011] On the other hand, embodiments of this application provide a terminal, the terminal including a processor and a memory; the memory stores at least one instruction, the at least one instruction being executed by the processor to implement the content display method as described above.

[0012] On the other hand, embodiments of this application provide a computer-readable storage medium storing at least one instruction, which is loaded and executed by a processor to implement the content display method as described above.

[0013] On the other hand, embodiments of this application provide a computer program product including computer instructions stored in a computer-readable storage medium. A terminal's processor reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the terminal to perform the content display methods provided in the various optional implementations of the above aspects.

[0014] In this embodiment, the canvas container can simultaneously embed content views, including application views, allowing multiple content views to be displayed on the same canvas, thus improving transaction processing efficiency. For example, a web browser view and a note-taking application view can be embedded on the canvas simultaneously, allowing users to take notes while referring to the web browser without switching screens. Furthermore, canvas adjustment operations can update the content views within the canvas container, such as adjusting all content views simultaneously, thereby improving the efficiency of view adjustments. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 This is a schematic diagram of split-screen operation in existing technology;

[0017] Figure 2 This is a flowchart of a content display method provided in an exemplary embodiment of this application;

[0018] Figure 3 This is a schematic diagram of a canvas scaling operation provided in an exemplary embodiment of this application;

[0019] Figure 4 This is a schematic diagram illustrating the synchronous updating of an application view provided in an exemplary embodiment of this application;

[0020] Figure 5 This is a schematic diagram of a canvas movement operation provided in an exemplary embodiment of this application;

[0021] Figure 6 This is a schematic diagram illustrating the creation of a canvas container based on the system desktop, provided in an exemplary embodiment of this application.

[0022] Figure 7 This is a schematic diagram illustrating the creation of a canvas container based on a foreground application, provided in an exemplary embodiment of this application.

[0023] Figure 8This is a schematic diagram of a drawing operation provided in an exemplary embodiment of this application;

[0024] Figure 9 This is a schematic diagram illustrating the addition of content based on a sidebar, provided in an exemplary embodiment of this application.

[0025] Figure 10 This is a schematic diagram illustrating the addition of content based on a message notification bar, provided in an exemplary embodiment of this application.

[0026] Figure 11 This is a schematic diagram illustrating the addition of content based on an application view, provided in an exemplary embodiment of this application.

[0027] Figure 12 This is a schematic diagram illustrating the addition of content to an application view that supports multi-window creation, provided in an exemplary embodiment of this application.

[0028] Figure 13 This is a structural block diagram of a content display device provided in an exemplary embodiment of this application;

[0029] Figure 14 This is a structural block diagram of a terminal provided in an exemplary embodiment of this application. Detailed Implementation

[0030] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0031] In related technologies, users can handle multiple tasks simultaneously through split-screen operation. Examples of split-screen technology include built-in split-screen functionality in the terminal system or split-screen services provided by third-party software. Split-screen technology can divide the screen area into at least two independent and complete windows, allowing users to perform independent operations on at least two windows without interference.

[0032] like Figure 1 As shown, the terminal screen 11 is divided into two window areas using split-screen technology: a first window area 111 and a second window area 112. The first window area 111 and the second window area 112 can each display interfaces corresponding to different tasks. For example, the first window area 111 can display a chat application interface, and the second window area 112 can display a browser interface. A split-screen adjustment control 113 is provided between the first window area 111 and the second window area 112, allowing the user to move the control 113 to adjust the size of the first window area 111 and the second window area 112 to suit display needs.

[0033] However, the aforementioned split-screen operation method has many drawbacks. First, the ability to adjust windows in a split-screen environment is very limited. For example, users can only adjust the size of different windows using the split-screen adjustment controls, and cannot perform operations such as scaling or moving windows. Second, split-screen operation lacks the capabilities of a productivity tool; it can only simply divide the screen area and cannot create new work scenarios. For example, split-screen operation cannot perform drawing operations within the area, or interactive functions such as dragging and dropping content.

[0034] In this embodiment of the application, in order to improve the efficiency of handling multiple tasks simultaneously and to achieve more comprehensive and efficient control over multiple windows, the terminal can execute the content display method by running a canvas application.

[0035] The terminal is a device with a display screen, such as a smartphone, laptop, tablet, navigation device, smart TV, etc. In the embodiments of this application, the canvas application has significant advantages on terminal devices with large-screen displays (such as foldable phones and foldable computers).

[0036] A canvas application is a terminal application that displays content through a canvas container. For example, a canvas application can be a system app on a smartphone or a third-party app. The core component of a canvas application includes the canvas container.

[0037] A canvas container is a visual tool for displaying content. Multiple content views corresponding to different items can be embedded on a canvas container. For example, an image view corresponding to an image, a weather card view corresponding to a weather card component, and a text view corresponding to text content can be embedded on the same canvas container. In some embodiments, the canvas container supports embedding application views, where the application view corresponds to an application different from the canvas application. For example, a canvas container can embed both a photo album view corresponding to a photo album application and a chat view corresponding to a chat application. The term "embedded" indicates that the content view is not floating on the surface of the canvas container, but rather is part of the canvas container and can be adjusted along with the canvas container's changes (such as moving or scaling).

[0038] In some embodiments, the canvas container can display other applications as controls through application views, and the same operations and effects within other applications can be achieved on the canvas container. Optionally, users can perform operations on the application views on the canvas container (e.g., click, swipe, drag, etc.), which have the same effect and achieve the same functionality as performing corresponding operations directly on the application. For example, a user typing and sending a message in the social application view on the canvas container is no different from typing and sending a message directly in the social application.

[0039] In some embodiments, the size of the canvas container is greater than or equal to the size of the terminal screen, such as... Figure 3 As shown, the size of the canvas container 31 is larger than the size of the terminal screen 32.

[0040] On the canvas container, only the content view that exists within the visible area of ​​the terminal screen can be observed by the user. For example... Figure 3 As shown, before the zoom gesture is triggered, both the video application view 311 and the document view 312 on the canvas container 31 are within the visible range of the terminal screen 32, and therefore can be observed by the user. When the user zooms the canvas container using the zoom gesture, the canvas container 31 is enlarged by a certain proportion, and the content views on the canvas container are also enlarged. Understandably, due to the canvas zoom operation, part of the video application view 311 that was originally within the visible range of the terminal screen 32 overflows the field of view, so the entire view corresponding to the video application view 311 can no longer be observed on the terminal screen 32.

[0041] In some embodiments, users can adjust the canvas container to change the visible area of ​​the terminal screen, thereby displaying content of interest to the user. For example, users can move the canvas container, and the entire content view on the canvas container will move synchronously, improving the efficiency of view adjustment.

[0042] Figure 2 This is a flowchart of a content display method provided in an exemplary embodiment of this application, which may include the following steps:

[0043] Step 201: Display the canvas container of the canvas application. The canvas container is used to embed a content view, which includes an application view, and the application view is different from the canvas application.

[0044] In one possible implementation, the canvas container of the canvas application can be displayed on the entire terminal screen. In another possible implementation, the canvas container of the canvas application can be displayed on a portion of the terminal screen, such as displaying the canvas container on the lower 3 / 4 of the terminal screen and displaying other content (such as bullet comments) on the upper 1 / 4.

[0045] In some embodiments, the content view includes, but is not limited to, application view, image view, text view, card view, etc.

[0046] In some embodiments, a canvas application may include one or more canvas containers. Different canvas containers may contain the same or different content views. Optionally, there is a limit to the number of content views that can be embedded in a single canvas container, for example, no more than six.

[0047] Step 202: In response to a canvas adjustment operation within the canvas container, update the content view within the canvas container.

[0048] Canvas adjustment operations include, but are not limited to, adjustments to the size, position, and style of the canvas container. In some embodiments, canvas adjustment operations may be triggered based on user actions, such as selection, keyboard shortcuts, or specific gestures.

[0049] In some embodiments, based on canvas adjustment operations, all or part of the content view on the canvas container can be updated. For example, based on canvas style adjustment operations, a portion of the selected content view can be synchronously updated to a flat style. In some embodiments, the canvas container can also be scaled or moved based on canvas adjustment operations to synchronously update the size, position, and presence within the visible range of the content view on the canvas container. Figure 3 As shown, users can zoom in on the canvas container 31 by a certain ratio using zoom gestures, thereby adjusting the size, position, and presence within the visible range of the terminal screen for the video application view 311 and the document view 312.

[0050] In summary, in this embodiment, the canvas container can simultaneously embed content views, including application views, allowing multiple content views to be displayed on the same canvas container, thus improving transaction processing efficiency. For example, a web browser view and a note-taking application view can be embedded simultaneously on the canvas container, allowing users to take notes while referring to the web browser without switching screens. Furthermore, canvas adjustment operations can update the content views within the canvas container, such as adjusting all content views simultaneously, thereby improving view adjustment efficiency.

[0051] In some embodiments, adjusting the canvas container may include a canvas scaling operation and a canvas movement operation. The canvas scaling operation is used to synchronously shrink or enlarge the size of the entire canvas container and all content views on it; the canvas movement operation is used to translate the position of the entire canvas container and all content views on it by a target length in the target movement direction.

[0052] Regarding some possible application scenarios for canvas zoom operation, for example, when the content view on the canvas container is too small to be convenient to view, the user can trigger the canvas zoom operation to enlarge the canvas container and all the content views on the canvas container; or when there are too few content views on the canvas container within the visible range of the terminal screen, the user can trigger the canvas zoom operation to reduce the size of the canvas container, so as to present more content views within the visible range of the terminal screen.

[0053] Regarding some possible application scenarios for canvas movement operations, for example, when the content view that the user is interested in is outside the visible range of the terminal screen, the user can trigger the canvas movement operation to move the position of the canvas container and all the content views on the canvas container so that the content view that the user is interested in is within the visible range of the terminal screen.

[0054] When a user triggers a canvas zoom operation within the canvas container, the content view on the canvas container needs to be resized to ensure that it zooms synchronously. In response to the canvas zoom operation, the content view is zoomed synchronously based on the canvas zoom operation. In one possible implementation, the canvas application determines the zoom ratio indicated by the canvas zoom operation and further adjusts the content view's size based on that zoom ratio.

[0055] The scaling ratio refers to the proportion by which the length and width of the canvas container change due to a canvas scaling operation. Optionally, the scaling ratio is expressed as a×b, where a represents the proportion by which the length of the canvas container changes, and b represents the proportion by which the width of the canvas container changes. For example, a scaling ratio of 0.5×0.65 means that the length of the canvas container becomes 0.5 times that before the canvas scaling operation, and the width becomes 0.65 times that before the canvas scaling operation.

[0056] Indicative, such as Figure 3 As shown, the zoom gesture triggers a canvas zoom operation, which causes the length and width of the canvas container 31 to become 1.5 times their previous size. Therefore, the zoom ratio indicated by the canvas zoom operation is 1.5 × 1.5. The canvas application adjusts the view size of the video application view 311 and the document view 312 based on this zoom ratio, so the length and width of the video application view 311 and the document view 312 also become 1.5 times their previous size.

[0057] Optionally, the zoom gesture is a two-finger touch and reverse swipe gesture.

[0058] Adjusting the content view size based on the scaling ratio allows the content view's size to update synchronously as the canvas container is enlarged or reduced. When the entire content view is enlarged along with the canvas container's scaling ratio, it facilitates user viewing and operation; when the entire content view is reduced along with the canvas container's scaling ratio, more content can be displayed within the visible range of the terminal screen.

[0059] Regarding the principle of embedding an application interface in a canvas container, in one possible implementation, the terminal can generate a task view corresponding to the application through a window management service, and attach the task view to a child node of the application view located on the canvas container, thereby displaying the content of the task view in the application view, so as to realize the embedding of the application interface in the canvas container.

[0060] like Figure 4 As shown, the Window Management Service (WMS) 43 is a system-level service in the Android system used to control the appearance and behavior of various windows. The Window Management Service 43 includes a Task Organizer Controller 431 and a Task Display Area 432. The Task Organizer Controller 431 controls the Task Display Area 432 through the display controller 4311 (onTaskAppeared), the change controller 4312 (onTaskinfoChanged), and the end controller 4313 (onTaskVanished). The Task Display Area 432 is the parent node of all application tasks in the system, used to manage application tasks (Tasks), including application task 4321. Application task 4321 corresponds to the application view 411 located on the canvas container 41.

[0061] The application task record 441 (TaskRecord) in the ActivityManagerService 44 contains an activity record (ActivityRecord) corresponding to each application task. For example, application task 4321 corresponds to activity record 442. Activity record 442 contains the window state 443 (WindowState) corresponding to application task 4321. Window state 443 includes the state of the application interface such as its boundaries, size, visibility, and lifespan.

[0062] Optionally, the lifecycle of the view applied to the canvas container is synchronized with the lifecycle of the canvas container.

[0063] Based on the window state 443 of application task 4321, task manager controller 431 controls the generation of a corresponding task view 451 and attaches task view 451 to a child node of application view 411, thereby displaying the content of task view 451 in application view 411. The task view 451 serves to host the task stack layer of the corresponding application. Since task view 451 is attached to a child node of application view 411 and is a custom control inherited from application view 411, its content can be displayed in application view 411.

[0064] By attaching the task view to a child node of the application view, the content of the task view can be displayed in the application view. Thus, the application corresponding to the application view can be displayed as a control of the canvas container, enabling the canvas container to achieve a cross-application embedded display effect.

[0065] When a user triggers a canvas zoom operation to scale the application view 411, scaling only the size of the application view 411 will not achieve the desired scaling effect. Specifically, if the canvas zoom operation is triggered, and only the size of the application view 411 is enlarged without modifying the size of the corresponding task view 451, a white border will appear on the application view 411. If the canvas zoom operation is triggered, and only the size of the application view 411 is reduced without modifying the size of the corresponding task view 451, only a portion of the task view's content will be displayed on the application view 411, and the content of the remaining task views will be lost.

[0066] Therefore, when the content view is the application view, in order to achieve synchronous scaling of the application view, the size of the corresponding task view needs to be adjusted based on the scaled size of the application view.

[0067] In some embodiments, when the content view is an application view, the first size of the application view can be determined based on the scaling ratio.

[0068] The first size refers to the size that the application view should have after the canvas zoom operation, according to the zoom ratio. The first size can be calculated based on the zoom ratio and the original size of the application view. For example, if the original size of the application view is 1920×1080px and the zoom ratio indicated by the canvas zoom operation is 0.5×0.6, then the first size of the application view is 960×648px.

[0069] In some embodiments, the window management service adjusts the size of the application's corresponding task view based on a first size, so that the adjusted task view's size matches the first size, wherein the task view is attached to a child node of the application view. Since the adjusted task view's size matches the first size, the entire content of the task view can be perfectly displayed within the corresponding application view, thereby achieving synchronous scaling of the application view during canvas zooming operations.

[0070] When a user triggers a canvas movement operation within the canvas container, the content view displayed within the visible area of ​​the terminal screen will change accordingly. To ensure that the content view on the canvas container moves synchronously with the canvas container, in response to the canvas movement operation within the canvas container, the terminal updates the content view based on the visible area of ​​the canvas container on the screen after the canvas movement operation.

[0071] Indicative, such as Figure 5As shown, a list application view 511, a calendar application view 512, and a chat application view 513 are embedded on the canvas container 51. The chat application view 513 is outside the visible range of the terminal screen 52 and cannot be observed by the user. After the user triggers a canvas movement operation on the canvas container 51 with a movement gesture, the canvas container 51 shifts to the right by a certain length. Consequently, the list application view 511, calendar application view 512, and chat application view 513 on the canvas container 51 also shift to the right by the same length. It can be understood that because the canvas movement operation moves the canvas container 51 to the right, the visible range of the canvas container 51 on the terminal screen 52 shifts to the left by the same length. The chat application view 513, which was originally invisible, partially appears within the visible range of the terminal screen 52 after the canvas movement operation.

[0072] Optionally, the movement gesture is a two-finger touch gesture that slides in the direction of movement.

[0073] By updating the content view based on the visible range of the canvas container on the screen after the canvas movement operation, it is possible to synchronously update whether the content view is displayed and its display position after the movement, so that all content views move synchronously with the movement of the canvas container.

[0074] In different transaction processing scenarios, users can quickly create canvas containers through specific operations. For example, when the terminal screen displays the system desktop, the user can create a new canvas container or open a history canvas container through specific operations. When the terminal screen displays a foreground application, the user does not need to exit the foreground application and return to the system desktop, but can directly create a canvas container containing the application view corresponding to the foreground application through specific operations.

[0075] In one possible implementation, the canvas container can be created using the following three methods.

[0076] 1. When the system desktop is displayed on the terminal screen, in response to the canvas creation gesture operation, the canvas management interface of the canvas application is displayed; in response to the trigger operation of the canvas creation control in the canvas management interface, a blank canvas container is created and displayed.

[0077] The system desktop refers to the main screen area of ​​the monitor that you see after opening the terminal and successfully logging in.

[0078] Optionally, the canvas creation gesture is to simultaneously touch the screen with four fingers and swipe down. The canvas creation gesture can also be any possible gesture, and this embodiment does not limit this.

[0079] The canvas management interface can be used to manage canvas applications by enabling functions such as canvas creation, canvas naming, canvas editing, canvas saving, canvas switching, canvas deletion, and canvas lifecycle settings.

[0080] The canvas creation control refers to the control used to create new canvases in the canvas management interface. Optionally, the canvas creation control can be displayed as an icon with a plus sign "+".

[0081] Indicative, such as Figure 6 As shown, the terminal screen 61 displays the system desktop. When the user triggers the canvas creation gesture operation, the canvas management interface 611 is displayed on the terminal screen 61. The canvas management interface 611 has a canvas creation control 612. When the user triggers the canvas creation control 612, the terminal will create and display a blank canvas container.

[0082] By triggering the canvas creation control in the canvas management interface, users can create blank canvas containers to generate new canvas container work scenarios.

[0083] 2. When the system desktop is displayed, the canvas management interface of the canvas application is displayed in response to the canvas creation gesture operation; the historical canvas container is displayed in response to the selection operation of the historical canvas container in the canvas management interface.

[0084] The history canvas container refers to the canvas containers created by the user in the past. As an example only, the canvas management interface can include all or part of the history canvas containers, such as the two most recently created history canvas containers.

[0085] Indicative, such as Figure 6 As shown, the canvas management interface 611 also has a history canvas container 613 and a history canvas container 614, from which the user can select. When the user selects one of the history canvas containers, the history canvas container is displayed on the terminal screen 61.

[0086] By selecting a historical canvas container in the canvas management interface, users can open the selected historical canvas container to continue working on the historical canvas container.

[0087] 3. When the foreground application is displayed, in response to the canvas creation gesture, display a canvas container containing the application view corresponding to the foreground application.

[0088] Foreground applications refer to applications that interact directly with users in real time, such as social applications that users are currently using or news applications that they are reading.

[0089] Indicative, such as Figure 7As shown, the terminal screen 71 displays the chat application view corresponding to the chat application that the user is currently using. After being triggered by the canvas creation gesture operation, the terminal creates a canvas container 72. Optionally, the chat application view 721 corresponding to the chat application is embedded in the canvas container 72, and the chat application view 721 is located at the center of the visible range of the terminal screen 71.

[0090] When the foreground application is displayed, canvas creation gestures can quickly create a canvas container containing the view of the corresponding application in the foreground application. Users do not need to exit the foreground program and return to the system desktop, thus improving the efficiency of canvas container creation and enhancing the user experience.

[0091] When creating a canvas container with the foreground application displayed, the size of the application view embedded within the canvas container is often different from the original display size of the foreground application. For example, if the foreground application was originally displayed in full screen with a size of 1920×1080px, and a canvas container with a size of 1920×1080px is created through a canvas creation gesture, the size of the application view corresponding to the foreground application in the center of this canvas container will only be 768×432px. Therefore, when creating a canvas container with the foreground application displayed, the size of the application view needs to be adjusted.

[0092] In one possible implementation, an application view with a second size can be created; the size of the corresponding task view of the foreground application can be adjusted based on the second size, and the task view can be mounted under a child node of the application view, wherein the adjusted size of the task view is consistent with the second size.

[0093] The second size refers to the size that the application view corresponding to the foreground application should have when creating a canvas container based on the foreground application. Optionally, the second size is a preset value, such as 768×432px. Optionally, the second size is determined based on user history preferences, such as using the average view size of all application views in the historical canvas container as the second size. Optionally, the second size is determined based on user settings.

[0094] Optionally, the terminal adjusts the size of the window state in the task corresponding to the application view based on the second size, and then uses the adjusted window state to generate the corresponding adjusted task view, so that the size of the adjusted task view is consistent with the second size. Since the task view is attached to a child node of the application view, the task view can be displayed to the application view, thereby displaying the application view of the second size in the newly created blank canvas container.

[0095] In some embodiments, based on the adjusted task view, the terminal screen displays the corresponding application view in a blank canvas container.

[0096] Adjusting the size of the task view corresponding to the foreground application based on the second size allows the application view corresponding to the foreground application to be presented in the blank canvas container at the second size.

[0097] In one possible use case, a user can doodle in a blank area of ​​the canvas container, for example, by using doodle tools (such as brushes, lines, etc.) to draw doodle content (such as doodle images, doodle strokes, etc.). In response to the doodle activity in the blank area of ​​the canvas container, the terminal displays the doodle content in the canvas container.

[0098] The blank area in a canvas container refers to the area of ​​the canvas container that can hold a content view, such as the entire canvas container area that is not covered by an existing content view.

[0099] Regarding the implementation principle of doodling operations in a canvas container, in one possible way, a base view is embedded in the canvas container, and other content views embedded in the canvas container are located on top of the base view.

[0100] The base view is the blank view at the bottom of the canvas container. Other content views embedded in the canvas container are located on top of the base view, which acts as a background to highlight the other content views. Optionally, the base view at the top of the canvas container is the blank area within the canvas container.

[0101] Optionally, the terminal displays the doodle content in the base view of the canvas container.

[0102] Indicative, such as Figure 8 As shown, a browser application view 811 is embedded on the canvas container 81. The gray area on the canvas container 81 indicates the blank area of ​​the canvas container 81. The user uses the drawing tool to draw on the blank area of ​​the canvas container 81 to create drawing content 812. Both the browser application view 811 and the drawing content 812 are located on top of the base view of the canvas container, so they can be observed by the user.

[0103] Users can create custom doodles by drawing within the blank areas of the canvas container. For example, users can refer to other existing content views in the container canvas to take notes, draw sketches, write summaries, etc., without switching screens to refer to other content. The doodling function not only satisfies users' needs for quick and convenient drawing but also adds new work scenarios to enrich the user experience.

[0104] Users can add content to the canvas container in several ways. In one possible implementation, adding content to the canvas container can include at least one of the following methods.

[0105] 1. Add content to the canvas container via the sidebar.

[0106] In some embodiments, in response to a sidebar call-out operation, the terminal displays a sidebar containing content that can be added to the canvas container.

[0107] Optionally, the sidebar can be accessed via gestures, keyboard shortcuts, or other methods.

[0108] The target content refers to the content that can be added to the canvas container. Optionally, the target content can be applications, text, images, audio and video, doodles, card components, etc.

[0109] In response to a drag operation on the target content in the sidebar, the terminal displays the content view corresponding to the target content in the canvas container.

[0110] Indicative, such as Figure 9 As shown, a form application view 911 is embedded in the canvas container 91, and a sidebar 921 is displayed on the terminal screen 92. The sidebar 921 contains multiple items that can be added to the canvas container 91, including target content 922, which is displayed as a calculator icon. When the user drags the target content 922, the terminal displays the calculator view 912 corresponding to the calculator application in the canvas container 91. By adding calculator views to the canvas container through the sidebar, users can conveniently and quickly perform calculations by referring to the content of the form application view 911.

[0111] Optionally, the drag operation is a gesture operation where a single finger is pressed and held to select the target content and then moved.

[0112] By dragging the target content in the sidebar, users can add the corresponding content view to the canvas container, increasing the diversity of methods for adding content to the canvas container and improving the efficiency of users in handling tasks.

[0113] 2. Add content to the canvas container via the message notification bar.

[0114] In some embodiments, in response to a triggering operation on a notification message, the terminal displays the application view corresponding to the application to which the notification message belongs in the canvas container.

[0115] Indicative, such as Figure 10 As shown, the terminal screen 101 displays a message notification bar 1011 corresponding to the chat application on the upper side. A document view 1021 is embedded in the canvas container 102. When the user triggers a notification message, the terminal displays the application view 1022 corresponding to the chat application to which the notification message belongs in the canvas container 102.

[0116] Optionally, the triggering action for the notification message can be a drag operation, a specific gesture operation, etc.

[0117] By triggering notification messages, users can quickly add the application view corresponding to the application to which the notification message belongs to the canvas container, thereby processing the notification message directly in the canvas container without switching screens to open the corresponding application, improving the efficiency of user task processing.

[0118] 3. Add content to the canvas container using the existing application view on the canvas container.

[0119] In some embodiments, when the canvas container contains an application view, in response to a drag operation on the target content in the application view, the terminal displays a content view corresponding to the target content in the canvas container.

[0120] Indicative, such as Figure 11 As shown, a photo album view 112 corresponding to the photo album application is embedded on the canvas container 111. The photo album view includes multiple image views, among which there is an image view 1121 corresponding to the target content. When the user drags the image view 1121, the terminal displays an image view 113 in the canvas container 111, where the content of image view 113 is the same as that of image view 1121.

[0121] Optionally, closing an existing application view on the canvas container does not affect the content view corresponding to the dragged target content. Therefore, after the user closes the album view 112, the existing image view 113 is not affected, and the user can continue to perform operations such as editing, scaling, and moving on the image view 113.

[0122] By dragging target content from an existing application view within the canvas container, users can add that content to the container, further enhancing the versatility of content addition methods. Furthermore, closing an existing application view on the canvas container does not affect the content view corresponding to the dragged-out target content, allowing for independent operations on that content subsequently.

[0123] 4. Add content to the canvas container using an application view that supports multiple windows.

[0124] In some embodiments, where the canvas container contains a first application view and the application corresponding to the first application view supports multi-window creation, the user can add content to the canvas container based on the first application view.

[0125] The first application view refers to the application view that already exists on the canvas container.

[0126] An application that supports multiple window creation means that the application can create at least two different windows. For example, a browser can create multiple browsing windows, a document application can create multiple document windows, and a spreadsheet application can create multiple spreadsheet windows.

[0127] In one possible implementation, in response to a window creation operation within the first application view, the terminal displays a second application view in the canvas container.

[0128] The second application view is another application view located on the canvas container, created through the window creation operation in the first application view. The second application view and the first application view belong to the same application but different windows.

[0129] Indicative, such as Figure 12 As shown, a first application view 1211 of the table application is embedded on the canvas container 121. The first application view 1211 is the application view corresponding to the third window (Form 3) in the table application, and includes a window creation icon 1212. Optionally, when the user selects and drags the window creation icon 1212, a window creation operation is formed, and the terminal displays a second application view 1213 in the canvas container 121. The second application view 1213 is the application view corresponding to the newly created fourth window (Form 4) in the table application.

[0130] By creating a window in the first application view, a second application view, which belongs to the same application but is a different window from the first application view, can be added to the canvas container. This not only further enhances the diversity of methods for adding content to the canvas container, but also makes it convenient and quick, and improves the user experience of using applications that support multi-window creation in the canvas container.

[0131] In one possible use case, users can perform view editing operations on the content view within the canvas container.

[0132] Optionally, the view editing operation includes at least one of the view position editing operation and the view size editing operation.

[0133] Optionally, users can perform one-click view editing on all content views on the container canvas, or perform individual view editing on selected content views on the container canvas.

[0134] For example, a user can select three application views located in the center of the canvas container and simultaneously edit the view positions of the three application views to move them to the top of the canvas container; or edit the view size of a weather card view with a size of 600×300px to reduce it to 300×150px.

[0135] Optionally, the view editing operation may also include other editing operations on the content view, such as display style editing operations. For example, the display style editing operation is used to edit various possible style attributes of the content view, such as rounded corners, shadows, borders, lines, colors, etc., and this embodiment does not limit this.

[0136] In some embodiments, in response to a view editing operation, the terminal updates the view display effect of the content view.

[0137] By performing view editing operations on the content view within the canvas container, users can modify the position, size, style, and other display effects of the content view based on their preferences, enabling the canvas container to meet the personalized view display needs of different users.

[0138] In one possible use case, the user creates at least two canvas containers. The user can switch between canvas containers, thereby changing the state of the terminal screen from displaying the first canvas container to displaying the second canvas container, thus changing the working scene of the canvas container.

[0139] Optionally, if at least two canvas containers exist, the terminal switches the canvas container in response to a canvas switching operation.

[0140] Optionally, canvas switching can be performed in various ways, such as switching with keyboard shortcuts or gestures.

[0141] The canvas switching operation allows users to quickly switch between different canvas containers, thereby changing the working scene of different canvas containers without having to return to the canvas management interface to switch, thus improving the efficiency of task processing.

[0142] When a user finishes working on a canvas container, that canvas container can be deleted.

[0143] Optionally, users can delete the canvas container individually by clicking the delete icon.

[0144] Optionally, users can delete multiple canvas containers in batches through the canvas management interface. In one possible implementation, the canvas management interface simultaneously terminates the lifecycle of multiple canvas containers to achieve batch deletion.

[0145] In some embodiments, when a deletion operation is received on the canvas container and the canvas container contains an application view, the terminal switches the application corresponding to the application view to a background running state.

[0146] Different canvas containers may each embed an application view corresponding to the same application. For example, both history canvas container A and history canvas container B may embed a music application view corresponding to the music app. When a user wants to delete history canvas container A but keep history canvas container B, switching the music app to background will not interfere with the operation of history canvas container B.

[0147] The canvas deletion operation allows users to quickly delete canvas containers individually or in batches; at the same time, it switches the application corresponding to the application view to the background running state without interfering with other canvas containers, thus enhancing the user experience.

[0148] Please refer to Figure 13 This illustration shows a structural block diagram of a content display device provided in an exemplary embodiment of this application, the device comprising:

[0149] Canvas display module 1301 is used to display a canvas container for a canvas application. The canvas container is used to embed a content view. The content view includes an application view, and the application corresponding to the application view is different from the canvas application.

[0150] The canvas adjustment module 1302 is used to update the content view in the canvas container in response to a canvas adjustment operation within the canvas container.

[0151] Optionally, the canvas adjustment module 1302 includes:

[0152] A canvas scaling unit is used to respond to a canvas scaling operation within the canvas container and to synchronously scale the content view based on the canvas scaling operation;

[0153] A canvas movement unit is configured to respond to a canvas movement operation within the canvas container and update the content view based on the visible area of ​​the canvas container on the screen after the canvas movement operation.

[0154] Optional, canvas scaling unit, used for:

[0155] Determine the scaling ratio indicated by the canvas scaling operation; adjust the view size of the content view based on the scaling ratio.

[0156] Optionally, when the content view is the application view, the canvas zoom unit is used to:

[0157] The first size of the application view is determined based on the scaling ratio;

[0158] The size of the application's corresponding task view is adjusted based on the first size so that the adjusted size of the task view is consistent with the first size, wherein the task view is attached to a child node of the application view.

[0159] Optional, the canvas display module 1301 is used for:

[0160] When the system desktop is displayed, in response to a canvas creation gesture, the canvas management interface of the canvas application is displayed; in response to a trigger operation on the canvas creation control in the canvas management interface, a blank canvas container is created and displayed.

[0161] When the system desktop is displayed, in response to a canvas creation gesture, the canvas management interface of the canvas application is displayed; in response to a selection operation of a historical canvas container in the canvas management interface, the historical canvas container is displayed.

[0162] When the foreground application is displayed, in response to a canvas creation gesture, a canvas container containing the application view corresponding to the foreground application is displayed.

[0163] Optional, the canvas display module 1301 is used for:

[0164] Create a second-sized application view;

[0165] The size of the task view corresponding to the foreground application is adjusted based on the second size, and the task view is attached to the child node of the application view, wherein the size of the task view after adjustment is consistent with the second size;

[0166] Display the application view in a blank canvas container.

[0167] Optional, the canvas display module 1301 is used for:

[0168] In response to a drawing operation within a blank area of ​​the canvas container, the drawing content is displayed in the canvas container.

[0169] Optionally, a base view is embedded in the canvas container, and other content views are embedded in the canvas container on top of the base view; the canvas display module 1301 is used for:

[0170] The graffiti content is displayed in the base view of the canvas container.

[0171] Optional, the canvas display module 1301 is used for:

[0172] In response to a sidebar pop-up operation, a sidebar is displayed, containing content that can be added to the canvas container; in response to a drag operation on target content in the sidebar, a content view corresponding to the target content is displayed in the canvas container, the target content including text, images, files, and at least one of those from an application; or,

[0173] In response to a triggering operation on a notification message, the application view corresponding to the application to which the notification message belongs is displayed in the canvas container.

[0174] Optional, the canvas display module 1301 is used for:

[0175] When the canvas container contains an application view, in response to a drag operation on target content in the application view, a content view corresponding to the target content is displayed in the canvas container; or,

[0176] When the canvas container contains a first application view and the application corresponding to the first application view supports the creation of multiple windows, in response to the window creation operation within the first application view, a second application view is displayed in the canvas container, wherein the first application view and the second application view correspond to different windows of the same application.

[0177] Optional, the canvas display module 1301 is used for:

[0178] In response to a view editing operation on the content view in the canvas container, the view display effect of the content view is updated, wherein the view editing operation includes at least one of a view position editing operation and a view size editing operation.

[0179] Optionally, the device also includes a canvas switching module for:

[0180] In the presence of at least two canvas containers, the canvas container is switched in response to a canvas switching operation.

[0181] Optionally, the device also includes a canvas deletion module for:

[0182] Upon receiving a deletion operation on the canvas container, and if the canvas container contains an application view, the application corresponding to the application view is switched to background running state.

[0183] It should be noted that the apparatus provided in the above embodiments is only an example of the division of the above functional modules. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the apparatus can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and their implementation process can be found in the method embodiments, which will not be repeated here.

[0184] Please refer to Figure 14This diagram illustrates a structural block diagram of a terminal provided in an exemplary embodiment of this application. The terminal can execute the content display method of the above embodiments. The terminal can be a terminal device with a display screen, such as a smartphone, laptop, tablet, navigation device, smart TV, etc. The terminal may also be referred to as a user equipment, portable terminal, or other names. The terminal may include one or more of the following components: a processor 1410 and a memory 1420.

[0185] Optionally, the processor 1410 connects various parts within the electronic device using various interfaces and lines. It performs various functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in the memory 1420, and by calling data stored in the memory 1420. Optionally, the processor 1410 can be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor 1410 can integrate one or more of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), Neural-network Processing Unit (NPU), and baseband chip. Specifically, the CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for the touchscreen display; the NPU implements artificial intelligence (AI) functions; and the baseband chip handles wireless communication. It is understandable that the aforementioned baseband chip may not be integrated into the processor 1410, but may be implemented as a separate chip.

[0186] The memory 1420 may include random access memory (RAM) or read-only memory (ROM). Optionally, the memory 1420 may include a non-transitory computer-readable storage medium. The memory 1420 may be used to store instructions, programs, code, code sets, or instruction sets. The memory 1420 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the various method embodiments described below, etc.; the data storage area may store data created according to the use of the electronic device (such as audio data, phone book, etc.).

[0187] In addition, those skilled in the art will understand that the structure of the electronic device shown in the above figures does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0188] This application also provides a computer-readable storage medium storing at least one instruction, which is loaded and executed by a processor to implement the method provided in the above embodiments. Optionally, the computer-readable storage medium may include ROM, RAM, solid-state drives (SSDs), or optical discs, etc. The RAM may include resistive random access memory (ReRAM) and dynamic random access memory (DRAM).

[0189] This application also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations of the above aspects.

[0190] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A content display method, characterized in that, The method includes: A canvas container for displaying the canvas application is used to embed a content view, which includes an application view. A task view is attached to a child node of the application view so that the content of the task view is displayed in the application view. The task view is used to carry the task stack layer of the application corresponding to the application view. Operations on the application view on the canvas container have the same effect as operations on the application corresponding to the application view. The application corresponding to the application view is different from the canvas application. In response to a canvas adjustment operation within the canvas container, update the content view within the canvas container.

2. The method according to claim 1, characterized in that, The step of updating the content view in the canvas container in response to a canvas adjustment operation within the canvas container includes at least one of the following: In response to a canvas scaling operation within the canvas container, the content view is simultaneously scaled based on the canvas scaling operation. In response to a canvas movement operation within the canvas container, the content view is updated based on the visible area of ​​the canvas container on the screen after the canvas movement operation.

3. The method according to claim 2, characterized in that, The synchronous scaling of the content view based on the canvas scaling operation includes: Determine the scaling ratio indicated by the canvas scaling operation; Adjust the view size of the content view based on the scaling ratio.

4. The method according to claim 3, characterized in that, When the content view is the application view, the method further includes: The first size of the application view is determined based on the scaling ratio; The size of the application's corresponding task view is adjusted based on the first size so that the adjusted size of the task view is consistent with the first size, wherein the task view is attached to a child node of the application view.

5. The method according to claim 1, characterized in that, The canvas container for the display canvas application includes at least one of the following: When the system desktop is displayed, in response to a canvas creation gesture, the canvas management interface of the canvas application is displayed; in response to a trigger operation on the canvas creation control in the canvas management interface, a blank canvas container is created and displayed. When the system desktop is displayed, in response to a canvas creation gesture, the canvas management interface of the canvas application is displayed; In response to a selection operation of the historical canvas container in the canvas management interface, the historical canvas container is displayed. When the foreground application is displayed, in response to a canvas creation gesture, a canvas container containing the application view corresponding to the foreground application is displayed.

6. The method according to claim 5, characterized in that, The display includes a canvas container containing the application view corresponding to the foreground application, comprising: Create a second-sized application view; The size of the task view corresponding to the foreground application is adjusted based on the second size, and the task view is attached to the child node of the application view, wherein the size of the task view after adjustment is consistent with the second size; Display the application view in a blank canvas container.

7. The method according to claim 1, characterized in that, The method further includes: In response to a drawing operation within a blank area of ​​the canvas container, the drawing content is displayed in the canvas container.

8. The method according to claim 7, characterized in that, The canvas container contains a base view, and other content views are embedded in the canvas container on top of the base view. Displaying graffiti content in the canvas container includes: The graffiti content is displayed in the base view of the canvas container.

9. The method according to claim 1, characterized in that, The method further includes: In response to a sidebar pop-up operation, a sidebar is displayed, containing content that can be added to the canvas container; in response to a drag operation on target content in the sidebar, a content view corresponding to the target content is displayed in the canvas container, the target content including text, images, files, and at least one of those from an application; or, In response to a triggering operation on a notification message, the application view corresponding to the application to which the notification message belongs is displayed in the canvas container.

10. The method according to claim 1, characterized in that, The method further includes: When the canvas container contains an application view, in response to a drag operation on target content in the application view, a content view corresponding to the target content is displayed in the canvas container; or, When the canvas container contains a first application view and the application corresponding to the first application view supports the creation of multiple windows, in response to the window creation operation within the first application view, a second application view is displayed in the canvas container, wherein the first application view and the second application view correspond to different windows of the same application.

11. The method according to claim 1, characterized in that, The method further includes: In response to a view editing operation on the content view in the canvas container, the view display effect of the content view is updated, wherein the view editing operation includes at least one of a view position editing operation and a view size editing operation.

12. The method according to claim 1, characterized in that, The method further includes: In the presence of at least two canvas containers, the canvas container is switched in response to a canvas switching operation.

13. The method according to claim 1, characterized in that, The method further includes: Upon receiving a deletion operation on the canvas container, and if the canvas container contains an application view, the application corresponding to the application view is switched to background running state.

14. A content display device, characterized in that, The device includes: A canvas display module is used to display a canvas container for a canvas application. The canvas container is used to embed a content view, which includes an application view. A task view is attached to a child node of the application view so that the content of the task view is displayed in the application view. The task view is used to carry the task stack layer of the application corresponding to the application view. Operations on the application view on the canvas container have the same effect as operations on the application corresponding to the application view. The application corresponding to the application view is different from the canvas application. A canvas adjustment module is used to update the content view in the canvas container in response to a canvas adjustment operation within the canvas container.

15. A terminal, characterized in that, The terminal includes a processor and a memory; the memory stores at least one instruction, which is executed by the processor to implement the content display method as described in any one of claims 1 to 13.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one instruction, which is loaded and executed by a processor to implement the content display method as described in any one of claims 1 to 13.

17. A computer program product, characterized in that, The computer program product includes computer instructions stored in a computer-readable storage medium; the processor of the terminal reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the terminal to perform the content display method as described in any one of claims 1 to 13.

Images