WO2021118267A1

WO2021118267A1 - Electronic device and control method thereof

Info

Publication number: WO2021118267A1
Application number: PCT/KR2020/018073
Authority: WO
Inventors: 김혜령; 김석현; 박은희; 최아름; 현수경
Original assignee: 삼성전자주식회사
Priority date: 2019-12-11
Filing date: 2020-12-10
Publication date: 2021-06-17
Also published as: KR20210073911A

Abstract

A control method of an electronic device is disclosed. The control method of an electronic device, according to the present disclosure, comprises the steps of: when a user command for displaying a user interface (UI) is input, displaying a UI including a plurality of graphic elements; and when at least one of the size and ratio of a display screen displaying the UI is changed, changing the size of the UI and displaying the UI, wherein in the step of changing the size of the UI and displaying the UI, at least one graphic element of the graphic elements included in the UI is displayed by adjusting the size of the at least one graphic element in a ratio different from that of the other graphic elements included in the UI.

Description

Electronic device and its control method

The present disclosure relates to an electronic device and a method for controlling the same, and more particularly, to an electronic device for displaying a UI that changes according to a size or ratio of a display screen, and a method for controlling the same.

With the recent development of electronic technology, various electronic devices have been developed. In particular, in recent years, an extra-large electronic device, a rollable electronic device and a foldable electronic device in which the size of a display screen can be changed, a rotatable electronic device, and a modular electronic device capable of displaying a plurality of displays by combining them into one screen Various electronic devices are being developed.

Although the screen of the electronic device is enlarged and the size and ratio of the screen are changed, in the prior art, there is an economic loss of providing the UI in the same way as the increased screen ratio, or individually designing a UI suitable for the display screen. existed. Therefore, it was necessary to provide an optimal UI according to the size and ratio of the display screen.

The present disclosure has been devised by the above necessity, and an object of the present disclosure is to identify graphic elements constituting a UI according to the size and ratio of a display screen, and to provide a UI in which the identified graphic elements are combined, and an electronic device and the same To provide a control method.

According to an embodiment of the present disclosure for achieving the above object, a method of controlling an electronic device includes: displaying a UI including a plurality of graphic elements when a user command for displaying the UI is input; and when at least one of a size and a ratio of a display screen for displaying the UI is changed, changing the size of the UI to display it; and changing and displaying the size of the UI is included in the UI At least one graphic element among the displayed graphic elements is displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI.

And, the UI includes a first type of graphic element and a second type of element, wherein the first type of graphic element is displayed according to a preset size and ratio, and the UI includes at least two types of the second type of graphic element. When the graphic element is included, the at least two second type graphic elements may be displayed according to a preset ratio of the at least two second type graphic elements included in the UI.

And, when at least one of the size and ratio of the display screen is changed, the size and ratio of the first type of graphic element included in the UI are not changed, and at least two graphic elements of the second type included in the UI are not changed. At least one of a size and a ratio of each of the at least two second graphic elements may be changed and displayed while maintaining a preset ratio between the two graphic elements.

The UI further includes a third type of graphic element, wherein the third type of graphic element has a size and ratio of the third type of graphic element according to the size of information included in the third type of graphic element. At least one of them may be changed and displayed.

and displaying the UI by deleting at least one of graphic elements included in the UI when the size of the display screen decreases; and when the size of the display screen increases, adding at least one of the plurality of graphic elements to the UI to display the UI.

And, when a user command for changing the UI is input, at least one graphic element among graphic elements included in the UI is deleted, or at least one of the plurality of graphic elements is added to the UI to display the UI. It may further include;

The plurality of graphic elements are received from an external server, and when there is an update on the plurality of graphic elements, receiving information on the updated graphic elements from the external server; and displaying the UI by updating at least one graphic element among graphic elements included in the UI based on the received information.

In addition, when the electronic device is a device capable of displaying a plurality of displays in combination, the size and ratio of the display screen changed according to the combination of at least one display are identified, and the UI is based on the identified size and ratio. The method may further include changing and displaying at least one of a size and a ratio of at least one graphic element among graphic elements included in the .

In addition, when the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, among the size and ratio of at least one graphic element among graphic elements included in the UI. The method may further include changing and displaying at least one.

Meanwhile, an electronic device according to an embodiment of the present disclosure for achieving the above object includes: a memory including at least one instruction; and when a user command for displaying a UI (User Interface) is input by executing the at least one instruction, control to display a UI including a plurality of graphic elements, and a size and ratio of a display screen displaying the UI When at least one is changed, a processor for controlling the display by changing the size of the UI; includes, wherein the processor controls to change and display the size of the UI, at least among the graphic elements included in the UI Controls display by adjusting the size of one graphic element in a ratio different from that of other graphic elements included in the UI.

The UI further includes a third type of graphic element, wherein the third type of graphic element has a size and ratio of the third type of graphic element according to the size of information included in the third type of graphic element. It may be characterized in that at least one of them is changed and displayed.

And, when the size of the display screen decreases, the processor displays the UI by deleting at least one of graphic elements included in the UI, and when the size of the display screen increases, the plurality of graphic elements By adding at least one of the UI to the UI, it may be characterized in that the UI is controlled to be displayed.

And, when a user command for changing the UI is input, the processor deletes at least one graphic element among graphic elements included in the UI or adds at least one of the plurality of graphic elements to the UI, Control to display the UI may be characterized.

And, the electronic device further includes a communication interface, the plurality of graphic elements are received from an external server through the communication interface, and the processor, when there is an update to the plurality of graphic elements, the communication interface Receives information on the updated graphic element from an external server through, and updates at least one graphic element among graphic elements included in the UI based on the received information to control to display the UI can

And, when the electronic device is a device capable of displaying a plurality of displays by combining a plurality of displays, the processor identifies the size and ratio of the display screen changed according to the combination of at least one display, and uses the identified size and ratio Based on the display, at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI may be changed and displayed.

In addition, when the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, among the size and ratio of at least one graphic element among graphic elements included in the UI. It may be characterized in that at least one is changed and controlled to be displayed.

According to various embodiments as described above, an optimal UI according to the size and ratio of the display screen may be provided.

1 is a diagram illustrating a UI according to a screen and a ratio of a display, according to an embodiment of the present disclosure.

2 is a block diagram illustrating a configuration of an electronic device according to an embodiment of the present disclosure.

3 is a diagram illustrating a method of generating a UI using a graphic element, according to an embodiment of the present disclosure.

4 is a diagram illustrating that the size of at least one graphic element included in a UI is changed when the size of the display screen is changed, according to an embodiment of the present disclosure;

5 is a diagram illustrating a method in which a plurality of electronic devices obtain a graphic element from an external server to display a UI, according to an embodiment of the present disclosure.

6 is a diagram illustrating a method by which a plurality of electronic devices obtain update information on a graphic element from an external server and display the updated graphic element, according to an embodiment of the present disclosure.

7 is a diagram illustrating a method in which a UI is displayed by changing a size and a ratio of at least one of graphic elements according to each type of graphic elements included in the UI.

8 is a diagram illustrating a method of setting each graphic element included in a UI, according to an embodiment of the present disclosure.

9 is a flowchart illustrating a method of controlling an electronic device according to an embodiment of the present disclosure.

10 is a block diagram illustrating a detailed configuration of an electronic device according to an embodiment of the present disclosure.

It should be understood that the embodiments described below are illustratively shown to help the understanding of the present disclosure, and the present disclosure may be implemented with various modifications, different from the embodiments described herein. However, in the following description of the present disclosure, if it is determined that a detailed description of a related known function or component may unnecessarily obscure the subject matter of the present disclosure, the detailed description and specific illustration thereof will be omitted. In addition, the accompanying drawings are not drawn to scale in order to help understanding of the disclosure, but dimensions of some components may be exaggerated.

The terms used in this specification and claims have been chosen in consideration of the function of the present disclosure. However, these terms may vary depending on the intention, legal or technical interpretation of a person skilled in the art, and the emergence of new technology. Also, some terms are arbitrarily selected by the applicant. These terms may be interpreted in the meanings defined in this specification, and if there is no specific term definition, it may be interpreted based on the general content of the present specification and common technical knowledge in the art.

In the description of the present disclosure, the order of each step should be understood as non-limiting unless the preceding step must be logically and temporally performed before the subsequent step. That is, except for the above exceptional cases, even if the process described as a subsequent step is performed before the process described as the preceding step, the essence of the disclosure is not affected, and the scope of rights should also be defined regardless of the order of the steps.

As used herein, expressions such as "first," "second," "first," or "second," may modify various elements, regardless of order and/or importance, and refer to one element. It is used only to distinguish it from other components, and does not limit the components. For example, the first user equipment and the second user equipment may represent different user equipment regardless of order or importance. For example, without departing from the scope of the rights described in this document, a first component may be referred to as a second component, and similarly, the second component may also be renamed as a first component.

As used herein, terms such as “module”, “unit”, “part”, etc. are terms used to refer to a component that performs at least one function or operation, and such component is implemented in hardware or software or may be implemented as a combination of hardware and software. In addition, a plurality of "modules", "units", "parts", etc. are integrated into at least one module or chip, and are integrated into at least one processor, except when each needs to be implemented in individual specific hardware. can be implemented as

In the present specification, expressions such as “have,” “may have,” “include,” or “may include” indicate the presence of a corresponding characteristic (eg, a numerical value, function, operation, or component such as a part). and does not exclude the presence of additional features.

In addition, since the present specification describes components necessary for the description of each embodiment of the present disclosure, the present disclosure is not necessarily limited thereto. Accordingly, some components may be changed or omitted, and other components may be added. In addition, they may be distributed and arranged in different independent devices.

Further, an embodiment of the present disclosure will be described in detail below with reference to the accompanying drawings and the contents described in the accompanying drawings, but the present disclosure is not limited or limited by the embodiments.

Hereinafter, the present disclosure will be described in more detail with reference to the accompanying drawings.

The electronic devices 100-1, 100-2, and 100-3 according to an embodiment of the present disclosure include TVs, smart TVs, monitors, electronic picture frames, electronic blackboards, electronic tables, notebook computers, tablet PCs, desktops, and set-top boxes. It may be implemented in various electronic devices, such as, in FIG. 1 , the first electronic device 100-1, the second electronic device 100-2, and the third electronic device 100-3 are electronic devices including a display. case is shown.

The electronic devices 100 - 1 to 100 - 3 may display a user interface (UI) on a display. The UI according to the present disclosure may include various UIs such as an application execution UI, a menu UI, a lock UI, a setting UI, a standby UI, and a UI for displaying an image.

Referring to FIG. 1 , a first UI 10 may be displayed on a first electronic device 100 - 1 , and the first UI 10 may include a plurality of graphic elements. A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may refer to a UI or a graphic tool constituting the UI element. According to an embodiment of the present disclosure, the graphic tool may be composed of a simple graphic image such as the handle element 40-2 and the bar element 40-3 shown in FIG. 4 . However, the present invention is not limited thereto, and the graphic element may further include content, an icon, text, and a widget. According to an embodiment of the present disclosure, a UI may be generated by combining at least two graphic elements among a plurality of graphic elements. That is, the graphic element may be included in the UI while at least one of the size and ratio of the graphic element is adjusted according to the type specified for each graphic element.

According to an embodiment of the present disclosure, if at least one of the size and ratio of the display screen is changed while the UI is being displayed on the display, the size of the UI may be changed and displayed. In addition, when the size of the UI is changed and displayed, at least one graphic element among the graphic elements included in the UI may be displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI. Specifically, the graphic element may include a first type, a second type, and a third type of graphic element, and according to each type, at least one graphic element among graphic elements included in the UI is another graphic included in the UI. The size may be adjusted and displayed in a ratio different from that of the element. The first UI 10 of FIG. 1 includes a first graphic element 10-1, a second graphic element 10-2, and a third graphic element ( 10-3) may be included. According to the present disclosure, the first graphic element 10-1 is a graphic element of a first type, and the second graphic element 10-2 and the third graphic element 10-3 are graphic elements of a second type. can

The first type of graphic element according to the present disclosure is displayed according to a preset size and ratio (eg, width x length: size of 6 x 8 pixels and a ratio of 3:4), even if the size or ratio of the display screen is changed , the size and proportion of the graphic element of the first type may not change.

And, when at least two second type graphic elements are included in the UI according to the present disclosure, at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI. can be displayed.

That is, in the first UI 10 of FIG. 1 , the first graphic element 10 - 1 is a graphic element of the first type with a preset size (eg, 5 pixel or 5 unit) and a ratio (eg, horizontal: vertical = 1 : 1), the first graphic element 10 - 1 may be displayed.

In addition, the second graphic element 10-2 and the third graphic element 10-3 are graphic elements of the second type, and are formed of the second graphic element 10-2 and the third graphic element 10-3. When the horizontal ratio is set to 3:7, the ratio of the horizontal regions of the second graphic element 10 - 2 and the third graphic element 10 - 3 may be displayed as 3:7.

In addition, the second UI 20 may be displayed on the second electronic device 100 - 2 in which the size of the display screen is increased in the horizontal area in the first electronic device 100 - 1 . The second UI 20 may include a first graphic element 20 - 1 , a second graphic element 20 - 2 , and a third graphic element 20 - 3 . The first graphic element 20-1 of the second UI 20 is a graphic element of the first type, and may have the same size and proportion as the first graphic element 10-1 of the first UI 10-1. can In addition, the second graphic element 20 - 1 and the third graphic element 20 - 3 of the second UI 20 are a second type of graphic element, and a second graphic element of the first UI 10 - 1 . Similarly to ( 10 - 2 ) and the third graphic element ( 10 - 3 ), a horizontal area of the second graphic element ( 20 - 2 ) and the third graphic element ( 20 - 3 ) may be displayed in a size of 3:7 . That is, the ratio of the size of the second graphic element 20-2 and the third graphic element 20-3 of the second UI 20 to the second graphic element 10-2 and the third graphic element 20-3 of the first UI 10 is It is the same as the ratio of the size of the 3 graphic elements 10 - 3 , but the size of each horizontal area may be increased to be displayed.

In addition, the third UI 30 may be displayed on the third electronic device 100 - 3 in which the display screen ratio is maintained in the first electronic device 100 - 1 and the size of the display screen is increased. The third UI 30 may include a first graphic element 30 - 1 , a second graphic element 30 - 2 , and a third graphic element 30 - 3 .

The first graphic element 30 - 1 of the third UI 30 is a graphic element of the first type, and may have the same size and ratio as the first graphic element 10 - 1 of the first UI 10 . . In addition, the second graphic element 30 - 2 and the third graphic element 30 - 3 of the third UI 30 are graphic elements of the second type, and the second graphic element 10 of the first UI 10 . -2) and the third graphic element 10-3, the second graphic element 30-3 and the third graphic element 30-3 are displayed at a ratio of 3:7, which is the ratio of the same horizontal area, and the second graphic element 30-3 is displayed. The overall ratio of the second graphic element 30 - 3 and the third graphic element 30 - 3 may also be maintained and displayed. However, the second graphic element 30 - 2 and the third graphic element 30 - 3 of the third UI 30 are the second graphic element 10 - 2 and the third graphic element of the first UI 10 . The overall size can be increased compared to (10-3). That is, when the size of the display screen is changed and the size of the first UI 10 is increased to the third UI 30 , the first graphic element 30 - 1 included in the third UI 30 is removed. The size of the second graphic element 30-2 and the third graphic element 30-3 may be adjusted and displayed at different ratios.

In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 .

According to various embodiments as described above, an optimal UI according to the size and ratio of the display screens of the electronic devices 100-1 to 100-3 according to the present disclosure may be provided.

Referring to FIG. 2 , the electronic device 100 may include a memory 110 and a processor 120 . Although not shown according to the embodiment, the electronic device 100 may further include appropriate hardware/software configurations that are obvious to those skilled in the art.

The memory 110 may store various programs and data necessary for the operation of the electronic device 100 . Specifically, at least one instruction may be stored in the memory 110 . The processor 120 may perform the operation of the electronic device 100 by executing an instruction stored in the memory 110 .

Specifically, the memory 110 may store instructions or data related to at least one other component of the electronic device 100 . In particular, the memory 110 may be implemented as a non-volatile memory, a volatile memory, a flash-memory, a hard disk drive (HDD), or a solid state drive (SSD). The memory 110 is accessed by the processor 120 , and reading/writing/modification/deletion/update of data by the processor 120 may be performed. In the present disclosure, the term "memory" refers to the memory 110, a ROM (not shown) in the processor 120, a RAM (not shown), or a memory card (not shown) mounted in the electronic device 100 (eg, micro SD). card, memory stick).

In addition, a plurality of graphic elements for configuring the UI may be stored in the memory 110 .

In addition, when a UI is displayed using a plurality of graphic elements in the memory 110 , types and detailed information of each graphic element displayed on the UI may be stored. Details on the type and detailed information of the graphic element will be described later with reference to FIG. 8 .

The processor 120 is a configuration for controlling the overall operation of the electronic device 100 . For example, the processor 120 may control a plurality of hardware or software components connected to the processor 120 by driving an operating system and an application, and may perform various data processing and operations. The processor 120 may be a central processing unit (CPU), a graphics-processing unit (GPU), or both. The processor 120 may be implemented as at least one general processor, a digital signal processor, an application specific integrated circuit (ASIC), a system on chip (SoC), a microcomputer (MICOM), or the like. The processor 120 may execute at least one computer-executable instruction stored in the memory 110 .

When an event for displaying the UI occurs, the processor 120 may control to display the UI on the display. As an embodiment of the present disclosure, when the electronic device 100 includes a display and an event for displaying the UI occurs, the processor 120 may control the display to display the UI on the display. Alternatively, if the electronic device 100 does not include a display and can be connected to an external display device, when an event for displaying the UI occurs, the processor 120 displays the UI on the external display device ( 100) can be controlled.

The event for displaying the UI may include an event in which a user command is input, an event in which a preset time arrives, an event in which an image displayed on the display is stopped or terminated, and the like. However, this is only an embodiment, and the event for displaying the UI of the present disclosure is not limited to the above-described example.

When a user command for displaying the UI is input, the processor 120 may identify at least one of a size and a ratio of the display screen. The user command for displaying the UI is a user command for selecting a specific button provided in the electronic device 100 or a remote control for the electronic device 100, a user command for selecting a menu displayed on the display, or a user terminal such as a smart phone. It may include a command for selecting a menu displayed on the device, and the like. When a user command as described above is input, the processor 120 may identify at least one of a size and a ratio of the display screen. In addition, the display may be included in the electronic device 100 , but the present invention is not limited thereto, and the electronic device 100 may be connected to an external display device, and the processor 120 may display a size and ratio of a display screen of the external display device. At least one of them can be identified.

When at least one of the size and ratio of the display screen is identified, the processor 120 is included in the UI displayed on the display screen among a plurality of graphic elements constituting the UI based on at least one of the identified size or ratio of the display screen At least one graphic element may be identified. Specifically, the electronic device 100 may identify a graphic element to be included in the UI from among the plurality of graphic elements based on the size and ratio of the display screen.

A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may refer to a UI or a graphic tool constituting the UI element. According to an embodiment of the present disclosure, the graphic tool may be composed of a simple graphic image such as the handle element 40-2 and the bar element 40-3 shown in FIG. 4 . However, the present invention is not limited thereto, and the graphic element may further include content, an icon, text, and a widget. In addition, the graphic element may be included in the UI, with at least one of a size and a ratio of the graphic element being adjusted according to each type specified in the graphic element.

For example, referring to FIG. 3 , a plurality of graphic elements are moved as a setting value such as a tooltip element 40 - 1 for displaying text and a setting value such as a volume or screen brightness of the electronic device 100 is adjusted. A handle element 40-2 that can become a handle element 40-2, a bar element 40-3 indicating an area in which the handle element 40-2 can move, and a handle element 40- that the user touches or selects 2) a direction indicating element 40-4 for moving, a thumbnail element 40-5 on which a thumbnail image can be displayed, a pentagon-shaped element 40-6, an arrow-shaped element 40-7, and It may include a text element 40-8 for displaying text.

In addition, the processor 120 includes at least one of the plurality of graphic elements 40-1 to 40-8 configuring the UI 40 for adjusting the setting values of the electronic device 100, such as the volume and screen brightness of FIG. 3 . One graphic element can be identified. That is, the processor includes a tooltip element 40-1, a handle element 40-2, a bar element 40-3, and a direction constituting the UI 40 among the plurality of graphic elements. An indication element 40-4 may be identified.

When at least one graphic element is identified among the plurality of graphic elements constituting the UI, the processor 120 selects at least one of the size and ratio of the identified at least one graphic element to correspond to at least one of the size and ratio of the display screen. It can be controlled to display a UI including at least one identified graphic element by adjusting it on the display. Referring to FIG. 3 , the processor 120 adjusts the sizes and ratios of the identified graphic elements 40-1 to 40-4 to correspond to at least one of the identified sizes and ratios of the identified display screens, thereby increasing the volume, screen brightness and It is possible to control to display the UI 40 for adjusting the setting value of the same electronic device 100 . For example, in the UI 40 of FIG. 3 , the size of the bar element 40 - 3 may be adjusted and displayed according to the size of the screen of the display. In addition, when at least one of the size and ratio of the display screen is changed, the processor 120 may control to change and display the size of the UI in response to the changed screen of the display. In addition, the processor 120 controls to display by changing the size of the UI, so that at least one graphic element among graphic elements included in the UI is displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI. can be controlled Specifically, the UI may be controlled to be displayed by changing at least one of a size and a ratio of at least one of the graphic elements included in the UI according to the type of each graphic element included in the UI. For example, referring to FIG. 4 , if the size of the display screen increases while the existing UI 40 is being displayed, the processor 120 may control to display the UI 45 corresponding to the size of the display screen. That is, when the size of the display screen is increased so that the ratio of the horizontal area of the display screen is increased, the processor 120 increases the size of the bar element 40-3 displayed on the existing UI 40 to the bar element 45- 3) can be controlled to display the UI 45 including the. As the size and ratio of the display screen are changed in FIG. 4 , when the UI 45 in which the size of the UI 40 is changed is displayed, compared to the bar element 40-3 included in the existing UI 40, the UI ( The size of the bar element 45-3 included in 45) may be increased, but the sizes of the tooltip element, the handle element, and the direction indicating element included in the UI 45 are similar to those of the existing UI 40. It may be the same as the size of the tooltip element, the handle element, and the direction indicating element included in the . That is, when at least one of the size and ratio of the display screen is changed, the processor 120 may change the size of the existing UI 40 to control the UI 45 to be displayed. And, in controlling the UI 45 to be displayed, the processor 120 resizes the bar element 45-3 included in the UI 45 to a different ratio from that of other graphic elements included in the UI 45. You can control the display by adjusting it.

And, according to an embodiment of the present disclosure, when the size of the display screen decreases, the processor 120 may control to display the UI by deleting at least one of graphic elements included in the UI. Also, when the size of the display screen increases, at least one of a plurality of graphic elements may be added and displayed in the UI.

And, according to an embodiment of the present disclosure, when a user command for changing the UI is input, the processor 120 deletes at least one graphic element among graphic elements included in the UI, or selects at least one of the plurality of graphic elements. You can control the UI to be displayed by adding it to the UI. That is, the graphic elements according to the present disclosure are combined by the user, so that a UI corresponding to the display environment may be generated without the need for a new design for each UI.

According to an embodiment of the present disclosure, the electronic device 100 may receive a plurality of graphic elements from an external server. And, when there is an update on the plurality of graphic elements in the external server, the electronic device 100 may receive information on the updated graphic elements from the external server. And, based on the received information, the processor 120 may control to display the UI on the display by updating at least one graphic element among graphic elements included in the UI. Details of receiving a plurality of graphic elements and updated information from an external server will be described later with reference to FIGS. 5 and 6 .

In an embodiment of the present disclosure, the graphic element may include a first type, a second type, and a third type of graphic element.

According to an embodiment of the present disclosure, the first type of graphic element is a graphic element that can be displayed according to a preset size and ratio in the UI. For example, the size and ratio are preset by the user (eg, horizontal x Vertical: 3:4 ratio of 6 x 8 pixel) can be displayed. And, according to an embodiment, even if the size and ratio of the display screen displaying the UI are changed, the size and ratio of the first type of graphic element may not change. According to an embodiment of the present disclosure, the second type of graphic element may include the entire UI when an area in which the second type of graphic element is to be displayed is set in the UI and the size and ratio of the display screen displaying the UI are changed. The size and proportion of the second type of graphic element may be changed and displayed to correspond to the size and proportion. That is, according to an embodiment of the present disclosure, when the first type of graphic element and the second type of graphic element are included in the UI and at least one of the size and ratio of the display screen is changed, the first type of graphic element included in the UI is changed. The tangible graphic element may be sized at a different ratio from that of the second type of graphic element included in the UI, and the size of the UI may be changed and displayed.

According to an embodiment of the present disclosure, when at least two graphic elements of the second type are included in the UI, two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type. can be In addition, when at least one of the size and ratio of the display screen for displaying the UI is changed, a preset ratio between at least two second type graphic elements included in the UI is maintained while at least two graphic elements of the second type are each changed. At least one of size and proportion may be changed and displayed. In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 . Also, the third type of graphic element may be displayed by changing at least one of a size and a ratio of the third type of graphic element according to the size of information included in the third type of graphic element. . That is, according to an embodiment of the present disclosure, when the first type of graphic element, the second type of graphic element, and the third type of graphic element are included in the UI, when at least one of the size and ratio of the display screen is changed , the first type of graphic element included in the UI may be sized at a different ratio from that of the first and second type of graphic elements included in the UI, and the size of the UI may be changed and displayed. In addition, when at least one of the size and ratio of the display screen is changed, the second type of graphic element included in the UI is sized at a different ratio from the first and third type of graphic elements included in the UI, and the size of the UI is The size may be changed and displayed.

The type of graphic element will be described later with reference to FIGS. 7 and 8 .

When the electronic device 100 according to an embodiment of the present disclosure is a device capable of displaying a single screen by combining a plurality of displays, the processor 120 changes the size of the display screen according to the combination of at least one display. and ratios. In addition, the processor 120 may control to change and display at least one of the sizes and ratios of at least one graphic element among the graphic elements included in the UI based on the identified size and ratio of the display screen.

According to an embodiment of the present disclosure, when the display is rotatable, the processor 120 may identify a ratio of the display screen changed according to the rotation of the display. In addition, the processor 120 may control to display on the display by changing at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI based on the identified ratio of the display screen. For example, when the 16:9 ratio display screen is rotated and changed to the 9:16 ratio display screen, the vertical ratio of at least one graphic element included in the UI may be increased and displayed.

According to various embodiments as described above, the size and ratio of graphic elements are changed to correspond to the size and ratio of the display screen, so that an optimal UI suitable for the size and ratio of the display screen can be displayed.

Referring to FIG. 5 , each of the electronic devices 100 - 1 to 100 - 3 may receive a plurality of graphic elements from the external server 200 that manages the graphic elements. In addition, each of the electronic devices 100-1 to 100-3 may display UIs 10-1 to 10-3 corresponding to the size and ratio of the display screen, respectively, based on the plurality of received graphic elements. . Specifically, the first electronic device 100-1 receives a plurality of graphic elements from the external server 200 and displays the UI 10-1 corresponding to the environment of the first electronic device 100-1. can In addition, the second electronic device 100 - 2 may receive a plurality of graphic elements from the external server 200 and display the UI 10 - 2 corresponding to the environment of the second electronic device 100 - 2 . have. In addition, the third electronic device 100 - 3 may receive a plurality of graphic elements from the external server 200 and display the UI 10 - 3 corresponding to the environment of the third electronic device 100 - 3 . have. Specifically, by changing the size and ratio of at least one of the plurality of graphic elements according to the size and ratio of the display screen of the electronic device, the application environment of the electronic device, and the setting of the user of each electronic device, the size and ratio of the display screen of each electronic device A corresponding UI may be displayed.

Referring to FIG. 6 , a plurality of graphic elements are received from the external server 200 of each of the first electronic device 100-1 to the third electronic device 100-3, and at least one of the received graphic elements is received. can be used to display the UI. Specifically, a UI corresponding to each environment of the first electronic device 100-1 to the third electronic device 100-3 may be displayed through a plurality of graphic elements.

And, when there is an update on at least one of the plurality of graphic elements in the external server 200, the external server 200 updates each of the first electronic device 100-1 to the third electronic device 100-3. It is possible to transmit information on the graphic element. The update of the graphic element may mean that the shape and color of the graphic element are changed and, in the case of a graphic element including text, the font or text size of the text is changed, but is not limited thereto, and the change in the graphic element is not limited thereto. It can include updates for anything possible.

In an embodiment of the present disclosure, the first UI 10 including the first graphic element 10-1 is displayed in the first electronic device 100-1, and the first graphic element 10-1 is displayed in the external server 200 When 10-1) is updated to the second graphic element 10-2, the external server 200 provides the updated second graphic in the first electronic device 100-1 to the third electronic device 100-3. Information on the element 10-2 may be transmitted.

And, when the first electronic device 100-1 receives the updated information on the second graphic element 10-2 from the external server 200, the first electronic device 100-1 displays the first UI ( The first graphic element 10 - 1 included in 10 ) may display the updated second UI 15 with the second graphic element 10 - 2 .

In addition, when the third UI 20 that does not include the first graphic element 10 - 1 is displayed on the second electronic device 100 - 2 , the second electronic device 100 - 2 displays the updated second Even when information on the graphic element 10 - 2 is received, the third UI 20 may be displayed as it is without updating.

* As described above, when managed in units of graphic elements constituting the UI, since the electronic device only needs to change graphic elements that have been changed in the existing UI, there is no need to modify the entire UI in order to correct one graphic element. .

According to an embodiment of the present disclosure, when at least one of the size and ratio of the display screen is changed, the size and ratio of at least one graphic element among the graphic elements included in the UI according to each type of the graphic element included in the UI At least one of them may be changed to display the UI.

According to an embodiment of the present disclosure, the graphic element may include a first type graphic element, a second type graphic element, and a third type graphic element. In addition, a UI including at least one of the first type graphic element, the second type graphic element, and the third type graphic element may be displayed.

According to an embodiment of the present disclosure, the first type of graphic element is a graphic element that can be displayed in the UI according to a preset size and ratio, for example, can be displayed with a preset size and ratio set by a user. Also, even if the size and ratio of the display screen displaying the UI are changed, the size and ratio of the first type of graphic element may not change. That is, when the size and ratio of the first type of graphic element is preset by the user once, even if the size and ratio of the display screen are changed and the size of the entire UI is changed, the first type of graphic element has the preset size and ratio can be displayed while maintaining According to an embodiment of the present disclosure, by giving a preset value (reserved value) to the graphic element of the first type, the graphic element of the first type may be displayed while maintaining the preset size and ratio. For example, referring to FIG. 7 , the first graphic element 70 - 1 included in the first UI 70 may be a graphic element of the first type. As an embodiment, the first graphic element 70 - 1 may be a graphic element for displaying text or an image. The first graphic element 70 - 1 may have a designated value designated by the user, and horizontal and vertical lengths may be designated. In addition, the color and transparency of the first graphic element 70-1 may be preset (eg, white color, transparency 80%).

In addition, when the size of the display screen for displaying the first UI 70 is reduced, the second UI 80 in which the overall size of the first UI 70 is reduced may be displayed. Even when the second UI 80 in which the overall size of the UI is reduced is displayed, the first graphic element 80 - 1, which is a first type of graphic element included in the second UI 80, is the size and The ratio is maintained and can be displayed.

According to an embodiment of the present disclosure, the overall size or ratio of the UI may be changed in response to the degree to which the UI is changed in the size or ratio of the display screen. For example, when the size of the display screen is doubled, the UI may also be doubled. However, this is only an example, and the degree of increase in the overall size of the UI according to the increase in the size of the display screen of the present disclosure is not limited to the above-described example.

Also, when the size of the display screen for displaying the first UI 70 increases, the third UI 90 with the overall size of the first UI 70 increased may be displayed. Even when the third UI 90 with an increased size of the entire UI is displayed, the first graphic element 90 - 1, which is a first type of graphic element included in the third UI 90 , has its size and The ratio is maintained and can be displayed.

According to an embodiment of the present disclosure, the second type of graphic element may include the entire UI when an area in which the second type of graphic element is to be displayed is set in the UI and the size and ratio of the display screen displaying the UI are changed. The size and proportion of the second type of graphic element may be changed and displayed to correspond to the size and proportion. Specifically, by designating a value representing a ratio of a shared value to a graphic element of the second type, the size and ratio of the graphic element of the second type can be changed and displayed to correspond to the size and ratio of the entire UI. have. Specifically, when there is one graphic element of the second type in the UI, an area in which the graphic element of the second type is displayed may be set in the UI. In this case, the shared value of one graphic element of the second type is 1 can be

Alternatively, when there are two graphic elements of the second type in the UI, an area in which the two graphic elements of the second type are displayed may be set in the UI. In this case, the sum of the shared values of the two graphic elements is 1. can be In addition, when the size and ratio of the display screen for displaying the UI is changed and thus the overall size of the UI is changed, the size of the area in which the two second type graphic elements are to be displayed may be changed and displayed. In addition, the two second type graphic elements may be displayed while maintaining a ratio of a shared value set respectively.

For example, the first UI 70 of FIG. 7 may include a second graphic element 70 - 2 and a third graphic element 70 - 3 that are elements of the second type. As an embodiment, the second graphic element 70 - 2 and the third graphic element 70 - 3 may be graphic elements for displaying text. The share values of the second graphic element 70-2 and the third graphic element 70-3 may be set to 0.7 and 0.3, respectively, by the user. In this case, the second graphic element 70-2 and the third graphic element 70- are located in the remaining regions except for the regions of the first graphic element 70-1 and the fourth graphic element 70-4 included in the UI. 3) may be displayed, and the second graphic element 70-2 and the third graphic element 70-3 may be displayed in the remaining area at a size ratio of 7:3.

And, when the size of the display for displaying the first UI 70 is reduced and the second UI 80 with the reduced size in the first UI 70 is displayed on the display, in the second UI 80 In the remaining area except for the area including the first graphic element 80-1 and the fourth graphic element 80-4, the second graphic element 80-2 and the third graphic element 80-3 are 7 : It can be expressed as a size ratio of 3.

Also, when the size of the display displaying the first UI 70 is increased and the third UI 90 having the increased size in the first UI 70 is displayed on the display, the third UI 90 ), the second graphic element 90-2 and the third graphic element 90-3 are formed in the remaining area except for the area including the first graphic element 90-1 and the fourth graphic element 90-4. It can be displayed in a size ratio of 7:3. In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 . According to an embodiment of the present disclosure, in the third type of graphic element, the size of the area of the third type of graphic element may be identified by the size of information that may be included in the area of the third type of graphic element. That is, when the third type of graphic element is a graphic element for displaying text, the size of the third type of graphic element may increase as the number of text displayed in the third type of graphic element increases. In addition, when the graphic element of the third type is a graphic element for displaying an icon that can be selected by the user, the size of the graphic element of the third type is changed according to the number of icons included in the graphic element of the third type can be

For example, the first UI 70 of FIG. 7 may include a fourth graphic element 70 - 4 that is a third type of graphic element. The size and ratio of the fourth graphic element 70-4 do not change according to the change of the display screen and the ratio for displaying the UI, and the size or ratio according to the size of information included in the fourth graphic element 70-4 The ratio may be changed. That is, when the size of the information included in the fourth graphic element in the first UI 70 and the third UI 90 in which the overall size of the UI is increased is the same, the fourth graphic included in the first UI 70 is The size and ratio of the element 70 - 4 and the fourth graphic element 90 - 4 included in the third UI 90 may be the same. In addition, the size of information included in the fourth graphic element 80-4 included in the second UI 80 in which the overall size of the UI is reduced in the first UI 70 is included in the first UI 70. When the size of the information included in the fourth graphic element 70-4 is larger than the size of the fourth graphic element 80-4 included in the second UI 80, the size of the fourth graphic element 80-4 included in the first UI 70 is 4 may be larger than the graphic element 70-4.

According to various embodiments as described above, even if the size or ratio of the entire UI is changed because the size or ratio of the screen of the display is changed, each graphic element included in the UI is displayed according to each type to correspond to the overall size of the UI Therefore, there may be no need to individually design a UI suitable for the screen and ratio of the display.

Referring to FIG. 8 , the UI 10 includes a first graphic element 10-1, a second graphic element 10-2, a third graphic element 10-3, and a fourth graphic element 10-4. may include. In an embodiment, the first graphic element 10-1 and the fourth graphic element 10-4 are graphic elements for displaying text, and the second graphic element 10-2 is the third graphic element 10- 3) is an area graphic element for designating a displayable area, and the fourth graphic element 10 - 4 may be a cursor icon indicating a position where text is input by the user.

And, according to an embodiment of the present disclosure, the first graphic element 10-1 may be a graphic element of a first type, and the second graphic element 10-2 and the third graphic element 10-3 are There can be two types of graphic elements. Since the fourth graphic element 10 - 4 is a cursor icon, its type may not be specified.

According to an embodiment of the present disclosure, the first graphic element 10 - 1, which is the first type of graphic element, may have a specified value having a fixed size. That is, referring to FIG. 8 , the horizontal length of the first graphic element 10-1 may be fixed to 17 units and the vertical length to be 6 units. In the case of the first type of graphic element having a fixed specified value, even if the size or proportion of the UI 10 is changed, the size and proportion of the first type of graphic element may be displayed without changing. In addition, according to an embodiment of the present disclosure, properties such as color and transparency of the first graphic element 10 - 1 may also be specified.

In addition, the second graphic element 10 - 2 , which is the second type of graphic element, may have a specified value having a preset range. That is, according to an embodiment of the present disclosure, the second type of graphic element may have a designated value having a preset range or a shared value.

That is, the horizontal size of the second graphic element 10-2 may be displayed according to a specified value having a preset range of 12 units to 64 units according to the overall size of the UI 10, and the second graphic element 10 The vertical size of -2) may be displayed according to a designated value having a preset range of 7 units to 9 units according to the overall size of the UI 10 . Also, according to an embodiment of the present disclosure, the first graphic element 10 - 1 and the second graphic element 10 - 2 may be disposed with an interval of 3 units. The interval of 3 units is a fixed value, and even if the size of the UI 10 is changed, the interval may not change.

In addition, the third graphic element 10-3, which is the second type of graphic element, may be displayed in the area other than 3 units horizontally and 3 units vertically at both ends in the area of the second graphic element 10-2. . The interval of 3 units is a fixed value, and even if the size of the UI 10 is changed, the interval may not change.

According to an embodiment of the present disclosure, when there are a plurality of graphic elements of the second type included in the UI or the graphic element of the second type, the sum of the shared values set in each of the plurality of graphic elements of the second type may be 1 have. In addition, when there is one graphic element of the second type included in the UI or the graphic element of the second type, a shared value set in one graphic element of the second type may be 1.

That is, since the second type of graphic element included in the second graphic element 10 - 2 is one third graphic element 10 - 3 , the shared value of the third graphic element 10 - 3 may be 1. .

Also, according to an embodiment of the present disclosure, the second type of graphic element having a shared value may be included in the second type of graphic element having a specified value having a preset range. As an embodiment, when there are two graphic elements of the second type having a shared value included in the graphic element of the second type having a specified value having a preset range, the shared value of each of the two graphic elements of the second type is included in the graphic element of the second type. The sum is 1 (eg, 0.6 : 0.4), and as the size of the graphic element of the second type having a specified value having a preset range is changed, the two graphic elements of the second type have a ratio ( 0.6 : 0.4) and the size can be changed.

In addition, when there is one graphic element of the second type having a shared value included in the graphic element of the second type having a specified value having a preset range, one graphic element of the second type has a shared value of 1, As the size of the second type of graphic element having a specified value having a preset range is changed, the size of one second type of graphic element may be changed. That is, the third graphic element 10-3 included in the second graphic element 10-2 having a specified value having a preset range has a shared value of 1, and the size of the second graphic element 10-2 is And as the ratio is changed, the size and ratio thereof may be changed and displayed.

In addition, the fourth graphic element 10 - 4 as the cursor icon has a horizontal size of 1 unit, and the vertical size may be changed according to the size of the third graphic element 10 - 3 .

Through the various types of graphic elements as described above, when the size or ratio of the entire UI is changed, each graphic element is displayed in a preset size range, so that the size and ratio of the display screen do not need to be individually designed. A corresponding UI may be displayed.

Referring to FIG. 9 , first, the electronic device 100 may receive a user command for displaying a UI ( S910 ). The user command for displaying the UI is a user command for selecting a specific button provided in the electronic device 100 or a remote control for the electronic device 100, a user command for selecting a menu displayed on the display, or a user terminal such as a smart phone. It may include a command for selecting a menu displayed on the device, and the like.

When a user command for displaying the UI is input, the electronic device 100 may identify at least one of a size and a ratio of the display screen ( S920 ). The size and ratio of the display screen may refer to the size and ratio of a screen displaying content, image, or UI on the display or an area displaying content, image or UI on the display.

Then, the electronic device 100 may identify at least one graphic element among a plurality of graphic elements constituting the UI based on at least one of the identified size and ratio of the display screen (S930). Specifically, the electronic device 100 may identify a graphic element to be included in the UI from among the plurality of graphic elements based on the size and ratio of the display screen.

A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may include content, an icon, text, and a widget, and may also include a graphic item such as a simple figure. When at least one graphic element constituting the UI is identified, the electronic device may display the UI by adjusting at least one of the size and ratio of the identified at least one graphic element to correspond to at least one of the size and ratio of the display screen. There is (S940). That is, a UI including at least one graphic element may be displayed with a size and a ratio corresponding to the size and ratio of the display screen.

Referring to FIG. 10 , the electronic device 1000 may include a memory 1010 , a processor 1020 , a display 1030 , a communication interface 1040 , and an input interface 1050 . Here, some configurations of the memory 1010 and the processor 1020 are the same as those shown in FIG. 2 , and thus duplicate descriptions will be omitted.

The display 1030 may display a user interface (UI) and graphic elements. For example, the UI may be various screens such as an application execution screen, a menu screen, a lock screen, a setting screen standby screen, and the like.

Also, the display 1030 may display various images. Here, the image is a concept including at least one of a still image or a moving image, and the display 1030 may display various images such as broadcast content and multimedia content.

In addition, the screen ratio of the display 1030 may be implemented in various ratios including 21:9, 16:9, 4:1, 1:1, and 9:21. In the present disclosure, “the ratio of the screen of the display 1030” may mean a ratio (horizontal: vertical) of the entire screen or the entire area displaying content, image, or UI.

In addition, the screen ratio of the display 1030 can be changed according to a user input, and the display 1030 is implemented as at least one of a rollable display, a rotatable display, and a display that can be displayed by combining a plurality of displays. , the ratio of the screen of the display 1030 may be changed according to the operation of the display.

In addition, the size of the display 1030 may decrease or increase. Specifically, the display 1030 may be implemented as a foldable display in which the display 1030 can be folded and a rollable display in which the display 1030 is rolled. Alternatively, the size of the display may be changed such that the plurality of displays 1030 are connected or separated. Also, the size of the screen of the display 1030 may be changed according to a user input. For example, when the display 1030 is implemented as a rollable display, when a portion of the display 1030 is rolled, the overall size of the display 1030 is the same, but the size of the displayable area of the screen of the display 1030 is different. may vary, and in this case, it may be seen that the size of the screen of the display 1030 has been changed.

As such, the display 1030 is a liquid crystal display panel (LCD), a light emitting diode (LED), an organic light emitting diode (OLED), a liquid crystal on silicon (LCoS), digital light processing (DLP), such as various types of It may be implemented as a display. In addition, the display 1030 may include a driving circuit, a backlight unit, and the like, which may be implemented in the form of an a-si TFT, a low temperature poly silicon (LTPS) TFT, or an organic TFT (OTFT).

Also, the display 1030 may be implemented as a touch screen by being combined with a touch panel. However, this is only an example, and the display 1030 may be implemented in various ways.

The electronic device 1000 may include a communication interface 1040 for performing communication with an external device. The communication interface 1040 may include various communication modules to communicate with an external device or an external server. Specifically, the communication interface 1040 may include at least one communication module among a short-range wireless communication module (not shown) and a wireless LAN communication module (not shown). Here, the short-range wireless communication module (not shown) is a communication module that wirelessly performs data communication with an electronic device located in a short distance, for example, a Bluetooth module, a ZigBee module, and a Near Field Communication (NFC) module. It can be a module or the like. In addition, the wireless LAN communication module (not shown) may be a module that connects to an external network and performs communication according to a wireless communication protocol such as WiFi or IEEE.

In addition, the communication interface 1040 includes a mobile communication module for performing communication by accessing a mobile communication network according to various mobile communication standards such as 3rd Generation (3G), 3rd Generation Partnership Project (3GPP), Long Term Evoloution (LTE), etc. may include In addition, the communication interface 1040 may include at least one of a wired communication module (not shown) such as Universal Serial Bus (USB), Institute of Electrical and Electronics Engineers (IEEE) 1394, RS-232, etc. It may include a broadcast receiving module for receiving.

In particular, the communication interface 1040 may receive a user command for controlling the electronic device 1000 from an electronic device such as a smartphone. For example, when a user command for determining the size or ratio of the screen of the display 1030 is input through the screen of the smart phone, the communication interface 1040 is the screen of the display 1030 of the electronic device 1000 from the smart phone. A user command to determine a size or ratio may be received.

Also, the communication interface 1040 may receive a plurality of graphic elements from an external server. In addition, when there is an update on at least one of the plurality of graphic elements in the external server, the communication interface 1040 may receive information on the updated graphic element from the external server.

The electronic device 1000 may receive various broadcast services and Internet services from the electronic device through the communication interface 140 , communicate with a nearby smart phone or notebook computer, etc., and may be connected to a media device such as a sound bar. have.

The input interface 1050 may receive a user command for controlling the electronic device 100 . In particular, the input interface 150 may include a touch panel for receiving a user touch input using a user's hand or a stylus pen, a physical button for receiving a user manipulation, and the like. In addition, the input interface 1050 may be implemented by being included in an external device capable of wireless communication with the electronic device 1000 . As an embodiment, the external device may be implemented as at least one of a remote control, a virtual keyboard, a smart phone, or a wearable device.

The input interface 1050 may receive a user command for outputting content or an image or a user command for displaying a UI. In addition, the input interface 1050 may be implemented as a microphone for receiving a command through the user's spoken voice. Specifically, when the user's spoken voice is directly input by the microphone, the processor 1020 may identify the user's command using a Speech to Text (STT) module (not shown).

In addition, the electronic device 1000 may include a motor (not shown) and a sensor (not shown). A motor (not shown) may be configured to wind a roll when the display 1030 is implemented as a rollable type. Alternatively, the motor may be configured to rotate the display 1030 when the display 1030 is a rotatable display.

The sensor (not shown) may include various sensors, such as a gyro sensor, a gesture sensor, an acceleration sensor, and a grip sensor, and use the data collected from each sensor to measure the user's viewing distance or measure the size of the rollable display. or the rotation direction of the rotatable display.

Meanwhile, the electronic device 1000 is not limited to the configuration described above in FIG. 10 , and some configurations may be added or omitted depending on the type of the electronic device 1000 .

The various embodiments described above may be implemented by software, hardware, or a combination thereof. According to the hardware implementation, the embodiments described in the present disclosure are ASICs (Application Specific Integrated Circuits), DSPs (digital signal processors), DSPDs (digital signal processing devices), PLDs (programmable logic devices), FPGAs (field programmable gate arrays) ), processors, controllers, micro-controllers, microprocessors, and other electrical units for performing other functions may be implemented using at least one. In particular, the various embodiments described above may be implemented by the processor 1020 of the electronic device 100 . According to the software implementation, embodiments such as procedures and functions described in this document may be implemented as separate software modules. Each of the software modules may perform one or more functions and operations described herein.

Various embodiments of the present disclosure may be implemented as software including instructions that may be stored in a machine-readable storage medium (eg, a computer). A machine is a device capable of calling a stored command from a storage medium and operating according to the called command, and may include the electronic device 100 according to the disclosed embodiments.

When such an instruction is executed by a processor, the processor may perform a function corresponding to the instruction by using other components directly or under the control of the processor. Instructions may include code generated or executed by a compiler or interpreter. For example, by executing instructions stored in the storage medium by the processor, the above-described control method of the electronic device may be executed. For example, by executing a command stored in a storage medium by a processor of a device (or electronic device), obtaining a list including at least one relay device for initial connection with an external device and displaying the list on a display; When one relay device from the list is selected, transmitting a connection request for the selected relay device to the selected relay device. Upon receiving access approval information from the relay device, the relay device can perform a connection displaying a list of at least one external device present on the display; when one external device is selected from the list of the at least one external device, an authentication request for the selected external device is sent from the selected external device When a user input is received in response to the receiving and the authentication request, an initial connection with the selected external device may be performed.

The device-readable storage medium may be provided in the form of a non-transitory storage medium. Here, 'non-transitory' means that the storage medium does not include a signal and is tangible, and does not distinguish that data is semi-permanently or temporarily stored in the storage medium.

According to an embodiment, the method according to various embodiments disclosed in this document may be included and provided in a computer program product. Computer program products may be traded between sellers and buyers as commodities. The computer program product may be distributed in the form of a device-readable storage medium (eg compact disc read only memory (CD-ROM)) or online through an application store (eg Play Store™, App Store™). have. In the case of online distribution, at least a part of the computer program product may be temporarily stored or temporarily generated in a storage medium such as a memory of a server of a manufacturer, a server of an application store, or a relay server.

Each of the components (eg, a module or a program) according to various embodiments may be composed of a singular or a plurality of entities, and some of the above-described sub-components may be omitted, or other sub-components may be various It may be further included in the embodiment. Alternatively or additionally, some components (eg, a module or a program) may be integrated into a single entity to perform the same or similar functions performed by each corresponding component prior to integration. According to various embodiments, operations performed by a module, program, or other component may be sequentially, parallel, repetitively or heuristically executed, or at least some operations may be executed in a different order, omitted, or other operations may be added. can

In the above, preferred embodiments of the present disclosure have been illustrated and described, but the present disclosure is not limited to the specific embodiments described above, and is commonly used in the technical field belonging to the present disclosure without departing from the gist of the present disclosure as claimed in the claims. Various modifications may be made by those having the knowledge of, of course, and these modifications should not be individually understood from the technical spirit or perspective of the present disclosure.

Claims

A method for controlling an electronic device, comprising:

displaying a UI including a plurality of graphic elements when a user command for displaying a user interface (UI) is input; and

When at least one of a size and a ratio of a display screen for displaying the UI is changed, changing and displaying the size of the UI;

The changing and displaying the size of the UI may include adjusting the size of at least one graphic element among graphic elements included in the UI at a different ratio from that of other graphic elements included in the UI and displaying the changed size.
According to claim 1,

The UI includes a graphic element of a first type and an element of a second type;

The first type of graphic element is displayed according to a preset size and ratio,

When the UI includes at least two graphic elements of the second type, the at least two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type included in the UI control method.
3. The method of claim 2,

When at least one of the size and ratio of the display screen is changed,

The size and ratio of the first type of graphic element included in the UI are not changed,

A control method in which at least one of a size and a ratio of each of the at least two second graphic elements is changed and displayed while a preset ratio between the at least two second type graphic elements included in the UI is maintained.
3. The method of claim 2,

The UI further includes a graphic element of a third type,

In the third type of graphic element, at least one of a size and a ratio of the third type of graphic element is changed and displayed according to a size of information included in the third type of graphic element.
According to claim 1,

displaying the UI by deleting at least one of graphic elements included in the UI when the size of the display screen decreases; and

and displaying the UI by adding at least one of the plurality of graphic elements to the UI when the size of the display screen increases.
According to claim 1,

When a user command for changing the UI is input, deleting at least one graphic element among graphic elements included in the UI or adding at least one of the plurality of graphic elements to the UI to display the UI A control method further comprising ;.
According to claim 1,

The plurality of graphic elements are received from an external server,

receiving information on the updated graphic element from an external server when there is an update on the plurality of graphic elements; and

Displaying the UI by updating at least one graphic element among graphic elements included in the UI based on the received information.
According to claim 1,

When the electronic device is a device capable of displaying a plurality of displays in combination, the size and ratio of the display screen changed according to the combination of at least one display are identified and included in the UI based on the identified size and ratio Changing and displaying at least one of a size and a ratio of at least one graphic element among the graphic elements.
According to claim 1,

When the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI. Changing and displaying the; Control method further comprising.
In an electronic device,

a memory including at least one instruction; and

By executing the at least one instruction, when a user command for displaying a UI (User Interface) is input, controlling to display a UI including a plurality of graphic elements,

When at least one of a size and a ratio of a display screen for displaying the UI is changed, a processor for controlling to change and display the size of the UI; includes,

The processor, in controlling to display by changing the size of the UI,

An electronic device for controlling to display at least one graphic element among graphic elements included in the UI by adjusting the size at a different ratio from that of other graphic elements included in the UI.
11. The method of claim 10,

The UI includes a graphic element of a first type and an element of a second type;

The first type of graphic element is displayed according to a preset size and ratio,

When the UI includes at least two graphic elements of the second type, the at least two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type included in the UI becoming an electronic device.
12. The method of claim 11,

When at least one of the size and ratio of the display screen is changed,

The size and ratio of the first type of graphic element included in the UI are not changed,

The electronic device characterized in that at least one of a size and a ratio of each of the at least two second graphic elements is changed and displayed while a preset ratio between the at least two second type graphic elements included in the UI is maintained.
12. The method of claim 11,

The UI further includes a graphic element of a third type,

The third type of graphic element is displayed by changing at least one of a size and a ratio of the third type of graphic element according to a size of information included in the third type of graphic element.
11. The method of claim 10,

The processor is

When the size of the display screen is reduced, by deleting at least one of the graphic elements included in the UI to control to display the UI,

When the size of the display screen increases, at least one of the plurality of graphic elements is added to the UI to control the UI to be displayed.
11. The method of claim 10,

The processor is

When a user command for changing the UI is input, at least one graphic element among graphic elements included in the UI is deleted, or at least one of the plurality of graphic elements is added to the UI to display the UI Electronic device, characterized in that.