US20140282055A1 - Layout System for Devices with Variable Display Screen Sizes and Orientations - Google Patents

Layout System for Devices with Variable Display Screen Sizes and Orientations Download PDF

Info

Publication number
US20140282055A1
US20140282055A1 US13/838,087 US201313838087A US2014282055A1 US 20140282055 A1 US20140282055 A1 US 20140282055A1 US 201313838087 A US201313838087 A US 201313838087A US 2014282055 A1 US2014282055 A1 US 2014282055A1
Authority
US
United States
Prior art keywords
component
container
text
components
layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Abandoned
Application number
US13/838,087
Other languages
English (en)
Inventor
Glenn R. Engel
Jonathan Helfman
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Keysight Technologies Inc
Original Assignee
Agilent Technologies Inc
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Agilent Technologies Inc filed Critical Agilent Technologies Inc
Priority to US13/838,087 priority Critical patent/US20140282055A1/en
Assigned to AGILENT TECHNOLOGIES, INC. reassignment AGILENT TECHNOLOGIES, INC. ASSIGNMENT OF ASSIGNORS INTEREST (SEE DOCUMENT FOR DETAILS). Assignors: ENGEL, GLENN R., HELFMAN, JONATHAN
Priority to CN201410044826.8A priority patent/CN104063211B/zh
Assigned to KEYSIGHT TECHNOLOGIES, INC. reassignment KEYSIGHT TECHNOLOGIES, INC. ASSIGNMENT OF ASSIGNORS INTEREST (SEE DOCUMENT FOR DETAILS). Assignors: AGILENT TECHNOLOGIES, INC.
Publication of US20140282055A1 publication Critical patent/US20140282055A1/en
Priority to US15/687,376 priority patent/US11016635B2/en
Abandoned legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus

Definitions

  • GUIs graphical user interfaces
  • Any given device may have two different aspect ratios that are operative in portrait or landscape mode.
  • the particular mode is triggered by the device orientation during the running of the program, and hence, the program must provide at least two organizations for the GUI.
  • the programmer is faced with the task of designing a GUI that must operate on a number of different devices having screen sizes that vary from a smart phone to a large fixed computer screen.
  • GUI GUI
  • code the programmer creates the layout for a specific application using a programmatic interface.
  • Visual Basic or Visual C++ are examples of this type of layout.
  • Another type is a declarative layout in a text form such as HTML or Microsoft XAML. These use the XML structure to map into a structure in the GUI representation.
  • the present invention includes a method for operating a data processing system having a display screen on which a GUI is displayed.
  • the GUI has a plurality of configurations having different aspect ratios or numbers of pixels.
  • the method includes providing a layout description and a runtime system that generates the GUI in response to the layout description and the display configuration.
  • the layout description defines a first container having a plurality of components to be shown in the GUI within a first container space.
  • Each component has a component layout description within the first container.
  • the runtime system automatically allocates the first container space depending on the display configuration, and automatically divides the first container space into a plurality of component spaces. Each component is shown in a corresponding one of the component spaces.
  • the first container space and the component spaces automatically change when the display configuration changes.
  • the layout description defining the first container indicates a vertical or horizontal organization for the components
  • the runtime system divides the first container space vertically or horizontally, respectively, assigning each component to a corresponding vertical, or horizontal, space.
  • the relative space assigned to each component is specified by a layout weight parameter that can be altered from a default value by an entry in the layout description. Absent a change in the layout weights of the components, the vertical or horizontal spaces are divided equally.
  • a first one of the components includes text to be displayed in the GUI, and the runtime system automatically sets a text font for that component based on a first font group specification in the layout description for that component. If two components have the same font group specification, the runtime system automatically determines a font that ensures that both components have their text properly displayed, the font changing with the display configuration.
  • FIGS. 1A and 1B illustrate a VGroup having three buttons in portrait and landscape mode, respectively.
  • FIG. 2 illustrates a three button VPanel in which the first button has twice the weight of the remaining two buttons.
  • FIG. 3 illustrates the HPanel equivalent of the VPanel shown in FIGS. 1A and 1B .
  • FIG. 4 illustrates the three-button panel with Button 1 allocated twice the space of the other buttons.
  • FIGS. 5A and 5B illustrate a nested display in portrait and landscape modes, respectively.
  • FIGS. 6A and 6B illustrate a nested display that includes a trace component that displays a graphic.
  • FIG. 7 illustrates a display in which the size of the Button 1 component has been explicitly set using layout code.
  • FIGS. 8A and 8B illustrate a GUI that is to run on a device such as a smart phone in either portrait or landscape orientation.
  • FIGS. 9A and 9B illustrate a display in which the individual components have their fonts adjusted based on the size of the component.
  • FIGS. 10A and 10B illustrate a display in which the same font size is used for a number of different components.
  • a GUI according to the present invention is constructed from one or more “components”.
  • Each component has a graphical representation and a code section that determines the behavior of the component and how the component is displayed.
  • each component has a default representation that automatically sizes the graphical representation for the amount of space assigned to that component on the current display.
  • the display changes orientation, the amount of space for the various components also changes, and the graphical representations are adjusted accordingly.
  • a collection of components can be grouped together in a container. The space allocated for the container is divided among the components in the container. There is a default space allocation that is applied unless a different allocation is specified for the container. The entire display is the highest level of container.
  • the present invention provides its advantages in terms of two types of containers.
  • the default space allocation consists of dividing the vertical space in the container equally among the objects in the container. It should be noted that when the display screen changes from portrait mode to landscape mode, the available space in the container changes, the vertical space being reduced and the horizontal space being increased. Hence, each component in the container is assigned a new space when the change in orientation takes place and the components' representations are likewise resized.
  • the second type of container will be referred to as an HGroup.
  • the default space allocation in an HGroup consists of dividing the horizontal space in the container equally among the objects in the container. Again, when the display screen changes from portrait mode to landscape mode, the available space in the container changes, the vertical space being reduced and the horizontal space being increased.
  • VPanels and HPanels are special types of VGroups and HGroups, respectively, in which the individual components and the panels are automatically provided with borders that delineate the elements in question.
  • FIGS. 1A and 1B illustrate displays on a data processing system which includes a VGroup having three buttons in portrait and landscape mode, respectively.
  • the space available for each button changes such that the vertical height of each button is reduced and the width is increased.
  • the fonts are changed accordingly to fit the available space.
  • the user defines the layout of the display in a declarative language such as XML. Only those items that are not contained in the default specification of a component need be included in the file if the containers of the present invention are utilized.
  • XML code for the three-button display shown in FIGS. 1A and 1B consists of
  • buttons automatically takes care of sizing the text and buttons for the current display screen and orientation.
  • the three buttons have the same size, which is the default allocation. However, the user may wish to provide more space for one of the buttons.
  • the user can specify the relative layout weights of the components within a container. The default weight is 1. To change the default layout weight, a corresponding entry is made in the layout file. For example, if the user wishes to assign more space to Button 1, the XML file would be
  • FIG. 2 illustrates a three button VPanel in which the first button has twice the weight of the remaining two buttons.
  • Button 1 has a height that is twice that of the other two buttons. It should be noted that the width of the button remains the same as that of the other buttons. Since the width limits the font size used for the labels, Button 1 has the same font size in as the remaining buttons.
  • HPanel a horizontal panel, HPanel, that provides an analogous function to the VPanel described above.
  • HPanel the horizontal space is divided equally.
  • HPanel is the equivalent of the VPanel shown in FIGS. 1A and 1B .
  • the layout file for the HPanel is as follows
  • FIG. 4 illustrates the three-button panel with Button 1 allocated twice the space of the other buttons.
  • the layout weight parameter can again be used.
  • the increased layout weight increases the horizontal space allocated to Button 1 in the panel rather than the vertical space.
  • the layout file for the HPanel with the increased weight is as follows:
  • VPanels and HPanels are themselves components that obey the same rules as other components.
  • the various panels and groups can be nested within one another to provide more complex layouts without the need to specify the exact sizes of the components.
  • FIGS. 5A and 5B illustrate a nested display in portrait and landscape modes, respectively. These displays include a number of nested panels.
  • the layout description for the displays in question is as follows:
  • a VPanel and an HPanel have a distinctive border around their child components.
  • HPanel and VPanel components are used for grouping the border shading which can sometimes lead to a cluttered display.
  • the HGroup and VGroup components behave in the same manner as HPanel and VPanel but they do not have a border.
  • HGroup and VGroup have a transparent background while HPanel and VPanel do not. This difference is illustrated in FIGS. 6A and 6B , which illustrate a nested display that includes a trace component 21 that displays a graphic.
  • FIG. 6A shows the display when only VPanel and HPanel containers are used.
  • the layout code for FIG. 6A is as follows:
  • FIG. 6B The layout code for FIG. 6B is as follows:
  • the components have sizes that are automatically computed. However, there are situations in which a designer may prefer to assign specific sizes to one or more of the components.
  • components can also have explicit sizes assigned in a manner that is separate from the weight mechanism that assigns relative sizes.
  • Components according to the present invention also have layout_width and layout_height attributes that can be assigned by the designer in the layout code.
  • FIG. 7 illustrates a display in which the size of the Button 1 component has been explicitly set using the following layout code:
  • the layout width and height can be specified in display pixels, px, scale independent pixels, sp, or density independent pixels, dp.
  • the sp unit selects a font size based on the display screen density as well as the user's font size preference. When this information is not available to an implementation, an sp value is interpreted as a dp value. In general, sp is used when a size is desired relative to user font selection preferences.
  • the dp unit selects a font size based on a density independent pixel. These units are relative to a 160 dpi screen. A dp is one pixel on a 160 dpi screen but two pixels on a 320 dpi screen. For text, sp is preferred because it accommodates the users' font size preference. In general, the px unit should be avoided as it does not scale well between devices.
  • the layout engine that is part of a runtime system library allocates space utilizing the layout description.
  • the space in a container is divided according to the layout_weights of the components in that container.
  • the additional space is divided among the remaining components in proportion to their respective layout_weights.
  • a component in which a fixed width and height have been defined can also have a non-zero layout_weight.
  • the final space allocated to the component is the sum of the specified fixed width or height and its share of any remaining space. If the designer does not wish the fixed width or height component to be stretched in this manner, a layout_weight of zero can be assigned to that component, and hence, that component will not receive any additional space.
  • components can be reduced in size beyond their intrinsic size that results from assigning fixed widths or heights. Such reductions take place if the available space is less than the sum of the intrinsic sizes of the objects specified through the layout_width and layout_height parameters. In this case, space is taken away from each component based on its layout_weight.
  • FIGS. 8A and 8B illustrate a GUI that is to run on a device such as a smart phone in either portrait or landscape orientation.
  • the GUI includes a number of boxes that include text.
  • the particular GUI in FIG. 8A is running with the device in landscape mode.
  • the sizes of the boxes are altered to make more efficient use of the display space.
  • the text within the box cannot be re-sized with the same degree of flexibility without causing problems.
  • the aspect ratio of the text for a given font is normally fixed. Consider a box that has text that just fits into the box when the screen is in the landscape mode. When the screen is rotated to portrait, the width of the box must be reduced. If the font size is not changed, as shown in FIG. 8B , the original text will no longer fit in the box. Hence, the text size is changed to accommodate the change in orientation. The amount by which the text font size must change to accommodate the change in orientation will be different for different objects in the GUI.
  • FIGS. 9A and 9B illustrate a display in which the individual components have their fonts adjusted based on the size of the component.
  • FIG. 9A shows the display with the device in landscape mode
  • FIG. 9B shows the display with the device in portrait mode.
  • this problem is overcome by defining a group of elements that all need to share the same font size when the orientation or resolution changes to preserve the aesthetic quality of the display.
  • a font group is defined for these elements, and this font is used rather than the font that would have been used by the layout engine in the absence of the font group.
  • FIGS. 10A and 10B illustrate a display in which the same font size is used for a number of different components even though one or more of the components could have used a different font size.
  • the objects shown at 71 in FIGS. 10A and 10B need to use the same font size in each orientation. The size of the objects changes when the orientation changes; however, the font size remains constant across the objects.
  • a two step process is used for setting the font size for all components of a container that are part of the same group.
  • the font size that is required to fit the text into each component is determined.
  • the font size is set such that no object has text that is cut-off in the new orientation. Different components may have different determined font sizes at this step.
  • the minimum of the determined font sizes is then chosen for all of the components in the font group. This ensures that the components have a consistent appearance while ensuring that the text is not cut-off in any of the components.
  • the font group to which a component is to belong can be specified in the layout description for that component.
  • the XML description could be as follows:
  • the font group assignment applies to all of the children of the parent, e.g.,
  • an “implicit font group” is assigned to each container.
  • the implicit font group only applies to the first level of children of the container. It ensures that the first level of children will all have the same font group.
  • An explicit font group assignment is inherited by all of the children of the container.
  • Buttons, Text Boxes, and other primarily textual components have a number of additional properties that configure various aspects of the displayed text.
  • the textSize property allows specification of a relative or absolute text size while maxChars specifies the maximum length of a text field.
  • the textSize property can specify text size in the same units as described for layout size specification.
  • a % relative size is defined.
  • sp is preferred because it accommodates the user's font size preference.
  • the % unit is a relative automatic font size.
  • Text size and font group can both be used in the same container. This allows the same automatic font group to be used for all of the elements, except that some of the elements have a reduced font size.
  • the contents of some of the text fields are not known at the time the layout is specified.
  • a text box may be populated by the output of a remote device and the size of the text string will not be known until the text string actually arrives.
  • a field property is provided that allows the designer to inform the layout engine of the maximum size of the expected input. This is referred to as the MaxChars property.
  • the MaxChars property is specified, the textual components choose a text size based on the specified length. The layout engine will then reserve space for that number of characters. If less than that number arrives, the font size is still defined as if the defined maximum number had arrived. This ensures that the appearance of the text does not change from input to input, since the text may change in length during the operation of the GUI.
  • a width or height can be specified to match that of the parent container.
  • a width or height specified as match_parent informs the layout engine that the component should be sized to match its parent container. That is, it will expand to fill available space.
  • Children of HPanel, VPanel, HGroup, and VGroup default to match_parent if an explicit width or height is not specified.
  • VWrap and HWrap are special versions of the VPanel and HPanel containers referred to as VWrap and HWrap, respectively. These containers automatically set the height or width of the container to a value that is just big enough to fit all of the children in the container.
  • the parameter, “layout_gravity” allows a component to define its position within the parent container. The values of gravity and layout_gravity do not affect the size of the components.
  • lay_out gravity can take on the values “left”, “center”, or “right”, which result in the object being aligned with the left boundary of the container, the center of the container, or the right boundary of the container, respectively.
  • lay_out gravity can take on the values “top”, “center”, or “bottom”, which result in the object being aligned with the top boundary of the container, the center of the container, or the bottom boundary of the container, respectively.
  • layout_gravity can have the values “center_vertical” and “center_horizontal that signal that the object is to be vertical center of its container or the horizontal center of its container, respectively.
  • a SwipePanel is defined in one embodiment of the present invention.
  • the children of this panel are “pages” in a multi-page view in which the user moves between pages using a gesture such as a swipe gesture or “pushing” a button.
  • a SwipePanel is equivalent to a display that is much larger than that provided on the device.
  • the allocated space on the device is a “window” on the larger display.
  • the positioning of the window is determined by the swipe gesture and the current position. In essence, the swipe moves the relative position of the window and the underlying display so that a different portion of the underlying display appears in the window after the gesture.
  • the children of the SwipePanel may be arranged in a manner that depends on the whether the device is in portrait or landscape mode.
  • each child occupies a space on the display such that one child is visible at any time and fills the allocated space.
  • the user changes children by performing the swipe gesture which replaces the currently visible child with one to the left or right of the current child, depending on the direction of the swipe.
  • FIG. 1 The drawings in the present application show various display arrangement of components on a display of a data processing system or computer.
  • the data processing system or computer is not explicitly shown as a separate “box”, since such components are well known in the art.
  • displays also indicate the present of the underlying data processing system or computer and are a representation of the data processing system or computer as well as the display.

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Controls And Circuits For Display Device (AREA)
US13/838,087 2013-03-15 2013-03-15 Layout System for Devices with Variable Display Screen Sizes and Orientations Abandoned US20140282055A1 (en)

Priority Applications (3)

Application Number Priority Date Filing Date Title
US13/838,087 US20140282055A1 (en) 2013-03-15 2013-03-15 Layout System for Devices with Variable Display Screen Sizes and Orientations
CN201410044826.8A CN104063211B (zh) 2013-03-15 2014-02-07 用于具有可变的显示屏尺寸和取向的设备的布局系统
US15/687,376 US11016635B2 (en) 2013-03-15 2017-08-25 Layout system for devices with variable display screen sizes and orientations

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
US13/838,087 US20140282055A1 (en) 2013-03-15 2013-03-15 Layout System for Devices with Variable Display Screen Sizes and Orientations

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US15/687,376 Continuation US11016635B2 (en) 2013-03-15 2017-08-25 Layout system for devices with variable display screen sizes and orientations

Publications (1)

Publication Number Publication Date
US20140282055A1 true US20140282055A1 (en) 2014-09-18

Family

ID=51534406

Family Applications (2)

Application Number Title Priority Date Filing Date
US13/838,087 Abandoned US20140282055A1 (en) 2013-03-15 2013-03-15 Layout System for Devices with Variable Display Screen Sizes and Orientations
US15/687,376 Active 2033-08-23 US11016635B2 (en) 2013-03-15 2017-08-25 Layout system for devices with variable display screen sizes and orientations

Family Applications After (1)

Application Number Title Priority Date Filing Date
US15/687,376 Active 2033-08-23 US11016635B2 (en) 2013-03-15 2017-08-25 Layout system for devices with variable display screen sizes and orientations

Country Status (2)

Country Link
US (2) US20140282055A1 (zh)
CN (1) CN104063211B (zh)

Cited By (28)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130111376A1 (en) * 2011-06-20 2013-05-02 Yuki Shinomoto Gui program creation supporting apparatus, gui program creation support method, computer-readable recording medium and integrated circuit
US20150062140A1 (en) * 2013-08-29 2015-03-05 Monotype Imaging Inc. Dynamically Adjustable Distance Fields for Adaptive Rendering
US20150268838A1 (en) * 2014-03-20 2015-09-24 Institute For Information Industry Methods, systems, electronic devices, and non-transitory computer readable storage medium media for behavior based user interface layout display (build)
US20150371438A1 (en) * 2014-06-24 2015-12-24 Google Inc. Computerized systems and methods for analyzing and determining properties of virtual environments
US20160132301A1 (en) * 2014-11-06 2016-05-12 Microsoft Technology Licensing, Llc Programmatic user interface generation based on display size
USD786904S1 (en) * 2014-09-01 2017-05-16 Fujifilm Corporation Display screen with graphical user interface
US10115215B2 (en) 2015-04-17 2018-10-30 Monotype Imaging Inc. Pairing fonts for presentation
US10228835B2 (en) * 2016-12-23 2019-03-12 Beijing Kingsoft Internet Security Software Co., Ltd. Method for displaying information, and terminal equipment
US20190108637A1 (en) * 2016-11-22 2019-04-11 Shanghai United Imaging Healthcare Co., Ltd. Displaying methods and systems
US20190265866A1 (en) * 2014-10-08 2019-08-29 Square, Inc. User interface for editing web content
US10496419B2 (en) 2016-06-10 2019-12-03 Apple Inc. Editing inherited configurations
US10572574B2 (en) 2010-04-29 2020-02-25 Monotype Imaging Inc. Dynamic font subsetting using a file size threshold for an electronic document
US10725632B2 (en) 2013-03-15 2020-07-28 Microsoft Technology Licensing, Llc In-place contextual menu for handling actions for a listing of items
US10866708B2 (en) 2018-12-10 2020-12-15 Square, Inc. Using combined ecommerce and brick-and-mortar data to produce intelligent recommendations for web page operation
US10872585B2 (en) * 2016-01-15 2020-12-22 Huawei Technologies Co., Ltd. Display method and terminal
US10909429B2 (en) 2017-09-27 2021-02-02 Monotype Imaging Inc. Using attributes for identifying imagery for selection
US10949075B2 (en) 2014-11-06 2021-03-16 Microsoft Technology Licensing, Llc Application command control for small screen display
US11023014B2 (en) 2018-01-12 2021-06-01 Microsoft Technology Licensing, Llc Orientation specific control
USD924892S1 (en) * 2019-10-15 2021-07-13 Canva Pty Ltd Display screen or portion thereof with graphical user interface
US11169694B2 (en) 2014-08-05 2021-11-09 Square, Inc. Interactive layer for editing a rendering displayed via a user interface
US11321103B2 (en) 2017-06-16 2022-05-03 Microsoft Technology Licensing, Llc Generating user interface containers
US11334750B2 (en) 2017-09-07 2022-05-17 Monotype Imaging Inc. Using attributes for predicting imagery performance
USD958819S1 (en) 2020-07-28 2022-07-26 Abbott Laboratories Display screen with a graphical user interface
US11537262B1 (en) 2015-07-21 2022-12-27 Monotype Imaging Inc. Using attributes for font recommendations
USD976949S1 (en) 2020-08-14 2023-01-31 Abbott Laboratories Display screen with graphical user interface
US11657602B2 (en) 2017-10-30 2023-05-23 Monotype Imaging Inc. Font identification from imagery
US11928417B2 (en) * 2016-06-10 2024-03-12 Truecontext Inc. Flexible online form display
EP4209898A4 (en) * 2020-09-29 2024-03-13 Huawei Technologies Co., Ltd. LAYOUT METHOD FOR AN APPLICATION INTERFACE AND ELECTRONIC DEVICE

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109710121B (zh) * 2019-01-10 2020-07-03 环球雅途集团有限公司 一种自适应屏幕尺寸的排版显示方法
CN116679924A (zh) * 2022-02-22 2023-09-01 华为技术有限公司 一种应用程序的用户界面的处理方法以及相关设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020118193A1 (en) * 2000-09-28 2002-08-29 Curl Corporation Grid and table layout using elastics
US20080122796A1 (en) * 2006-09-06 2008-05-29 Jobs Steven P Touch Screen Device, Method, and Graphical User Interface for Determining Commands by Applying Heuristics
US20090132578A1 (en) * 2007-11-21 2009-05-21 Microsoft Corporation Layout manager

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7441204B2 (en) * 2004-02-06 2008-10-21 Microsoft Corporation Method and system for automatically displaying content of a window on a display that has changed orientation
US20060227153A1 (en) 2005-04-08 2006-10-12 Picsel Research Limited System and method for dynamically zooming and rearranging display items
US8091036B1 (en) * 2006-04-27 2012-01-03 Oracle America, Inc. GUI builder tool for designing cross platform layout
CN101158972A (zh) * 2007-11-19 2008-04-09 腾讯科技（深圳）有限公司 一种页面布局的设置方法及设置系统
US8872855B2 (en) * 2011-07-21 2014-10-28 Flipboard, Inc. Adjusting orientation of content regions in a page layout
US8842057B2 (en) * 2011-09-27 2014-09-23 Z124 Detail on triggers: transitional states
US8645851B1 (en) * 2011-09-30 2014-02-04 Google Inc. Methods and apparatus for using a variant of the Bellman-Ford algorithm that operates with inconsistent constraints
CN102520960A (zh) * 2011-12-21 2012-06-27 珠海许继芝电网自动化有限公司 一种界面自动生成系统以及方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020118193A1 (en) * 2000-09-28 2002-08-29 Curl Corporation Grid and table layout using elastics
US20080122796A1 (en) * 2006-09-06 2008-05-29 Jobs Steven P Touch Screen Device, Method, and Graphical User Interface for Determining Commands by Applying Heuristics
US20090132578A1 (en) * 2007-11-21 2009-05-21 Microsoft Corporation Layout manager

Cited By (41)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10572574B2 (en) 2010-04-29 2020-02-25 Monotype Imaging Inc. Dynamic font subsetting using a file size threshold for an electronic document
US8910064B2 (en) * 2011-06-20 2014-12-09 Panasonic Intellectual Property Corporation Of America GUI program creation supporting apparatus, GUI program creation support method, computer-readable recording medium and integrated circuit
US20130111376A1 (en) * 2011-06-20 2013-05-02 Yuki Shinomoto Gui program creation supporting apparatus, gui program creation support method, computer-readable recording medium and integrated circuit
US10725632B2 (en) 2013-03-15 2020-07-28 Microsoft Technology Licensing, Llc In-place contextual menu for handling actions for a listing of items
US20150062140A1 (en) * 2013-08-29 2015-03-05 Monotype Imaging Inc. Dynamically Adjustable Distance Fields for Adaptive Rendering
US20150268838A1 (en) * 2014-03-20 2015-09-24 Institute For Information Industry Methods, systems, electronic devices, and non-transitory computer readable storage medium media for behavior based user interface layout display (build)
US20150371438A1 (en) * 2014-06-24 2015-12-24 Google Inc. Computerized systems and methods for analyzing and determining properties of virtual environments
US9607427B2 (en) * 2014-06-24 2017-03-28 Google Inc. Computerized systems and methods for analyzing and determining properties of virtual environments
US11169694B2 (en) 2014-08-05 2021-11-09 Square, Inc. Interactive layer for editing a rendering displayed via a user interface
USD786904S1 (en) * 2014-09-01 2017-05-16 Fujifilm Corporation Display screen with graphical user interface
US20190265866A1 (en) * 2014-10-08 2019-08-29 Square, Inc. User interface for editing web content
US11763067B2 (en) * 2014-10-08 2023-09-19 Block, Inc. User interface for editing web content
US10949075B2 (en) 2014-11-06 2021-03-16 Microsoft Technology Licensing, Llc Application command control for small screen display
US20160132301A1 (en) * 2014-11-06 2016-05-12 Microsoft Technology Licensing, Llc Programmatic user interface generation based on display size
US11126329B2 (en) 2014-11-06 2021-09-21 Microsoft Technology Licensing, Llc Application command control for smaller screen display
US11422681B2 (en) 2014-11-06 2022-08-23 Microsoft Technology Licensing, Llc User interface for application command control
US10115215B2 (en) 2015-04-17 2018-10-30 Monotype Imaging Inc. Pairing fonts for presentation
US11537262B1 (en) 2015-07-21 2022-12-27 Monotype Imaging Inc. Using attributes for font recommendations
US10872585B2 (en) * 2016-01-15 2020-12-22 Huawei Technologies Co., Ltd. Display method and terminal
US11928417B2 (en) * 2016-06-10 2024-03-12 Truecontext Inc. Flexible online form display
US10496419B2 (en) 2016-06-10 2019-12-03 Apple Inc. Editing inherited configurations
US10937154B2 (en) * 2016-11-22 2021-03-02 Shanghai United Imaging Healthcare Co., Ltd. Methods and systems for displaying image information of an image
US20210183060A1 (en) * 2016-11-22 2021-06-17 Shanghai United Imaging Healthcare Co., Ltd. Methods and systems for displaying image
US20190108637A1 (en) * 2016-11-22 2019-04-11 Shanghai United Imaging Healthcare Co., Ltd. Displaying methods and systems
US11676273B2 (en) * 2016-11-22 2023-06-13 Shanghai United Imaging Healthcare Co., Ltd. Methods and systems for displaying image
US10228835B2 (en) * 2016-12-23 2019-03-12 Beijing Kingsoft Internet Security Software Co., Ltd. Method for displaying information, and terminal equipment
US11321103B2 (en) 2017-06-16 2022-05-03 Microsoft Technology Licensing, Llc Generating user interface containers
US11334750B2 (en) 2017-09-07 2022-05-17 Monotype Imaging Inc. Using attributes for predicting imagery performance
US10909429B2 (en) 2017-09-27 2021-02-02 Monotype Imaging Inc. Using attributes for identifying imagery for selection
US11657602B2 (en) 2017-10-30 2023-05-23 Monotype Imaging Inc. Font identification from imagery
US11023014B2 (en) 2018-01-12 2021-06-01 Microsoft Technology Licensing, Llc Orientation specific control
US11409948B2 (en) 2018-12-10 2022-08-09 Block, Inc. Centralized brand asset management
US10866708B2 (en) 2018-12-10 2020-12-15 Square, Inc. Using combined ecommerce and brick-and-mortar data to produce intelligent recommendations for web page operation
USD924892S1 (en) * 2019-10-15 2021-07-13 Canva Pty Ltd Display screen or portion thereof with graphical user interface
USD961607S1 (en) * 2020-07-28 2022-08-23 Abbott Laboratories Display screen for a graphical user interface
USD959469S1 (en) 2020-07-28 2022-08-02 Abbott Laboratories Display screen with a graphical user interface
USD977510S1 (en) 2020-07-28 2023-02-07 Abbott Laboratories Display screen with a graphical user interface
USD959468S1 (en) 2020-07-28 2022-08-02 Abbott Laboratories Display screen with a graphical user interface
USD958819S1 (en) 2020-07-28 2022-07-26 Abbott Laboratories Display screen with a graphical user interface
USD976949S1 (en) 2020-08-14 2023-01-31 Abbott Laboratories Display screen with graphical user interface
EP4209898A4 (en) * 2020-09-29 2024-03-13 Huawei Technologies Co., Ltd. LAYOUT METHOD FOR AN APPLICATION INTERFACE AND ELECTRONIC DEVICE

Also Published As

Publication number Publication date
US11016635B2 (en) 2021-05-25
CN104063211B (zh) 2021-11-23
US20170357393A1 (en) 2017-12-14
CN104063211A (zh) 2014-09-24

Similar Documents

Publication Publication Date Title
US11016635B2 (en) Layout system for devices with variable display screen sizes and orientations
US6950993B2 (en) System and method for automatic and dynamic layout of resizable dialog type windows
US9489216B2 (en) Active tiled user interface
KR101130487B1 (ko) 그리드 캔버스
US6335743B1 (en) Method and system for providing a resize layout allowing flexible placement and sizing of controls
EP2656196B1 (en) Customization of an immersive environment
US8458614B1 (en) Rendition-based graphical layout management
US11048484B2 (en) Automated responsive grid-based layout design system
US20230111594A1 (en) Simplified website creation, configuration, and customization system
US20100235769A1 (en) Smooth layout animation of continuous and non-continuous properties
US8756528B2 (en) System and method of customizing video display layouts having dynamic icons
US11112927B2 (en) Digital content automated layout system
US11449314B2 (en) Rapid application development method
US20140026087A1 (en) Localized exploded view
US20080163081A1 (en) Graphical User Interface Using a Document Object Model
US20120331378A1 (en) System and method for timeline visualization and interaction
US20190073091A1 (en) Dynamic display layout systems and methods
US11922110B2 (en) Responsive document authoring
US10825134B2 (en) System and method for scaling content across multiple form factors
CN110020291A (zh) 网页布局的处理方法及装置
US9360994B2 (en) Partial-height panes as a method for optimizing palette layout and screen real estate usage
US10248916B2 (en) Organizational chart exporting with layout preview and customization
CN117950661A (zh) 一种ui生成方法及装置
Noble et al. Working with Windows, Forms, and Layout Management
CN117149036A (zh) 基于iOS滑动视图的无数据占位视图实现方法及装置

Legal Events

Date Code Title Description
AS Assignment

Owner name: AGILENT TECHNOLOGIES, INC., COLORADO

Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNORS:ENGEL, GLENN R.;HELFMAN, JONATHAN;REEL/FRAME:030017/0906

Effective date: 20130314

AS Assignment

Owner name: KEYSIGHT TECHNOLOGIES, INC., CALIFORNIA

Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:AGILENT TECHNOLOGIES, INC.;REEL/FRAME:033746/0714

Effective date: 20140801

STCB Information on status: application discontinuation

Free format text: ABANDONED -- AFTER EXAMINER'S ANSWER OR BOARD OF APPEALS DECISION