Dynamic Graphical User Interface Generation for Web-Based Public Display Applications

Total Page:16

File Type:pdf, Size:1020Kb

Dynamic Graphical User Interface Generation for Web-Based Public Display Applications Dynamic Graphical User Interface Generation for Web-based Public Display Applications Jorge C. S. Cardoso CITAR/School of Arts, Portuguese Catholic University, Rua Diogo Botelho, 1327, 4169-005 Porto, Portugal Keywords: Dynamic Graphical User Interface, Public Displays, Mobile Applications, Toolkits. Abstract: Public digital displays are moving towards open display networks, resulting in a shift in the focus from single-purpose public displays that are developed with a single task or application in mind, to general- purpose displays that can run several applications, developed by different vendors. In this new paradigm, it is important to facilitate the development of interactive public display applications and provide programmers with toolkits for incorporating interaction features. An important function of such toolkits is to support interaction with public displays through a users' smartphone, allowing users to discover and interact with the public display applications configured in a given display. This paper describes our approach to providing dynamically generated graphical user interfaces for public display applications that is part of the PuReWidgets toolkit. 1 INTRODUCTION display context. In recent years, smartphones have gained enormous traction and are expected to Interactive public display systems have gained continue to grow in usage during the next few years considerable attention form the research community (Finance, 2012), making them also a privileged in the last years due to their increasing ubiquity. In choice for interacting with public displays. It is particular, research has started to focus on pervasive current practice for many web applications to open display networks (Davies et al., 2012) as a simultaneously offer desktop and mobile versions of means to attain the full potential of the vast number their applications. This approach will certainly be of digital public displays that exist today. In an open used also for some of the public display applications network, display owners can easily interconnect of the future, which will want to deliver a their displays and take advantage of various kinds of customised interaction experience to their users. existing content, including interactive applications. However, public display systems can also provide Application developers can create applications and generic mobile applications that help users discover, distribute them globally, to be used in any display. explore, and control the public display (José et al., Users can not only watch the content played on the 2013). display, but also appropriate it in various ways such In order to attract a large number of developers, as interacting with it, expressing their preferences, incorporating high-level interaction features into submitting and downloading content from the applications should be an easy task. These high-level display. features should work seamlessly with a number of In order for applications to work across a variety heterogeneous interaction mechanisms, including of different public display systems, developers need smartphones with rich user interfaces. Following this to rely on protocols, standards, and interaction line, we have built a toolkit – PuReWidgets – for abstractions so that they do not have to deal with the web-based interactive public display applications specificities of each display technology, in particular that allows developers to incorporate, in their interaction mechanisms and modalities that may be applications, high-level interaction controls that very diverse. Short Message Service (SMS), respond transparently to various interaction Bluetooth, email, touch, Quick Response codes (QR mechanisms such as SMS, email, QR code, and codes), mobile devices, are a small set of interaction touch. Additionally, our toolkit is able to generate mechanisms that have been used in the public dynamic user interfaces for mobile devices that C. S. Cardoso J.. 5 Dynamic Graphical User Interface Generation for Web-based Public Display Applications. DOI: 10.5220/0004707500050013 In Proceedings of the 4th International Conference on Pervasive and Embedded Computing and Communication Systems (PECCS-2014), pages 5-13 ISBN: 978-989-758-000-0 Copyright c 2014 SCITEPRESS (Science and Technology Publications, Lda.) PECCS2014-InternationalConferenceonPervasiveandEmbeddedComputingandCommunicationSystems allow users to discover and interact with the 2.2 Abstract UI Description applications running in a specific place, and their interaction features. A different approach for showing the user interface In this paper, we focus on the dynamic in the controller device is to have a service interface generation of graphical user interfaces. We describe description that can be read by a controller to our approach; present its architecture and dynamically generate a suitable user interface programming model; and present a preliminary (graphical, speech, gesture, command line, etc.). For evaluation of the resulting system that consisted in a example, (Roman, Beck, & Gefflaut, 2000) real-world deployment of a public display running developed a device independent, XML-based, various applications built with the toolkit. language for representation of services and the respective dynamic interface generation for mobile devices. The service description language allows the 2 RELATED WORK definition of a list of methods with parameters, which can be invoked by the client. The service Automatically generating a user interface is a description also includes a description of GUI common approach in ubiquitous computing elements that should be used in the user interface to environments and smart spaces where there are represent the parameters and actions that trigger the services associated with places, which can be invocation of methods. Clients obtain the service accessed through many different devices. In this description and employ an eXtensible Stylesheet approach, the application logic and user interface are Language (XSL) transformation particular to the usually distributed: the user interface runs in a device to generate the HTML user interface, which controller device that connects remotely to the is then presented in a native browser. application logic through some kind of remote In XWeb (Olsen et al., 2000), a service exposes method invocation mechanism. Service developers its data through a Data URL that can be manipulated focus on the implementation of the internal logic and by clients but, in order to provide a user interface, on what functions the service should provide to the services also specify a View URL that points to an outside world. These functions represent the XView. The XView specifies the interaction that can programmatic interface that the service exposes to be accomplished with the data, defining the possible other system components. data types and transformations from internal There are several ways to make the user interface representations to user-friendly representations appear in the controller device and allow a user to called interactors (numbers, dates, times, control the service. We describe some alternatives in enumerations, text, links, groups, and lists). An the following subsections. XWeb client uses the XView to generate a user interface appropriate to the interaction modality of 2.1 Downloadable UI Code the device. Because XViews are independent of any concrete interaction modality, devices are able to One approach for creating the user interface is to generate user interfaces for graphical and speech- have the controller download the User Interface (UI) based interaction. code from the service itself and then execute it Another system that resorts to dynamic user locally. This is the approach followed by the Jini interface generation is the Personal Universal Service UI (Venners, 2005), which is based on Jini’s Controller (PUC) (Nichols et al., 2002). PUC uses a service architecture. In Jini, services announce peer-to-peer communication architecture between themselves by registering in a lookup service client devices and services, and a service available in the network. This registration involves specification language, based on XML, which placing a service proxy object for the service in the models data (state variables) and actions lookup service. This service proxy is a runnable Java (commands). A service is modelled as a group tree object that clients use to interact with the service. of elements (variables and commands); this structure Clients use the lookup service to find a service of allows service developers to group similar elements interest and download the associated service proxy. together providing cues for the interface generators. To invoke a function on the service, clients call a The specification language also allows the definition local method on the proxy. The proxy object takes of dependencies between elements. The graphical care of communicating over the network to the user interface generator uses the combination of the corresponding service, using whatever protocol the group tree and dependencies to organise the service developer chose. interface components into logical groupings. 6 DynamicGraphicalUserInterfaceGenerationforWeb-basedPublicDisplayApplications 2.3 Hybrid Approaches the user interface of the application. Instead, our toolkit continually gathers information about which There are also hybrid solutions for generating the widgets the application has created in order to be user interface: custom-designed user interfaces can able to replicate
Recommended publications
  • Microsoft Publisher Version 2007
    Microsoft Publisher version 2007 Getting Started Select a publication type from the left-hand panel. Your design choices will appear in the center panel. Page 1 of 8 © D. Rich, 2010 Single click a design choice from the center panel. In the right-hand panel, you can edit the default color and font scheme if desired. Options will differ, depending on the chosen publication type. Then click the Create button in the lower right-hand corner. Publication Options NOTE: available options depend on publication type Page 2 of 8 © D. Rich, 2010 To close Task Pane, click X. To reopen at any time, choose View > Task Pane. Zoom Use drop down menu or + - icons. Multi-page publications contain navigation buttons at the bottom of the screen. Page 3 of 8 © D. Rich, 2010 Working With Text Editing Text All text in Publisher is contained within text boxes. These text boxes, by default, contain “filler text.” You will need to delete the filler text and enter your own text. Formatting Text All text in Publisher is contained within text boxes. You will need to click inside the text box to select the text you wish to edit. Edit and format as you would in Word, by using the Formatting toolbar, You can also choose Format > Font for more formatting options. Text Boxes If text is too large for text box, the text box overflow (A…) symbol appears. To enlarge a text box, grab and drag one of the white circles. To move a text box, hover your mouse on the edge of the box and the crosshairs icon will appear.
    [Show full text]
  • Effects of Scroll Bar Orientation and Item Justification in Using List Box Widgets
    Effects of scroll bar orientation and item justification in using list box widgets G. Michael Barnes Erik Kellener California State University Northridge Hollywood Online Inc. 18111 Nordhoff Street 1620 26th St., #370S Northridge, CA 91330-8281 USA Santa Monica, CA 90404 +1 818 677 2299 +1 310 586 2020 [email protected] [email protected] Abstract List boxes are a common user interface component in graphical user interfaces. In practice, most list boxes use right-oriented scroll bars to control left-justified text items. A two way interaction hypothesis favoring the use of a scroll bar orientation consistent with list box item justification was obtained for speed of use and user preference. Item selection was faster with a scroll bar orientation consistent with list item justification. Subjects preferred left- oriented scroll bars with left-justified items and right-oriented scroll bars with right-oriented items. These results support a design principle of locality for user interface controls and controlled objects. Keywords List widgets, scroll bar, graphical user interface design, usability study Introduction This electronic publication is an updated statistical analysis of Erik Kellener’s unpublished masters’ thesis, “Are GUI Ambidexterous” completed at California State University Northridge, CA. 1996. List boxes are used in many graphical user interfaces (GUI) today. Whether its a desktop P.C., a personal digital assistant (PDA) or an information kiosk at the grocery store, list boxes are integrated into most GUIs. The list box GUI component is usually present in an interface that asks a user to make a selection from a list of items. The size of the list of items can vary significantly, however the screen area required by a list box is usually fixed.
    [Show full text]
  • Using the Tools Palette in Collaborate (The Whiteboard)
    Using the Tools Palette in Collaborate (The Whiteboard) The Tools Palette contains drawing and text tools that can be used to create and manipulate objects on the Whiteboard. It also has options to place a screenshot or clip art. The Tools Palette Tools in the palette with a tabbed lower right corner have additional optional tools that can be swapped into their spot. Click and hold the tool to expand the options. Participants have access to the Whiteboard tools if they have been granted the Whiteboard tools permission. The Properties Editor When you click on any of the text or drawing tools in the Tools palette, the Properties Editor palette will appear at the bottom of the Whiteboard. From here you can format your text or graphic by specifying various properties. The contents of the Properties Editor palette changes depending on which tool is being used or which objects are selected. 1 Updated November 29, 2012 Inserting Text The Whiteboard has two text tools: The Simple Text Tool ( ) creates text as an object directly on the canvas. The text can be manipulated just like a shape or image in a graphic design program. The Text Editor ( ) creates a bounding box for text, and the text inside can be edited as in a word processor or publishing program. To insert text on to the Whiteboard: 1. Click on the Text Editor Tool. If the Text Editor tool is not in the Tools Palette, click and hold the Simple Text tool until it expands to reveal the Text Editor tool icon, then click on the Text Editor tool.
    [Show full text]
  • User Interface Aspects of a Human-Hand Simulation System
    User Interface Aspects of a Human-Hand Simulation System Beifang YI Department of Computer Science and Engineering University of Nevada, Reno Reno, NV, 89557, USA Frederick C. HARRIS, Jr. Department of Computer Science and Engineering University of Nevada, Reno Reno, NV, 89557, USA Sergiu M. DASCALU Department of Computer Science and Engineering University of Nevada, Reno Reno, NV, 89557, USA Ali EROL Department of Computer Science and Engineering University of Nevada, Reno Reno, NV, 89557, USA ABSTRACT in a virtual environment is the base of a graphical user interface (GUI), which we call Virtual Hand. This paper describes the user interface design for a human-hand simulation system, a virtual environment that produces ground Virtual Hand simulates the human hand motion by modifying truth data (life-like human hand gestures and animations) and the angular parameters (i.e., finger joint angles) of the kinematic provides visualization support for experiments on computer hand model. This software produces ground truth hand-pose vision-based hand pose estimation and tracking. The system data and corresponding images for use in computer vision allows users to save time in data generation and easily create experiments. It also produces ground truth data for the hand for any hand gestures. We have designed and implemented this user use in computer vision experiments [16]. The UI design and interface with the consideration of usability goals and software implementation for this simulation system followed accepted engineering issues. standards in UI design and software engineering. Keywords: GUI, User Interface Design, Virtual Reality, The organization of this paper is as follows: Section 2 briefly Software Engineering, HCI.
    [Show full text]
  • How to Create and Maintain a Table of Contents
    How to Create and Maintain a Table of Contents How to Create and Maintain a Table of Contents Version 0.2 First edition: January 2004 First English edition: January 2004 Contents Contents Overview........................................................................................................................................ iii About this guide..........................................................................................................................iii Conventions used in this guide................................................................................................... iii Copyright and trademark information.........................................................................................iii Feedback.....................................................................................................................................iii Acknowledgments...................................................................................................................... iv Modifications and updates..........................................................................................................iv Creating a table of contents.......................................................................................................... 1 Opening Writer's table of contents feature.................................................................................. 1 Using the Index/Table tab ...........................................................................................................2 Setting
    [Show full text]
  • Screencreator Menus and Toolbars
    14 ScreenCreator Menus and Toolbars Chapter . Scr Menu Cr Menu Menu Librar Menu T Menu Menu Pr Menu Menu 4–2 The Menus and Toolbars ScreenCreator Menus The Screen Menu The Screen menu contains commands for creating a new screen, opening, closing or deleting screens, as well as printing a screen and editing all screen colors. If the Screen menu command can also be called by a Standard Toolbar tool, the tool is shown below the menu command. The large Screen menu on the near right is available when a screen is open. The small Screen menu on the Toolbars far right is available if no screen is open. The Menus and Screen > New creates and opens a new Untitled screen. Screen > Open... calls the Open Screen dialog box, allowing you to select and open a screen. Menus and Toolbars Selecting Simple Display is the opposite of Details in other Windows Open boxes and only shows the screen icons. 4–3 The Menus and Toolbars Screen > Open... Clicking Select... brings up the normal Windows Select Folder box. The Preview function can be The Menus and very useful for selecting the Toolbars right screen. All screens of the current project are shown. Screen > Close does just that, closes the selected screen. Screen > Save simply saves the current screen, with any changes you may have made. and Toolbars Menus 4–4 The Menus and Toolbars Screen > Save As... calls the Save Screen dialog box, allowing you to save the current screen (under a different name or under a different registration number). Compile When Saving can be deselected to allow creating and saving screens without assigning PLC addresses to parts.
    [Show full text]
  • Zoomtext Quick Reference Guide Version 10
    ZoomText Quick Reference Guide version 10 Contents Welcome to ZoomText 10 ................ 3 Cursor Enhancements ............................24 System Requirements ............................... 4 Focus Enhancements ..............................25 Installing ZoomText ................................. 5 Font Enhancements .................................26 Activating ZoomText ............................... 6 Desktop Finder ........................................27 Starting ZoomText .................................... 8 Web Finder ...............................................28 ZoomText User Interface ......................... 9 Text Finder ...............................................31 Enabling and Disabling ZoomText ...... 11 Smooth Panning ......................................33 Magnifier Toolbar .......................... 12 Reader Toolbar .............................. 35 Setting the Magnification level ............. 13 Turning Speech On and Off ...................36 Selecting a Zoom Window .................... 14 Adjusting the Speech Rate .....................37 Adjusting a Zoom Window ................... 16 Synthesizer Settings ................................38 Using the Freeze Window ..................... 17 Typing Echo .............................................39 Using View Mode ................................... 18 Mouse Echo ..............................................40 Dual Monitor Support ............................ 19 Verbosity...................................................41 Color Enhancements .............................
    [Show full text]
  • Using Microsoft Visual Studio to Create a Graphical User Interface ECE 480: Design Team 11
    Using Microsoft Visual Studio to Create a Graphical User Interface ECE 480: Design Team 11 Application Note Joshua Folks April 3, 2015 Abstract: Software Application programming involves the concept of human-computer interaction and in this area of the program, a graphical user interface is very important. Visual widgets such as checkboxes and buttons are used to manipulate information to simulate interactions with the program. A well-designed GUI gives a flexible structure where the interface is independent from, but directly connected to the application functionality. This quality is directly proportional to the user friendliness of the application. This note will briefly explain how to properly create a Graphical User Interface (GUI) while ensuring that the user friendliness and the functionality of the application are maintained at a high standard. 1 | P a g e Table of Contents Abstract…………..…………………………………………………………………………………………………………………………1 Introduction….……………………………………………………………………………………………………………………………3 Operation….………………………………………………….……………………………………………………………………………3 Operation….………………………………………………….……………………………………………………………………………3 Visual Studio Methods.…..…………………………….……………………………………………………………………………4 Interface Types………….…..…………………………….……………………………………………………………………………6 Understanding Variables..…………………………….……………………………………………………………………………7 Final Forms…………………....…………………………….……………………………………………………………………………7 Conclusion.…………………....…………………………….……………………………………………………………………………8 2 | P a g e Key Words: Interface, GUI, IDE Introduction: Establishing a connection between
    [Show full text]
  • MATLAB Creating Graphical User Interfaces  COPYRIGHT 2000 - 2004 by the Mathworks, Inc
    MATLAB® The Language of Technical Computing Creating Graphical User Interfaces Version 7 How to Contact The MathWorks: www.mathworks.com Web comp.soft-sys.matlab Newsgroup [email protected] Technical support [email protected] Product enhancement suggestions [email protected] Bug reports [email protected] Documentation error reports [email protected] Order status, license renewals, passcodes [email protected] Sales, pricing, and general information 508-647-7000 Phone 508-647-7001 Fax The MathWorks, Inc. Mail 3 Apple Hill Drive Natick, MA 01760-2098 For contact information about worldwide offices, see the MathWorks Web site. MATLAB Creating Graphical User Interfaces COPYRIGHT 2000 - 2004 by The MathWorks, Inc. The software described in this document is furnished under a license agreement. The software may be used or copied only under the terms of the license agreement. No part of this manual may be photocopied or repro- duced in any form without prior written consent from The MathWorks, Inc. FEDERAL ACQUISITION: This provision applies to all acquisitions of the Program and Documentation by, for, or through the federal government of the United States. By accepting delivery of the Program or Documentation, the government hereby agrees that this software or documentation qualifies as commercial computer software or commercial computer software documentation as such terms are used or defined in FAR 12.212, DFARS Part 227.72, and DFARS 252.227-7014. Accordingly, the terms and conditions of this Agreement and only those rights specified in this Agreement, shall pertain to and govern the use, modification, reproduction, release, performance, display, and disclosure of the Program and Documentation by the federal government (or other entity acquiring for or through the federal government) and shall supersede any conflicting contractual terms or conditions.
    [Show full text]
  • Horizontally Scrollable Listboxes for Windows 3.X, Using C++
    Horizontally Scrollable ListBoxes for Windows 3.x, using C++ Ted Faison Ted is a writer and developer, specializing in Windows and C++. He has authored two books on C++, and has been programming in C++ since 1988. He is president of Faison Computing, a firm which develops C++ class libraries for DOS and Windows. He can be reached at [email protected] List boxes are among the most commonly used child controls in Windows applications. List boxes are typically used to show lists of files, fonts, or other variable-length lists of textual information. To add a list box to a dialog box, you generally edit a resource file, using programs such as Microsoft's Dialog Editor or Borland's Resource Workshop. Windows handles most of the list box details transparently. For example, if you add strings to a list box, Windows will automatically put a scroll bar on the control when the list box contains more strings than can be displayed in the client area of the list box. Windows handles scroll bar events - such as moving the thumb or clicking the up/down arrows - without any need for user code. Displaying a list of files in a list box is a somewhat easy task, because filenames have a predefined maximum number of characters. When you create the list box resource, you will generally make the control wide enough to display the longest filename. But what if you use a list box to display strings of varying and unknown length, such as the names of people or the titles of your CD collection ? You could obviously make the list box wide enough to accommodate the widest string you expect, but that would not only look pretty bad, but also waste a great deal of space on the screen.
    [Show full text]
  • Listbox User Manual
    LISTBOX USER MANUAL (Version: 1.2, December2015) This guide explains how to use the basic functionalities of the ListBox v 4.2. www.athensa.tv Legal notice The information in this manual is furnished for informational use only. No part of this manual may be reproduced or transmitt ed in any form or by any means, electronic or mechanical, for any purpose, without the prior written permission of ATHENSA LLC. The software, described in this manual, is owned by DMT Ltd and ATHENSA LLC. It is protected by Bulgarian Copyright Law, as well as by international copyright treaties, and may be used or copied only in accordance with the license agreement. ATHENSA LLC provides this manual “as is” without any warranty, either express, or implied. This publication may contain typographical errors or technical inaccuracies. While every precaution has been taken in the preparation of this document, ATHENSA LLC assumes no responsibility for errors or omissions. Nor is any liability assumed for damages, resulting from the use of the information, contained herein. Changes are periodically made to the information herein. They will be incorporated in new versions of the manual. Please, check the ATHENSA website regularly for User Manual updates. DMT Ltd. and/or ATHENSA may introduce changes or improvements in the products, described in this manual at any time, without any special notice. Please, address your comments or questions to: ATHENSA LLC 2970 Clairmont Road NE, Suite 640, Atlanta, Georgia 30329, USA Tel. +1 (404) 424 9283 Fax +1 (404) 835 1705 [email protected] https://athensa.tv/ 2 Contents LEGAL NOTICE..............................
    [Show full text]
  • IG7013-Toolbars.Pdf
    Impress Guide Appendix B Toolbars Copyright This document is Copyright © 2021 by the LibreOffice Documentation Team. Contributors are listed below. You may distribute it and/or modify it under the terms of either the GNU General Public License (http://www.gnu.org/licenses/gpl.html), version 3 or later, or the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0/), version 4.0 or later. All trademarks within this guide belong to their legitimate owners. Contributors To this edition. Peter Schofield Dave Barton Feedback Please direct any comments or suggestions about this document to the Documentation Team’s mailing list: [email protected] Note Everything sent to a mailing list, including your email address and any other personal information that is written in the message, is publicly archived and cannot be deleted. Publication date and software version Published February 2021. Based on LibreOffice 7.0. Using LibreOffice on macOS Some keystrokes and menu items are different on macOS from those used in Windows and Linux. The table below gives some common substitutions for the instructions in this document. For a detailed list, see the application Help. Windows or Linux macOS equivalent Effect Tools > Options LibreOffice > Preferences Access setup options menu selection Right-click Control+click or right-click Open a context menu depending on computer setup Ctrl (Control) ⌘ (Command) Used with other keys F11 ⌘+T Open the Styles deck in the Sidebar Documentation for LibreOffice is available at
    [Show full text]