DOCSLIB.ORG

Building a Graphical User Interface Building a Graphical CHAPTER 9 User Interface

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Building a Graphical User Interface Building a Graphical CHAPTER 9 User Interface LENT c09.tex 2/11/2012 17: 32 Page 147 LENT c09.tex 2/11/2012 17: 32 Page 148 148 CHAPTER 9 Building a Graphical User Interface Building a Graphical CHAPTER 9 User Interface 9.1 Getting started with GUIDE 9.2 Starting an action with a GUI element 9.3 Communicating with GUI elements 9.4 Synchronizing information with a GUI element 9.5 Key points from this chapter The graphical user interface development environment (GUIDE) enables the rapid creation FIGURE 9.1 The GUIDE Quick Start window. of a graphical user interface (GUI) for a MATLABprogram. In this chapter we will introduce the GUIDE program and describe how to use it in basic GUI deployment. GUIDE is used to build the GUI, which can then be connected to a program, through a process we will describe in the next chapter. The GUI is contained in two files, a figure file with the suffix .fig, which contains graphical layout information, and an m-file with suffix .m, which contains the main GUI function and a number of subfunctions. This latter file is written in template form by GUIDE, and can be edited to add functionality and connect with other functions. This chapter and the chapter that follows are very tutorial. Much of the information to be conveyed is visual and procedural. The goal is to provide a fairly complete and detailed explanation of the process of GUI creation. A perhaps unfortunate side-effect of this level of detail is that it can leave the reader with the impression that the process is more complex than it is in reality. It actually is not that hard; just a few concepts and processes suffice. 9.1 Getting started with GUIDE To start GUIDE, type guide (no capitals) at the command prompt in the Command window. >> guide The GUIDE Quick Start window will appear, as shown in Figure 9.1. Choose the default option, “Blank GUI” by pressing “OK” or the [Enter] key. The GUIDE FIGURE 9.2 GUIDE window with initially blank GUI panel. window will then appear with the window name “untitled.fig” as shown in Figure 9.2. The window has three areas: (a) on the top are the menus and the menu bar, (b) the left side has buttons to select particular GUI objects, and (c) the main figure-design area starts The GUIDE window can be resized by grabbing the lower right corner with the mouse as a blank panel with grid marks on it. This panel is where the various GUI objects will be and stretching. The GUI figure panel inside can be sized by clicking and dragging on the placed. black square in the lower right corner. Individual controls can be positioned on the figure by clicking on an icon button on the left and dragging a GUI element into position. Try it 147 LENT c09.tex 2/11/2012 17: 32 Page 149 LENT c09.tex 2/11/2012 17: 32 Page 150 9.1 Getting started with GUIDE 149 150 CHAPTER 9 Building a Graphical User Interface Push button Slider Radio button Checkbox Edit textbox Static textbox Pop-up menu Listbox Togglebutton Table Axes Panel Button group ActiveX control FIGURE 9.3 Selection of GUI objects in GUIDE. out—drag several items over and position them on the main figure area. A GUI is designed by positioning and setting the properties of these GUI elements. Most of these GUI objects are instances of a MATLAB class called uicontrol (user interface controls). The GUI objects you can create using the buttons on the left panel of GUIDE are: push button – A button that activates when the user clicks the mouse on it. • slider – Enter a real number by adjusting the position of the slide. • radio button – Changes its state from unselected to selected and back. FIGURE 9.4 Arranging various GUI objects on the panel in GUIDE. • checkbox – Changes state from selected (checked) to unselected (unchecked). • edit textbox – Allows the user to input information by typing text into the window. with this by dragging several items onto the figure. The GUI objects won’t yet respond and • the tool you construct won’t be useful, just experimental. static textbox – Displays some text; useful for labeling items or reporting the results of • a calculation. pop-up menu – Gives the user a list of options from which one may be selected. Saving the GUI to a file • listbox – Presents a list of options that can be scrolled. Several items can be selected at Name and save the GUI you have made by selecting File|Save As and entering the name— • the same time. here enter “SillyTool” (don’t type the quotes) and press Save or [Enter]. It is a very helpful practice to name each GUI file with the suffix “Tool” to distinguish the sort of code it toggle button – Pressed once, it stays down until it is pressed again. • contains. table – Displays data in a tabular form. • NOTE: This convention may seem unnecessary but experience proves it to be very very helpful. axes – A surface on which to display two-dimensional and three-dimensional graphics. I urge you to follow it. Choose names for GUI-based programs of the form <Name>Tool. • panel – Groups controls together visually. • At this point GUIDE does two things, each wonderful in its own way. button group – Groups a set of radio buttons or toggle buttons so that they act together • 1. GUIDE saves all the information you have designed into the GUI, i.e., all the geometric with the result that only one at a time is selected. information and all the properties of every GUI object you put in the frame, into a file activeX control (Windows) – allows the insertion of an ActiveX control made by another named SillyTool.fig. • program. (Only use these if you really know what you’re doing; improperly configured 2. GUIDE also creates a file called SillyTool.m, stores it in the current MATLAB folder, controls can crash MATLAB.) and loads it into the MATLAB editor. This file contains the program that creates and executes the GUI tool you have made. You can adjust the size of a GUI object by clicking on it once to make it the current object, and then dragging the sizing handles, which appear when it’s selected. You can make small Look in the Current Folder window (you may need to click the Current Folder tab) and notice adjustments in the position of the object using the arrow keys. It is a good idea to experiment that these two files have been created: SillyTool.fig and SillyTool.m. The figure file (*.fig) LENT c09.tex 2/11/2012 17: 32 Page 151 LENT c09.tex 2/11/2012 17: 32 Page 152 9.2 Starting an action with a GUI element 151 152 CHAPTER 9 Building a Graphical User Interface FIGURE 9.5 SillyTool running. FIGURE 9.6 A push button with its properties altered in the Property Inspector. is not directly human-readable. It is a binary file that encodes the information about your GUI design. Such a figure file is meant to be edited only by using the GUIDE program. action on the part of the program. Let’s explore how that works by making a very simple The file SillyTool.m is, by contrast, just MATLAB code that GUIDE has generated and GUI, consisting of a single button. which, when executed, will launch and run the tool. It is comprised of a series of functions, Launch GUIDE again from the Command window by typing “guide” at the prompt. In the most of which are just stubs to be filled in later. GUIDE Quickstart panel, select the option to create a blank GUI (rather than to open an You may notice that MATLAB took control and put you into the main MATLAB window existing GUI file). When the GUIDE window appears, select the push button icon from the with the file SillyTool.m loaded in the editor. We won’t explore the file SillyTool.m at panel of uicontrols on the left, and drag a push button onto the panel surface. this point—it’s chock-full of interesting things but is likely a little mystifying and potentially The button initially says “Push Button” on it. Let’s alter this, so the button’s label will be overwhelming right now. Ignore it. But do run the file by pressing the green Run button on different. This is an example of editing the Properties of a uicontrol. To change a property the EDITOR tab. of the button, or any object, double-click on it and the Property Inspector window will pop When you do, you should see your SillyTool running in its own window. Play with each of up. All of the properties of the specific GUI object appear in this window and can be edited. the graphic elements and see how they perform. Many won’t be very impressive just yet; The name of each property is listed in the left column and the value of each property is you will learn how to configure them so they do useful things. But notice the basic behavior listed in the corresponding row of the right column. of the push button compared to the toggle button, the checkbox, the radio button, etc. When At this point we’ll change three properties: you are done, exit SillyTool by clicking on the “close button” at the top corner of the panel (red x on the top right for Windows, red circle on the top left for Mac).
Load more

Recommended publications
  • Overview Getting the Necessary Code and Files
    Softpress KnowledgeBase Using jQuery Code with Freeway Here we will run through the steps used to implement a jQuery horizontal scrollbar similar to the one which can be found at http://jquerytools.org/documentation/rangeinput/ so it can be used to make content within an item on a page scroll horizontally - but please note that we cannot give specific support or instructions for other JavaScript functionality you may find on the web. This is because the way the code is used and edited (sometimes by doing your own hand-coding) varies greatly from one to the next - and many of the sites which offer the code give very limited details of how it needs to be used, sometimes to the point that only those with excellent coding skills will be able to use it. As you will see, this is a long and complex procedure - and this will be the same with any other web design application unless a Freeway Action (or a similar method in other applications) is available to use to simplify the process. It is very important to note that mixing and matching JavaScript libraries on the same page will often cause conflicts. This means that using jQuery functionality on a page will break the Scriptaculous functionality used by many Freeway Actions. This will be discussed later in this article with a specific example. Sometimes this can be fixed by specifying some "NoConflict" code - however, this cannot be fixed with this particular jQuery function without a major rewrite of the supplied jQuery code. Overview We are often asked by customers how a particular website has used some special functionality, and they ask if this can be done in Freeway.
    [Show full text]
  • M-Explorer User's Guide
    Table of Contents M-Explorer User’s Guide Table of Contents M-Explorer User’s Guide..............................................1 Chapter 1 Using This Guide.................................................................1-1 Introduction...................................................................................................... 1-1 Key Concepts................................................................................................... 1-2 Chapter Organization .....................................................................................................1-2 Online Help ....................................................................................................................1-2 Manual Conventions ......................................................................................................1-2 Chapter 2 Introduction to M-Explorer .................................................2-1 Introduction...................................................................................................... 2-1 Key Concepts................................................................................................... 2-2 System Component Interaction......................................................................................2-2 OPC Data Access Servers.............................................................................................2-2 M-Inspector ....................................................................................................................2-2 M-Password ...................................................................................................................2-3
    [Show full text]
  • Spot-Tracking Lens: a Zoomable User Interface for Animated Bubble Charts
    Spot-Tracking Lens: A Zoomable User Interface for Animated Bubble Charts Yueqi Hu, Tom Polk, Jing Yang ∗ Ye Zhao y Shixia Liu z University of North Carolina at Charlotte Kent State University Tshinghua University Figure 1: A screenshot of the spot-tracking lens. The lens is following Belarus in the year 1995. Egypt, Syria, and Tunisia are automatically labeled since they move faster than Belarus. Ukraine and Russia are tracked. They are visible even when they go out of the spotlight. The color coding of countries is the same as in Gapminder[1], in which countries from the same geographic region share the same color. The world map on the top right corner provides a legend of the colors. ABSTRACT thus see more details. Zooming brings many benefits to visualiza- Zoomable user interfaces are widely used in static visualizations tion: it allows users to examine the context of an interesting object and have many benefits. However, they are not well supported in by zooming in the area where the object resides; labels overcrowded animated visualizations due to problems such as change blindness in the original view can be displayed without overlaps after zoom- and information overload. We propose the spot-tracking lens, a new ing in; it allows users to focus on a local area and thus reduce their zoomable user interface for animated bubble charts, to tackle these cognitive load. problems. It couples zooming with automatic panning and provides In spite of these benefits, zooming is not as well supported in an- a rich set of auxiliary techniques to enhance its effectiveness.
    [Show full text]
  • Horizontal Testimonial Slider Plugin Wordpress
    Horizontal Testimonial Slider Plugin Wordpress Jefferson often dallying aliunde when Acheulean Randal romanticized plum and intensified her egocentrism. When Inigo frizzed his strophanthus break-in not momentously enough, is Sylvan vicious? Smartish and drowsy Lawrence carpetbagging his manumission pull-off euhemerized deprecatorily. Both vertical image will have already provides a wordpress plugin or affiliated with god Horizontal Testimonials Slider WordPress Themes from. Explore 27 different WordPress slider plugins that god help you. Divi expand the hover Ingrossocaramelleit. Add testimonials as slides and embed on came in a slider form. WordPress Slider Plugins Best Interactive Plugins for 2020. Vertical Align Center Testimonials Height Show PreviousNext Buttons Hide Featured Image Hide Microdata hReview Testimonial Rotator. Are Logos Copyrighted or Trademarked by Stephanie Asmus. How will Write a Testimonial With Examples Indeedcom. Responsive framework for developers and sequence's also convene for WordPress as well. 14 Testimonial Page Examples You'll goes to Copy HubSpot Blog. WordPress Testimonial Slider WordPress Plugin. Gallery Layout Horizontal Slider Thumbnails To prepare Awesome book it doesn't work. Testimonial Slider Essential Addons for Elementor. Your testimonial page serves as a platform to jerk off how others have benefited from your product or decline making it become powerful perfect for establishing trust and encouraging potential buyers to accomplish action. Display vertical carousel slider with the wolf of a shortcode Aftab Husain 200 active installations Tested with 561. Responsive testimonials bootstrap. WordPress Scroller Horizontal jQuery Image Scroller with Video. Display modes you know divi modules and mobile devices, horizontal slider is configured inside testimonials, custom code of mouth. How do we show testimonials in WordPress? Banner rotator testimonial scrollerimage tickerrecent post sliderresponsive.
    [Show full text]
  • (12) United States Patent (10) Patent No.: US 6,512,530 B1 Rzepkowski Et Al
    USOO65.1253OB1 (12) United States Patent (10) Patent No.: US 6,512,530 B1 Rzepkowski et al. (45) Date of Patent: Jan. 28, 2003 (54) SYSTEMS AND METHODS FOR 5,751,285 A * 5/1998 Kashiwagi et al. ......... 345/833 MIMICKING AN IMAGE FORMING OR 6,331,864 B1 12/2001 Coco et al. ............. 345/771 X CAPTURE DEVICE CONTROL PANEL * cited by examiner CONTROL ELEMENT Primary Examiner John Cabeca (75) Inventors: Kristinn R. Rzepkowski, Rochester, ASSistant Examiner X. L. Bautista NY (US); Thomas J. Perry, Pittsford, (74) Attorney, Agent, or Firm-Oliff & Berrdige, PLC NY (US); Joseph G. Rouhana, Rochester, NY (US); John M. Pretino, (57) ABSTRACT Macedon, NY (US) A graphical user interface widget includes a vertically oriented Slider portion. The slider portion includes a slider (73) Assignee: Xerox Corporation, Stamford, CT pointer that indicates a current value of the slider and a Slider (US) bar that indicates the default value of the slider. The bottom - - - - 0 and top edges of the Slider portion are labeled with the (*) Notice: Subject to any disclaimer, the term of this extreme values of the range for the variable associated with patent is extended or adjusted under 35 the slider portion. The slider pointer divides the slider U.S.C. 154(b) by 0 days. portionSlider into p two Subportions. Anp appearance of a bottom subportion of the slider portion is altered to reflect the value (21) Appl. No.: 09/487,268 currently indicated by the slider pointer relative to the (22) Filed: Jan. 19, 2000 extreme values of the range represented by the Slider.
    [Show full text]
  • Iwork '08 Getting Started (Manual)
    Overview of iWork Tools All three iWork applications share many of the same tools. The Toolbar and Format Bar At the top of each application window, the toolbar provides controls for common tasks. Each toolbar is described in detail in the appropriate chapter in this book. You can customize the toolbar so that it contains the tools you use most often. To customize the toolbar: m Choose View > Customize Toolbar. The toolbar at the top of each window provides controls for common tasks. The Format Bar provides additional formatting tools. The Format Bar provides quick access to commonly used tools for formatting objects. If the Format Bar isn’t visible beneath the toolbar, click View in the toolbar and choose Show Format Bar to show it. 16 Preface Welcome to iWork ’08 The Inspector Window You can format all elements of your document using the panes of the Inspector window. The Inspector panes are described in detail in the user’s guides. To open the Inspector window: m Click Inspector (a blue i) in the toolbar. Click the buttons along the top to see the different Inspector panes. You can have more than one Inspector window open at a time. To open another Inspector window: m Choose View > New Inspector, or Option-click one of the buttons at the top of the Inspector window. Preface Welcome to iWork ’08 17 To see what a control does, rest the pointer over it until its help tag appears. The Media Browser This window provides quick access to all the files in your iTunes library, your iPhoto library, your Aperture library, and your Movies folder.
    [Show full text]
  • A Compact and Rapid Selector
    Boston,MassachusettsUSAo April24-28,1994 HumanFactorsin ComputingSystems Q The Alphaslider: A Compact and Rapid Selector Christopher Ahlberg* and Ben Shneidennan Department of Computer Science, Human-Computer Interaction Laboratory & Institute for Systems Research University of Maryland, College Park, MD 20742 E-mail: [email protected] .se, [email protected] Tel: +1-301-405-2680 ABSTRACT Much of the research done on selection mechanisms has Research has suggested that rapid, serial, visual focused on menus [5,16]. To make menu selections presentation of text (RSVP) may be an effective way to effective various techniques have been explored, such as scan and search through lists of text strings in search of menus with different ratios of breath and width, and menus words, names, etc. The Alphaslider widget employs RSVP where items are sorted by how frequently they are selected as a method for rapidly scanning and searching lists or [16,20]. The RIDE interface explored in [19] allows users menus in a graphical user interface environment. The to incrementally construct strings from legal alternatives Alphaslider only uses an area less than 7 cm x 2.5 cm. The presented on the screen and thereby elminate user errors. tiny size of the Alphaslider allows it to be placed on a credit card, on a control panel for a VCR, or as a widget in Scrolling lists [2,17] share many of the attributes of menus a direct manipulation based database interface. An and are often used for selecting items from lists Figure 1]. experiment was conducted with four Alphaslider designs Research has shown that items in scrolling lists should be which showed that novice AlphaSlider users could locate presented in a vertical format [3], items should be sorted one item in a list of 10,000 film titles in 24 seconds on [10], and that 7 lines of information is more than adequate average, an expert user in about 13 seconds.
    [Show full text]
  • 2D Scrolling Background in Unity When Creating a Scrolling
    2D Scrolling Background in Unity When creating a scrolling background image you will use something called a Quad and convert the Sprite into a Material. This works only if the background is designed to be scrollable. The general steps are: A. Create a new Project or use an existing project. B. Import the background sprite into the project C. Convert the Sprite into a Material D. Add a Quad 3D object and resize this object to match the background and set the Material Filtering E. Resize the Camera F. Add a Scrolling Script to the Quad 1. Download the scrolling backgrounds folder that contains some background images (see link for lecture). This will contain three images, a city background image (1230x600), a space background (1782x600) and a trees background (1100x405) 2. Start Unity and choose New to create a new Project. 3. Name the project Scrolling Background and select the 2D option. 4. Create the Project. 5. In the Assets folder create two new folders named Sprites and Scripts. 6. Drag these three background images into the sprites folder. 7. Click the scrolling city background image in the Sprites folder. The Inspector window shows the properties: You are going to change the Texture Type and the Wrap mode. 8. Set the Texture Type to Default and the Wrap Mode to Repeat. 9. Scroll down in the Inspector window and click the Apply button. 10. Repeat these steps for the other two sprites. 11. Click the Game Object menu, choose 3D, and choose Quad: You want to resize the quad object so it matches the background.
    [Show full text]
  • Sketchsliders: Sketching Widgets for Visual Exploration on Wall Displays Theophanis Tsandilas, Anastasia Bezerianos, Thibaut Jacob
    SketchSliders: Sketching Widgets for Visual Exploration on Wall Displays Theophanis Tsandilas, Anastasia Bezerianos, Thibaut Jacob To cite this version: Theophanis Tsandilas, Anastasia Bezerianos, Thibaut Jacob. SketchSliders: Sketching Widgets for Visual Exploration on Wall Displays. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, ACM, Apr 2015, Seoul, South Korea. pp.3255-3264, 10.1145/2702123.2702129. hal-01144312 HAL Id: hal-01144312 https://hal.archives-ouvertes.fr/hal-01144312 Submitted on 21 Apr 2015 HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non, lished or not. The documents may come from émanant des établissements d’enseignement et de teaching and research institutions in France or recherche français ou étrangers, des laboratoires abroad, or from public or private research centers. publics ou privés. SketchSliders: Sketching Widgets for Visual Exploration on Wall Displays Theophanis Tsandilas1;2 Anastasia Bezerianos2;1 Thibaut Jacob1;2;3 [email protected] [email protected] [email protected] 1INRIA 2Univ Paris-Sud & CNRS (LRI) 3Telecom ParisTech & CNRS (LTCI) F-91405 Orsay, France F-91405 Orsay, France F-75013 Paris, France Figure 1. SketchSliders (left) allow users to directly sketch visualization controllers to explore multi-dimensional datasets. We explore a range of slider shapes, including branched and circular, as well as shapes that express transformations. SketchSliders control visualizations on a wall display (right). ABSTRACT analysis and exploration. Nevertheless, choosing appropriate We introduce a mobile sketching interface for exploring techniques to explore data in such environments is not a sim- multi-dimensional datasets on wall displays.
    [Show full text]
  • Gotomypc® User Guide
    GoToMyPC® User Guide GoToMyPC GoToMyPC Pro GoToMyPC Corporate Citrix Online 6500 Hollister Avenue • Goleta CA 93117 +1-805-690-6400 • Fax: +1-805-690-6471 © 2009 Citrix Online, LLC. All rights reserved. GoToMyPC® User Guide Contents Welcome ........................................................................................... 4 Getting Started .................................................................................. 1 System Requirements ....................................................................... 1 Notes on Installation and Feature Access ............................................. 1 Versions of GoToMyPC ...................................................................... 1 Mac Users .................................................................................... 1 Upgrade Information ......................................................................... 2 Useful GoToMyPC Terms .................................................................... 4 Features ......................................................................................... 5 Set Up a Host Computer .................................................................... 6 Create Your Account (first-time users) .............................................. 6 Set Up a Host PC ........................................................................... 7 Leaving the Host Computer Accessible................................................. 8 Managing Billing and Account Information ........................................ 9 Change Your
    [Show full text]
  • Shape Data Analysis Using Qushape
    SHAPE DATA ANALYSIS USING QUSHAPE 1. INTRODUCTION QuShape is a comprehensive user-friendly software package designed to perform fully automated analysis of SHAPE experimental data. QuShape requires no other software to fully analyze raw experimental capillary electrophoresis data. QuShape can be run in an automatic mode with default analytical procedures but contains an array of alternative algorithmic procedures and parameter controls that the user can apply if not satisfied with the default results. 2. GRAPHIC USER INTERFACE The user controls QuShape via a graphic interface. This interface includes the main Data View window, the Tool Inspector window, and the Script Inspector window. Results of every operation are plotted in the Data View window, allowing the user to monitor the quality of each data processing step. The user can vary the graphic display format via a set of control buttons. At each data processing step, the Tool Inspector window offers the user additional analytical tools that can be employed if the user is not satisfied with the results of the automatic procedure. 1 2.1. MAIN MENU AND TOOLS BAR Four groups of icons are found at the top of the QuShape screen: File-handling, Channels, Figure Options, and Split Channels. File-handling icons: These icons allow users to create or save projects. New Project – Click this icon to create a new project. Open Project – Click this icon to open an existing project. Save Project – Click this icon to save the project. Save Project As – Click this icon to save the project under a different name. Channels icons: Six differently colored label widgets relate colors of the lines in the Data View window to specific data channels (these labels refer to the two-capillary approach used to resolve the chemical probing experiment data).
    [Show full text]
  • Release Notes – Experience 2.35.5.En – ATC-ATM
    ReDat eXperience v 2.35.5 Release notes ATC-ATM ReDat eXperience 2.35.5 Release notes Issued: 01/2020 v 2.35.5 rev. 1 Producer: RETIA, a.s. Pražská 341 Zelené Předměstí 530 02 Pardubice Czech Republic with certified system of quality control by ISO 9001 and member of AOBP The manual employs the following fonts for distinction of meaning of the text: Bold names of programs, files, services, modules, functions, parameters, icons, database tables, formats, numbers and names of chapters in the text, paths, IP addresses. Bold, italics names of selection items (options of combo boxes, degrees of authorization), user names, role names. LINK, REFERENCE . in an electronic form it is a functional link to the chapter. Courier, bold . source code, text from log files, text from config files. Example, demonstration. 2020 Note, hint. Warning, alert. © Copyright RETIA, a.s. RETIA, Copyright © 2 ReDat eXperience 2.35.5 Release notes Content 1. KNOWN INCOMPATIBILITIES........................................................................................................... 4 2. RENAMING SERVICES IN EXPERIENCE ........................................................................................... 5 2.1 MAIN - SERVICES ..................................................................................................................................... 5 3. MONITORING .................................................................................................................................. 5 3.1 INDICATION – OPERATION .......................................................................................................................
    [Show full text]