CN111695071A - Page display method and related device - Google Patents

Page display method and related device Download PDF

Info

Publication number
CN111695071A
CN111695071A CN202010675371.5A CN202010675371A CN111695071A CN 111695071 A CN111695071 A CN 111695071A CN 202010675371 A CN202010675371 A CN 202010675371A CN 111695071 A CN111695071 A CN 111695071A
Authority
CN
China
Prior art keywords
color value
node
target
value
page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010675371.5A
Other languages
Chinese (zh)
Other versions
CN111695071B (en
Inventor
黄权
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangdong Oppo Mobile Telecommunications Corp Ltd
Shenzhen Huantai Technology Co Ltd
Original Assignee
Guangdong Oppo Mobile Telecommunications Corp Ltd
Shenzhen Huantai Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangdong Oppo Mobile Telecommunications Corp Ltd, Shenzhen Huantai Technology Co Ltd filed Critical Guangdong Oppo Mobile Telecommunications Corp Ltd
Priority to CN202010675371.5A priority Critical patent/CN111695071B/en
Publication of CN111695071A publication Critical patent/CN111695071A/en
Application granted granted Critical
Publication of CN111695071B publication Critical patent/CN111695071B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Abstract

The embodiment of the application discloses a page display method and a related device, wherein the method comprises the following steps: determining a first type node in a target page, wherein the first type node is a node which meets a preset condition in the target page; generating a target color value of the first type node according to the initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode; and displaying the target page in a target mode according to the target color value of the first type node. Therefore, in the embodiment of the application, the electronic device can convert the color value of the node meeting the preset condition in the target page, and the rationality of color configuration in the target page is favorably improved.

Description

Page display method and related device
Technical Field
The present application relates to the field of electronic technologies, and in particular, to a page display method and a related device.
Background
With the progress of electronic technology, the application scenes of electronic equipment are more and more, and the functions are more and more abundant. Currently, a user may set the electronic device to different modes in a process of using the electronic device, where the different modes correspond to different contrasts and backgrounds, for example, the user may set the electronic device from a second mode to a first mode, so that a keytone of a page opened when the electronic device is in the first mode is different from a keytone when the electronic device is in the second mode; namely, when the electronic device is in different modes, the background contrast and the color value in the page can be adaptively adjusted so as to meet the eye comfort of the user. For example, a default mode of the current electronic device leaving a factory may be regarded as a second mode, a dark mode or a dark mode is set on a system of the electronic device, and may be regarded as a first mode, and a user may adjust the second mode in the electronic device to the first mode; however, after the current electronic device is adjusted from the second mode to another mode, the electronic device only performs simple color conversion on the whole page, so that a part of the area in the page without color conversion is also converted, and the color collocation of the whole page is unreasonable, and the display effect is poor.
Disclosure of Invention
The embodiment of the application provides a page display method and a related device, which are beneficial to improving the reasonability of color configuration in a target page.
In a first aspect, an embodiment of the present application provides a method for displaying a page, where the method includes:
determining a first type node in a target page, wherein the first type node is a node which meets a preset condition in the target page;
generating a target color value of the first type node according to the initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode;
and displaying the target page in a target mode according to the target color value of the first type node.
In a second aspect, an embodiment of the present application provides a display apparatus for a page, which includes a determining unit, a generating unit and a displaying unit, wherein,
the determining unit is used for determining a first type node in a target page, wherein the first type node is a node which meets a preset condition in the target page;
the generating unit is used for generating a target color value of the first type node according to an initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode;
the display unit is used for displaying the target page in a target mode according to the target color value of the first type node.
In a third aspect, an embodiment of the present application provides an electronic device, including a controller, a memory, a communication interface, and one or more programs, where the one or more programs are stored in the memory and configured to be executed by the controller, and the program includes instructions for executing steps of any one of the methods in the first aspect or the second aspect of the embodiment of the present application.
In a fourth aspect, embodiments of the present application provide a computer-readable storage medium, where the computer-readable storage medium stores a computer program for electronic data exchange, where the computer program enables a computer to perform some or all of the steps described in any one of the methods of the first aspect or the second aspect of the embodiments of the present application.
In a fifth aspect, the present application provides a computer program product, wherein the computer program product comprises a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to perform some or all of the steps as described in any of the methods of the first aspect or the second aspect of the embodiments of the present application. The computer program product may be a software installation package.
It can be seen that, in the embodiment of the present application, first, an electronic device determines a first type node in a target page, where the first type node is a node in the target page that meets a preset condition; secondly, generating a target color value of the first type node according to the initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode; and finally, displaying the target page in a target mode according to the target color value of the first type node. Therefore, in the embodiment of the application, the electronic device can determine the first type node meeting the preset condition in the target page, and then only convert the color value of the first type node when the target page in the target mode is displayed, instead of converting the color value of the whole page by using a single color conversion mode, so that unnecessary color conversion is avoided, and the efficiency of generating and displaying the target page is improved; meanwhile, the electronic equipment can generate the target color value of the first type node according to the initial color value of the first type node, so that the flexibility of color value configuration is improved, and the rationality of color collocation of a target page is favorably improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1A is a block diagram of an electronic device 100 according to an embodiment of the present application;
fig. 1B is a schematic architecture diagram of a software and hardware system provided with an Android system according to an embodiment of the present application;
FIG. 1C is a detailed illustration of a currently conventional electronic device according to an embodiment of the present disclosure;
fig. 2 is a schematic flowchart of a method for displaying a page according to an embodiment of the present application;
FIG. 3 is a schematic diagram illustrating a display target page according to an embodiment of the present disclosure;
FIG. 4 is a schematic flowchart of another page display method provided in the embodiment of the present application;
FIG. 5 is a schematic diagram of a possible structure of a display device for displaying a page according to an embodiment of the present application;
fig. 6 is a schematic view of another possible structure of a display device for a page according to an embodiment of the present application.
Detailed Description
In order to make the technical solutions of the present application better understood, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The terms "first," "second," and the like in the description and claims of the present application and in the above-described drawings are used for distinguishing between different objects and not for describing a particular order. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.
The following describes embodiments of the present application in detail.
Referring to fig. 1A, fig. 1A is a block diagram of an electronic device 100 according to an embodiment of the present disclosure. The electronic device 100 may be a communication-capable electronic device, which may include various handheld devices with wireless communication functions, vehicle-mounted devices, wearable devices, computing devices or other processing devices connected to a wireless modem, as well as various forms of User Equipment (UE), Mobile Stations (MS), terminal Equipment (terminal), and so on. The electronic device 100 in the present application may include one or more of the following components: a processor 110, a memory 120, and an input-output device 130.
Processor 110 may include one or more processing cores. The processor 110 connects various parts within the overall electronic device 100 using various interfaces and lines, and performs various functions of the electronic device 100 and processes data by executing or executing instructions, programs, code sets, or instruction sets stored in the memory 120 and calling data stored in the memory 120. Processor 110 may include one or more processing units, such as: the processor 110 may include a Central Processing Unit (CPU), an Application Processor (AP), a modem processor, a Graphics Processing Unit (GPU), an Image Signal Processor (ISP), a controller, a video codec, a Digital Signal Processor (DSP), a baseband processor, and/or a neural-Network Processing Unit (NPU), etc. The controller may be, among other things, a neural center and a command center of the electronic device 100. The controller can generate an operation control signal according to the instruction operation code and the timing signal to complete the control of instruction fetching and instruction execution. The CPU mainly processes an operating system, a user interface, an application program and the like; the GPU is used for rendering and drawing display content; the modem is used to handle wireless communications. The digital signal processor is used for processing digital signals, and can process digital image signals and other digital signals. For example, when the electronic device 100 selects a frequency bin, the digital signal processor is used to perform fourier transform or the like on the frequency bin energy. Video codecs are used to compress or decompress digital video. The electronic device 100 may support one or more video codecs. In this way, the electronic device 100 may play or record video in a variety of encoding formats, such as: moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, and the like. The NPU is a neural-network (NN) computing processor that processes input information quickly by using a biological neural network structure, for example, by using a transfer mode between neurons of a human brain, and can also learn by itself continuously. Applications such as intelligent recognition of the electronic device 100 can be realized through the NPU, for example: image recognition, face recognition, speech recognition, text understanding, and the like.
A memory may be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may hold instructions or data that have just been used or recycled by the processor 110. If the processor 110 needs to reuse the instruction or data, it can be called directly from the memory. Avoiding repeated accesses, reducing the latency of the processor 110, and increasing system efficiency.
The processor 110 may include one or more interfaces, such as an integrated circuit (I2C) interface, an integrated circuit built-in audio (I2S) interface, a Pulse Code Modulation (PCM) interface, a universal asynchronous receiver/transmitter (UART) interface, a Mobile Industry Processor Interface (MIPI), a general-purpose input/output (GPIO) interface, a Subscriber Identity Module (SIM) interface, and/or a Universal Serial Bus (USB) interface, etc.
The I2C interface is a bi-directional synchronous serial bus that includes a serial data line (SDA) and a Serial Clock Line (SCL). The processor 110 may include multiple sets of I2C interfaces, and may be coupled to a touch sensor, charger, flash, camera, etc., respectively, through different I2C interfaces. For example: the processor 110 may be coupled to the touch sensor via an I2C interface, such that the processor 110 and the touch sensor communicate via an I2C interface to implement touch functionality of the electronic device 100.
The MIPI interface may be used to connect the processor 110 with peripheral devices such as a display screen, a camera, and the like. The MIPI interface includes a Camera Serial Interface (CSI), a Display Serial Interface (DSI), and the like. In some embodiments, processor 110 and the camera communicate via a CSI interface to implement the capture functionality of electronic device 100. The processor 110 and the display screen communicate through the DSI interface to implement the display function of the electronic device 100.
It is to be understood that the processor 110 may be mapped to a System On Chip (SOC) in an actual product, and the processing unit and/or the interface may not be integrated into the processor 110, and the corresponding functions may be implemented by a communication Chip or an electronic component alone. The above-described interface connection relationship between the modules is merely illustrative, and does not constitute a unique limitation on the structure of the electronic apparatus 100.
The Memory 120 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 120 includes a non-transitory computer-readable medium. The memory 120 may be used to store instructions, programs, code sets, or instruction sets. The memory 120 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 implementing at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing various method embodiments described below, and the like, and the operating system may be an Android (Android) system (including a system based on Android system depth development), an IOS system developed by apple inc (including a system based on IOS system depth development), or other systems. The storage data area may also store data created by the electronic device 100 in use (such as audio-video data, chat log data), and the like.
The software system of the electronic device 100 may employ a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes an Android system with a layered architecture as an example, and exemplarily illustrates a software architecture of the electronic device 100.
As shown in fig. 1B, the memory 120 may store a Linux kernel layer 220, a system runtime library layer 240, an application framework layer 260, and an application layer 280, wherein the layers communicate with each other through a software interface, and the Linux kernel layer 220, the system runtime library layer 240, and the application framework layer 260 belong to an operating system space.
The application layer 280 belongs to a user space, and at least one application program runs in the application layer 280, and the application programs may be native application programs carried by an operating system, or third-party application programs developed by third-party developers, and specifically may include application programs such as passwords, eye tracking, cameras, gallery, calendar, call, map, navigation, WLAN, bluetooth, music, video, short messages, and the like.
The application framework layer 260 provides various APIs that may be used by applications that build the application layer, and developers may also build their own applications by using these APIs, such as a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, a message manager, an activity manager, a package manager, and a location manager.
The window manager is used for managing window programs. The window manager can obtain the size of the display screen, judge whether a status bar exists, lock the screen, intercept the screen and the like. In the embodiment of the application, the window manager can adjust the position, size and direction of the target page in the display screen so as to meet the requirements of a user on browsing and operating the target page in different scenes.
The content provider is used to store and retrieve data and make it accessible to applications. The data may include video, images, audio, calls made and answered, browsing history and bookmarks, phone books, etc.; specifically, the electronic device may generate the content displayed in the target page from the content in the content provider.
The view system includes visual controls such as controls to display text, controls to display pictures, and the like. The view system may be used to build applications. The display interface may be composed of one or more views. For example, the display interface including the short message notification icon may include a view for displaying text and a view for displaying pictures.
The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, and the like.
The Linux kernel layer 220 provides underlying drivers for various hardware of the electronic device 100, such as a display driver, an audio driver, a camera driver, a Bluetooth driver, a Wi-Fi driver, power management, and the like.
In the following, a conventional electronic device will be described in detail with reference to fig. 1C, and it should be understood that the configuration illustrated in the embodiment of the present application is not intended to specifically limit the electronic device 100. In other embodiments of the present application, electronic device 100 may include more or fewer components than shown, or some components may be combined, some components may be split, or a different arrangement of components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.
As shown in fig. 1C, the electronic device 100 includes a system on chip 410, an external memory interface 420, an internal memory 421, a Universal Serial Bus (USB) interface 430, a charging management module 440, a power management module 441, a battery 442, an antenna 1, an antenna 2, a mobile communication module 450, a wireless communication module 460, an audio module 470, a speaker 470A, a receiver 470B, a microphone 470C, a sensor module 480, a button 490, a motor 491, an indicator 492, a camera 493, a display screen 494, an infrared transmitter 495, a Subscriber Identity Module (SIM) card interface 496, and the like. The sensor module 480 may include a pressure sensor 480A, a gyroscope sensor 480B, an air pressure sensor 480C, a magnetic sensor 480D, an acceleration sensor 480E, a distance sensor 480F, a proximity light sensor 480G, a fingerprint sensor 480H, a temperature sensor 480J, a touch sensor 480K, an ambient light sensor 480L, a bone conduction sensor 480M, and the like.
The electronic device 100 implements display functions via the GPU, the display screen 494, and the application processor, among other things. The GPU is an image processing microprocessor connected to a display screen 494 and an application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 440 may include one or more GPUs that execute program instructions to generate or alter display information. In the embodiment of the application, when the electronic device 100 detects an instruction to open a target page, the GPU may render according to data of each node in the target page, and further generate the target page, and display the target page on the display screen; specifically, the GPU may obtain an initial color value of each node in the target page, calculate a target color value according to the initial color value, perform rendering according to the target color value of each node in the target page and data included in each node to generate the target page, and then display the target page in the target mode on the display screen of the electronic device.
The display screen 494 is used to display images, videos, and the like. The display screen 494 includes a display panel. The display panel may be a Liquid Crystal Display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (active-matrix organic light-emitting diode, AMOLED), a flexible light-emitting diode (FLED), a miniature, a Micro-oeld, a quantum dot light-emitting diode (QLED), or the like. In some embodiments, the electronic device 100 may include 1 or N display screens 494, N being a positive integer greater than 1. In this embodiment, the display screen 494 can be used to display target pages in different modes on the display screen.
The ISP is used to process the data fed back by the camera 493. For example, when a photo is taken, the shutter is opened, light is transmitted to the camera photosensitive element through the lens, the optical signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing and converting into an image visible to naked eyes. The ISP can also carry out algorithm optimization on the noise, brightness and skin color of the image. The ISP can also optimize parameters such as exposure, color temperature and the like of a shooting scene. In some embodiments, the ISP may be provided in camera 493. In the embodiment of the application, the ISP can be used for processing the air gesture and the image data of the eyeball acquired by the camera, and further generating an instruction for opening the target page.
The camera 493 is used to capture still images or video. The object generates an optical image through the lens and projects the optical image to the photosensitive element. The photosensitive element may be a Charge Coupled Device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The light sensing element converts the optical signal into an electrical signal, which is then passed to the ISP where it is converted into a digital image signal. And the ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into image signal in standard RGB, YUV and other formats. In some embodiments, the electronic device 100 may include 1 or N cameras 493, N being a positive integer greater than 1. In the embodiment of the present application, the camera 493 may capture an eyeball image of the user and a hand image of the user, then determine a gaze point of the user on the display interface and an air-separating gesture of the user according to an eyeball tracking technique and a hand recognition technique, and generate an instruction to open the target page according to the gaze point and the air-separating gesture of the user.
The external memory interface 420 may be used to connect an external memory card, such as a Micro SD card, to extend the memory capability of the electronic device 100. The external memory card communicates with the processor 440 through the external memory interface 420 to implement a data storage function. For example, files such as music, video, etc. are saved in an external memory card. In this embodiment, the electronic device 100 may use an application program to read data acquired through the external storage interface 420, and display the data acquired from the external storage interface 420 in a target page.
The internal memory 421 may be used to store computer-executable program code, including instructions. The processor 440 executes various functional applications of the electronic device 100 and data processing by executing instructions stored in the internal memory 421. The internal memory 421 may include a program storage area and a data storage area. Wherein the storage program area may store an operating system, an application program required for at least one function, and the like. The storage data area may store data created during use of the electronic device 100, and the like. In addition, the internal memory 421 may include a high-speed random access memory, and may further include a nonvolatile memory, such as at least one disk storage device, a flash memory device, a universal flash memory (UFS), and the like. In this embodiment of the application, the internal memory 421 may be configured to store a calculation policy of a color value, so that the electronic device 100 may read the calculation policy of the color value in the internal memory 421, generate a target color value of a node according to the calculation policy of the color value and an initial color value of the node, and display a target page in a target mode according to the target color value of the node.
The touch sensor 480K is also referred to as a "touch panel". The touch sensor 480K may be disposed on the display screen 494, and the touch sensor 480K and the display screen 494 form a touch screen, which is also referred to as a "touch screen". The touch sensor 480K is used to detect a touch operation applied thereto or thereabout. The touch sensor can communicate the detected touch operation to the application processor to determine the touch event type. Visual output associated with the touch operation may be provided through the display screen 494. In other embodiments, the touch sensor 480K may be disposed on a surface of the electronic device 100 at a different position than the display screen 494. In this embodiment of the application, the touch sensor 480K may detect a position touched by a user in the display screen, determine content information corresponding to the position in the target page, and generate an instruction associated with the content information.
The infrared transmitter 495 may be an infrared lamp and may emit infrared light to illuminate a human face to form a light spot on the human eye. In this embodiment of the application, the infrared transmitter 495 may assist in performing eye tracking, determine a moving trajectory of a gaze point of a user in a target page, and generate an instruction associated with the target page, for example, when the user annotates the target page, the electronic device 100 may determine the gaze point of the user with the aid of the infrared transmitter 495, and if a staying time of the gaze point in an area corresponding to first information in the target page is greater than or equal to a preset time, the electronic device 100 generates a selection instruction for the first information.
Referring to fig. 2, fig. 2 is a schematic flowchart illustrating a page display method according to an embodiment of the present application, where the page display method according to the embodiment of the present application is applicable to an electronic device, and as shown in the figure, the page display method includes:
in step 201, the electronic device determines a first type node in a target page.
And the first type node is a node which meets a preset condition in the target page. The target page is composed of Document Object Model (DOM) nodes, specifically, the electronic device can traverse the DOM nodes in the target page, screen out DOM nodes meeting preset conditions, and determine that the DOM nodes meeting the preset conditions are first type nodes; wherein the preset condition can be set by a developer;
the target page is a page that satisfies hypertext Markup Language (HTML), and specifically, the target page is a page that satisfies HTML 5.0.
Optionally, the preset condition may be: the nodes comprise labels of preset types; or the parameters of the node meet set criteria.
It should be noted that "class name" in the specification and claims of the present application is a representation for representing the node characteristics, and any variation of "class name" shall fall within the scope of the present application, and for example, the term "class name" in the present application is replaced with terms such as "label", "attribute" and "parameter" and the like, and all shall fall within the scope of the present application.
Step 202, the electronic device generates a target color value of the first type node according to an initial color value of the first type node, where the initial color value is a color value corresponding to the node when the target page is in the initial mode.
Wherein the initial color value is a default color value; when the target page is in different modes, the nodes in the target page can express different color values; when the target page is in the target mode, the electronic device can calculate the corresponding target color value of the first type node in the target mode according to the initial color value of the first type node. Wherein, the initial color value and the target color value may both be color values in RGB format.
Step 203, the electronic device displays a target page in the target mode according to the target color value of the first type node.
Specifically, the target pattern may be a dark pattern.
It can be seen that, in the embodiment of the present application, first, the electronic device determines a first type node in a target page, where the first type node is a node that meets a preset condition in the target page; secondly, generating a target color value of the first type node according to the initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode; and finally, displaying the target page in the target mode according to the target color value of the first type node. Therefore, in the embodiment of the application, the electronic device can determine the first type node meeting the preset condition in the target page, and then only convert the color value of the first type node when the target page in the target mode is displayed, instead of converting the color value of the whole page by using a single color conversion mode, so that unnecessary color conversion is avoided, and the efficiency of generating and displaying the target page is improved; meanwhile, the electronic equipment can generate the target color value of the first type node according to the initial color value of the first type node, so that the flexibility of color value configuration is improved, and the rationality of color collocation of a target page is favorably improved.
In one possible example, the preset conditions are: the node does not contain a filtering class name; or the initial color value of the node is in a preset range; or, the node does not contain the filter class name and the initial color value of the node is within the preset range.
When the node contains the filtering class name, the electronic equipment can skip the node, so that the color value of the node in the target mode is kept unchanged.
Wherein the preset range can be set by a developer; if the initial color value of the node is not in the preset range, the color value of the node in the initial mode and the target mode is kept unchanged; if the initial color value of the node is within the preset range, the electronic device can generate the target color value of the node according to the initial color value of the node.
In one possible example, the preset condition is that the node does not contain the filtering class name, and determining a first type node in the target page comprises: traversing each node in the target page, and determining a first number of nodes, wherein the first number of nodes are all nodes not containing the filtering class name, and the first number is a positive integer; a first number of nodes is determined to be a first type of node.
Therefore, in the example, the electronic device can screen out the nodes which do not contain the filtering class names in the target page, so that the electronic device does not need to convert the color values of the nodes containing the filtering class names in the color value conversion process, the data volume of color value conversion for the target page is reduced, the efficiency of generating the target page in the target mode is improved, and the efficiency of displaying the target page is improved.
In one possible example, the determining the first type node in the destination page with the preset condition that the initial color value of the node is within a preset range includes: traversing each node in the target page, and determining a second number of nodes, wherein the initial color value of each node in the second number of nodes is within a preset range, and the second number is a positive integer; determining a second number of nodes as the first type of node.
It can be seen that, in this example, the electronic device may determine that the node having the color value within the preset range is the first type node, so that when the target page in the target mode is generated, only the color value within the preset range needs to be converted, and the conversion of the color value has pertinence, so that the color configuration in the target page is more flexible, and the color display of the target page is more reasonable.
In one possible example, the determining the first type node in the destination page includes: traversing each node in the target page, and determining a third number of nodes, wherein the third number of nodes are all nodes not containing the filtering class name, and the third number is a positive integer; determining a fourth number of nodes in the third number of nodes, wherein the fourth number of nodes are nodes with the initial color values of the nodes within a preset range, and the fourth number of nodes is a positive integer; determining the fourth number of nodes as the first type of nodes.
Therefore, in this example, the electronic device may filter the nodes in the target page according to whether the filtering class name and the color value are within the preset range, and then determine the first type of node in the target page.
In one possible example, before determining the first type of node in the target page, the method further comprises: a first background contrast of the system is obtained.
The first background contrast is a contrast of a system of the electronic device in a first mode, and specifically, the first background contrast is a dark background contrast; the first mode is a dark mode.
In one possible example, generating a target color value for a first type node from an initial color value for the first type node comprises: and calculating the target color value of the first type node according to the first background contrast and the initial color value.
Therefore, in this example, the electronic device can calculate the target color value according to the first background contrast and the initial color value of the system, so that the display effect of the target page and the display effect of the system are more adaptive, and further, the color display effect of the target page in the target mode is more reasonable.
In one possible example, the initial color value is a color value in RGB format, and the calculating the target color value of the first type node according to the first background contrast and the initial color value includes: converting the color format of the initial color value to obtain a first color value, wherein the first color value is a color value in a Lab format; calculating to obtain a target L value according to the first background contrast, a preset calculation strategy and the first color value; replacing the L value in the first color value with the target L value to obtain a second color value; and converting the color format of the second color value to obtain a target color value, wherein the target color value is a color value in an RGB format.
The attribute of the initial color value may have transparency, and when the attribute of the initial color value has transparency, the initial color value is in an RGBA format.
Where L values in Lab format indicate brightness and a and b indicate two color channels.
As can be seen, in this example, the electronic device may calculate the target color value, so as to display the target page according to the target color value subsequently.
In one possible example, the calculating the target L value according to the first background contrast, the preset calculation strategy, and the first color value includes: calculating to obtain a first L value according to the initial L value in the first color value; judging whether the first L value is larger than the initial L value; if not, determining that the target L value is equal to the initial L value; if yes, then: under the condition that the first background contrast is not equal to a first preset value, a target L value is obtained through calculation according to a first formula, wherein the first formula is as follows: l1 ═ M + ((L2-M)/M) × (N-M), where L1 represents the target L value, L2 represents the first L value, and M represents the second preset value; in the case that the first background contrast is equal to the first preset value, the target L value is equal to the first L value.
Specifically, in the embodiment of the present application, the first preset value is equal to-1, and the second preset value is equal to 50, that is, the first formula is: l1 ═ 50+ ((L2-50)/50) × (N-50).
Wherein the first L value is equal to the difference between the third preset value and the initial L value; specifically, the third preset value in the embodiment of the present application is equal to 100, i.e., L2 is equal to 100-L3, where L3 represents the initial L value.
In this example, it can be seen that the electronic device can calculate the target L value by combining the first background contrast and the first color value,
in one possible example, the first type node includes a transition class name, and before the target L value is calculated according to the first background contrast, the preset calculation policy, and the first color value, the method further includes: and querying a preset database by taking the transition class name as a query identifier to obtain a preset calculation strategy corresponding to the query identifier, wherein the preset database comprises a matching relation between the transition class name and the calculation strategy.
When a developer designs a target webpage, different transition class names can be added to different nodes, so that different calculation strategies can be determined by the electronic equipment according to the different transition class names, and then color value conversion is carried out on the nodes in a targeted mode, and the function of customizing a conversion color value range through the class names is achieved.
For example, a developer may add different transition class names to corresponding nodes in a title bar, a picture, a navigation bar, and the like in a target page, and then execute different calculation strategies according to the characteristics of the above-mentioned regions when the target page is displayed, so as to achieve a better visual effect.
Therefore, in this example, the electronic device can determine the calculation strategy corresponding to the node according to the transition class name, so that the electronic device can perform the adaptive calculation strategy according to different nodes, and further, the display effect of the final target page is improved, and the intelligence of the electronic device is improved.
In one possible example, before obtaining the first background contrast of the system, the method further comprises: detecting a load instruction aiming at a target page; it is determined that the system is currently in the first mode.
Wherein, detecting the load instruction for the target page may be: the electronic equipment detects that a user touches an area corresponding to a target website on a display screen, wherein the target website is a website corresponding to a target page; or the electronic equipment detects that the time length of the target website annotated by the user is greater than or equal to the preset time length through an eyeball tracking technology.
Wherein the system may have a second mode and a first mode; when the system is in the second mode, the mode corresponding to the target page is the initial mode; when the system is in the first mode, the mode corresponding to the target page is the target mode.
The contrast of the system when the electronic device is in the second mode is a second background contrast, the contrast of the system when the electronic device is in the first mode is a first background contrast, and the first background contrast and the second background contrast are different.
In particular, the second mode may be a default mode of the system, and the first mode is a dark mode or a dark mode in the system of the electronic device.
For example, please refer to fig. 3, where fig. 3 is a schematic diagram illustrating a target page provided in the embodiment of the present application, as shown in the figure, after a user clicks an icon corresponding to the target page in a page a, the electronic device jumps to an interface corresponding to the target page, where, because a title bar in the target page and a node corresponding to a picture do not satisfy a preset condition, color values of a title bar area and a picture are not converted; the color value of the background of the target page in the initial mode is white, and the nodes corresponding to the background of the target page meet the preset conditions, so that the electronic equipment executes color value conversion, and the color value of the background of the target page in fig. 3 is black.
It can be seen that, in this example, the electronic device first needs to detect the mode of the current system, and under the condition that the system is in the first mode, the color value of the first type node in the target page is converted to implement adaptation following the system, so that the intelligence of the electronic device is improved.
Referring to fig. 4, fig. 4 is a schematic flowchart of another page display method provided in the embodiment of the present application, where the page display method in the embodiment of the present application is applicable to an electronic device, and as shown in the figure, the page display method includes:
in step 301, the electronic device detects a load instruction for a target page.
In step 302, the electronic device determines that the system is currently in a first mode.
Step 303, the electronic device obtains a first background contrast of the system.
Step 304, the electronic device traverses each node in the target page to determine a third number of nodes, where the third number of nodes are all nodes that do not include the filtering class name, and the third number is a positive integer.
In step 305, the electronic device determines a fourth number of nodes in the third number of nodes, where the fourth number of nodes is a node whose initial color value is within a preset range, and the fourth number is a positive integer.
In step 306, the electronic device determines the fourth number of nodes as the first type of nodes.
Step 307, the electronic device generates a target color value of the first type node according to the first background contrast and the initial color value of the first type node, where the initial color value is a color value corresponding to the node when the target page is in the initial mode.
And 308, the electronic equipment displays the target page in the target mode according to the target color value of the first type node.
Therefore, in the embodiment of the application, the electronic device can determine the first type node meeting the preset condition in the target page, and then only convert the color value of the first type node when the target page in the target mode is displayed, instead of converting the color value of the whole page by using a single color conversion mode, so that unnecessary color conversion is avoided; meanwhile, the electronic equipment can generate the target color value of the first type node according to the initial color value of the first type node, so that the flexibility of color value configuration is improved, and the rationality of color collocation of a target page is favorably improved.
The embodiment of the application provides a display device of a page, which may be an electronic device 100. Specifically, the display device of the page is used for executing the steps of the display method of the page. The display device for the page provided by the embodiment of the application can comprise modules corresponding to the corresponding steps.
In the embodiment of the present application, the display device of the page may be divided into the functional modules according to the above method, for example, each functional module may be divided corresponding to each function, or two or more functions may be integrated into one processing module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The division of the modules in the embodiment of the present application is schematic, and is only a logic function division, and there may be another division manner in actual implementation.
Fig. 5 shows a schematic diagram of a possible structure of a display device of a page according to the above-described embodiment, in a case where functional modules are divided for respective functions. As shown in fig. 5, the display apparatus 500 of the page includes a determination unit 501, a generation unit 502, and a display unit 503.
In the case where the display device of the page is the electronic apparatus 100:
the determining unit 501 is configured to determine a first type node in a target page, where the first type node is a node in the target page that meets a preset condition;
the generating unit 502 is configured to generate a target color value of the first type node according to an initial color value of the first type node, where the initial color value is a color value corresponding to a node when the target page is in an initial mode;
the display unit 503 is configured to display the destination page in the destination mode according to the destination color value of the first type node.
All relevant contents of each step related to the above method embodiment may be referred to the functional description of the corresponding functional module, and are not described herein again. Of course, the display device of the page provided in the embodiment of the present application includes, but is not limited to, the above modules.
In the case of using an integrated unit, a schematic structural diagram of a display device for a page provided in an embodiment of the present application is shown in fig. 6. In fig. 6, a display device 600 of a page includes: a processing module 601 and a communication module 602. The processing module 601 is used for controlling and managing the actions of the display device of the page. The communication module 602 is used to support interaction between the display of the page and other devices. As shown in fig. 6, the display device of the page may further include a storage module 603, and the storage module 603 is used for storing program codes and data of the display device of the page.
The processing module 601 may be a Processor or a controller, and may be, for example, a Central Processing Unit (CPU), a general-purpose Processor, a Digital Signal Processor (DSP), an ASIC, an FPGA or other programmable logic device, a transistor logic device, a hardware component, or any combination thereof. Which may implement or perform the various illustrative logical blocks, modules, and circuits described in connection with the disclosure. The processor may also be a combination of computing functions, e.g., comprising one or more microprocessors, DSPs, and microprocessors, among others. The communication module 602 may be a transceiver, an RF circuit or communication interface, or the like. The storage module 603 may be a memory.
All relevant contents of each scene related to the method embodiment may be referred to the functional description of the corresponding functional module, and are not described herein again. Both the display apparatus 500 of the page and the display apparatus 600 of the page may perform the display method of the page shown in fig. 2 and 4.
Embodiments of the present application also provide a computer storage medium, where the computer storage medium stores a computer program for electronic data exchange, and the computer program enables a computer to execute part or all of the steps of any one of the methods described in the above method embodiments, and the computer includes a mobile terminal.
Embodiments of the present application also provide a computer program product comprising a non-transitory computer readable storage medium storing a computer program operable to cause a computer to perform some or all of the steps of any of the methods as described in the above method embodiments. The computer program product may be a software installation package, the computer comprising a mobile terminal.
It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
In the foregoing embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus may be implemented in other manners. For example, the above-described embodiments of the apparatus are merely illustrative, and for example, the above-described division of the units is only one type of division of logical functions, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of some interfaces, devices or units, and may be an electric or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, each functional unit in the embodiments of the present application may be integrated into one control unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit may be stored in a computer readable memory if it is implemented in the form of a software functional unit and sold or used as a stand-alone product. Based on such understanding, the technical solution of the present application may be substantially implemented or a part of or all or part of the technical solution contributing to the prior art may be embodied in the form of a software product stored in a memory, and including several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the above-mentioned method of the embodiments of the present application. And the aforementioned memory comprises: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic disk, or an optical disk, which can store program codes.
Those skilled in the art will appreciate that all or part of the steps in the methods of the above embodiments may be implemented by associated hardware instructed by a program, which may be stored in a computer-readable memory, which may include: flash Memory disks, Read-Only memories (ROMs), Random Access Memories (RAMs), magnetic or optical disks, and the like.
The foregoing detailed description of the embodiments of the present application has been presented to illustrate the principles and implementations of the present application, and the above description of the embodiments is only provided to help understand the method and the core concept of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.

Claims (14)

1. A method for displaying a page, the method comprising:
determining a first type node in a target page, wherein the first type node is a node which meets a preset condition in the target page;
generating a target color value of the first type node according to the initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode;
and displaying the target page in a target mode according to the target color value of the first type node.
2. The method according to claim 1, wherein the preset condition is:
the node does not contain a filtering class name;
or the initial color value of the node is in a preset range;
or, the node does not contain the filter class name and the initial color value of the node is within the preset range.
3. The method according to claim 2, wherein the preset condition is that the node does not contain a filtering class name, and the determining the first type node in the target page comprises:
traversing each node in the target page to determine a first number of nodes, wherein the first number of nodes are all nodes not containing the filtering class name, and the first number is a positive integer;
determining the first number of nodes as the first type of node.
4. The method of claim 2, wherein the predetermined condition is that the initial color value of the node is within a predetermined range, and the determining the first type of node in the destination page comprises:
traversing each node in the target page to determine a second number of nodes, wherein the initial color value of each node in the second number of nodes is within the preset range, and the second number is a positive integer;
determining the second number of nodes as the first type of node.
5. The method of claim 2, wherein the predetermined condition is that the node does not contain a filtering class name and an initial color value of the node is within a predetermined range, and the determining the first type node in the destination page comprises:
traversing each node in the target page to determine a third number of nodes, wherein the third number of nodes are all nodes not containing the filtering class name, and the third number is a positive integer;
determining a fourth number of nodes in the third number of nodes, wherein the fourth number of nodes are nodes of which the initial color values are within the preset range, and the fourth number of nodes is a positive integer;
determining the fourth number of nodes as the first type of node.
6. The method of any of claims 1-5, wherein prior to determining the first type of node in the target page, the method further comprises:
a first background contrast of the system is obtained.
7. The method of claim 6, wherein the generating the target color value of the first type node from the initial color value of the first type node comprises:
and calculating the target color value of the first type node according to the first background contrast and the initial color value.
8. The method of claim 7, wherein the initial color value is a color value in RGB format, and the calculating the target color value of the first type node according to the first background contrast and the initial color value comprises:
performing color format conversion on the initial color value to obtain a first color value, wherein the first color value is a color value in a Lab format;
calculating to obtain a target L value according to the first background contrast, a preset calculation strategy and the first color value;
replacing the L value in the first color value with the target L value to obtain a second color value;
and converting the color format of the second color value to obtain the target color value, wherein the target color value is a color value in an RGB format.
9. The method of claim 8, wherein calculating the target L value according to the first background contrast, a preset calculation strategy, and the first color value comprises:
calculating to obtain a first L value according to an initial L value in the first color value;
judging whether the first L value is larger than the initial L value;
if not, determining that the target L value is equal to the initial L value;
if yes, then: under the condition that the first background contrast is not equal to a first preset value, calculating to obtain the target L value according to a first formula, wherein the first formula is as follows:
L1=M+((L2-M)/M)*(N-M)
wherein L is1Represents the target L value, L2Represents the first L value, and M represents a second preset numerical value;
the target L value is equal to the first L value in case the first background contrast is equal to a first preset value.
10. The method of claim 8, wherein the first type node comprises a transition class name, and wherein before calculating the target L value according to the first background contrast, a preset calculation strategy, and the first color value, the method further comprises:
and inquiring a preset database by taking the transition class name as an inquiry identifier to acquire the preset calculation strategy corresponding to the inquiry identifier, wherein the preset database comprises a matching relation between the transition class name and the calculation strategy.
11. The method of any of claims 6-10, wherein prior to acquiring the first background contrast of the system, the method further comprises:
detecting a load instruction for the target page;
it is determined that the system is currently in the first mode.
12. A display device of a page, characterized in that the display device of the page comprises a determining unit, a generating unit and a display unit, wherein,
the determining unit is used for determining a first type node in a target page, wherein the first type node is a node which meets a preset condition in the target page;
the generating unit is used for generating a target color value of the first type node according to an initial color value of the first type node, wherein the initial color value is a color value corresponding to the node when the target page is in an initial mode;
the display unit is used for displaying the target page in a target mode according to the target color value of the first type node.
13. An electronic device comprising a processor, a memory, a communication interface, and one or more programs stored in the memory and configured to be executed by the processor, the programs comprising instructions for performing the steps in the method of any of claims 1-11.
14. A computer-readable storage medium, characterized in that a computer program for electronic data exchange is stored, wherein the computer program causes a computer to perform the method according to any one of claims 1-11.
CN202010675371.5A 2020-07-14 2020-07-14 Page display method and related device Active CN111695071B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010675371.5A CN111695071B (en) 2020-07-14 2020-07-14 Page display method and related device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010675371.5A CN111695071B (en) 2020-07-14 2020-07-14 Page display method and related device

Publications (2)

Publication Number Publication Date
CN111695071A true CN111695071A (en) 2020-09-22
CN111695071B CN111695071B (en) 2024-04-09

Family

ID=72485642

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010675371.5A Active CN111695071B (en) 2020-07-14 2020-07-14 Page display method and related device

Country Status (1)

Country Link
CN (1) CN111695071B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434042A (en) * 2020-12-03 2021-03-02 深圳市欢太科技有限公司 Data relationship construction method and device, electronic equipment and storage medium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104978119A (en) * 2014-05-22 2015-10-14 腾讯科技(深圳)有限公司 Information window display method and device, and user terminal
CN107179889A (en) * 2016-03-09 2017-09-19 阿里巴巴集团控股有限公司 Interface color conditioning method, webpage color conditioning method and device
US20180106629A1 (en) * 2016-10-17 2018-04-19 International Business Machines Corporation Generation of route network data for movement
CN110955428A (en) * 2019-11-27 2020-04-03 北京奇艺世纪科技有限公司 Page display method and device, electronic equipment and medium

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104978119A (en) * 2014-05-22 2015-10-14 腾讯科技(深圳)有限公司 Information window display method and device, and user terminal
CN107179889A (en) * 2016-03-09 2017-09-19 阿里巴巴集团控股有限公司 Interface color conditioning method, webpage color conditioning method and device
US20180106629A1 (en) * 2016-10-17 2018-04-19 International Business Machines Corporation Generation of route network data for movement
CN110955428A (en) * 2019-11-27 2020-04-03 北京奇艺世纪科技有限公司 Page display method and device, electronic equipment and medium

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112434042A (en) * 2020-12-03 2021-03-02 深圳市欢太科技有限公司 Data relationship construction method and device, electronic equipment and storage medium

Also Published As

Publication number Publication date
CN111695071B (en) 2024-04-09

Similar Documents

Publication Publication Date Title
CN111782102B (en) Window display method and related device
WO2020238774A1 (en) Notification message preview method and electronic device
CN114397978B (en) Application display method and electronic equipment
WO2021000841A1 (en) Method for generating user profile photo, and electronic device
CN113778663B (en) Scheduling method of multi-core processor and electronic equipment
CN114816167B (en) Application icon display method, electronic device and readable storage medium
CN114327666A (en) Application starting method and device and electronic equipment
CN111553846A (en) Super-resolution processing method and device
CN114168128A (en) Method for generating responsive page, graphical user interface and electronic equipment
WO2023273543A1 (en) Folder management method and apparatus
CN111695071B (en) Page display method and related device
CN111880661A (en) Gesture recognition method and device
CN111381996A (en) Memory exception handling method and device
CN114117269B (en) Memo information collection method and device, electronic equipment and storage medium
CN111880714B (en) Page control method and related device
CN115242983A (en) Photographing method, electronic device, computer program product, and readable storage medium
CN115390738A (en) Scroll screen opening and closing method and related product
CN114594882A (en) Feedback method, device and system
CN115079810A (en) Information processing method and device, main control equipment and controlled equipment
CN110347438A (en) Function selection method, function selection device and mobile terminal
WO2023071718A1 (en) Floating window adjusting method and electronic device
CN115623319B (en) Shooting method and electronic equipment
CN115933952B (en) Touch sampling rate adjusting method and related device
WO2023045702A1 (en) Information recommendation method and electronic device
WO2024037346A1 (en) Page management method and electronic device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant