KR100914125B1 - Method of constituting User Interface In Portable Device And Portable Device for performing the same - Google Patents

Abstract

A method of constructing a user interface (UI) screen in a portable terminal includes collecting window area information of at least one partition area defined by a user to construct a user interface (UI) screen, and Generating a script header based on window region information, and displaying a window of the at least one partitioned region based on the generated script header to configure the user interface (UI) screen. The user can configure the user interface (UI) screen as desired by receiving the property of the window area of the partition of the user interface (UI) screen of the portable terminal from the user, and the user does not need to go through a separate server The user interface (UI) screen can be configured in the form desired by the user.

Portable Terminal, User Interface, UI, Edit, Configuration, Menu, Standby Screen

Description

Method of constituting user interface in portable device and portable device for performing the same}

The present invention relates to a user interface of a portable terminal, and more particularly, to a method of configuring a user interface (UI) screen in a portable terminal and a portable terminal for performing the same.

In general, a user interface (UI) screen such as a menu screen or a standby screen in a portable terminal such as a mobile communication terminal is pre-programmed in software as a pop-up menu or an icon menu. Cannot arbitrarily change the menu configuration or icon.

That is, in a general portable terminal, a user interface (UI) such as a menu screen may be set only within a range determined by the terminal manufacturer.

In general portable terminals, the user often uses different menu items, but the configuration of the menu screens can only display the same predefined menu configuration, and the menus cannot be reconfigured to meet the user's needs.

Accordingly, there is a need for a function that allows a user to edit a user interface screen such as a standby screen or a menu screen of a portable terminal to suit the user's taste.

In Patent Publication No. 2002-36879 (name of the invention “Variable Menu Implementation Method Using a Script Language in a Mobile Terminal”), a user writes a desired menu using a tool capable of writing a menu script or a menu script. Uploaded to a specific server, the uploaded menu script is downloaded from the server to the mobile terminal, and the downloaded menu script is interpreted by a script interpreter inside the mobile terminal and displayed on the display unit.

According to the Patent Publication No. 2002-36879, a user writes a menu script directly on a personal computer (PC) or uses a tool capable of writing a menu script to create a desired menu and uploads it to a specific server, and the user uploads After the downloaded menu script was downloaded from the server to the mobile terminal, the user could not configure the desired menu on the mobile terminal.

Therefore, in the above-mentioned Patent Publication No. 2002-36879, the user cannot configure a desired menu on the mobile terminal, and there is a limit of using only the menu set by the reconfigured menu script downloaded from the server.

Accordingly, a first object of the present invention is to provide a user interface (UI) screen configuration method for configuring a user interface (UI) screen of a portable terminal according to a user's taste.

In addition, a second object of the present invention is to provide a portable terminal having a user interface (UI) screen configuration function that can configure the user interface (UI) screen of the portable terminal to suit the user's taste.

According to an aspect of the present invention, there is provided a method for configuring a user interface screen in a portable terminal according to an aspect of the present invention. Collecting window region information, generating a script header based on window region information of the at least one partition region, and displaying a window of the at least one partition region based on the generated script header. Configuring a user interface (UI) screen. Collecting window area information of at least one partition area defined by a user to compose the UI screen comprises capturing a partition area picture drawn by the user to compose the UI screen. Window area information of at least one divided area may be collected. Collecting window area information of at least one partition area defined by the user to compose the UI screen may include: each pixel constituting the first image data obtained by photographing the partition area picture drawn by the user; Generating second image data by calculating an average of R, G, and B color values, and converting an average value of R, G, and B color values of each pixel constituting the second image data to 1 or 0 And xy coordinate value and mask value for each pixel constituting the second image data, wherein the mask value is an upper-left edge, upper-right edge, lower- of each pixel around a rectangular window. Generating third image data comprising a structure having a left edge and a lower edge, the value representing a property of indicating a right edge; and a coordinate value of the structure of the third image data. It may comprise a step of converting the relative coordinates for the user interface (UI) screen. Collecting window area information of at least one divided area for constituting the UI screen may include sensing coordinate values of a plurality of points on a touch screen touched by the user. Window area information of at least one partitioned area for configuring the data may be collected. Collecting window area information of at least one divided area for configuring the user interface (UI) screen may include sensing an XY coordinate value around a predetermined window of the touch screen touched by the user; Xy coordinate value and mask value for each pixel of the perimeter, where the mask value represents the top-left edge, top-right edge, bottom-left edge, bottom-right edge of each pixel around the rectangular window. Generating image data comprising a structure having a value for distinguishing a property to be represented; and converting coordinate values of the structure of the image data into relative coordinate values suitable for the user interface (UI) screen. have. Collecting window area information of at least one divided area for configuring the user interface (UI) screen includes configuring a rectangular window area using only coordinate values of two points touched by the user on the touch screen. can do. The user interface (UI) screen configuration method of the portable terminal may include receiving a property of the window area of the at least one partitioned area from the user, and setting a script based on the property of the window area of the at least one partitioned area. The method may further include generating a body and configuring the UI screen by using the generated script body. The method of constructing a user interface (UI) screen in the portable terminal may include generating a script body based on a default attribute of a window area in the at least one partitioned area, and using the generated script body. The method may further include configuring a screen. The scripting language may be a synchronized muitimedia integration language (SMIL) script.

In addition, a portable terminal having a user interface screen configuration function according to an aspect of the present invention for achieving the second object of the present invention is to provide a user interface (UI) screen of at least one partition area defined by the user Collecting window area information, generating a script header based on window area information of the at least one partition area, and displaying a window of the at least one partition area based on the generated script header to display the user interface (UI). A storage unit for storing a script language including the generated script header. The controller may collect window region information of at least one divided region for constituting the user interface (UI) screen by photographing the divided region drawn by the user. The controller may collect window area information of at least one divided area for configuring the user interface (UI) screen by sensing coordinate values of a plurality of points on the touch screen touched by the user. The control unit receives a property of the window area of the at least one partitioned area from the user, generates a script body based on the set property of the window area of the at least one partitioned area, and uses the generated script body. The UI screen may be configured.

According to the user interface (UI) screen configuration method as described above, in order to configure a user interface (UI) screen, the window region information of the partition area defined by the user is collected and includes a script header configured based on the window area information. The UI screen may be configured using a script language.

In addition, the user interface may be configured in the form desired by the user by receiving the property of the window area of the divided area of the UI screen of the portable terminal.

In addition, the user may configure the user interface (UI) screen in the form desired by the user in the portable terminal itself without going through a separate server.

As the present invention allows for various changes and numerous embodiments, particular embodiments will be illustrated in the drawings and described in detail in the written description.

However, this is not intended to be limited to the specific embodiment of the present invention, it should be understood to include all modifications, equivalents, and substitutes included in the spirit and scope of the present invention.

Hereinafter, with reference to the accompanying drawings, it will be described in detail a preferred embodiment of the present invention. Hereinafter, the same reference numerals are used for the same components in the drawings, and duplicate descriptions of the same components are omitted.

Terms such as first and second may be used to describe various components, but the components should not be limited by the terms. The terms are only used to distinguish one component from another. For example, without departing from the scope of the present invention, the first component may be referred to as the second component, and similarly, the second component may also be referred to as the first component. The term and / or includes a combination of a plurality of related items or any item of a plurality of related items.

1 is a flowchart illustrating a method for configuring a dynamic user interface (UI) in a portable terminal according to an embodiment of the present invention. 2 is a flowchart illustrating a process of configuring a UI screen by capturing an image drawn by a user in a portable terminal according to an embodiment of the present invention. 3 illustrates an image drawn by a user in a portable terminal according to an embodiment of the present invention, and FIGS. 4 and 5 illustrate a process of detecting an edge of a rectangular region from the image drawn by the user of FIG. 6 is a flowchart illustrating a process of configuring a user interface (UI) screen using a touch screen, and FIGS. 7 and 8 are window areas of a touch screen of a portable terminal according to an embodiment of the present invention. It is a conceptual diagram for explaining the method for detecting. 9 shows edge pixels of the finally detected rectangular window regions.

First, referring to FIG. 1, window region information of at least one partition area defined by a user is collected from a user in order to configure a user interface (UI) screen in a portable terminal (S110). For example, the user may draw the divided area for constructing the UI screen by hand and generate the window area information based on an image captured by the camera. Alternatively, the window area information may be generated after the user configures a partition area for configuring the UI screen by using a touch pad or a touch screen of the portable terminal. A process of generating the window region information based on the image photographed by the camera and a specific process of generating the window region information using the touch pad or the touch screen will be described later.

The window area information may include a window type of a window included in each divided area on a UI screen, a position (X and Y coordinate values) of the window area, and a size of the window area. For example, the window can be a rectangle, triangle, circle, or ellipse. If the window is a rectangle, the position of the window area may be the coordinates of the upper left corner of the rectangle X and Y, and the size of the window area may indicate the width and height of the rectangle. If the window area is circular, the location of the window area may represent the center coordinates X and Y of the circle, and the size of the window area may be the radius of the circle.

Next, a script header is generated based on the window region information of each divided region (step S120). In the following description, a SMIL script is used as the scripting language. Here, Smile (SMIL) is one of synchronous multimedia integration languages and one of applications of XML (eXtensible Markup Language), and is a language for defining and showing temporal and spatial relationships of multimedia materials.

The header of the SMIL script includes region IDs (region_id) and respective window region information for each divided region on a UI screen. Each window may have a unique region ID (region_id). The region ID (region_id) may be used as a criterion for determining what each window region includes among various contents such as an image, text, and information data in the window region.

The following source code shows an example of a smile script header. For example, in the following source code, <region id = "IMG_ZONE_ID3" left = "0" top = "0" width = "92" height = "25" z-index = "0"> In the case of a rectangle, the region ID (region_ID) is "IMG_ZONE_ID3", and the position of the window region in the user interface (UI) screen of the portable terminal is X = 0, Y = 0, width of the window region = 92, height (height) = 25.

   <smil>

     <head>; SMIL script header part

  <meta name = "*****" content = "********" />

   <layout>

    <root-layout left = "0" top = "0" width = "240" height = "270" z-index = "0" />

    <region id = "IMG_ZONE_ID3" left = "0" top = "0" width = "92" height = "25" z-index = "0">

    <region id = "TEXT_ZONE_ID0" left = "51" top = "4" width = "35" height = "17" z-index = "0" />

    </ region>

   </ layout>

   <customAttributes id = "FOCUSZONE">; Settings for the window to be focused by default at initialization

    <customTest id = "ChZone0" title = "IMG_NEWS_ZONE_ID1" defaultState = "true" override = "visible" />; The window to be focused by default on initialization

  </ head>

  <body>; SMIL script body part

    <par id = "ENTRANCE">

<text src = "% CITY%" region = "TEXT_ZONE_ID0" />; Text window

<img src = "wzone_country.gif" region = "IMG_ZONE_ID3" />; Image windows

<animation src = "% IMAGE%" region = "INFO_ZONE_ID0" mediaRepeat = "strip" />; Image window with animation source

<textstream src = "% NOTICE%" region = "TEXT_ZONE_ID4" />; A window with sliding text

<img src = "22mszone_logon.gif" region = "IMG_ZONE_ID10" />

    </ par>

    <par id = "FOCUSSET">; Set image to display when focus event is disabled

<img src = "123photozone_01.gif" region = "IMG_NEWS_ZONE_ID1" />

       <img src = "123photozone_02.gif" region = "IMG_NEWS_ZONE_ID2" />

<switch>; Select the image to be displayed when the focus event is activated

        <img src = "123photozone_01_s.gif" region = "IMG_NEWS_ZONE_ID1" customTest = "ChZone0" />

<img src = "123photozone_02_s.gif" region = "IMG_NEWS_ZONE_ID2" customTest = "ChZone1" />

</ switch>

       </ par>

    </ body>

  </ smil>

Then, based on the generated script header, the window area in each divided area is displayed on the UI screen (step S130).

The user sets the property of the window area in each divided area through the setting window with respect to the window area displayed on the UI screen (step S140). A detailed description of the process of setting the property of the window area will be given later.

Here, the properties of the window area in each partition area may include the window position (X, Y), window size, window type, type of content allocated to each partition area, for example, still image image, text, URL, Video image, etc., whether the window receives focus events, the image to be displayed if the focus event is received, the image to be displayed if the focus event is not received, the applicable action for each content type of each partition, and When a user selects a content by pressing a predetermined key such as an OK key, the content may include a path linked to the corresponding content. The action for each content type may include, for example, scrolling up, down, left, and right when the content is text, animation and focus effects when the content is text, and play and stop when it is a video.

A smile script body is generated based on the set properties of each window area (step S160).

The body of the SMIL script determines what content to show based on the region_id value. For example, in the source code of the SMIL script body, <text src = "% CITY%" region = "TEXT_ZONE_ID0" /> texts the city name in the window area having "TEXT_ZONE_ID0" as the region ID (region_id). It means to show.

<Par> ~ </ par> of the body portion of the SMIL script is when the window area having a predetermined area ID that can receive the focus event by the user is activated when the window area is activated through the focus event. As a tag to determine the image at the time, the &quot; FOCUSSET &quot; of the <par> tag indicates which image should be displayed by the window with the ID that can receive the user's focus event. Windows that are not contained within the <switch> to </ switch> tags within the <par> to </ par> tags will display an image indicating that each is disabled.

Of the windows whose IDs receive the focus event contained in the <switch> to </ switch> tags, only one window whose ID currently has the focus event will draw the active image specified in the tag.

For example, windows with IMG_NEWS_ZONE_ID1 and IMG_NEWS_ZONE_ID2 from the beginning of the <par> tag to the beginning of the <switch> tag will display the disabled image and the window corresponding to the ID with the current focus is the <switch> ~ </ switch It is possible to handle the focus event according to the user's cursor movement by drawing the active image set in the ID in the> tag.

Next, a UI screen is constructed using the generated smile script header and smile script body (step S160).

Hereinafter, a process of generating the window area information based on the image photographed by the camera will be described with reference to FIGS. 2 to 5 and 9.

First, as shown in FIG. 3, a user draws at least one partitioned area by hand for use as a user interface (UI) screen, photographs the partitioned area drawn by the hand with a camera, and uses the photographed image as first image data. Store in a portable terminal.

Referring to FIG. 2, first image data obtained by photographing a segmented area picture drawn by a user is read (step S210). The first image data includes R, G, and B color values of the pixels constituting the divided region. The R, G, and B color values may each have a value of 0 to 255.

The second image data is generated by obtaining average values of R, G, and B color values for each pixel constituting the first image data (step S220). Here, the second image data includes an average value of the R, G, and B color values of the pixels constituting the divided region.

The average value of the R, G, and B color values of each pixel constituting the second image data is converted into '0' or '1' (step S230). For example, when the average value of the R, G, and B color values of each pixel constituting the second image data is smaller than the average value of the R, G, and B color values of the neighboring pixels, the data value of the pixel is' If it is set to '1' and larger than the average value of the R, G, and B color values of the surrounding pixels, the data value of the corresponding pixel may be set to '0'. Alternatively, when the average value of the R, G, and B color values of each pixel constituting the second image data is smaller than the predetermined reference value, the data value of the pixel is set to '1'. The value can be set to '0'.

For each pixel having a value of '1' or '0', third image data including a structure having an xy coordinate value and a mask value is generated (step S240). Here, the xy coordinate value represents a coordinate value obtained based on the size of the photographed photographic image of each pixel having the value of '1' or '0'. The mask value is a property of each pixel around a rectangular window such as UL (top-left, ┌), UR (up-right, ┐), DL (bottom-left, └), DR (bottom-right, ┘). The value to distinguish between. For example, UL (upper-left, ┌) represents a point having a current point, a right point, and a lower point 1 based on the current point. For example, the mask value of a pixel constituting UL (up-left, ┌) is Ox1000, and the mask value of a pixel constituting UR (up-right, ┐) is Ox0100, DL (down-left, └). The mask values of the pixels are Ox0010, and the mask values of the pixels constituting DR (bottom-left, ┘) are Ox0001, UL (up-left, ┌), UR (up-right, ┐), DL (bottom-left, └) and DR (H-R), the mask value of the pixel that does not correspond to any one may have 0x0000. For example, the region 410 of FIG. 4 constitutes a DR (low-right, ┘), and the mask value of the pixel 401 has 0x0001 indicating DR (low-right, ┘). In FIG. 4, a DR (lower-right, shorter) edge can be detected in the rectangular window as in the area 510 of FIG. 5, and the user-drawn segment of FIG. 3 is expanded by expanding the search area as described above. The DR (lower-right, shorter) edge of the area 310 may be detected from the first image data of the area picture. For example, the search area may be extended by searching from the first line of the first image data of FIG. 3 to the left to the right and sequentially searching for the next line.

The structure as described above may be generated by dividing the attributes of each pixel by searching as described above with respect to all pixels of the first image data photographed by the user.

Rectangular window including UL (up-left, ┌), UR (up-right, ┐), DL (bottom-left, └), DR (bottom-right, ┘) from the structure of the third image data as described above. The validity check may be performed using the mask value of each pixel on whether or not validity can be configured.

FIG. 9 illustrates edge pixels of rectangular windows that are finally detected effectively from an image of a user-photographed image of FIG. 3.

Referring to FIG. 9, the window regions are composed of four parent windows Wp1, Wp2, Wp3, and Wp4 and four child windows Wc1, Wc2, Wc3, and Wc4. For example, the child window Wc1 is included inside the parent window Wp1. Child windows can inherit the properties of the parent window.

Referring to FIG. 9, the first pixel 901 of the first line has a UL (top-left, ┌) attribute and the mask value is 0x1000, and the middle pixel 603 of the first line has UR (top-right, ┐) and It has two attributes of UL (up-left, ┌), and the mask value 0x0100 of the UR (up-left, ┐) attribute and 0x1000 of the UL (up-left, ┌) attribute are 0x1100. The last pixel 605 of the first line has an attribute of UL (top-left, ┌) and the mask value is 0x1000.

The first pixel 611 of the second line has two attributes, DL (lower-left, └) and UL (upper-left, ┌), and mask values 0x0010 and UL (upper-left) of the DL (lower-left, └) attribute. If the sum of the mask values 0x1000 of the attributes is 0x1010. The middle pixel 613 of the second line has all four attributes of UR (up-right, ┐), UL (up-left, ┌), DL (down-left, └) and DR (bottom-right, ┘). And the sum of the mask values of the UR (up-right, ┐), UL (up-left, ┌), DL (down-left, └), and DR (bottom-right, ┘) attributes is 0x1111. The last pixel 615 of the second line has two attributes: DR (bottom right) and UR (top right), and the mask value of the DR (bottom right) and UR (top right). If the sum of the mask values of the attributes is 0x0101.

Hereinafter, a method of performing validation using information of a structure of each pixel as to whether or not the detected pixels normally form a rectangle having up, down, left, and right sides will be described with reference to FIG. 9.

A rectangle with normal top, bottom, left and right will have four points with attribute values of UL, UR, DL, and DR. Based on this rule, if all pixels of the photo data are searched and it is determined that the pixel has one or more of the attribute values of UL.UR, DL, and DR, it is regarded as a valid point and the attribute value of the valid point is obtained using the mask value. Check If the number of each attribute value is not the same when the value of each attribute is added to the found valid points, the number of UL, UR, DL, and DR is different. It is assumed that it is not present and the process of finding the effective point again according to the correction algorithm. After that, if the found valid points are found to be valid, the validity is checked once again. This is to invalidate the points to remove the points determined to be valid because the number of attribute values is correct. The basis used at this time is based on the rule that the child window should not leave the area of the parent window because each area has a hierarchical structure. In addition, since the coordinates of the effective point found through the photo data are coordinate values determined based on the width and width of the photo data, it is necessary to correct them for the area where the script should be displayed. Therefore, if this coordinate value is corrected to the coordinate value of the area to be displayed and it is considered that the child window is out of the area of the parent window when it is determined that each configured window area forms a relationship between the parent and the child, the coordinate If the value is corrected according to the rules and you think it is out of range, it removes all valid points with the coordinate values that constituted the window. These windows can then be further fine-tuned by the user in the property window to create a script that matches the original picture that the user had drawn.

Referring back to FIG. 2, the coordinate values of the validly generated structure are converted into relative coordinate values of the UI screen (step S250). Since the xy coordinate value of each pixel obtained in step S240 is a coordinate value obtained based on the size of the photographed photo image, it is converted into a relative coordinate value to fit the display size of the portable terminal. Specifically, the xy coordinate value of each pixel obtained in step S240 is converted into a relative coordinate value to match the display area size of the portable terminal to which the script is to be applied. For example, in FIG. 9, the coordinates of the UL (upper-left, ┌) edge of the outermost root window are (0, 0), and the relative coordinate values of the validly generated structure are converted into the root window. It can generate based on the coordinates (0, 0) of the UL (up-left, ┌) edge.

The relative coordinate value is corrected to have a hierarchical window consisting of a parent window and a child window (step S260). Specifically, UR (up-right, ┐) and UL (up-left, ┌) are corrected to have the same y coordinate value, and DL (down-left, └) and DR (down-right, ┘) are the same. Correct to have the same y coordinate value. In addition, UR (up-right, ┐) and DR (down-right, ┘) are corrected to have the same x coordinate value, and UL (up-left, ┌) and DL (down-left, └) are the same x Correct to have a coordinate value.

A smile script header is generated to form a hierarchical window consisting of a parent window and a child window using the corrected relative coordinate values (step S270). The smile script body portion may be set in advance to have a default value, and the smile script body portion may be changed later by selecting an attribute of each partition area from a user. The smile script source code below shows a smile script header portion corresponding to each window region of FIG. 6 finally detected from the photographed image of FIG.

  <smil>

   <head>

<meta name = "****" content = "*****" />

  <layout>

    <root-layout left = "0" top = "0" width = "240" height = "320" z-index = "0" />; Root window

    <region id = "IMAGE_ZONE_ID1" left = "0" top = "0" width = "120" height = "160" z-index = "0" />; Parent window Wp1

    <region id = "IMG_ZONE_CONTENT1" left = "21" top = "21" width = "80" height = "120" z-index = "1">; Child Window Wc1

    </ region>

    <region id = "IMAGE_ZONE_ID2" left = "121" top = "0" width = "120" height = "160" z-index = "0">; Parent window Wp2

    <region id = "IMG_ZONE_CONTENT2" left = "141" top = "21" width = "80" height = "120" z-index = "1" />; child window Wc2

    </ region>

    <region id = "IMAGE_ZONE_ID3" left = "0" top = "161" width = "120" height = "160" z-index = "0">; Parent window Wp3

    <region id = "IMG_ZONE_CONTENT3" left = "21" top = "21" width = "80" height = "120" z-index = "1" />; child window Wc3

    </ region>

    <region id = "IMAGE_ZONE_ID4" left = "121" top = "161" width = "120" height = "160" z-index = "0">; Parent window Wp4

    <region id = "IMG_ZONE_CONTENT4" left = "141" top = "181" width = "80" height = "120" z-index = "1" />; child window Wc4

    </ region>

   </ layout>

</ head>

<body>

</ body>

  </ smil>

Hereinafter, a detailed process of generating window area information using a touch pad or a touch screen according to another embodiment of the present invention will be described with reference to FIGS. 6 to 9.

Compared to the case of configuring a window for a user interface (UI) by photographing a picture drawn by a user, when the user configures a window using a touch screen, when the user touches a predetermined point of the touch screen, X, Since the Y coordinate values are simply obtained, the X and Y coordinate values around the window can be obtained more easily.

Referring to FIG. 6, a XY coordinate value around a predetermined window of the touch screen is generated by a user's touch operation (step S610). Here, the predetermined window may be recognized by a user's touch operation, and the shape of the window may have various shapes recognized by the user's touch operation such as a rectangle, a triangle, a circle, an ellipse, and the like.

Image data consisting of a structure having (xy coordinate values, mask values) is generated for each pixel around the predetermined window (step S620). As described above, the mask value may be defined around a rectangular window such as UL (up-left, ┌), UR (up-right, ┐), DL (down-left, └), DR (bottom-right, ┘). This value is used to distinguish the property of each pixel. The user may generate the structure as described above by dividing the attributes of each edge pixel with respect to the four edge pixels of the window area.

Rectangular window including UL (up-left, ┌), UR (up-right, ┐), DL (bottom-left, └), DR (bottom-right, ┘) from the structure of the third image data as described above. The validity check may be performed using the mask value of each pixel on whether or not validity can be configured.

The coordinate value of the validly generated structure is converted into the relative coordinate value of the UI screen (step S630). Specifically, since the xy coordinate value of each pixel obtained in step S620 is a coordinate value obtained based on the size of the touch screen, it is converted into a relative coordinate value so as to fit the display area size to which the script of the portable terminal is to be applied. For example, in FIG. 9, the coordinates of the UL (upper-left, ┌) edge of the outermost root window are (0, 0), and the relative coordinates of the validly generated structure are represented by the root window. It can be generated based on the coordinates (0, 0) of the UL (up-left, ┌) edge of.

The relative coordinate value is corrected to have a window area of a hierarchical structure consisting of a parent window and a child window (step S640). Specifically, UR (up-right, ┐) and UL (up-left, ┌) are corrected to have the same y coordinate value, and DL (down-left, └) and DR (down-right, ┘) are the same. Correct to have the same y coordinate value. In addition, UR (up-right, ┐) and DR (down-right, ┘) are corrected to have the same x coordinate value, and UL (up-left, ┌) and DL (down-left, └) are the same x Correct to have a coordinate value.

A smile script header is generated to form a window area of a hierarchical structure consisting of a parent window and a child window using the corrected relative coordinate values (step S650). The smile script body portion may be set in advance to have a default value, and the smile script body portion may be changed later by selecting an attribute of each partition area from a user.

On the other hand, for example, when generating a structure for a rectangular window area, as shown in FIG. 7, when the user starts by touching the first point 701, and finally ends by touching the second point 702 1 Using only the first and second points, the rectangular window area may be displayed on the UI screen. Points 3 and 4 according to the coordinate correction principle that the Y coordinates of 1 and 3 are the same, the X coordinates of 1 and 4 are the same, the Y coordinates of 2 and 4 are the same, and the X coordinates of 2 and 3 are the same. If you use the touch screen by automatically calculating the coordinates of, you can simply configure a rectangular window area with only two points.

In addition, when the structure is generated for the rectangular window area, as shown in FIG. 8, when the user touches the first point 801, the first point is displayed on the UI screen, and the first point is displayed. When the coordinate value is taken from the touch screen driver 923 (see FIG. 9), and the user touches the second point 802 and moves to the third point 803 to end the touch operation from the touch screen, the user interface ( In the UI screen, only a solid line connecting the first point 801 and the third point 803 may be displayed according to the coordinate value correction principle.

Hereinafter, a process of setting property information of each window area on a UI screen will be described with reference to FIGS. 10 to 12.

FIG. 10 illustrates a plurality of window areas on a UI screen generated based on a script header generated according to an embodiment of the present invention. FIGS. 11 to 13 show each window of FIG. 10 through a user setting window. Shows the process of editing the area. 11 and 12 illustrate a user interface (UI) screen for changing an attribute of the first region of FIG. 10, and FIG. 13 illustrates a user interface (UI) screen for changing an attribute of the second region of FIG. 10. Indicates.

The UI screen of FIG. 10 may include a plurality of divided regions, and each divided region may be divided into, for example, a text region, an image region, and an information region. The text area may include text such as recently received SMS, weather information, time information, portable terminal location information or schedule information, and the like.

The image area may include and display content of a still image, a web browser, a video, or an animation such as photo data. The still image may include a still image in a jpeg, gif, png, or bmp file format. The video may include a video of k3g, avi, mpg, mpeq file format. The animation may include an animation such as a flash file format.

The information area may include and display an application in a portable terminal such as a Uniform Resource Locator (URL), a game, and the like.

First, referring to FIG. 11, a user may set a predetermined property on a background window area 1010 that is a parent window of an image area. If the property is set, a region ID (region_ID) is automatically generated (1101). Specifically, the user checks the check box 1103 whether the window receives the focus event with respect to the background window area 1010, sets the file path 1105 of the image to be displayed if the focus event is activated, and focus event. When is deactivated, the file path 1107 of the image to be displayed can be set. In addition, the user may select the window shape 1109 from the circle, rectangle, triangle, etc. for the background window area 1010. 11 illustrates an example in which the window positions X, Y, width, and height are set as the window size 1111 when the window shape is selected as a rectangle.

Referring to FIG. 12, a user may set a predetermined attribute for the child window region 1010, and if an attribute is set, a region ID (region_ID) is automatically generated (1101). In detail, the user may check a check box 1103 to determine whether the window receives a focus event with respect to the child window area 1010, and set a type (Content Type) of the content to be displayed in the child window area 1020. have. For example, the type of content that can be set may include text, an image, a video image, and a uniform resource locator. If the selected content is an image, the image may include photo data stored in a portable terminal, a web browser, and data downloaded to a PC sync tool. Here, when the URL is selected by the user, the user may input the URL site into the URL input box 1206. In addition, when a still image is selected as the content to be displayed in the child window area 1020, a specific menu icon of the portable terminal, for example, a text box, a schedule management, a video call, etc., may be set to be displayed in the child window area 1020. have. In addition, the user may set a predetermined action 1207 according to the set content type 1205. For example, in the case of text, one of up, down, left, and right scrolls can be selected. For still images, you can choose between animation effects and focus effects. In the case of a video, one of play and stop can be selected. In addition, the user may set a link path 1209 for showing a next screen to be processed when a child window having the corresponding area ID is selected. For example, if the selected content is a news title on the web as text, a link path may be set as the body of the news. For example, when the selected content is a photo image as an image, a link path may be set to the photo file taken by the user. The window shape 1211 may be selected from, for example, a circle, a rectangle, and a triangle. 7 illustrates an example in which the window positions X, Y, width, and height are set as the window size 1213 when the window shape is selected as the rectangle.

Referring to FIG. 13, a user may set a predetermined attribute for the text region 1030, and if an attribute is set, a region ID (region_ID) is automatically generated (1101). Specifically, the user checks the check box 1103 whether the window receives the focus event for the text area 1030, and sets the content to be displayed in the text area 1030 in the text input box 1305. As the content to be displayed in the text area 1030, text data that can be basically updated and provided by the portable terminal can be set. For example, as the content to be displayed in the text area 1030, a recently received SMS text message, current date information, current time information, location information of the portable terminal, weather information, schedule information, and the like may be set. In addition, the text area 1030 may be set as an SMS message input window. In addition, the user may set a predetermined action 1307 according to the set text data 1305. For example, it can be set to be one of up, down, left, and right scrolls when a focus event is received. The user may select the window shape 1309 among circles, squares, and triangles. 13 illustrates an example in which the window positions X, Y, width, and height are set as the window size 1311 when the window shape is selected as a rectangle.

In addition, the user may display an icon for selecting an application such as a game, a wireless Internet, a digital multimedia broadcasting, and the like stored in the portable terminal in a predetermined window area on the user interface (UI) screen of FIG. 13.

In addition, the user can set the border thickness, border color, and color of a predetermined window area on a user interface (UI) screen in the setting window used to give the script window properties such as the thickness, the border color, and the inside of the area. It can also be set by supporting attribute values such as color and displaying them in a script.

The user may change a property of the predetermined window area so that the latest SMS text received in the predetermined window area is scrolled and displayed in a state where the stock information is set to scroll display in a predetermined window area on a current UI screen. Can be.

As described with reference to FIGS. 11 to 13, when a user sets an attribute of each window area on a UI screen and performs an editing process in the portable terminal itself, a script language is generated based on the edited content. Can be. For example, if you set the window position X, Y, window width and height as the window size of the content to be displayed in each window area on the UI screen, the SMIL script header can be configured using the window position X, Y, window width and height. If an image, video, text, etc. is set as the type of content to be displayed in each window area, a source of an image, animation, sliding text, and general text of a SMIL script body can be configured using the image, video, text, and the like.

14 is a block diagram illustrating a configuration of a portable terminal having a user interface (UI) screen configuration function according to an embodiment of the present invention, and FIG. 15 illustrates a user interface (UI) screen configuration according to an embodiment of the present invention. This is a block diagram illustrating the script editing module.

Referring to FIG. 14, a portable terminal according to an exemplary embodiment of the present invention includes a wireless transceiver 1410, a controller 1420, a storage 1430, a display 1440, a key input unit 1450, and a speaker 1460. ) And microphone 1470.

The wireless transceiver 1410 receives a radio frequency (RF) radio signal induced by the antenna 1411, converts the radio frequency into an intermediate frequency, and then converts the baseband signal into a baseband signal. The baseband signal provided from the control unit 1420 is converted into an intermediate frequency, and the signal of the intermediate frequency is converted into a radio frequency signal and provided to the antenna 1411.

Alternatively, the wireless transceiver 1410 directly converts a demodulated signal directly from the received high frequency signal without frequency conversion, instead of a heterodyne reception method that demodulates the high frequency signal into a baseband signal through intermediate frequency conversion. You can also use the method.

The controller 1420 performs control and processing to perform a unique function and a voice call of the portable terminal. To this end, the controller 1420 may include a baseband processor for processing the baseband signal provided from the wireless transceiver 1410, and may include a vocoder for digital processing of the transmitted and received voice. have.

The controller 1420 collects window area information of at least one partition area defined by a user to construct a user interface (UI) screen, and generates a script header based on the window area information of the at least one partition area. And controls to configure the UI screen by displaying the window of the at least one partitioned area based on the generated script header.

The controller 1420 controls to collect window area information of at least one divided area for constituting the UI screen by capturing a divided area picture drawn by the user. The controller 1420 may control to collect window area information of at least one divided area for configuring the UI screen by sensing coordinate values of a plurality of points on the touch screen touched by the user. have. The controller 1420 receives a property of the window area of the at least one partitioned area from the user, generates a script body based on the set property of the window area of the at least one partitioned area, and generates the generated script body. Control to configure the UI screen.

The controller 1420 includes a script editing module 1421. Referring to FIG. 15, the script editing module 1421 may include a script parser 1520 and a viewer manager 1530.

The script editing module 1421 may be configured to generate a script language generated from an image of a picture of the user's drawn region, for example, a smile script, or a script language generated from a touch action of a user's touch screen, for example, a smile script. Read from storage 1430.

The script parser 1520 parses header information and body information from the read script 1510 and extracts region ID (region_ID), window region information, and contents of each window region for each window region to configure each region. Create a structure for

The viewer manager 1530 receives attribute information of each partition of the UI screen changed in the editing process by the user as the user update information 1531, and changes the based on the user update information 1531. The read script 1510 is modified using script information 1533 to generate a changed script language. The viewer manager 1530 displays each divided area through the display unit 1440 using a structure including script information for configuring each divided area of a UI screen. When the focus event occurs, the viewer manager 1530 changes the structure according to the focus event and displays each divided area through the display unit 1440.

The script editing module 1421 may be implemented as a software program and configured to be performed by a processor (eg, a baseband processor or an application processor) included in the controller 1420.

The controller 1420 may further include a touch screen driver 1423. The touch screen driver 1423 generates a coordinate value of the predetermined point when the user touches the predetermined point of the touch screen.

The storage unit 1430 may be a nonvolatile memory such as a flash memory, an electrically erasable and programmable read only memory (EEPROM), a system program (eg, an operating system) and / or required for basic operation of the portable terminal. Other applications are saved. The storage unit 1430 may store a script language generated from an image of an image of the divided region drawn by the user, a script language generated from a touch operation of the user's touch screen, or a script language generated in an editing process.

The key input unit 1450 includes a plurality of numbers, character input keys, and function keys for performing a special function, and when a key manipulation occurs by a user, the key input unit 1450 provides a corresponding key input signal to the controller 1420.

In particular, the key input unit 1450 receives a key input for changing a property of each divided area and a key input for instructing a predetermined focus event through a predetermined setting window by a user, and receives a corresponding event signal to the controller 1420. to provide.

The speaker 1460 outputs a user's voice and a voice of a voice call counterpart during a voice call. The microphone 1470 receives a user's voice during a voice call, converts the input voice into an electric signal corresponding thereto, and provides the same to the controller 1420.

In the above, the process of configuring a desired user interface (UI) screen using the portable terminal by changing the attribute value of each divided area on the standby screen has been described. UI) The screen composition method can be applied to the configuration of each menu screen stored in the portable terminal.

Although the mobile terminal has been described as an example of the portable terminal, the portable terminal of the present invention is not limited to the mobile terminal, but may be a personal digital assistant, a portable multimedia player, or an MP3 player. It may also include various portable terminals such as.

Although described with reference to the embodiments above, those skilled in the art will understand that the present invention can be variously modified and changed without departing from the spirit and scope of the invention as set forth in the claims below. Could be.

1 is a flowchart illustrating a method for configuring a dynamic user interface (UI) in a portable terminal according to an embodiment of the present invention.

2 is a flowchart illustrating a process of configuring a UI screen by capturing an image drawn by a user in a portable terminal according to an embodiment of the present invention.

3 illustrates an image drawn by a user in a portable terminal according to an embodiment of the present invention.

4 and 5 are conceptual views illustrating a process of detecting an edge of a rectangular area from the hand-drawn image of FIG. 3.

6 is a flowchart illustrating a process of configuring a user interface (UI) screen using a touch screen.

7 and 8 are conceptual views illustrating a method for detecting a window area with a touch screen of a portable terminal according to an embodiment of the present invention.

9 shows edge pixels of the finally detected rectangular window regions.

10 illustrates a plurality of window regions on a UI screen generated based on a script header generated according to an embodiment of the present invention.

11 and 12 illustrate user interface (UI) screens for changing attributes of the first area of FIG. 10.

FIG. 13 illustrates a UI screen for changing an attribute of the second area of FIG. 10.

14 is a block diagram illustrating a configuration of a portable terminal having a user interface (UI) screen configuration function according to an embodiment of the present invention.

FIG. 15 is a block diagram illustrating a script editing module for configuring a UI screen according to an embodiment of the present invention.

<Explanation of symbols for the main parts of the drawings>

1421: Script Editing Module 1423: Touch Screen Driver

Claims (19)

delete delete In the method of configuring a user interface screen in a portable terminal, Collecting window area information of at least one divided area for constituting the UI screen by photographing a divided area picture drawn by a user; Generating a script header based on window area information of the at least one partitioned area; And And displaying the window of the at least one partitioned area based on the generated script header to configure the UI screen. Collecting window area information of at least one partition area for constituting the user interface (UI) screen by photographing the partition area picture drawn by the user, Generating second image data by obtaining an average of R, G, and B color values of each pixel constituting the first image data of the segmented area picture drawn by the user; Converting an average value of R, G, and B color values of each pixel constituting the second image data into 1 or 0; Xy coordinate value and mask value for each pixel constituting the second image data, wherein the mask value is an upper-left edge, an upper-right edge, a lower-left edge of each pixel around a rectangular window. Generating third image data comprising a structure having a value for distinguishing an attribute representing a lower right edge; And And converting a coordinate value of the structure of the third image data into a relative coordinate value suitable for the user interface (UI) screen. In the method of configuring a user interface screen in a portable terminal, Collecting window area information of at least one divided area for configuring the user interface (UI) screen by sensing coordinate values of a plurality of points on a touch screen touched by a user; Generating a script header based on window area information of the at least one partitioned area; And And constructing the UI screen by displaying the window of the at least one partitioned area based on the generated script header. The method of claim 4, wherein the collecting of window area information of at least one divided area for configuring the UI screen comprises: Sensing an XY coordinate value around a predetermined window of the touch screen touched by the user; Xy coordinate value and mask value for each pixel around the predetermined window, where the mask value is the top-left edge, top-right edge, bottom-left edge, bottom- of each pixel around the rectangular window. Generating image data having a structure having a value for distinguishing an attribute representing a right edge; And And converting a coordinate value of the structure of the image data into a relative coordinate value suitable for the user interface (UI) screen. The method of claim 4, wherein the collecting of window area information of at least one divided area for configuring the UI screen comprises: And constructing a rectangular window area by using only coordinate values of two points touched by the user on the touch screen. delete delete delete delete In the method of configuring a user interface screen in a portable terminal, Collecting window area information of at least one divided area for constituting the UI screen by photographing a divided area picture drawn by a user; Generating a script header based on window area information of the at least one partitioned area; Configuring the user interface (UI) screen by displaying a window of the at least one partitioned area based on the generated script header; Receiving an attribute of a window area of the at least one partitioned area from the user; Generating a script body based on an attribute of a window area of the at least one partitioned area; And Comprising the step of configuring the user interface (UI) screen using the generated script body, The attribute of the window area of the at least one partitioned area may be a type of content displayed in the at least one partitioned area, wherein the type of the content includes at least one of a text, a still image, a video, and a Uniform Resource Locator (URL). Information about a box, information about whether the window of the at least one partition is a window area receiving a focus event, a file path of content to be displayed in the window of the at least one partition when the focus event is activated; And a file path of content to be displayed in a window of the at least one partitioned area when the focus is deactivated. delete delete delete delete Collecting window area information of at least one divided area for constituting the UI screen by sensing coordinate values of a plurality of points on the touch screen touched by the user for constructing the UI screen A controller configured to generate a script header based on window area information of the at least one partitioned area, and display the window of the at least one partitioned area based on the generated script header to configure the user interface (UI) screen ; And Portable terminal having a user interface screen configuration function including a storage unit for storing a script language including the generated script header. delete delete delete

Images