Method for displaying content and electronic device supporting same

Abstract

An electronic device disclosed in the present document may comprise a display, a memory, and at least one processor including a processing circuit. The memory may store instructions that, when individually or collectively executed by the at least one processor, cause the electronic device to: determine content to be displayed on the display and a first area allocated to the content; determine a second area included in the first area; determine a dominant color in a fourth area including a third area corresponding to the content; determine the transparency of the dominant color; determine a section having the transparency among a plurality of sections divided by a plurality of reference values related to the transparency; determine a background image to be applied to the second area on the basis of the determined section; and combine the content with the background image so as to be displayed on the display.

Description

Methods for displaying content and electronic devices supporting the same

[0001] Embodiments disclosed in this document relate to a method for displaying content and an electronic device supporting the same.

[0002] Electronic devices (e.g., smartphones, tablets, desktops, or virtual studio technology (VST) devices) may include a display (or display module). The electronic devices can display various digital content (e.g., text, images, icons, widgets, videos, digital objects, and user interfaces) through the display. Methods for filling the blank spaces of digital content with a background may include 1) a translucent background, 2) a blurred background, and 3) a dominant color extraction background. While these methods apply a background to content, they fail to properly fill the background according to the composition and characteristics of the content.

[0003] An electronic device according to one embodiment may include a display, a memory, and at least one processor including a processing circuit. The memory may store instructions that, when individually or collectively executed by the at least one processor, cause the electronic device to determine content to be displayed on the display and a first area allocated to the content, determine a second area included in the first area, determine a dominant color in a fourth area including a third area corresponding to the content, determine transparency of the dominant color, determine an area including the transparency among a plurality of areas distinguished by a plurality of reference values ​​related to the transparency, determine a background image to be applied to the second area based on the determined area, and combine the content and the background image to display the combined content on the display.

[0004] A method for displaying content according to an embodiment may be performed in an electronic device. The method for displaying content may include an operation of determining content to be displayed on a display of the electronic device and a first area allocated to the content, an operation of determining a second area included in the first area, an operation of determining a dominant color in a fourth area including a third area corresponding to the content, an operation of determining transparency of the dominant color, an operation of determining an area including the transparency among a plurality of areas distinguished by a plurality of reference values ​​related to the transparency, an operation of determining a background image to be applied to the second area based on the determined area, and an operation of combining and displaying the content and the background image on the display.

[0005] According to one embodiment, a computer-readable storage medium may store instructions executable by a processor. When the instructions are executed, the instructions may cause the processor of an electronic device to perform the following operations: determining content to be displayed on a display of the electronic device and a first area allocated to the content, determining a second area included in the first area, determining a dominant color in a fourth area including a third area corresponding to the content, determining transparency of the dominant color, determining an area including the transparency among a plurality of areas distinguished by a plurality of reference values ​​related to the transparency, determining a background image to be applied to the second area based on the determined area, and combining and displaying the content and the background image on the display.

[0006] FIG. 1 is a block diagram of an electronic device within a network environment according to various embodiments.

[0007] Figure 2 is a flowchart illustrating a method for displaying content according to one embodiment.

[0008] Figure 3 illustrates the display of a background image according to one embodiment.

[0009] Figure 4a shows an area for extracting a dominant color according to one embodiment.

[0010] Figure 4b illustrates a method for extracting a dominant color using a histogram according to one embodiment.

[0011] Figure 5 shows a plurality of sections according to the transparency of the dominant color according to one embodiment.

[0012] Figure 6a illustrates layer combination of content in a first section according to one embodiment.

[0013] FIG. 6b is an exemplary diagram showing the display of a background image in a first section according to one embodiment.

[0014] Figure 7a illustrates layer combination of content in a second section according to one embodiment.

[0015] FIG. 7b is an exemplary diagram showing the display of a background image in a second section according to one embodiment.

[0016] Figure 8a illustrates layer combination of content in a third section according to one embodiment.

[0017] FIG. 8b is an exemplary diagram showing the display of a background image in a third section according to one embodiment.

[0018] Figure 9 illustrates a change in a background area according to a change in a content allocation area according to one embodiment.

[0019] Figure 10 is an example diagram showing an inverted background image according to one embodiment.

[0020] In connection with the description of the drawings, the same or similar reference numerals may be used for identical or similar components.

[0021] Hereinafter, various embodiments of this document will be described with reference to the attached drawings. However, this is not intended to limit the technology described in this document to specific embodiments, and it should be understood that various modifications, equivalents, and / or alternatives of the embodiments of this document are included. In connection with the description of the drawings, similar reference numerals may be used for similar components.

[0022] FIG. 1 is a block diagram of an electronic device (101) within a network environment (100) according to various embodiments. Referring to FIG. 1, in the network environment (100), the electronic device (101) may communicate with the electronic device (102) via a first network (198) (e.g., a short-range wireless communication network), or may communicate with the electronic device (104) or a server (108) via a second network (199) (e.g., a long-range wireless communication network). In one embodiment, the electronic device (101) may communicate with the electronic device (104) via the server (108). According to one embodiment, the electronic device (101) may include a processor (120), a memory (130), an input module (150), an audio output module (155), a display module (or display) (160), an audio module (170), a sensor module (176), an interface (177), a connection terminal (178), a haptic module (179), a camera module (180), a power management module (188), a battery (189), a communication module (190), a subscriber identification module (196), or an antenna module (197). In some embodiments, the electronic device (101) may omit at least one of these components (e.g., the connection terminal (178)), or may have one or more other components added. In some embodiments, some of these components (e.g., the sensor module (176), the camera module (180), or the antenna module (197)) may be integrated into one component (e.g., the display module (160)).

[0023] The processor (120) may, for example, execute software (e.g., a program (140)) to control at least one other component (e.g., a hardware or software component) of the electronic device (101) connected to the processor (120) and perform various data processing or operations. According to one embodiment, as at least a part of the data processing or operations, the processor (120) may store commands or data received from other components (e.g., a sensor module (176) or a communication module (190)) in a volatile memory (132), process the commands or data stored in the volatile memory (132), and store result data in a non-volatile memory (134). According to one embodiment, the processor (120) may include a main processor (121) (e.g., a central processing unit or an application processor) or an auxiliary processor (123) (e.g., a graphics processing unit, a neural processing unit (NPU), an image signal processor, a sensor hub processor, or a communication processor) that can operate independently or together with the main processor (121). For example, when the electronic device (101) includes the main processor (121) and the auxiliary processor (123), the auxiliary processor (123) may be configured to use less power than the main processor (121) or to be specialized for a given function. The auxiliary processor (123) may be implemented separately from the main processor (121) or as a part thereof.

[0024] The auxiliary processor (123) may control at least a portion of functions or states associated with at least one component (e.g., a display module (160), a sensor module (176), or a communication module (190)) of the electronic device (101), for example, on behalf of the main processor (121) while the main processor (121) is in an inactive (e.g., sleep) state, or together with the main processor (121) while the main processor (121) is in an active (e.g., application execution) state. In one embodiment, the auxiliary processor (123) (e.g., an image signal processor or a communication processor) may be implemented as a part of another functionally related component (e.g., a camera module (180) or a communication module (190)). In one embodiment, the auxiliary processor (123) (e.g., a neural network processing unit) may include a hardware structure specialized for processing artificial intelligence models. The artificial intelligence models may be generated through machine learning. This learning can be performed, for example, in the electronic device (101) itself where artificial intelligence is performed, or can be performed through a separate server (e.g., server (108)). The learning algorithm can include, for example, supervised learning, unsupervised learning, semi-supervised learning, or reinforcement learning, but is not limited to the examples described above. The artificial intelligence model can include multiple artificial neural network layers.The artificial neural network may be one of a deep neural network (DNN), a convolutional neural network (CNN), a recurrent neural network (RNN), a restricted Boltzmann machine (RBM), a deep belief network (DBN), a bidirectional recurrent deep neural network (BRDNN), a deep Q-network, or a combination of two or more of the above, but is not limited to the examples described above. In addition to, or alternatively to, a hardware structure, an artificial intelligence model may include a software structure.

[0025] The memory (130) can store various data used by at least one component (e.g., processor (120) or sensor module (176)) of the electronic device (101). The data can include, for example, software (e.g., program (140)) and input data or output data for commands related thereto. The memory (130) can include volatile memory (132) or non-volatile memory (134).

[0026] The program (140) may be stored as software in the memory (130) and may include, for example, an operating system (142), middleware (144), or an application (146).

[0027] The input module (150) can receive commands or data to be used in a component of the electronic device (101) (e.g., a processor (120)) from an external source (e.g., a user) of the electronic device (101). The input module (150) can include, for example, a microphone, a mouse, a keyboard, a key (e.g., a button), or a digital pen (e.g., a stylus pen).

[0028] The audio output module (155) can output audio signals to the outside of the electronic device (101). The audio output module (155) can include, for example, a speaker or a receiver. The speaker can be used for general purposes, such as multimedia playback or recording playback. The receiver can be used to receive incoming calls. In one embodiment, the receiver can be implemented separately from the speaker or as part of the speaker.

[0029] The display module (160) can visually provide information to an external party (e.g., a user) of the electronic device (101). The display module (160) may include, for example, a display, a holographic device, or a projector and a control circuit for controlling the device. According to one embodiment, the display module (160) may include a touch sensor configured to detect a touch, or a pressure sensor configured to measure the intensity of a force generated by the touch.

[0030] The audio module (170) can convert sound into an electrical signal, or vice versa, convert an electrical signal into sound. According to one embodiment, the audio module (170) can acquire sound through the input module (150), output sound through the sound output module (155), or an external electronic device (e.g., electronic device (102)) (e.g., speaker or headphone) directly or wirelessly connected to the electronic device (101).

[0031] The sensor module (176) can detect the operating status (e.g., power or temperature) of the electronic device (101) or the external environmental status (e.g., user status) and generate an electrical signal or data value corresponding to the detected status. According to one embodiment, the sensor module (176) can include, for example, a gesture sensor, a gyro sensor, a barometric pressure sensor, a magnetic sensor, an acceleration sensor, a grip sensor, a proximity sensor, a color sensor, an IR (infrared) sensor, a biometric sensor, a temperature sensor, a humidity sensor, or an illuminance sensor.

[0032] The interface (177) may support one or more designated protocols that may be used to directly or wirelessly connect the electronic device (101) with an external electronic device (e.g., the electronic device (102)). In one embodiment, the interface (177) may include, for example, a high definition multimedia interface (HDMI), a universal serial bus (USB) interface, an SD card interface, or an audio interface.

[0033] The connection terminal (178) may include a connector through which the electronic device (101) may be physically connected to an external electronic device (e.g., electronic device (102)). According to one embodiment, the connection terminal (178) may include, for example, an HDMI connector, a USB connector, an SD card connector, or an audio connector (e.g., a headphone connector).

[0034] The haptic module (179) can convert electrical signals into mechanical stimuli (e.g., vibration or movement) or electrical stimuli that a user can perceive through tactile or kinesthetic sensations. According to one embodiment, the haptic module (179) can include, for example, a motor, a piezoelectric element, or an electrical stimulation device.

[0035] The camera module (180) can capture still images and videos. According to one embodiment, the camera module (180) may include one or more lenses, image sensors, image signal processors, or flashes.

[0036] The power management module (188) can manage power supplied to the electronic device (101). According to one embodiment, the power management module (188) can be implemented as, for example, at least a part of a power management integrated circuit (PMIC).

[0037] A battery (189) may power at least one component of the electronic device (101). In one embodiment, the battery (189) may include, for example, a non-rechargeable primary battery, a rechargeable secondary battery, or a fuel cell.

[0038] The communication module (190) may support the establishment of a direct (e.g., wired) communication channel or a wireless communication channel between the electronic device (101) and an external electronic device (e.g., electronic device (102), electronic device (104), or server (108)), and the performance of communication through the established communication channel. The communication module (190) may operate independently from the processor (120) (e.g., application processor) and may include one or more communication processors that support direct (e.g., wired) communication or wireless communication. According to one embodiment, the communication module (190) may include a wireless communication module (192) (e.g., a cellular communication module, a short-range wireless communication module, or a global navigation satellite system (GNSS) communication module) or a wired communication module (194) (e.g., a local area network (LAN) communication module, or a power line communication module). Among these communication modules, the corresponding communication module can communicate with an external electronic device (104) via a first network (198) (e.g., a short-range communication network such as Bluetooth, wireless fidelity (WiFi) direct, or infrared data association (IrDA)) or a second network (199) (e.g., a long-range communication network such as a legacy cellular network, a 5G network, a next-generation communication network, the Internet, or a computer network (e.g., a LAN or WAN)). These various types of communication modules can be integrated into a single component (e.g., a single chip) or implemented as multiple separate components (e.g., multiple chips). The wireless communication module (192) can verify or authenticate the electronic device (101) within a communication network such as the first network (198) or the second network (199) by using subscriber information (e.g., an international mobile subscriber identity (IMSI)) stored in the subscriber identification module (196).

[0039] The wireless communication module (192) can support 5G networks and next-generation communication technologies following the 4G network, such as NR access technology (new radio access technology). The NR access technology can support high-speed transmission of high-capacity data (eMBB (enhanced mobile broadband)), minimization of terminal power and connection of multiple terminals (mMTC (massive machine type communications)), or high reliability and low latency (URLLC (ultra-reliable and low-latency communications)). The wireless communication module (192) can support, for example, a high-frequency band (e.g., mmWave band) to achieve a high data transmission rate. The wireless communication module (192) can support various technologies for securing performance in a high-frequency band, such as beamforming, massive multiple-input and multiple-output (MIMO), full dimensional MIMO (FD-MIMO), array antenna, analog beam-forming, or large scale antenna. The wireless communication module (192) can support various requirements specified in the electronic device (101), an external electronic device (e.g., the electronic device (104)), or a network system (e.g., the second network (199)). According to one embodiment, the wireless communication module (192) can support a peak data rate (e.g., 20 Gbps or more) for eMBB realization, a loss coverage (e.g., 164 dB or less) for mMTC realization, or a U-plane latency (e.g., 0.5 ms or less for downlink (DL) and uplink (UL), or 1 ms or less for round trip) for URLLC realization.

[0040] The antenna module (197) can transmit or receive signals or power to or from an external device (e.g., an external electronic device). In one embodiment, the antenna module (197) may include an antenna including a radiator formed of a conductor or a conductive pattern formed on a substrate (e.g., a PCB). In one embodiment, the antenna module (197) may include a plurality of antennas (e.g., an array antenna). In this case, at least one antenna suitable for a communication method used in a communication network, such as the first network (198) or the second network (199), may be selected from the plurality of antennas, for example, by the communication module (190). A signal or power may be transmitted or received between the communication module (190) and an external electronic device via the at least one selected antenna. In some embodiments, in addition to the radiator, another component (e.g., a radio frequency integrated circuit (RFIC)) may be additionally formed as a part of the antenna module (197).

[0041] According to various embodiments, the antenna module (197) may form a mmWave antenna module. In one embodiment, the mmWave antenna module may include a printed circuit board, an RFIC disposed on or adjacent a first side (e.g., a bottom side) of the printed circuit board and capable of supporting a designated high-frequency band (e.g., a mmWave band), and a plurality of antennas (e.g., an array antenna) disposed on or adjacent a second side (e.g., a top side or a side side) of the printed circuit board and capable of transmitting or receiving signals in the designated high-frequency band.

[0042] At least some of the above components can be interconnected and exchange signals (e.g., commands or data) with each other via a communication method between peripheral devices (e.g., a bus, GPIO (general purpose input and output), SPI (serial peripheral interface), or MIPI (mobile industry processor interface)).

[0043] According to one embodiment, commands or data may be transmitted or received between the electronic device (101) and an external electronic device (104) via a server (108) connected to a second network (199). Each of the external electronic devices (102 or 104) may be the same or a different type of device as the electronic device (101). According to one embodiment, all or part of the operations executed in the electronic device (101) may be executed in one or more of the external electronic devices (102, 104, or 108). For example, when the electronic device (101) is to perform a certain function or service automatically or in response to a request from a user or another device, the electronic device (101) may, instead of or in addition to executing the function or service itself, request one or more external electronic devices to perform the function or at least a part of the service. One or more external electronic devices that receive the request may execute at least a portion of the requested function or service, or an additional function or service related to the request, and transmit the result of the execution to the electronic device (101). The electronic device (101) may process the result as is or additionally and provide it as at least a portion of a response to the request. For this purpose, cloud computing, distributed computing, mobile edge computing (MEC), or client-server computing technology may be used, for example. The electronic device (101) may provide an ultra-low latency service by using distributed computing or mobile edge computing, for example. In another embodiment, the external electronic device (104) may include an Internet of Things (IoT) device. The server (108) may be an intelligent server utilizing machine learning and / or a neural network. According to one embodiment, the external electronic device (104) or the server (108) may be included in the second network (199).The electronic device (101) can be applied to intelligent services (e.g., smart home, smart city, smart car, or healthcare) based on 5G communication technology and IoT-related technology.

[0044]

[0045] Figure 2 is a flowchart illustrating a method for displaying content according to one embodiment.

[0046] Referring to FIGS. 1 and 2 , in operation 210, the processor (120) may determine content (or digital content, digital object) to be displayed on the display and a first area (hereinafter, content allocation area) allocated to the content. For example, the content to be displayed on the display may be a widget, icon, or digital object of an application. In one or more embodiments, the content may be an interface of an audio player that outputs audio content or an interface of a video player that outputs video content. The following discussion focuses on a case where the content to be displayed is a widget of an application, but is not limited thereto.

[0047] According to one embodiment, the processor (120) can divide the display into a plurality of grids and display content according to the arrangement of the plurality of grids. The content allocation area for each content can be determined in units of grids set on the display. For example, the content allocation area can be the same as the grid area occupied by the content, or can be a partially reduced area of ​​the grid area occupied by the content. According to one embodiment, the content allocation area can be determined in various ways as an area of ​​grids such as 1x1, 2x1, 2x2, 3x3, 4x1, 4x2, 4x3, and 4x4, depending on a value required by the application.

[0048] For example, if the content is an icon, the icon can be placed within a 1x1 grid. In this case, the content allocation area can be within the 1x1 grid. For another example, if the content is a widget, one of multiple options supported by the application can be selected by user input. If the application supports sizes of 4x1 and 4x2, and 4x1 is selected by user input, the widget can be placed within the 4x1 grid. In this case, the content allocation area can be within the 4x1 grid.

[0049] In one embodiment, the content allocation area may be determined in pixels. For example, the content allocation area may be determined in various ways, such as (100 pixels x 100 pixels), (200 pixels x 100 pixels), or (300 pixels x 300 pixels), depending on the value required by the application.

[0050] In operation 220, the processor (120) may determine a second area (hereinafter, a background area) included in the content allocation area. The background area may be equal to or smaller than the content allocation area.

[0051] According to one embodiment, the size of the background area may be predetermined based on the size of the content allocation area. The background area may have a size corresponding to the size of the content allocation area. For example, if a first widget of a first application has a content allocation area of ​​4x1 and a second widget of a second application has a content allocation area of ​​4x1, the background area of ​​the first widget and the background area of ​​the second widget may have the same size.

[0052] According to one embodiment, the background area may include a third area occupied by content (hereinafter, referred to as the content area). The background area may be equal to or larger than the content area.

[0053] In operation 230, the processor (120) may determine a dominant color (or representative color) in a fourth region (hereinafter, a dominant color extraction region) including a content region. According to one embodiment, the dominant color extraction region may be equal to or larger than the content region. In this case, the dominant color extraction region may include a portion of the background region. In one or more embodiments, the dominant color extraction region may be equal to or smaller than the background region (see FIG. 4a).

[0054] According to one embodiment, the processor (120) may include at least a portion of the content area in the dominant color extraction area. For example, the processor (120) may include an area sampled from at least a portion of the center or periphery of the content area in the dominant color extraction area.

[0055] For example, the processor (120) can convert the content area into a digital image (bitmap image) and check the frequency of each color. The processor (120) can determine the color with the highest frequency as the dominant color. Alternatively, if the color with the highest frequency is transparent, the processor (120) can determine the second most frequent color as the dominant color, or determine the dominant color by reflecting a preset weight according to the frequency. Additional information regarding the determination of the dominant color can be provided through the drawings below.

[0056] In operation 240, the processor (120) can determine the transparency of the dominant color. The processor (120) can check a value indicating the transparency included in the color value. For example, the processor (120) can check an alpha value (or alpha channel) indicating the degree of opacity among the RGBA (Red, Green, Blue, Alpha) color values. The alpha value can have a value of 0 (completely transparent) to 255 (completely opaque).

[0057] In operation 250, the processor (120) may determine a section among a plurality of sections related to transparency that includes the transparency of the dominant color. The plurality of sections may be distinguished by a plurality of reference values ​​related to transparency.

[0058] According to one embodiment, the processor (120) may set a first reference value related to transparency and a second reference value greater than the first reference value as a plurality of reference values. The processor (120) may divide the image into a first section having an alpha value smaller than the first reference value, a second section having an alpha value greater than the first reference value and smaller than the second reference value, and a third section having an alpha value greater than the second reference value. The processor (120) may determine a section to which the alpha value of the extracted dominant color belongs among the first to third sections.

[0059] In operation 260, the processor (120) may determine a background image to be applied to the background area according to a section including a dominant color. For example, in a first section where the transparency of the dominant color is relatively high (e.g., a section with a transparency of 90% or more, or a section with an alpha value of 26 or less), the processor (120) may determine a blurred image as the background image. As another example, in a second section corresponding to an intermediate level of transparency (e.g., a section with a transparency of less than 90% and more than 10%, or a section with an alpha value of greater than 26 and less than or equal to 229), an opaque image generated using the blurred image and the dominant color may be combined to determine the background image. As yet another example, in a third section where the transparency of the dominant color is relatively low (opacity is high) (e.g., a section with a transparency of less than 10%, or a section with an alpha value of greater than 229), the processor (120) may determine an opaque image generated using the dominant color as the background image.

[0060] In operation 270, the processor (120) may combine content and a background image and display them on the display. The processor (120) may display the content on a first layer and the background image on a second layer. The first layer and the second layer may be different layers from the layer on which the background image of the home screen is displayed.

[0061] When a background image is displayed in the background area, reflecting the transparency of the content's dominant color, the visibility of the content can be significantly improved. Furthermore, by consistently setting the background area to correspond to the widget's size, the home screen can be displayed more consistently.

[0062]

[0063] Figure 3 illustrates the display of a background image according to one embodiment.

[0064] Referring to FIG. 3, the processor (120) can display content (e.g., a weather widget) on the display. The processor (120) can determine the content to be displayed through automatic setting or user input. In the case of automatic setting, the processor (120) can determine the size of the widget (size of the content allocation area) through default settings. In the case of setting by user input, the processor (120) can determine the size of the widget (size of the content allocation area) to a size selected by the user input.

[0065] According to one embodiment, the processor (120) may set a content allocation area (310) according to the size of the widget. The content allocation area (310) may be the same as the grid area (315) allocated to the content, or may be a partially reduced area of ​​the grid area (315) allocated to the content. The grid area (315) may be composed of a plurality of rectangular areas in which content may be displayed on the display. The number of rectangular areas in which each widget of an application may be placed is designated, and the widget of the application may be placed within the designated rectangular areas. For example, in the case of a widget of a weather application, the processor (120) may set a content allocation area (310) corresponding to a grid size of 1x1, 2x2, or 4x2.

[0066] According to one embodiment, the processor (120) may determine a background area (320) corresponding to the content allocation area (310). The background area (320) is included in the content allocation area (310), and may be an area in which the content allocation area (310) is partially reduced.

[0067] According to one embodiment, the background area (320) may have a preset size corresponding to the size of the content allocation area (310). For example, if a first widget of a first application has a content allocation area of ​​4x1 and a second widget of a second application has a content allocation area of ​​4x1, the background area of ​​the first widget and the background area of ​​the second widget may have the same size.

[0068] According to one embodiment, the background area (320) may include a content area (330) occupied by content. The background area (320) may be larger than the content area (330).

[0069] According to one embodiment, the processor (120) can dynamically change the background image of the background area (320) according to various conditions and situations by reflecting dominant color extraction and transparency. Additional information regarding the display of the background image of the background area (320) may be provided through the drawings below.

[0070]

[0071] Figure 4a shows an area for extracting a dominant color according to one embodiment.

[0072] Referring to FIG. 4A, the processor (120) may determine a content area (410). For example, the content area (410) may be an area containing text or images included in a widget. The content area (410) may be preset when an application related to the widget is created, and may be determined by information included in the application's configuration file. For example, the content area (410) may be an area set by the manufacturer or producer who created the application.

[0073] According to one embodiment, the processor (120) may extract a dominant color (or representative color) from the content area (410). Thereafter, the processor (120) may display a background image of the content area (410) corresponding to the transparency of the dominant color (or representative color).

[0074] According to one embodiment, the processor (120) may include a content area (410) and extract a dominant color from a portion of an extended area (dominant color extraction area) (415) in the content area (410). The processor (120) may extract the dominant color based on the frequency of the color extracted from the content area (410) and the extended area of ​​the content area (410). The dominant color extraction area (415) may be the same as the background area or may be an area smaller than the background area. Thereafter, the processor (120) may display a background image of the content area (330) corresponding to the transparency of the dominant color (or representative color).

[0075]

[0076] Figure 4b illustrates a method for extracting a dominant color using a histogram according to one embodiment.

[0077] The processor (120) can extract the dominant color of content using various algorithms. The processor (120) can determine the extraction algorithm by reflecting factors such as the composition, performance, and accuracy of the content after converting the content into an image (bitmap).

[0078] For example, the processor (120) may extract the dominant color of the content using a method such as the K-Means clustering or Median Cut algorithm. The K-Means clustering may be a method of classifying the colors of an image into K clusters and selecting the center of each cluster as a representative color. The Median Cut algorithm may be a method of repeatedly dividing the color space in half to find a representative color.

[0079] For another example, the processor (120) may extract the dominant color of the content using histogram analysis. The processor (120) may determine the dominant color through histogram analysis of operations 451 to 459 below. Operations 451 to 459 may be specific processes implementing operation 230 of FIG. 2 . FIG. 4b is an example and is not limited thereto.

[0080] Referring to FIGS. 1 and 4B, in operation 451, the processor (120) may convert the content into a bitmap image. The processor (120) may convert a representative image or a specific image of the content into a bitmap image. The processor (120) may generate a bitmap image corresponding to the content area, or a bitmap image corresponding to a dominant color extraction area (see FIG. 4A) that is enlarged beyond the content area. Operation 451 may be a preparatory step for histogram analysis.

[0081] In operation 453, the processor (120) may initialize the color frequency map. The processor (120) may initialize previous data and prepare to newly store data related to the content to be displayed. If there is no need to initialize the color frequency map, operation 453 may be omitted.

[0082] At operation 455, the processor (120) may calculate the frequency of each color in the bitmap image. For example, the processor (120) may sequentially check the color value of each pixel in a specified direction. Until the color check for all pixels is completed, the processor (120) may increase the frequency of the checked color value.

[0083] In operation 457, the processor (120) may generate a histogram for each color based on the identified color values. For example, the processor (120) may generate a histogram graph with the X-axis representing color values ​​and the Y-axis representing frequency.

[0084] At operation 459, the processor (120) may determine a dominant color of the content based on the generated histogram. For example, the processor (120) may determine the most frequent color as the dominant color of the content. For another example, if the most frequent color is transparent and the second most frequent color is opaque, the processor (120) may determine the second most frequent color as the dominant color, or may determine the dominant color of the content by applying weights in a preset manner.

[0085] For example, if the first color with the highest frequency is transparent, the processor (120) may reflect a preset weight (e.g., 2 times) to the second color with the second highest frequency. If the frequency of the first color (transparent color) is high after the weight is reflected to the second color, the processor (120) may determine the first color (transparent color) as the dominant color. Alternatively, if the weight is reflected to the second color and the frequency of the second color becomes higher than the frequency of the first color, the processor (120) may determine the second color as the dominant color.

[0086] According to one embodiment, the processor (120) may not perform operations 451 to 459 if the dominant color associated with the content is pre-transmitted from the application or has a previously acquired history.

[0087]

[0088] Figure 5 illustrates a plurality of sections according to the transparency of a dominant color according to one embodiment. Figure 5 is exemplary and is not limiting.

[0089] Referring to FIG. 5, the processor (120) can check the transparency of a dominant color extracted from content. For example, the processor (120) can check the alpha value (or alpha channel) representing the opacity among the RGBA (Red, Green, Blue, Alpha) of the dominant color. The alpha value can have a value from 0 (completely transparent) to 255 (completely opaque).

[0090] According to one embodiment, the processor (120) may set a plurality of sections distinguished by a plurality of reference values ​​related to transparency. For example, the processor (120) may distinguish a first section (510), a second section (520), and a third section (530) based on an alpha value.

[0091] In one embodiment, the first section (510) may be a section in which the transparency is 10% or less (e.g., an alpha value of 26 or less) of the total (e.g., a maximum alpha value of 255). When the dominant color is the first section (510), it may indicate that the dominant color is a nearly transparent color.

[0092] In one embodiment, the second section (520) may be a section in which the transparency is greater than 10% (e.g., greater than 26 alpha value) of the total (e.g., maximum alpha value of 255) and less than or equal to 90% (e.g., less than or equal to 229 alpha value) of the total (e.g., maximum alpha value of 255). When the dominant color is the second section (520), it may indicate that the dominant color is a translucent color.

[0093] In one embodiment, the third section (530) may be a section in which the transparency is greater than 90% (e.g., greater than 229 alpha value) of the total (e.g., maximum alpha value of 255). When the dominant color is the third section (530), it may indicate that the dominant color is a nearly opaque color.

[0094] The multiple reference values ​​in FIG. 5 are exemplary and not limiting. For example, the ratios or numerical values ​​of the multiple reference values ​​in FIG. 5 may be adjusted. For example, the alpha value may have values ​​ranging from 0 (completely transparent) to 511 (completely opaque). Alternatively, for example, the ratios of the multiple reference values ​​may be set to 20% and 80%.

[0095] According to one embodiment, the processor (120) may determine a section containing the alpha value of the dominant color. The processor (120) may set a different background image for the content displayed in the background area of ​​the content for each section. Additional information regarding the application of the background image in each section may be provided through FIGS. 6A to 8B below.

[0096]

[0097] FIG. 6a illustrates layer combination of content in a first section according to one embodiment. FIG. 6b is an exemplary diagram illustrating display of a background image in a first section according to one embodiment.

[0098] Referring to FIGS. 1 and 6A, the processor (120) may extract a dominant color from a content area or a dominant color extraction area. The processor (120) may determine an alpha value indicating the transparency of the dominant color. The processor (120) may compare the alpha value of the dominant color with a plurality of reference values. For example, if the alpha value of the dominant color is less than or equal to a first value (e.g., alpha value 26), the processor (120) may determine the dominant color as the first section.

[0099] According to one embodiment, in the first section with relatively high transparency, the processor (120) may determine a blurred image as a background image. The processor (120) may combine a content layer (610) including content data and a background layer (620) including a blurred image, and store them in a container (630). The container (630) may be a buffer that stores output data related to the content. The output data stored in the container (630) may be displayed by additionally overlapping the background image of the home screen.

[0100] According to one embodiment, in the first section, the processor (120) may determine a separate opaque image as the background image. In the first section, where the transparency of the dominant color is high, the processor (120) may use the separate opaque image to make the content and background areas more visible. For example, the separate opaque image may be an image using the background image of the home screen, or an image using a color that is inverted from some colors included in the content.

[0101] Referring to FIG. 1 and FIG. 6B, the processor (120) can display first content (651) and second content (652) on the display. The processor (120) can display the first content (651) and second content (652) by automatic setting of the electronic device or by user input. The processor (120) can set a first background area (661) corresponding to the first content (651) and a second background area (662) corresponding to the second content (652).

[0102] For example, the first content (651) may be a widget of a weather application. If the first content (651) has a grid size of 4x2, the first background area (661) may be the same as the 4x2 grid area or may be a reduced area of ​​the 4x2 grid area. The first background area (661) may be an area enlarged from the area occupied by the first content (651).

[0103] For example, the second content (652) may be a widget of a search application. If the second content (652) has a grid size of 4x1, the second background area (662) may be equal to the 4x1 grid area or may be an area that is slightly reduced from the 4x1 grid area. The second background area (662) may be an area that is slightly enlarged from the area occupied by the second content (652).

[0104] According to one embodiment, each of the first content (651) and the second content (652) may be predominantly transparent. In this case, the transparent color may be determined as the dominant color, and the transparency of the dominant color may be determined as the first section. The processor (120) may determine a blurred image as the background image of the content and display the blurred image in the background area (661, 662).

[0105] By comparing the first state (601) before a background image is applied to the background area (661, 662) and the second state (602) in which the background image is applied to the background area (661, 662), the visibility of the content can be improved in the second state (602). In addition, since the background areas (661, 662) are displayed in the second state (602), the consistency between the first content (651) and the second content (652) having different forms can be improved.

[0106]

[0107] Figure 7a illustrates layer combination of content in a second section according to one embodiment.

[0108] FIG. 7b is an exemplary diagram showing the display of a background image in a second section according to one embodiment.

[0109] Referring to FIG. 1 and FIG. 7A, the processor (120) may extract a dominant color from a content area or a dominant color extraction area. The processor (120) may determine an alpha value indicating the transparency of the dominant color. The processor (120) may compare the alpha value of the dominant color with a plurality of reference values. For example, if the alpha value of the dominant color exceeds a first value (e.g., an alpha value of 26) and is less than or equal to a second value (e.g., an alpha value of 229), the processor (120) may determine the dominant color as a second section. For example, the second section may be determined as a translucent section.

[0110] According to one embodiment, in the second section, the processor (120) may determine a background image by combining a color image (or an opaque image) (721) and a blur image (722). The processor (120) may combine a content layer (710) containing data of content and a background layer (720) and store them in a container (730). The background layer (720) may include a color image (721) and a blur image (722). The container (730) may be a buffer that stores output data related to the content. The stored output data may be displayed by additionally overlapping the background image of the home screen.

[0111] Referring to FIG. 1 and FIG. 7B, the processor (120) can display content (750) on the display. The processor (120) can display content (750) by automatic setting of the electronic device or by user input. The processor (120) can set a background area (760) corresponding to the content (750).

[0112] For example, the content (750) may be a widget of a music application. If the content (750) has a grid size of 4x2, the background area (760) may be the same as the 4x2 grid area or may be a reduced area of ​​the 4x2 grid area. The background area (760) may be an area enlarged from the content area occupied by the content (750).

[0113] The content (750) may primarily be white text or buttons, with the remaining areas being a translucent color (e.g., translucent gray). In this case, the translucent color (e.g., translucent gray) may be determined as the dominant color, and the transparency of the dominant color may be determined as a second section. The processor (120) may combine a color image (e.g., a gray image) based on the dominant color with a blurred image and display the result in the background area (760).

[0114]

[0115] Figure 8a illustrates layer combination of content in a third section according to one embodiment.

[0116] FIG. 8b is an exemplary diagram showing the display of a background image in a third section according to one embodiment.

[0117] Referring to FIG. 1 and FIG. 8A, the processor (120) may extract a dominant color from a content area or a dominant color extraction area. The processor (120) may determine an alpha value indicating the transparency of the dominant color. The processor (120) may compare the alpha value of the dominant color with a plurality of reference values. For example, if the alpha value of the dominant color exceeds a second value (e.g., an alpha value of 229), the processor (120) may determine the dominant color as a third section. For example, the third section may be determined as an opaque section.

[0118] According to one embodiment, in the third section, the processor (120) may determine a color image (or an opaque image) (820) as a background image. The processor (120) may combine a content layer (810) containing data of the content and a background layer (820) and store them in a container (830). The container (830) may be a buffer that stores output data related to the content. The stored output data in the container (830) may be displayed by additionally overlapping it with the background image of the home screen.

[0119] Referring to FIGS. 1 and 8B, the processor (120) can display content (850) on the display. The content (850) can be displayed by automatic settings of the electronic device or by user input. The processor (120) can set a background area (860) corresponding to the content (850).

[0120] For example, the content (850) may be a widget of a video application. If the content (850) has a grid size of 4x2, the background area (860) may be the same as the 4x2 grid area or may be a reduced area of ​​the 4x2 grid area. The background area (860) may be an area enlarged from the content area occupied by the content (850).

[0121] The content (850) may have a primary area of ​​an opaque color (e.g., light gray). In this case, the opaque color (e.g., light gray) may be determined as the dominant color, and the transparency of the dominant color may be determined as the third area. The processor (120) may display a color image (e.g., a gray image) based on the dominant color in the background area (860).

[0122]

[0123] Figure 9 illustrates changes in a background area due to changes in a content allocation area according to one embodiment. Figure 9 is exemplary and is not limiting.

[0124] Referring to FIG. 9, the processor (120) may reset the background area in response to a change in content. According to one embodiment, the processor (120) may dynamically change the background area when the size of the displayed content (910) changes (when the content allocation area changes). For example, the content (910) may change in size depending on factors such as updates, resizes, theme changes, or changes in portrait / landscape mode.

[0125] According to one embodiment, in the first state (901), the content allocation area (930) of the content (910) may be determined to be equal to or smaller than a 4x2 grid area.

[0126] According to one embodiment, in the first state (901), the background area (920) may be determined to be an area that includes the content (910) and is smaller than the content allocation area (930). The processor (120) may determine a dominant color as an opaque color (e.g., gray) in the dominant color extraction area that includes the content (910). Since the proportion of the content area in the dominant color extraction area is high, the color of the content (910) may be mainly reflected to determine the dominant color. The processor (120) may display an opaque image in the background area (920).

[0127] According to one embodiment, in the second state (902), the content allocation area (931) of the content (910) may be determined to be equal to or smaller than a 4x4 grid area.

[0128] In the second state (902), the background area (921) may include the content (910) and may be determined to be a smaller area than the content allocation area (931). In the second state (902), the dominant color extraction area may be expanded compared to the first state (901). In this case, the ratio of the content area to the dominant color extraction area may be reduced, and a transparent color may be determined as the dominant color. The processor (120) may display a blurred image or a semi-transparent image in the background area (921).

[0129]

[0130] Fig. 10 is an example diagram showing an inverted background image according to one embodiment. Fig. 10 is exemplary and is not limited thereto.

[0131] Referring to FIGS. 1 and 10, the processor (120) can display content (1010) on a display. For example, the content (1010) can be an image in which a background image has been deleted and only a specific object has been extracted through an object extraction function in an image editing application.

[0132] The processor (120) may determine the background area (1020) by reflecting the size of the content (1010). For example, the background area (1020) may be the smallest square area that includes the entire content (1010). Then, the processor (120) may determine a dominant color in the background area (1020). If the object is primarily white and the remaining area is transparent, white may be determined as the dominant color.

[0133] The processor (120) can generate a background image with a dominant color inverted and display it in the background area (1020). This can improve the visibility of the content (1010). Inverting the dominant color can include changing the color from white to black, or from black to white.

[0134] In one embodiment, the processor (120) may display a user interface that provides an option to allow dynamic changes of the background area for each content. If the background area change is disabled by user input, the processor (120) may not apply the process of dynamically changing the background area.

[0135] In one embodiment, the processor (120) may change the dynamic change method of the background area by reflecting the ambient illumination. For example, after the background image is determined based on the transparency of the dominant color, the processor (120) may measure the ambient illumination and change the background image to increase the visibility of the content.

[0136] According to one embodiment, the processor (120) may set a different dynamic change method for the background area depending on the application manufacturer. For example, if dominant color information or background area information for a widget of an application of a given manufacturer is stored in advance, a separate process of extracting the dominant color may not be performed.

[0137] According to one embodiment, the processor (120) can dynamically change the background area of ​​content in various electronic devices (101). For example, the electronic device (101) can be a smartphone, a tablet, a desktop, or a VST device.

[0138] According to one embodiment, the processor (120) can determine the dominant color of content or the background image using artificial intelligence (AI) and machine learning (ML). By learning from large data sets using AI and machine learning (ML) algorithms, various conditions and the color and transparency of content can be identified, and the background can be dynamically changed based on these conditions. For example, in a streaming state of a specific movie, the current user's surroundings (e.g., day / night) can be combined to dynamically change various backgrounds to reflect the dominant color and transparency of the currently playing content.

[0139]

[0140] Electronic devices can fill in the blank spaces of digital content with backgrounds using 1) a translucent background, 2) a blurred background, or 3) a dominant color background. However, these methods often fail to apply an appropriate background depending on the characteristics of the content, and the background area varies across content, hindering the provision of a consistent display.

[0141] An electronic device according to an embodiment may include a display, a memory, and at least one processor including a processing circuit. The memory may store instructions that, when individually or collectively executed by the at least one processor, cause the electronic device to determine content to be displayed on the display and a first area allocated to the content, determine a second area included in the first area, determine a dominant color in a fourth area including a third area corresponding to the content, determine transparency of the dominant color, determine an area including the transparency among a plurality of areas distinguished by a plurality of reference values ​​related to the transparency, determine a background image to be applied to the second area based on the determined area, and combine the content and the background image to display the content on the display.

[0142] According to one embodiment, it may include a first reference value indicating a first transparency and a second reference value indicating a second transparency lower than the first transparency.

[0143] According to one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to determine a blurred image as the background image based on the transparency of the dominant color being less than or equal to the first reference value.

[0144] According to one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to determine, as the background image, an image including the dominant color and a blurred image combined based on the transparency of the dominant color exceeding the first reference value and being less than or equal to the second reference value.

[0145] According to one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to determine an image including the dominant color as the background image based on the transparency of the dominant color exceeding the second reference value.

[0146] According to one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to generate a bitmap image corresponding to the fourth region, extract a histogram of colors from the bitmap image, and determine the dominant color based on the frequency of colors appearing in the histogram.

[0147] In one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to determine a color having the highest frequency in the histogram as the dominant color.

[0148] In one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to determine a second color having a second highest frequency as the dominant color based on the first color having a highest frequency in the histogram being transparent.

[0149] In one embodiment, the instructions, when individually or collectively executed by the at least one processor, may cause the electronic device to apply a preset weight to a second color having a second highest frequency based on the first color having a highest frequency in the histogram being transparent.

[0150] In one embodiment, the fourth region may be identical to the second region.

[0151] In one embodiment, the fourth region may be identical to the third region.

[0152] In one embodiment, the fourth region may be smaller than the second region and may include the third region.

[0153] According to one embodiment, the instructions, when individually or collectively executed by the at least one processor, cause the electronic device to set a grid area corresponding to the content on the display as the first area.

[0154] In one embodiment, the content may be an icon or widget of a digital object or application displayed on the display.

[0155] According to one embodiment, the plurality of reference values ​​may be set to reflect an alpha value set for the dominant color.

[0156] A method for displaying content according to an embodiment may be performed in an electronic device. The method for displaying content may include an operation of determining the content to be displayed on a display of the electronic device and a first area allocated to the content, an operation of determining a second area included in the first area, an operation of determining a dominant color in a fourth area including a third area corresponding to the content, an operation of determining transparency of the dominant color, an operation of determining an area including the transparency among a plurality of areas distinguished by a plurality of reference values ​​related to the transparency, an operation of determining a background image to be applied to the second area based on the determined area, and an operation of combining and displaying the content and the background image on the display.

[0157] According to one embodiment, the plurality of reference values ​​may include a first reference value indicating a first transparency and a second reference value indicating a second transparency lower than the first transparency.

[0158] According to one embodiment, the operation of displaying the content and the background image in combination may include an operation of determining a blurred image as the background image based on the transparency of the dominant color being less than or equal to the first reference value.

[0159] According to one embodiment, the operation of displaying the content and the background image in combination may include an operation of determining an image including the dominant color and a blurred image as the background image based on the transparency of the dominant color exceeding the first reference value and being less than or equal to the second reference value.

[0160] According to one embodiment, the operation of displaying the content and the background image in combination may include an operation of determining an image including the dominant color as the background image based on the transparency of the dominant color exceeding the second reference value.

[0161] An electronic device according to one embodiment disclosed in this document can extract a dominant color of content (e.g., through histogram analysis) and then determine a background for the content by differentiating the transparency of the dominant color. This allows the electronic device to set a natural background for each piece of content. When a background image reflecting the transparency of the dominant color is displayed in the background area, the visibility of the content can be improved. Furthermore, since the background area corresponding to the size of the widget is set uniformly, the home screen can be displayed more consistently.

[0162] An electronic device according to one embodiment disclosed in this document can provide a background area that can enhance user visibility depending on the content, with an appropriate size based on the content's layout. This allows the electronic device to provide a screen with an aligned visual design.

[0163]

[0164] The various embodiments of this document and the terminology used therein are not intended to limit the technical features described in this document to specific embodiments, but should be understood to include various modifications, equivalents, or substitutes of the embodiments. In connection with the description of the drawings, similar reference numerals may be used for similar or related components. The singular form of a noun corresponding to an item may include one or more of the items, unless the context clearly indicates otherwise. In this document, each of the phrases "A or B", "at least one of A and B", "at least one of A or B", "A, B, or C", "at least one of A, B, and C", and "at least one of A, B, or C" can include any one of the items listed together in the corresponding phrase among those phrases, or all possible combinations thereof. Terms such as "first," "second," or "first" or "second" may be used merely to distinguish the corresponding component from other corresponding components and do not limit the corresponding components in any other respect (e.g., importance or order). When a component (e.g., a first) is referred to as "coupled" or "connected" to another (e.g., a second) component, with or without the terms "functionally" or "communicatively," it means that the component can be connected to the other component directly (e.g., wired), wirelessly, or through a third component.

[0165] The term "module" used in various embodiments of this document may include a unit implemented in hardware, software, or firmware, and may be used interchangeably with terms such as logic, logic block, component, or circuit. A module may be an integral component, or a minimum unit or part of such a component that performs one or more functions. For example, according to one embodiment, a module may be implemented in the form of an application-specific integrated circuit (ASIC).

[0166] Various embodiments of the present document may be implemented as software (e.g., program (10)) including one or more instructions stored in a storage medium (e.g., built-in memory (1436) or external memory (138)) readable by a machine (e.g., electronic device (1401)). For example, a processor (e.g., processor (1420)) of the machine (e.g., electronic device (1401)) may call at least one instruction among the one or more instructions stored from the storage medium and execute it. This enables the machine to operate to perform at least one function according to the at least one called instruction. The one or more instructions may include code generated by a compiler or code executable by an interpreter. The machine-readable storage medium may be provided in the form of a non-transitory storage medium. Here, 'non-transitory' simply means that the storage medium is a tangible device and does not contain signals (e.g., electromagnetic waves), and the term does not distinguish between cases where data is stored semi-permanently or temporarily on the storage medium.

[0167] According to one embodiment, the method according to various embodiments disclosed in this document may be provided as included in a computer program product. The computer program product may be traded as a commodity between a seller and a buyer. The computer program product may be distributed in the form of a machine-readable storage medium (e.g., compact disc read-only memory (CD-ROM)), or may be distributed online (e.g., downloaded or uploaded) via an application store (e.g., Play Store™) or directly between two user devices (e.g., smart phones). In the case of online distribution, at least a portion of the computer program product may be temporarily stored or temporarily generated in a machine-readable storage medium, such as the memory of a manufacturer's server, an application store's server, or an intermediary server.

[0168] According to various embodiments, each component (e.g., a module or a program) of the above-described components may include one or more entities, and some of the entities may be separated and placed in other components. According to various embodiments, one or more components or operations of the aforementioned components may be omitted, or one or more other components or operations may be added. Alternatively or additionally, a plurality of components (e.g., a module or a program) may be integrated into a single component. In such a case, the integrated component may perform one or more functions of each of the plurality of components identically or similarly to those performed by the corresponding component among the plurality of components prior to the integration. According to various embodiments, the operations performed by a module, program, or other component may be executed sequentially, in parallel, iteratively, or heuristically, or one or more of the operations may be executed in a different order, omitted, or one or more other operations may be added.

Claims

1. In electronic devices, display; memory; and comprising at least one processor comprising processing circuitry; The above memory, when individually or collectively executed by the at least one processor, causes the electronic device to: Determine the content to be displayed on the display and the first area allocated to the content, Determine the second area included in the first area, Determine a dominant color in a fourth area including a third area corresponding to the above content, Determine the transparency of the above dominant color, Determine an interval including the transparency among a plurality of intervals distinguished by a plurality of reference values ​​related to the transparency, Determine the background image to be applied to the second area based on the determined section, An electronic device storing instructions for combining the above content and the above background image and displaying them on the display.

2. In paragraph 1, the plurality of reference values ​​are An electronic device characterized by including a first reference value indicating a first transparency and a second reference value indicating a second transparency lower than the first transparency.

3. In the second paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that determines a blurred image as the background image based on the transparency of the dominant color being less than or equal to the first reference value.

4. In the second paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that determines the background image by combining an image including the dominant color and a blurred image based on the transparency of the dominant color exceeding the first reference value and being less than or equal to the second reference value.

5. In the second paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that determines an image including the dominant color as the background image based on the transparency of the dominant color exceeding the second reference value.

6. In the first paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, Generate a bitmap image corresponding to the fourth area, Extracting a histogram of colors from the above bitmap image, An electronic device that determines the dominant color based on the frequency of the color appearing in the histogram.

7. In the sixth paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that determines the color having the highest frequency in the histogram as the dominant color.

8. In the sixth paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that determines a second color having the second highest frequency as the dominant color based on the fact that the first color having the highest frequency in the histogram is transparent.

9. In the sixth paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that applies a preset weight to a second color having the second highest frequency based on the fact that the first color having the highest frequency in the histogram is transparent.

10. In the first paragraph, the fourth region An electronic device characterized by the same properties as the second region.

11. In the first paragraph, the fourth region An electronic device characterized by the same properties as the third region.

12. In the first paragraph, the fourth region An electronic device characterized in that it is smaller than the second region and includes the third region.

13. In the first paragraph, when the instructions are individually or collectively executed by the at least one processor, the electronic device, An electronic device that sets a grid area corresponding to the content in the above display as the first area.

14. In paragraph 1, the plurality of reference values ​​are An electronic device characterized in that it is set to reflect the alpha value set in the above dominant color.

15. A method for displaying content performed on an electronic device, An operation of determining the content to be displayed on the display of the electronic device and a first area allocated to the content; An operation of determining a second area included in the first area; An operation of determining a dominant color in a fourth area including a third area corresponding to the above content; An action that determines the transparency of the above dominant color; An operation of determining an interval including the transparency among a plurality of intervals distinguished by a plurality of reference values ​​related to the transparency; An operation of determining a background image to be applied to the second area based on the determined section; and A method comprising: an operation of displaying the content and the background image in combination on the display;

Images