A display device and a control display method

Abstract

The present application discloses a display device and a control display method, the method comprising: displaying a user interface in response to a user input instruction to switch a user interface or move a focus, the user interface comprising at least one control, and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in the original style of the focus element; if a first identifier exists in the top-level element of the user interface and a second identifier exists in the document object model of the focus element, the magnified style corresponding to the first identifier and the second identifier is embedded in the original style of the focus element; and the control corresponding to the focus element is displayed based on the style of the focus element in which the magnified style has been embedded. The present application adds a magnification effect again on the basis of the original focus element effect to form an animation transition effect, so that the user can clearly understand the current operation position and displayed content, thereby improving the user experience.

Description

Technical Field

[0001] The present application relates to the technical field of intelligent display devices, and in particular to a display device and a control display method. Background Art

[0002] As display devices become more popular, their functions become richer and more diverse, and the functions of display devices for special groups of people are also springing up. Especially for people with poor vision, the display of the user interface and the switching of focus are particularly important. At present, when displaying the user interface, only the text of the current focus element is bolded, and a simple CSS (Cascading Style Sheets) attribute font-size (font size) is added to bold it. The overall element is not enlarged, and only the text effect is changed. It can not provide much assistance to people with poor vision, and the user experience is poor. Summary of the invention

[0003] The present application provides a display device and a control display method, which adds a magnification effect on the basis of the original focus element effect to form an animation transition effect, so that the user can clearly understand the current operation position and displayed content, and it is easier to perform the next step and process the current operation, thereby improving the user experience.

[0004] A first aspect of an embodiment of the present application provides a display device, including:

[0005] monitor;

[0006] The controller is configured as:

[0007] In response to a user input of an instruction to switch a user interface or move a focus, a user interface is displayed, wherein the user interface includes at least one control and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in an original style of the focus element, and the focus element is an element corresponding to the control selected by the focus;

[0008] If a first identifier exists in the top-level element of the user interface and a second identifier exists in the document object model of the focus element, embed the magnification styles corresponding to the first identifier and the second identifier into the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface;

[0009] The control corresponding to the focus element is displayed based on the focus element style in which the magnification style has been embedded.

[0010] In combination with the first aspect, in a first possible implementation manner, the controller determines the focus element of the user interface in the following manner:

[0011] Detecting whether a focus indicator exists in the document object model of an element of the user interface;

[0012] If a focus identifier exists in the document object model of the element of the user interface, the element is determined to be a focus element of the user interface.

[0013] In combination with the first aspect, in a second possible implementation manner, the controller is configured as follows:

[0014] If there is a third identifier in the document object model of the focus element, and the sum of the weights of the magnification styles corresponding to the first identifier and the second identifier is less than the weight of the style corresponding to the third identifier, the style of the focus element remains unchanged, the control corresponding to the focus element is displayed unchanged, and the style corresponding to the third identifier is the style of the focus element.

[0015] In combination with the first aspect, in a third possible implementation manner, the controller is configured as:

[0016] In response to an instruction from a user to set the user interface to enlarge the category interface, adding a second identifier to the root path element of the user interface;

[0017] In response to a user instruction to set the user interface to a non-magnification category interface, removing the second identifier from the root path element of the user interface; or,

[0018] In response to a user instruction to set the user interface to a non-magnification category interface, a second identifier and a third identifier are added to the root path element of the user interface, and a weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier.

[0019] In combination with the first aspect, in a fourth possible implementation manner, the controller is configured as follows:

[0020] In response to a user instruction to turn on a screen magnification switch, a first identifier is added to a top-level element of the user interface.

[0021] In combination with the first aspect, in a fifth possible implementation, the original style of the focus element or the enlarged style corresponding to the first identifier and the second identifier includes:

[0022] Enlarging the font size in the control to a preset multiple; and / or,

[0023] bolding the font in the control to a preset multiple; and / or,

[0024] Enlarging the image in the control by a preset ratio; and / or,

[0025] Transforming the origin in the control at a preset position; and / or,

[0026] The font or image in the control is displayed with a preset animation effect.

[0027] A second aspect of an embodiment of the present application provides a control display method, including:

[0028] In response to a user input of an instruction to switch a user interface or move a focus, a user interface is displayed, wherein the user interface includes at least one control and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in an original style of the focus element, and the focus element is an element corresponding to the control selected by the focus;

[0029] If a first identifier exists in the top-level element of the user interface and a second identifier exists in the document object model of the focus element, embed the magnification styles corresponding to the first identifier and the second identifier into the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface;

[0030] The control corresponding to the focus element is displayed based on the focus element style in which the magnification style has been embedded.

[0031] In conjunction with the second aspect, in a first possible implementation, the step of determining the focus element of the user interface includes:

[0032] Detecting whether a focus indicator exists in the document object model of an element of the user interface;

[0033] If a focus identifier exists in the document object model of the element of the user interface, it is determined that the element is a focus element of the user interface.

[0034] In conjunction with the second aspect, in a second possible implementation, the method further includes:

[0035] If there is a third identifier in the document object model of the focus element, and the sum of the weights of the magnification styles corresponding to the first identifier and the second identifier is less than the weight of the style corresponding to the third identifier, the style of the focus element remains unchanged, the control corresponding to the focus element is displayed unchanged, and the style corresponding to the third identifier is the style of the focus element.

[0036] In combination with the second aspect, in a third possible implementation, the method further includes:

[0037] In response to an instruction from a user to set the user interface to enlarge the category interface, adding a second identifier to the root path element of the user interface;

[0038] In response to a user instruction to set the user interface to a non-magnification category interface, removing the second identifier from the root path element of the user interface; or,

[0039] In response to a user instruction to set the user interface to a non-magnification category interface, a second identifier and a third identifier are added to the root path element of the user interface, and a weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier.

[0040] The embodiment of the present application provides a control display method, which is applicable to a display device, wherein the display device includes at least a display and a controller, wherein the controller is configured to: in response to a user input instruction to switch a user interface or move a focus, display a user interface, wherein the user interface includes at least one control, and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in the original style of the focus element, and the focus element is the element corresponding to the control selected by the focus; if there is a first identifier in the top-level element of the user interface and there is a second identifier in the document object model of the focus element, the magnification style corresponding to the first identifier and the second identifier is embedded in the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface; based on the style of the focus element in which the magnification style has been embedded, the control corresponding to the focus element is displayed. The present application adds a magnification effect again on the basis of the original focus element effect to form an animation transition effect, so that the user can clearly understand the current operation position and the displayed content, and it is easier to proceed to the next step and process the current operation, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solution of the present application, the drawings required for use in the embodiments are briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0042] Figure 1 An operation scenario between a display device and a control device according to some embodiments is shown;

[0043] Figure 2 shows a hardware configuration block diagram of a control device 100 according to some embodiments;

[0044] Figure 3 shows a hardware configuration block diagram of a display device 200 according to some embodiments;

[0045] Figure 4 shows a software configuration diagram in a display device 200 according to some embodiments;

[0046] Figure 5 A flow chart of a display device provided for a feasible embodiment;

[0047] Figure 6A schematic diagram of a user interface provided for a feasible embodiment;

[0048] Figure 7 A schematic diagram of a user interface provided for a feasible embodiment;

[0049] Figure 8 A schematic diagram of a user interface provided for a feasible embodiment;

[0050] Fig. 9 A schematic diagram of a startup navigation interface provided by a feasible embodiment;

[0051] Fig.10 A schematic diagram of an accessible user interface provided by a feasible embodiment;

[0052] Fig.11 A schematic diagram of an accessible user interface provided by a feasible embodiment;

[0053] Fig.12 A schematic diagram of a user interface for setting screen magnification provided by a feasible embodiment;

[0054] Fig.13 A schematic diagram of a user interface provided for a feasible embodiment;

[0055] Fig.14 A schematic diagram of a user interface provided for a feasible embodiment;

[0056] Fig.15 A schematic diagram of a user interface provided for a feasible embodiment;

[0057] Fig.16 A schematic diagram of a user interface provided for a feasible embodiment;

[0058] Fig.17 A schematic diagram of a boot navigation interface provided by a feasible embodiment;

[0059] Fig.18 A schematic diagram of an account login user interface provided by a feasible embodiment;

[0060] Fig.19 A schematic diagram of an electronic program guide user interface provided in a feasible embodiment. DETAILED DESCRIPTION

[0061] In order to make the purpose and implementation method of the present application clearer, the exemplary implementation method of the present application will be clearly and completely described below in conjunction with the drawings in the exemplary embodiments of the present application. Obviously, the described exemplary embodiments are only part of the embodiments of the present application, rather than all the embodiments.

[0062] It should be noted that the brief description of terms in this application is only for the convenience of understanding the embodiments described below, and is not intended to limit the embodiments of this application. Unless otherwise specified, these terms should be understood according to their common and usual meanings.

[0063] The terms "first", "second", "third", etc. in the specification and claims of this application and the above drawings are used to distinguish similar or similar objects or entities, and do not necessarily mean to limit a specific order or sequence, unless otherwise noted. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances.

[0064] The terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover but not exclude inclusion, for example, a product or device comprising a list of components is not necessarily limited to all the components expressly listed but may include other components not expressly listed or inherent to such product or device.

[0065] The display device provided in the embodiments of the present application may have various implementation forms, for example, it may be a television, a smart television, a laser projection device, a monitor, an electronic bulletin board, an electronic table, etc. Figure 1 and Figure 2 This is a specific implementation of the display device of the present application.

[0066] Figure 1 FIG. 1 is a schematic diagram of an operation scenario between a display device and a control device according to an embodiment. Figure 1 As shown, the user can operate the display device 200 through the smart device 300 or the control apparatus 100 .

[0067] In some embodiments, the control device 100 may be a remote controller, and the communication between the remote controller and the display device includes infrared protocol communication or Bluetooth protocol communication, and other short-range communication methods, and the display device 200 is controlled wirelessly or wired. The user may control the display device 200 by inputting user commands through buttons on the remote controller, voice input, control panel input, etc.

[0068] In some embodiments, a smart device 300 (such as a mobile terminal, a tablet computer, a computer, a laptop computer, etc.) may also be used to control the display device 200. For example, the display device 200 is controlled using an application running on the smart device.

[0069] In some embodiments, the display device may not use the above-mentioned smart device or control device to receive instructions, but may receive user control through touch or gestures.

[0070] In some embodiments, the display device 200 can also be controlled in a manner other than the control device 100 and the smart device 300. For example, the user's voice command control can be directly received through a module for obtaining voice commands configured inside the display device 200, or the user's voice command control can be received through a voice control device set outside the display device 200.

[0071] In some embodiments, the display device 200 also communicates data with the server 400. The display device 200 may be allowed to communicate via a local area network (LAN), a wireless local area network (WLAN), and other networks. The server 400 may provide various content and interactions to the display device 200. The server 400 may be one cluster or multiple clusters, and may include one or more types of servers.

[0072] Figure 2 Schematically shows a block diagram of a configuration of the control device 100 according to an exemplary embodiment. Figure 2 As shown, the control device 100 includes a controller 110, a communication interface 130, a user input / output interface 140, a memory, and a power supply. The control device 100 can receive input operation instructions from the user, and convert the operation instructions into instructions that the display device 200 can recognize and respond to, playing the role of an interactive intermediary between the user and the display device 200.

[0073] like Figure 3 The display device 200 includes at least one of a tuner and demodulator 210, a communicator 220, a detector 230, an external device interface 240, a controller 250, a display 260, an audio output interface 270, a memory, a power supply, and a user interface.

[0074] In some embodiments, the controller includes a processor, a video processor, an audio processor, a graphics processor, a RAM, a ROM, and a first interface to an nth interface for input / output.

[0075] The display 260 includes a display screen component for presenting images, and a driving component for driving image display, which is used to receive image signals output from the controller, and display video content, image content, and menu control interface components and user control UI interface.

[0076] The display 260 may be a liquid crystal display, an OLED display, and a projection display, and may also be a projection device and a projection screen.

[0077] The communicator 220 is a component for communicating with an external device or server according to various communication protocol types. For example, the communicator may include at least one of a Wifi module, a Bluetooth module, a wired Ethernet module, and other network communication protocol chips or near field communication protocol chips, and an infrared receiver. The display device 200 can establish transmission and reception of control signals and data signals with the external control device 100 or the server 400 through the communicator 220.

[0078] The user interface can be used to receive control signals from the control device 100 (such as an infrared remote controller, etc.).

[0079] The detector 230 is used to collect signals from the external environment or the external interaction. For example, the detector 230 includes a light receiver, a sensor for collecting the intensity of ambient light; or, the detector 230 includes an image collector, such as a camera, which can be used to collect external environment scenes, user attributes or user interaction gestures; or, the detector 230 includes a sound collector, such as a microphone, etc., for receiving external sounds.

[0080] The external device interface 240 may include, but is not limited to, any one or more of the following interfaces: a high-definition multimedia interface (HDMI), an analog or digital high-definition component input interface (component), a composite video input interface (CVBS), a USB input interface (USB), an RGB port, etc. It may also be a composite input / output interface formed by the above multiple interfaces.

[0081] The tuner-demodulator 210 receives broadcast television signals via wired or wireless reception, and demodulates audio and video signals, such as EPG data signals, from a plurality of wireless or wired broadcast television signals.

[0082] In some embodiments, the controller 250 and the tuner-demodulator 210 may be located in different separate devices, that is, the tuner-demodulator 210 may also be located in an external device of the main device where the controller 250 is located, such as an external set-top box.

[0083] The controller 250 controls the operation of the display device and responds to user operations through various software control programs stored in the memory. The controller 250 controls the overall operation of the display device 200. For example, in response to receiving a user command for selecting a UI object to be displayed on the display 260, the controller 250 can perform operations related to the object selected by the user command.

[0084] In some embodiments, the controller includes a central processing unit (CPU), a video processor, an audio processor, a graphics processing unit (GPU), RAM Random Access Memory (RAM), ROM (Read-Only Memory, ROM), a first interface to an nth interface for input / output, a communication bus (Bus), etc.

[0085] The user may input a user command through a graphical user interface (GUI) displayed on the display 260, and the user input interface receives the user input command through the graphical user interface (GUI). Alternatively, the user may input a user command through a specific sound or gesture, and the user input interface recognizes the sound or gesture through a sensor to receive the user input command.

[0086] "User interface" is a medium interface for interaction and information exchange between an application or operating system and a user. It realizes the conversion between the internal form of information and the form acceptable to the user. The most common form of user interface is the Graphical User Interface (GUI), which refers to a user interface related to computer operation displayed in a graphical way. It can be an interface element such as an icon, window, control, etc. displayed on the display screen of an electronic device, where a control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, and other visual interface elements.

[0087] like Figure 4 As shown, the system of the display device is divided into three layers, namely, the application layer, the middleware layer and the hardware layer from top to bottom.

[0088] The application layer mainly includes commonly used applications on TV and application frameworks. Common applications are mainly applications developed based on browsers, such as HTML5 APPs and native APPs.

[0089] The Application Framework is a complete program model that has all the basic functions required by standard application software, such as file access, data exchange, etc., as well as the user interfaces of these functions (toolbars, status bars, menus, dialog boxes).

[0090] Native apps can support online or offline, message push or local resource access.

[0091] The middleware layer includes various TV protocols, multimedia protocols, system components and other middleware. The middleware can use the basic services (functions) provided by the system software to connect various parts of the application system or different applications on the network, and can achieve the purpose of resource sharing and function sharing.

[0092] The hardware layer mainly includes HAL interface, hardware and driver. Among them, HAL interface is the unified interface for all TV chips to connect, and the specific logic is implemented by each chip. Drivers mainly include: audio driver, display driver, Bluetooth driver, camera driver, WIFI driver, USB driver, HDMI driver, sensor driver (such as fingerprint sensor, temperature sensor, pressure sensor, etc.), and power driver, etc.

[0093] In order to meet the display function requirements of special groups, especially those with poor vision, in some embodiments, the display device 200 can bold the text of the current focus element when displaying the user interface, and add the cSs (Cascading Style Sheets) attribute font-size (font size) to bold it, but the overall elements of this display method are not enlarged, only the text effect is changed, which cannot provide much assistance to people with poor vision and the user experience is poor.

[0094] In order to solve the above technical problems, the present application provides a display device. The structure and functions of each part of the display device can refer to the above embodiments. In addition, based on the display device shown in the above embodiments, this embodiment further improves some functions of the display device, such as Figure 5 As shown, the controller performs the following steps.

[0095] Step S501: receiving a user input instruction to switch the user interface or move the focus;

[0096] In some embodiments, the user may input an instruction to switch the user interface by selecting a page jump control.

[0097] In some embodiments, the user may press a direction key of the control device in the current user interface to input an instruction to move the focus.

[0098] Step S502: In response to a user input instruction to switch the user interface or move the focus, display the user interface.

[0099] The user interface includes at least one control, and the user interface also includes a focus indicating that the control is selected. The control selected by the focus is displayed in the original style of the focus element, and the focus element is the element corresponding to the control selected by the focus.

[0100] It should be noted that in the user interface displayed after detecting user input to switch the user interface or move the focus, the display of the control where the focus is located uses the original selector priority method in the display device to determine the display style of the control, that is, the browser uses priority to determine which attribute values ​​(styles) are most relevant to the focus element, and then applies these attribute values ​​to the focus element.

[0101] In some embodiments, the display device currently displays a user interface such as Figure 6 As shown, Figure 6 The interface shown includes a first display area and a second display area. The first display area includes controls 61-64, and the second display area includes controls 65-66, wherein controls 65-66 are user interface jump controls. Figure 6 The interface shown also includes a focus 67 indicating that any control is selected, and the current focus indicates that control 61 is selected. The user moves the focus 67 to the position of control 65 through the control device and presses the confirmation key. After the display device detects the user input instruction to switch the user interface, it controls the display to display the following in response to the user input instruction: Figure 7 The user interface shown in Figure 7 In the example, the background color of the display frame of the control 71 where the focus 72 is located is changed from white to gray, that is, the original style of the control selected by the focus in the user interface is to change the background color of the display frame to gray.

[0102] In some embodiments, the display device currently displays a user interface such as Figure 6 As shown, the user inputs the instruction to move the focus by pressing the direction key of the control device. After the display device detects the instruction input by the user to move the focus, it controls the display to display the following in response to the instruction input by the user: Figure 8 The user interface shown in Figure 8 , control 61 returns to the state of not being selected by focus, that is, the text font is not bold, and the background color of the display box is white. At this time, the control selected by focus 67 becomes control 62, the text font in control 62 is bold, the background color of the display box is changed from white to gray, and the image is enlarged by 1.03. That is, the original style of the control selected by focus in the user interface is to make the text font bold, change the background color of the display box to gray, and enlarge the image by 1.03.

[0103] In some embodiments, it is also necessary to determine the focus element of the user interface; wherein the focus element is the element corresponding to the control selected by the focus.

[0104] The focus of the display device user interface is uniformly controlled by the component library. In the VUI component library (a component library based on Vue), all elements are obtained and processed, and special class (class, identifier or selector) names are added. It should be noted that in the following text, identifiers and selectors have the same meaning.

[0105] The display of the user interface is mainly realized through the built-in browser mechanism of the display device. The user interface includes at least one control, each control corresponds to an element, and only the element corresponding to the control selected by the focus is called the focus element, that is, only the element containing the id selector "#focus", also known as the focus identifier, is the focus element, and in the internal logic of the VUI component library, there is always one focus element, that is, there is only one focus element in a user interface.

[0106] The document object model (DOM) of the element can be obtained in the VUI component library, and the class name of the current element can be obtained from the document object model. If the current element is the focus element, a focus mark is added to the document object model of the element. Therefore, in some embodiments, the step of determining the focus element of the user interface includes:

[0107] Traversing the elements of the user interface, and detecting whether there is a focus mark in the document object model of the elements of the user interface;

[0108] If there is no focus mark in the document object model of the element of the user interface, determine that the element is a non-focus element of the user interface; and continue to detect whether there is a focus mark in the document object model of the next element.

[0109] If a focus mark exists in the document object model of the element of the user interface, the element is determined to be the focus element of the user interface; and the detection of whether a focus mark exists in the document object model of the next element is stopped.

[0110] Step S503: Detect whether a first identifier exists in the top-level element of the user interface, where the first identifier is used to determine whether a screen magnification switch is turned on;

[0111] The screen magnification switch can be turned on and off by the user.

[0112] In response to a user instruction to turn on a screen magnification switch, a first identifier is added to a top-level element of the user interface.

[0113] In response to a user instruction to turn off a screen magnification switch, the first identifier is removed from the top-level element of the user interface.

[0114] When a user purchases a display device for the first time, the user will enter the startup navigation interface after the first startup. The startup navigation interface can be used to set important data nodes such as the area, network, and user agreement used by the user. If the selected data is not clearly understood here, it will affect the user's subsequent usage experience. In some embodiments, the user can choose whether to turn on the screen magnification switch in the startup navigation interface. Fig. 9 The boot navigation interface shown includes an on control 91 for the screen magnification switch and an off control 92 for the screen magnification switch, and a focus 93 indicating that any control is selected. The user can select the on control 91 to turn on the screen magnification switch, and at the same time, add a first mark to the top-level element of the user interface. The user can also select the off control 92 to turn off the screen magnification switch, and at the same time, remove the first mark from the top-level element of the user interface.

[0115] In some embodiments, if it is not the first time for a user to use a display device, the user can select an accessibility setting control in the setting interface to enter the accessibility setting interface, such as Fig.10 As shown. Fig.10 The user interface shown includes a screen magnification switch control 101, and the screen magnification switch in the current user interface is in an off state. The user can select the screen magnification switch control 101 to change the screen magnification switch state to an on state, and can select the screen magnification switch control 101 again to change the screen magnification switch to an off state.

[0116] This application uses the display device VUI component library to uniformly control the user interface display, and uses the VUI internal function to set the screen magnification effect on and off. The function mainly processes and replaces the style of the html body element (top-level element), using the document.body.classList attribute, that is, adding and deleting class names to the top-level elements. When the screen magnification switch is turned on, add the first identifier to the top-level element, for example: the first identifier is v-zoom-scale; when the screen magnification switch is turned off, remove the first identifier from the top-level element. Specifically, when the screen magnification switch is turned on, dOCUment.body.classList.add(′v-zoom--scale′), and when the screen magnification switch is turned off, document.body.classList.remove(′v-zoom--scale′).

[0117] Among them, v-zoom-scale is the root data, and all algorithms are based on the fact that the zoom style will take effect only when the corresponding style attribute of v-zoom-scale is in effect. This is equivalent to the fact that only when the v-zoom-scale style attribute exists in the outermost layer (top-level element), the CSS (Cascading Style Sheets) based on v-zoom-scale will take effect.

[0118] If it is detected that the top-level element of the user interface does not have the first identifier, the operation related to the display of the control where the focus is located is not performed, that is, the control selected by the focus does not change.

[0119] If it is detected that the top-level element of the user interface has a first identifier, executing step S504: detecting whether a second identifier exists in the document object model of the focus element, the second identifier being used to determine that the user interface belongs to the magnification category;

[0120] In some embodiments of the present application, the overall user interface module can be developed using open source Vue, and each module (user interface) is developed modularly so that each module has its own directory file and root element file. Enter the corresponding module file, add a class attribute, i.e., the second identifier, to the document object model of the module root path element. For example, the second identifier is 'v-zoom--in'. This attribute cooperates with the screen zoom switch function (first identifier) ​​to make the zoom style of the element in focus take effect, so that the control selected by the focus can produce a prominent zoom effect. All focus elements under the current module will show the effect corresponding to the zoom style, and will not affect other elements that are not set with CSS styles, so that the logic fully meets the decoupling standard.

[0121] In some embodiments, when the user turns on the screen magnification switch, a second identifier is added to the document object model of all module root path elements under all modules (user interfaces), and controls corresponding to focus elements under all modules can be magnified.

[0122] In some embodiments, when the user turns on the screen magnification switch, a second identifier is added to the document object model of the root path element of a specific module. The specific module is specified by the manufacturer or operator of the display device. Under these specific modules (user interfaces), controls corresponding to the focus element can be magnified. The specific modules include the boot navigation interface, the electronic program guide interface, and the account input interface.

[0123] In some embodiments, when the user turns on the screen magnification switch, a second identifier is added to the document object model of a specific element of a specific module. The specific module and the specific element are specified by the manufacturer or operator of the display device. Under these specific modules, the controls corresponding to the specific focus elements can be enlarged.

[0124] In some embodiments, under the condition that the user has turned on the screen magnification switch, in response to the user's instruction to set the user interface to the magnification category interface, a second identifier is added to the root path element of the user interface. The user can select in which user interface to display the magnification effect of the control where the focus is located in the screen magnification setting interface. For example: Fig.11 In the barrier-free setting interface shown in FIG. 1 , after the user selects the screen magnification switch control 111, the screen magnification setting user interface is displayed, such as Fig.12 shown. Fig.12 The control includes a switch control 121, a selected all control 122, a power-on navigation interface control 123, an account login interface control 124, an electronic program guide interface control 125, and a focus 126 indicating that the control is selected. After detecting that the user controls the switch control 121 to be turned on and selects the selected all control 122, a second identifier is added to the document object model of the root path element of all user interfaces. If it is detected that the user controls the switch control 121 to be turned on and only the power-on navigation interface control 123 is selected, the second identifier is only added to the document object model of the root path element of the power-on navigation interface.

[0125] In some embodiments, in response to a user instruction to set the user interface to a non-magnification category interface, the second identifier is removed from the root path element of the user interface. The user can select in which user interfaces the effect of magnifying the control where the focus is located is not displayed in the screen magnification setting interface. Fig.12 In the process, it is detected that the user selects the startup navigation interface control 123 to cancel the effect of displaying the zoom focus control in the startup navigation interface, and the second identifier is removed from the document object model of the root path element of the startup navigation module.

[0126] If the second identifier does not exist in the document object model of the focus element, the operation related to the display of the control where the focus is located is not performed, that is, the control selected by the focus does not change.

[0127] If the second identifier is detected in the document object model of the focus element, step S505 is executed: the enlarged styles corresponding to the first identifier and the second identifier are embedded into the original style of the focus element;

[0128] It should be noted that before step S505, it also includes determining which styles (attribute values) are most relevant to the focus element by priority, so as to apply these styles to the focus element. The steps of determining which styles are most relevant to the focus element are:

[0129] Calculate the weights corresponding to different styles; different styles correspond to different types of selectors, and different types of selectors correspond to different weight values. Calculate the sum of the weights of the selectors corresponding to each style;

[0130] The style with the largest sum of weights is selected to display the focused element.

[0131] Among them, the priority of a style can be said to be the sum of four parts (components), which can be considered as the four digits of the four-digit number "ones, tens, hundreds, and thousands", specifically including: 1) Thousands: If the declaration is in the style attribute (inline style), this digit gets one point. Such a declaration has no other selectors, so its total score is 1000. 2) Hundreds: If the selector contains an ID selector, this digit gets one point. 3) Tens: If the selector contains a class selector, an attribute selector, or a pseudo-class, this digit gets one point. 4) Units: If the selector contains an element or pseudo-element selector, this digit gets one point.

[0132] For example: Style 1 sets the background color of the display box to purple, and Style 2 sets the background color of the display box to gray. Style 1 corresponds to one tens selector and two ones selectors, and Style 2 corresponds to four ones selectors. The weight of Style 1 is A1 = 10 × 1 + 1 × 2 = 12; the weight of Style 2 is A2 = 1 × 4 = 4. The weight of Style 1 is greater than the weight of Style 2, A2. Therefore, Style 1 is selected and applied to the focus element, that is, the background color of the control selected by the focus is changed to purple.

[0133] In order to apply the styles corresponding to the first identifier and the second identifier to the focus element, the weights of the first identifier and the second identifier are set to higher weights so that the weights of the styles corresponding to the first identifier and the second identifier are greater than the weights of other styles. If there are no special circumstances, the weights of the styles corresponding to the first identifier and the second identifier are the largest by default. Therefore, the step of determining which style is most relevant to the focus element can be omitted or can be selected to be executed, but the result that the weights of the styles corresponding to the first identifier and the second identifier are the largest by default will not change.

[0134] In some embodiments, the weights of the first identifier and the second identifier are ten-digit weights. The purpose of setting the first identifier and the second identifier to ten-digit weights is to make the sum of the weights of the styles corresponding to the first identifier and the second identifier greater than the weights of other styles, so that the enlarged style corresponding to the first identifier and the second identifier is embedded in the style of the focus element. The purpose of setting the first identifier and the second identifier to ten-digit weights is also to set a hundred-digit weight identifier or more ten-digit weight identifiers in other styles when the enlarged style is not needed for a special user interface or a special focus element.

[0135] After adding the first identifier 'v-zoom--scale' to the top-level element, the style attributes corresponding to the focus element are added through the CSS weight relationship. Using an algorithm with two ten-digit weight levels, after the top-level element is successfully acted on, the CSS hierarchical nesting logic takes effect, making the corresponding style attributes effective in the focus element. The style of the focus element and the magnification style form a nested style, and the control corresponding to the focus element is displayed based on the nested style.

[0136] In some embodiments, the magnification styles corresponding to the first and second identifiers include one or more sub-styles, and the sub-styles include text font magnification, text font bolding, text display position, image magnification, and animation effects, etc. Specifically, it includes: magnifying the font size in the control to a preset multiple, bolding the font in the control to a preset multiple, magnifying the image in the control at a preset ratio, transforming the origin in the control at a preset position, and displaying the font or image in the control with a preset animation effect.

[0137] In some embodiments, the original style of the focus element includes one or more sub-styles, and the sub-styles include: text font enlargement, text font boldness, text display position, image enlargement and animation effects, etc. Specifically, it includes: enlarging the font size in the control to a preset multiple, bolding the font in the control to a preset multiple, enlarging the image in the control at a preset ratio, transforming the origin in the control at a preset position, and displaying the font or image in the control with a preset animation effect.

[0138] The step of embedding the magnification styles corresponding to the first identifier and the second identifier into the style of the focus element includes:

[0139] Traverse the sub-styles of the magnification style and the focus element style;

[0140] The substyle includes a name and a variable corresponding to the name. For example, font-weight: bold, font is the name of the substyle, and bold is the variable of the substyle. The name of the substyle specifically includes font size, image transformation, etc., and the variables of the substyle also include values, etc.

[0141] Determines whether the name of the first sub-style in the magnified style is the same as the name of the first sub-style in the focused element style.

[0142] If the name of the first sub-style in the magnified style is the same as the name of the first sub-style in the focused element style, determine whether the variables of the first sub-style in the magnified style are the same as the variables of the first sub-style in the focused element style;

[0143] If the variables of the first sub-style in the magnified style and the first sub-style in the focused element style are not the same, continue to perform the step of determining whether the names of the first sub-style in the magnified style and the second sub-style in the focused element style are the same;

[0144] If the variables of the first sub-style in the magnified style and the first sub-style in the focused element style are the same, determine whether the variables of the first sub-style in the magnified style and the second sub-style in the focused element style are numerical values;

[0145] If the variables of the first sub-style in the magnified style and the first sub-style in the focused element style are numerical values, then the first sub-style in the magnified style and the first sub-style in the focused element style are merged into a first nested sub-style, and the first sub-style in the magnified style and the first sub-style in the focused element style are deleted. The name of the first nested sub-style is the name of the first sub-style in the magnified style, and the variable of the first nested sub-style is the numerical value obtained by multiplying the variables of the first sub-style in the magnified style and the first sub-style in the focused element style. For example: the first sub-style in the magnified style is font-size: 130% (font size: 130%); the first sub-style in the focused element style is font-size: 130% (font size: 130%), then the first nested sub-style is font-size: 169% (font size: 169%). Because the first sub-style of the focused element style has been deleted, continue to determine whether the second sub-style in the magnified style is the same as the second sub-style of the focused element style.

[0146] If the variables of the first sub-style in the magnified style and the first sub-style in the focused element style are not numerical values, delete any one of the first sub-style in the magnified style and the first sub-style in the focused element style.

[0147] If the name of the first sub-style in the magnified style is different from the name of the first sub-style in the focused element style, continue to determine whether the name of the first sub-style in the magnified style is the same as the name of the second sub-style in the focused element style;

[0148] If the names of the first sub-style in the magnified style and all the sub-styles in the focused element style are different, keep the first sub-style in the magnified style, and continue to determine whether the names of the second sub-style in the magnified style and the first sub-style in the focused element style are the same;

[0149] Until all sub-styles in the magnified style are compared with all sub-styles in the focus element style, the remaining sub-styles in the magnified style, the remaining sub-styles in the focus element style, and the nested sub-styles are collected as a nested style, that is, the style of the focus element embedded in the magnified style.

[0150] For example: the magnification style includes font: bold, font size: 130%, image magnification: 1.03; the focus element style includes: font: bold, display box background color: gray, image magnification: 1.03, then the style of the focus element embedded with the magnification style is font: bold, display box background color: gray, font size: 169%, image magnification: 1.06.

[0151] In some embodiments, preset animation effects may be added to the zoom-in style, including gradual zoom-in, from left to right, flying in, floating in, splitting, and the like.

[0152] Step S506: displaying a control corresponding to the focus element based on the style of the focus element embedded with the magnification style.

[0153] In some embodiments, a control corresponding to the focus element of the style based on the focus element of the magnified style is displayed again on the basis of the original user interface.

[0154] In some embodiments, the magnification style is Image magnification: 1.03, Font: Bold. Figure 7 After display Fig.13 In the user interface shown, the font of the control 71 where the focus 72 is located is bolded and the aspect ratio is enlarged by 1.03 times.

[0155] In some embodiments, the magnification style is Image magnification: 1.03, Font: Bold. Figure 8 After display Fig.14 In the user interface shown, the aspect ratio of the control 62 where the focus 67 is located is enlarged again by 1.03 times, that is, it is enlarged by 1.06 times compared with the aspect ratio of other non-focus selected controls.

[0156] In some embodiments, the magnification style is image magnification: 1.03, and the animation effect is gradual magnification. Figure 8 After display Fig.15 In the user interface shown, the width and height of the control 62 where the focus 67 is located are enlarged by 1.01 times at the first preset time, 1.02 times at the second preset time, and 1.03 times at the third preset time, forming a gradually enlarging animation effect.

[0157] This application does not use any JS (JavaScript, a programming language) functions, and completely uses style weights to control the magnification effect. Not only does it display the effect very quickly, it also does not affect the rendering of other elements and does not generate unnecessary JS garbage data.

[0158] This application combines the situation of display devices to mainly realize the function of magnifying the focus element. In important interactive scenarios, the importance of the selected element needs to be highlighted. Each time the element is selected, it will affect the direction of the subsequent process. Such special scenarios are integrated into a unified function point and managed through unified control, which can be customized and changed later. For example, the magnification ratio of the focus magnification effect and the font boldness multiple can all be configured.

[0159] In some embodiments, if the user has turned on the screen magnification switch, the user can choose in which user interfaces in the screen magnification setting interface not to display the magnification effect of the control where the focus is. A second identifier is added to the root path element of all user interfaces and cannot be removed. In response to the user's instruction to set the user interface to a non-magnification category interface, a third identifier is added to the root path element of the user interface, and the weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier. The style corresponding to the third identifier is the style of the focus element. Therefore, the style corresponding to the third identifier is applied to the focus element, that is, the control selected by the focus in this user interface does not display the magnification effect. Fig.12 In the process, it is detected that the user selects the startup navigation interface control 123, the effect of displaying the magnified control where the focus is located in the startup navigation interface is cancelled, and a third identifier is added to the document object model of the root path element of the startup navigation interface. The style corresponding to the original focus element in the startup navigation interface is applied to the control corresponding to the focus element.

[0160] In some embodiments, under the condition that the user has turned on the screen magnification switch, a second identifier is added to the root path element of all user interfaces and cannot be changed. A third identifier is added to the document object model of the element corresponding to the specific control of the specific user interface, and the weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier. The style corresponding to the third identifier is the style of the focus element, so that the control corresponding to the specific element under the specific module is still not enlarged when it is selected by the focus. The specific control is specified by the manufacturer or operator of the display device.

[0161] In some embodiments, the style corresponding to the third identifier may be other magnification styles. Specifically, by adding the second identifier to the element of the first user interface, the focus element may be matched to one magnification style. By adding the second identifier and the third identifier to the element of the second user interface, the focus element may be matched to another magnification style, so that when the screen magnification switch is turned on, the magnification styles of the focus elements of different user interfaces are different.

[0162] The embodiment of the present application can add different identifiers to different modules or different elements of the same module so as to control the magnification effect of any module and any module element.

[0163] In some embodiments, in response to a user input instruction to switch a user interface or move focus, the focus element of the user interface is determined, and the focus element is the element corresponding to the control selected by the focus; if there is a first identifier in the top-level element of the user interface and there is a second identifier in the document object model of the focus element, the magnification style corresponding to the first identifier and the second identifier is embedded in the style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface belongs to the magnification category; the control corresponding to the focus element is displayed based on the style of the focus element embedded with the magnification style. In an embodiment of the present application, the control corresponding to the focus element is displayed directly based on the style of the focus element embedded with the magnification style. For example: in Figure 6 In the example, the user moves the focus 67 to the position of the control 65 through the control device and presses the confirmation key. After the display device detects the user inputs the instruction to switch the user interface, it controls the display to display the following in response to the user input instruction: Fig.16 The user interface shown in Fig.16 In the example, the background color of the display frame of the control 71 where the focus 72 is located is changed from white to gray, the font is bolded, and the aspect ratio is enlarged by 1.03 times.

[0164] In some embodiments, the user Fig. 9 After selecting the start control 91 in the startup navigation interface shown, the following is displayed: Fig.17 The startup navigation interface shown in the figure. The style corresponding to the focus element is that the display box background is gray, the enlarged style is bold font, the width and height of the display box are enlarged by 1.03 times, and the font is enlarged by 130%. When the user inputs the command to move the focus, the following can be directly displayed: Fig.17 The interface shown in Effect 2. You can also display the following Fig.17 In the user interface shown in effect 1, the style corresponding to the focus element is that the background of the display box is gray. Then the following is displayed: Fig.17 In the user interface shown in effect 2, the style corresponding to the focus element is that the display box background is gray, the magnification style is bold font, the width and height of the display box are magnified by 1.03 times, and the font is magnified by 130%.

[0165] When the boot navigation is set to the account interface or account login interface, the user can enter an existing account or re-create an account. When operating the data interface and data letters, the interface is often an input box with a small font size, and no rendering is performed, making the user input process a very poor experience, and users often choose to skip this step. It will result in the display device function not being fully reflected, and the ultimate function of the display device cannot be experienced. To address the above problems, the text in the input box is also proportionally enlarged, and the currently entered account or password is displayed under the magnified effect, so that the user knows the current input information and content clearly, reducing input errors and abnormal situations. For example: The account login user interface is like Fig.18 As shown. The style corresponding to the focus element is 130% font enlargement, the enlarged style is bold font, the length of the input box is 1.2 times longer, and the font is enlarged by 130%. When the focus is detected to move to the control in the input box, the following can be directly displayed: Fig.18 The interface shown in Effect 2. You can also display the following Fig.18 In the user interface shown in effect 1, the style corresponding to the focus element is that the font is enlarged by 130%, and then displayed as follows Fig.18 In the user interface shown in Effect 2, the font is enlarged by 169%, the font is bolded, and the length of the input box is lengthened by 1.2 times.

[0166] EPG (Electronic Program Guide) is a function that users use frequently. It mainly provides users with program data for different time periods, supports different types of channels, and can view program information for up to 8 days in the future. The embodiment of the present application will amplify the information of the currently selected program, making the currently selected program more obvious, highlighting the current program content, making it easier for users to click and watch, thereby improving the overall program effect ratings. When users select programs, it is easier to find the content of their favorite programs, improving the user experience. For example: the electronic program guide user interface is as follows: Fig.19 As shown. The style corresponding to the focus element is font enlargement 130%, display box enlargement 1.03 times, enlargement style is bold font, display box enlargement 1.03 times, font enlargement 130%. When it is detected that the focus moves to the control in the input box, it can be directly displayed as follows Fig.19 The interface shown in Effect 2. You can also display the following Fig.18 In the user interface shown in effect 1, the style corresponding to the focus element is that the font is enlarged by 130%, the display box is enlarged by 1.03 times, and then the following is displayed: Fig.19 In the user interface shown in Effect 2, the style corresponding to the focus element is bold font, the font is enlarged by 169%, and the display frame is enlarged by 1.06 times.

[0167] This application will magnify each selected element, so that users can understand the content of the selected element more clearly, and reduce the probability and risk of users making mistakes. For users with normal vision, the user experience is improved, and for people with special vision impairments, the visual angle is increased, the presentation effect is more prominent and obvious, and it is easy for special people to find and observe. There is no need to get close to the display device to view the currently selected content, and the user's vision can be protected.

[0168] The embodiment of the present application provides a control display method, which is applicable to a display device, wherein the display device includes at least a display and a controller, wherein the controller is configured to: in response to a user input instruction to switch a user interface or move a focus, display a user interface, wherein the user interface includes at least one control, and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in the original style of the focus element, and the focus element is the element corresponding to the control selected by the focus; if there is a first identifier in the top-level element of the user interface and there is a second identifier in the document object model of the focus element, the magnification style corresponding to the first identifier and the second identifier is embedded in the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface; based on the style of the focus element in which the magnification style has been embedded, the control corresponding to the focus element is displayed. The present application adds a magnification effect again on the basis of the original focus element effect to form an animation transition effect, so that the user can clearly understand the current operation position and the displayed content, and it is easier to proceed to the next step and process the current operation, thereby improving the user experience.

[0169] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

[0170] For the convenience of explanation, the above description has been made in conjunction with specific embodiments. However, the above exemplary discussion is not intended to be exhaustive or limit the embodiments to the specific forms disclosed above. Based on the above teachings, various modifications and variations can be obtained. The selection and description of the above embodiments are to better explain the principles and practical applications, so that those skilled in the art can better use the embodiments and various different variations of the embodiments suitable for specific use considerations.

Claims

1. A display device, characterized in that: include: monitor; The controller is configured as: In response to a user input of an instruction to switch a user interface or move a focus, a user interface is displayed, wherein the user interface includes at least one control and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in an original style of the focus element, and the focus element is an element corresponding to the control selected by the focus; If a first identifier exists in the top-level element of the user interface and a second identifier exists in the document object model of the focus element, embed the magnification styles corresponding to the first identifier and the second identifier into the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface; The control corresponding to the focus element is displayed based on the focus element style in which the magnification style has been embedded.

2. The display device according to claim 1, characterized in that The controller determines the focus element in the following manner: Detecting whether a focus indicator exists in the document object model of an element of the user interface; If a focus identifier exists in the document object model of the element of the user interface, the element is determined to be a focus element of the user interface.

3. The display device according to claim 1, characterized in that The controller is configured to: If there is a third identifier in the document object model of the focus element, and the sum of the weights of the magnification styles corresponding to the first identifier and the second identifier is less than the weight of the style corresponding to the third identifier, the control corresponding to the focus element is displayed in the original style of the focus element, wherein the style corresponding to the third identifier is the original style of the focus element.

4. The display device according to claim 1, characterized in that The controller is configured to: In response to an instruction from a user to set the user interface to enlarge the category interface, adding a second identifier to the document object model of the root path element of the user interface; In response to a user instruction to set the user interface to a non-magnification category interface, removing the second identifier in the document object model of the root path element of the user interface; or, In response to a user instruction to set the user interface to a non-magnification category interface, a second identifier and a third identifier are added to the document object model of the root path element of the user interface, and the weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier.

5. The display device according to claim 1, characterized in that The controller is configured to: In response to a user instruction to turn on a screen magnification switch, a first identifier is added to a top-level element of the user interface.

6. The display device according to claim 1, characterized in that The original style of the focus element or the enlarged styles corresponding to the first identifier and the second identifier include: Enlarging the font size in the control to a preset multiple; and / or, bolding the font in the control to a preset multiple; and / or, Enlarging the image in the control by a preset ratio; and / or, Transforming the origin in the control at a preset position; and / or, The font or image in the control is displayed with a preset animation effect.

7. A control display method, characterized in that: include: In response to a user input of an instruction to switch a user interface or move a focus, a user interface is displayed, wherein the user interface includes at least one control and a focus indicating that the control is selected, wherein the control selected by the focus is displayed in an original style of the focus element, and the focus element is an element corresponding to the control selected by the focus; If a first identifier exists in the top-level element of the user interface and a second identifier exists in the document object model of the focus element, embed the magnification styles corresponding to the first identifier and the second identifier into the original style of the focus element, the first identifier is used to determine that the screen magnification switch is turned on, and the second identifier is used to determine that the user interface is a magnification category interface; The control corresponding to the focus element is displayed based on the focus element style in which the magnification style has been embedded.

8. The method according to claim 7, characterized in that The step of determining the focus element comprises: Detecting whether a focus indicator exists in the document object model of an element of the user interface; If a focus identifier exists in the document object model of the element of the user interface, it is determined that the element is a focus element of the user interface.

9. The method according to claim 7, characterized in that: The method further comprises: If there is a third identifier in the document object model of the focus element, and the sum of the weights of the magnification styles corresponding to the first identifier and the second identifier is less than the weight of the style corresponding to the third identifier, the style of the focus element remains unchanged, the control corresponding to the focus element is displayed unchanged, and the style corresponding to the third identifier is the style of the focus element.

10. The method according to claim 7, characterized in that The method further comprises: In response to an instruction from a user to set the user interface to enlarge the category interface, adding a second identifier to the document object model of the root path element of the user interface; In response to a user instruction to set the user interface to a non-magnification category interface, removing the second identifier in the document object model of the root path element of the user interface; or, In response to a user instruction to set the user interface to a non-magnification category interface, a second identifier and a third identifier are added to the document object model of the root path element of the user interface, and the weight of the third identifier is greater than the sum of the weights of the first identifier and the second identifier.

Images