EP1390836A1 - Procede de presentation de fenetres circulaires de dialogues - Google Patents

Procede de presentation de fenetres circulaires de dialogues

Info

Publication number
EP1390836A1
EP1390836A1 EP02717814A EP02717814A EP1390836A1 EP 1390836 A1 EP1390836 A1 EP 1390836A1 EP 02717814 A EP02717814 A EP 02717814A EP 02717814 A EP02717814 A EP 02717814A EP 1390836 A1 EP1390836 A1 EP 1390836A1
Authority
EP
European Patent Office
Prior art keywords
dialog
text
tokens
user
dialogs
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.)
Withdrawn
Application number
EP02717814A
Other languages
German (de)
English (en)
Other versions
EP1390836A4 (fr
Inventor
George Gerba
Michael R. Nichols
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.)
CORPORATE MEDIA PARTNERS D/B/A AMERICAST
Original Assignee
CORPORATE MEDIA PARTNERS D/B/A AMERICAST
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 CORPORATE MEDIA PARTNERS D/B/A AMERICAST filed Critical CORPORATE MEDIA PARTNERS D/B/A AMERICAST
Publication of EP1390836A1 publication Critical patent/EP1390836A1/fr
Publication of EP1390836A4 publication Critical patent/EP1390836A4/fr
Withdrawn legal-status Critical Current

Links

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]
    • 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

Definitions

  • the invention generally relates to computer graphics. Specifically, the invention is drawn to a circular dialog containing text to be displayed to the end user that is properly laid out within the bounds of the area created by the dialog, and to a series of layered dialogs that guide a user through a multi-step process.
  • dialog boxes or dialogs are used by computer systems to prompt users to system state changes or to request information from the user. They are typically drawn within a rectangular window and provide software buttons to allow a user to make choices or dismiss the dialog.
  • a benefit of using rectangular windows is that it is relatively simple to determine how to lay out text within the dialog without crossing the bounds of the box. When contemplating the use of complex shapes for a dialog, it becomes difficult to determine how to properly place the dialog text.
  • New techniques are needed to allow complex objects to be used as dialogs while eliminating the overhead associated with existing methods of drawing text within a bounded area.
  • the present invention addresses the above and other issues.
  • Another object of the present invention is to create a new type of circular dialog that incorporates a peephole window containing a scrollable list of options or data that a user can select from.
  • Still another object of the invention is create a series of circular dialogs, which are layered on top of one another to represent multiple steps involved in a process to be performed by the user.
  • the invention accomplishes some of these objects by using calculations derived from the font metrics of the text that is to be drawn within the dialog. These calculations determine how many words of a string can fit on a particular line without crossing the bounds of the dialog. Once the program determines which words will fit on which lines within the circle, the string segments are written to an array. The dialog or dialogs are then drawn on the display device. Finally, the text is read out of the array one element at a time, centered within the circle, and drawn to the display device.
  • the present invention provides a method of drawing a circular dialog box with properly placed text, the method including providing a text string, creating a drawing region to draw the dialog in, determining which words from the string can be written on each consecutive line and storing the results for each line, drawing a dialog circle within the drawing region, drawing the text string within the circle, and placing the words comprising the string on consecutive lines as previously determined.
  • the method may further include applying a transparent fill to said drawing region not occupied by said drawing circle, so as to eliminate the extraneous portions from the view of the user.
  • the method may also further include applying a beveled edge to the dialog circle, so as to create a three dimensional appearance.
  • a further particular method for displaying a text string in a computer-generated dialog includes the step of storing the text string as a plurality of tokens. Respective widths of respective lines in the dialog in which text is to be written are determined. Also, it is determined which tokens are to be displayed on which of the respective lines by determining, for successive ones of the respective lines, an associated number of tokens whose combined width does not exceed the respective line width.
  • the dialog may be rounded, or otherwise have a varying width (e.g., such as a shape with multiple straight edges - e.g., triangular, diamond shaped, etc.), such that the width of each line must be determined to determine how much text can be accommodated without crossing a boundary of the dialog.
  • a further particular method for guiding a user through a multi-step process on a computer-generated display includes the step of displaying a plurality of layered dialogs on the display, including a currently active dialog and at least one remaining dialog.
  • Each dialog provides text for guiding the user through a corresponding one of the steps in the multi-step process, and the currently active dialog is viewable by the user for guiding the user through a current step of the process, and, after the current step is completed, the currently active dialog is removed so that the at least one remaining dialog is viewable for guiding the user through at least one additional step of the process.
  • FIGS. 1 A- IB show a sequence of exemplary screenshots of a multi-step process that utilizes circular dialogs and peephole menus;
  • FIG. 2 is a flow diagram showing an exemplary process of drawing circular dialogs with text onto a display device in accordance with one embodiment of the present invention
  • FIG. 2A illustrates the determination of a chord length for a dialog
  • FIG. 3 A is a flow diagram showing part of a method of breaking a string of text into smaller strings that can be consecutively drawn within a dialog circle without crossing the bounds of the circle in accordance with one embodiment of the present invention
  • FIG. 3B is a flow diagram showing part of a method of breaking a string of text into smaller strings that can be consecutively drawn within a dialog circle without crossing the bounds of the circle in accordance with one embodiment of the present invention
  • FIG. 4 is a flow diagram showing an exemplary process of drawing the circles onto the display device in accordance with one embodiment of the present invention
  • FIG. 5 is a flow diagram showing a method of the properly drawing text within the dialog circle in accordance with one embodiment of the present invention
  • FIG. 6 is an illustration of circular dialogs drawn in accordance with one embodiment of the present invention.
  • a computer system generates a graphical user interface showing apparently layered multiple dialogs in response to a user request to perform a multi-step process.
  • the number of apparent layered dialogs 102 generated and shown will correspond to the number of steps that are involved in the process requested by the user.
  • the user After the user has interacted with the first dialog, representing the first step in the requested process, it is "wiped" from the screen to reveal the next dialog in the process 104.
  • these sequentially accessed screens are separately generated using techniques such as those described below.
  • the layered dialogs shown behind the current dialog are not actually separate windows in the sense of a conventional Microsoft Windows environment in which a window may be minimized or closed to reveal other windows, but rather are graphical elements around or next to the open dialog window which give the appearance of representing subsequent dialog windows.
  • the third dialog in the process is presented, which requires the user to select one of several alternative choices 106.
  • Various choices are presented to the user by way of a "peephole" menu 106.
  • the peephole menu acts as a window to a set of data that, depending on the amount of data, is too large to be displayed in its entirety.
  • the viewable data includes spending limits that include: no limit, $0, $5 and $10.
  • additional spending limits such as $20, $30 and so forth.
  • the choices not currently viewable may be brought into view by the user scrolling the list either up or down, depending which end of the list is being viewed.
  • the list of data within the peephole menu may loop, such that when the end of the list is reached the next element displayed in the peephole will be the beginning of the list, or vice versa.
  • the completed dialog will be "removed" and the next dialog will be visible to the user, with the remaining dialogs in the process displayed behind the currently active dialog.
  • this removal is done by displaying a different, separately generated screen display, e.g., the four screens shown in the sequence in Figs. 1 A-1B represent four different screen displays shown in sequence, with each screen being shown following the prior one as a user interacts in the proper manner. Processing will continue in a similar manner for each step in the process requested by the user. After the all steps in the process have been completed, the final dialog 110 will be visible and the process completed. As a result, users will see where they are in a process and how much longer (e.g., how many additional steps) they have until completion.
  • a software program draws circular dialogs with properly placed text onto a display device. While the embodiment presented herein is described using object-oriented techniques, one of skill in the art would recognize that the invention can be implemented using any type of programming language or framework.
  • the software is implemented by creating two classes of objects, referred to as the DialogCircle and DialogLines classes.
  • An instance of each class can be used to create a single circular dialog with properly spaced text laid within the circle.
  • the DialogCircle class can also be used to create a nested (e.g., layered) group of related dialogs, such as several dialogs that need to be interacted with in order to complete a purchase in an interactive environment.
  • a line of text including, e.g., letters and numbers, is manipulated as an object.
  • the text object has associated font information that can be extracted by a method that receives the text as a parameter.
  • An exemplary DialogLines object may take a string of text and populate the structure using the following pseudocode:
  • the DialogLines data structure is used to hold information regarding each line of text that is to be written to the dialog.
  • the structure holds information such as the text of the string for a particular line, the name of the font being used, the point size of the font, and the font color.
  • An array of these structures is created, with each array element representing the data comprising a line of text to be written to the dialog.
  • an array of data structures can be used to keep track of the number of lines of text as well as the words comprising each line of text.
  • the DialogCircle class handles the business logic of creating the circular dialog and properly placing text within the bounds of the circle.
  • FIG. 2 a flow diagram is presented outlining a process of properly creating dialogs according to the method presented herein.
  • FIG. 2A illustrates the determination of a chord length for a dialog.
  • a "palette" or drawing area 250 is first created in the shape of a square or rectangle.
  • the circular or other rounded dialog or dialogs will be drawn within this region.
  • a square palette is particularly suitable for use with a circular dialog
  • a rectangular palette is particularly suitable for use with other rounded shapes for the dialog, such as a oval or ovoid.
  • the circular dialog or dialogs are drawn to the output device 206.
  • the text is then placed within the dialog 208 as determined in step 204.
  • a transparent fill is applied to the area of the palette not occupied by the dialog 210 so the user will see only the dialogs and screen elements that lie behind the dialog.
  • the first step in properly placing text within a dialog is to calculate the highest possible point where text may be safely written without crossing the bound of the circle 302.
  • This value is determined by taking a starting point that is a constant distance from the edge of the circle or other shape. The height of the font utilized by the text is then subtracted from the constant to derive the point where the first line of text of the dialog will be drawn.
  • This value is stored in a variable, referred to here as "safety" or "sy” for short (see FIG. 2A).
  • safety or "sy” for short (see FIG. 2A).
  • This point is then used to calculate a chord or horizontal line through the circle 304, which passes through the point stored in the variable "safety", which has an initial value.
  • the chord is taken as a horizontal line for horizontal text, but can be inclined for inclined text.
  • the chord represents the number of pixels across the circle or other rounded shape at the point where the first line of text will be drawn, and is calculated by applying the following equations.
  • Chord (2 * B), where B is a real integer
  • the distances A, B and C form an isosceles triangle.
  • Each successive line of text is drawn below the previous line, and B is re-calculated accordingly.
  • B will generally vary for each successive line.
  • the value of "sy” is incremented for each line as discussed below.
  • a similar isosceles triangle can be formed where the distance C is the distance from the center of the dialog to the edge of the dialog at a point that is horizontal with respect to "sy" (e.g., example point P in FIG.
  • the software then calculates the font metrics for the particular font used to draw the text into the dialog 306.
  • the font metrics are used to calculate the width of the string to determine if it will fit within the circle or if it should be placed on a subsequent line.
  • a counter referred to as "topLine” is set to keep track of how many lines of text have been processed thus far; it is initially set to zero 308.
  • a "line buffer” is also created to hold the tokens for the current line of text that is being laid out in the dialog, which is also initially set to zero 310.
  • the string is then broken into individual tokens 312, with each token representing a word or word break in the string. Once the string is broken into tokens, the following process is repeated until no more tokens remain to be written to the dialog.
  • a loop is set to loop through all of the tokens that comprise the string 314.
  • the width of the first token is added to the value contained in the line buffer 316. Since the line buffer is initially set to zero, this combined value will simply be the width of the string. This value is compared to the length of the chord to determine if the token is wider than the space available to write characters 318. If the token is not wider than the chord 320, it is appended to the buffer for the current line 322 and the next token is analyzed 314.
  • the following routine is executed. First, the tokens held in the buffer are written to the current empty element in the DialogLines structure and the value of "topLine" is incremented by one 324. The current token is then written to the buffer 326, overwriting the tokens that have been written to the DialogLines structure.
  • safety is then incremented by a value equal to the height of the font, so the next line of text will appear directly below the current line, and the new value of "safety” is used to calculate the value of the chord for the next line of text 328.
  • the first step in the draw process is to determine the number of nested/layered dialogs that are going to be drawn 402. Nested dialogs are used to visually alert the user that they must complete several steps in a multiple step process, with a separate dialog drawn to correspond to each step.
  • the DialogCircle class receives the number of dialogs to be displayed
  • the following steps are executed in a loop until all the dialogs have been drawn 406.
  • the first circle is drawn using the x-position, which was previously calculated, and a y-position that is based on the height (h) of the drawing area or "palette" 408.
  • rounded but non-circular dialogs may be drawn by using different values for x and y, including, e.g., oval, ovoid (egg- shaped), elliptical, and the like.
  • other shapes may be accommodated, such as triangular, diamond shaped and so forth.
  • the chord discussed above is understood to include a straight line joining two points on a curve of the rounded dialog. For some shapes, a horizontal line that is analogous to a chord may be used.
  • the dialog is then optionally provided with a beveled edge (see, e.g., edge 603 in FIG. 6), which is calculated by drawing another circle with an opaque fill offset by a set number of pixels from the x-position used to draw the dialog circle 410.
  • a beveled edge is calculated by drawing another circle with an opaque fill offset by a set number of pixels from the x-position used to draw the dialog circle 410.
  • an offset of five pixels is used, although any number of pixels may be used depending on the preference of the developer.
  • the x-position is incremented 412 by Y pixels, where the value of Y is the same as that used in the equation to calculate the x position of the circle.
  • the y-coordinate that marks the topmost point where text can safely be written is set 502 and the following loop is executed, with one iteration of the loop for each element in the array of DialogLines 504 that was previously created.
  • the x-position of the text within the dialog is computed by applying a centering calculation 506, which centers the text based on the width in pixels of the current line of text.
  • the line of text is then drawn into the dialog at the computed x and y coordinates 508.
  • the y position is then incremented by the height of the font, including a desired vertical spacing, that the text is written in 510.
  • the loop is then executed again for each subsequent line of text stored in the DialogLines array 512.
  • FIG. 6 presents a single dialog circle 602 and a nested group of dialog circles 604 created by applying the instant method.
  • the topmost dialog will have its associated text written within the dialog on several lines such that the text can be centered and displayed without running over the bounds of the dialog.
  • the present invention provides, in one aspect, a method for guiding a user through a multi-step process on a computer-generated display.
  • the method includes the step of displaying a plurality of layered dialogs on the display, including a currently active dialog and at least one remaining dialog.
  • Each dialog provides text for guiding the user through a corresponding one of the steps in the multi-step process, and the currently active dialog is viewable by the user for guiding the user through a current step of the process, and, after the current step is completed, the currently active dialog is removed so that the at least one remaining dialog is viewable for guiding the user through at least one additional step of the process.
  • a further aspect of the invention provides a method for displaying a text string in a computer-generated dialog that includes the step of storing the text string as a plurality of tokens. Respective widths of respective lines in the dialog in which text is to be written are determined. Also, it is determined which tokens are to be displayed on which of the respective lines by determining, for successive ones of the respective lines, an associated number of tokens whose combined width does not exceed the respective line width.

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)

Abstract

L'invention concerne un procédé destiné à guider un utilisateur via un processus à étapes multiples sur un affichage informatique. Des boîtes de dialogues en couches sont affichées, y comprise un boîte de dialogue en cours et des boîtes de dialogues restantes. Chaque boîte de dialogue met en oeuvre un texte guidant l'utilisateur à travers une étape correspondante. A l'achèvement de l'étape en cours, la boîte de dialogue active est éliminée de façon à rendre visible une boîte de dialogue restante qui permet de guider l'utilisateur à travers une autre étape. L'invention concerne, en outre, un procédé d'affichage d'une chaîne texte dans une boîte de dialogue informatique consistant à stocker la chaîne texte (316) sous forme d'un nombre de jetons (par exemple des mots), à déterminer les largeurs de lignes (320) da la boîte de dialogue dans laquelle le texte doit être écrit, et à déterminer quels jetons doivent être affichés sur quelle ligne de façon qu'une limite de la boîte de dialogue ne soit pas dépassée. La largeur des lignes peut être déterminée en fonction des longueurs de corde (324) de la boîte de dialogue selon la géométrie de la boîte.
EP02717814A 2001-04-16 2002-04-16 Procede de presentation de fenetres circulaires de dialogues Withdrawn EP1390836A4 (fr)

Applications Claiming Priority (7)

Application Number Priority Date Filing Date Title
US28392101P 2001-04-16 2001-04-16
US28396701P 2001-04-16 2001-04-16
US283967P 2001-04-16
US283921P 2001-04-16
US28439901P 2001-04-17 2001-04-17
US284399P 2001-04-17
PCT/US2002/011957 WO2002084472A1 (fr) 2001-04-16 2002-04-16 Procede de presentation de fenetres circulaires de dialogues

Publications (2)

Publication Number Publication Date
EP1390836A1 true EP1390836A1 (fr) 2004-02-25
EP1390836A4 EP1390836A4 (fr) 2006-06-14

Family

ID=27403428

Family Applications (1)

Application Number Title Priority Date Filing Date
EP02717814A Withdrawn EP1390836A4 (fr) 2001-04-16 2002-04-16 Procede de presentation de fenetres circulaires de dialogues

Country Status (2)

Country Link
EP (1) EP1390836A4 (fr)
WO (1) WO2002084472A1 (fr)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8490134B2 (en) 2000-08-14 2013-07-16 Cumnor Technologies Llc Displaying advertising in an electronic program guide

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5428733A (en) * 1991-12-16 1995-06-27 Apple Computer, Inc. Method of calculating dimensions and positioning of rectangular balloons
US5727174A (en) * 1992-03-23 1998-03-10 International Business Machines Corporation Graphical end-user interface for intelligent assistants
US5432940A (en) * 1992-11-02 1995-07-11 Borland International, Inc. System and methods for improved computer-based training
US5434965A (en) * 1992-12-23 1995-07-18 Taligent, Inc. Balloon help system
US5943049A (en) * 1995-04-27 1999-08-24 Casio Computer Co., Ltd. Image processor for displayed message, balloon, and character's face
US5857212A (en) * 1995-07-06 1999-01-05 Sun Microsystems, Inc. System and method for horizontal alignment of tokens in a structural representation program editor
US5752058A (en) * 1995-07-06 1998-05-12 Sun Microsystems, Inc. System and method for inter-token whitespace representation and textual editing behavior in a program editor
US6118451A (en) * 1998-06-09 2000-09-12 Agilent Technologies Apparatus and method for controlling dialog box display and system interactivity in a computer-based system
US6392673B1 (en) * 1998-09-04 2002-05-21 Microsoft Corporation Method for resizing user interface elements for an operating system
US6407759B1 (en) * 1998-11-30 2002-06-18 Sun Microsystems, Inc. Method and apparatus for modal dialog box management in applets on information appliances

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
No further relevant documents disclosed *
See also references of WO02084472A1 *

Also Published As

Publication number Publication date
EP1390836A4 (fr) 2006-06-14
WO2002084472A1 (fr) 2002-10-24

Similar Documents

Publication Publication Date Title
EP0694829B1 (fr) Procédé et dispositif pour visualiser des résultats de recherche de base de données
US6957389B2 (en) Animation on-object user interface
US10936156B2 (en) Interactive access to ascendants while navigating hierarchical dimensions
US10146419B2 (en) Method and system for section-based editing of a website page
EP0447095B1 (fr) Affichages d'espace de travail
US5504853A (en) System and method for selecting symbols and displaying their graphics objects in a detail window
US8578271B2 (en) Nested roadmap navigation in a graphical user interface
Furnas The fisheye calendar system
EP0972272B1 (fr) Visualisation selon un calendrier de travail interactif
EP0656608A2 (fr) Procédé et appareil pour le placement d'annotations dans un écran sans chevauchement
EP0542660A1 (fr) Méthode et dispositif utilisant icônes de données multidimensionnelles
CA2645746C (fr) Procede et interface graphique pour integrer un contenu anime dans une application informatique
JPH0576668B2 (fr)
EP0740246A2 (fr) Méthode d'affichage analytique de données et appareil
WO1998014903A9 (fr) Systeme de publication et de creation hypermedia
KR20130016408A (ko) 표시 제어 장치, 표시 제어 프로그램이 기록된 기록 매체 및 표시 제어 방법
US20110145737A1 (en) Intelligent roadmap navigation in a graphical user interface
US20050102632A1 (en) Creating user interfaces
US20020175916A1 (en) Method for presenting circular dialog windows
US10216363B2 (en) Navigating a network of options
US8640055B1 (en) Condensing hierarchies in user interfaces
JP2642040B2 (ja) 主ウインドウ内に表示された固定要素を見かけ上直接的に編集するための方法及びシステム
WO2002084472A1 (fr) Procede de presentation de fenetres circulaires de dialogues
Godbold Mastering UI Development with Unity: An in-depth guide to developing engaging user interfaces with Unity 5, Unity 2017, and Unity 2018
JPH0276324A (ja) 項目選択装置と方法

Legal Events

Date Code Title Description
PUAI Public reference made under article 153(3) epc to a published international application that has entered the european phase

Free format text: ORIGINAL CODE: 0009012

17P Request for examination filed

Effective date: 20031114

AK Designated contracting states

Kind code of ref document: A1

Designated state(s): AT BE CH CY DE DK ES FI FR GB GR IE IT LI LU MC NL PT SE TR

AX Request for extension of the european patent

Extension state: AL LT LV MK RO SI

A4 Supplementary search report drawn up and despatched

Effective date: 20060515

17Q First examination report despatched

Effective date: 20090302

STAA Information on the status of an ep patent application or granted ep patent

Free format text: STATUS: THE APPLICATION IS DEEMED TO BE WITHDRAWN

18D Application deemed to be withdrawn

Effective date: 20111101