DOCSLIB.ORG

Widget Toolkit – Getting Started

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Widget Toolkit – Getting Started APPLICATION NOTE Atmel AVR1614: Widget Toolkit – Getting Started Atmel Microcontrollers Prerequisites • Required knowledge • Basic knowledge of microcontrollers and the C programming language • Software prerequisites • Atmel® Studio 6 • Atmel Software Framework 3.3.0 or later • Hardware prerequisites • mXT143E Xplained evaluation board • Xplained series MCU evaluation board • Programmer/debugger: • Atmel AVR® JTAGICE 3 • Atmel AVR Dragon™ • Atmel AVR JTAGICE mkll • Atmel AVR ONE! • Estimated completion time • 2 hours Introduction The aim of this document is to introduce the Window system and Widget toolkit (WTK) which is distributed with the Atmel Software Framework. This application note is organized as a training which will go through: • The basics of setting up graphical widgets on a screen to make a graphical user interface (GUI) • How to get feedback when a user has interacted with a widget • How to draw custom graphical elements on the screen 8300B−AVR−07/2012 Table of Contents 1. Introduction to the Window system and widget toolkit ......................... 3 1.1 Overview ........................................................................................................... 3 1.2 The Window system .......................................................................................... 4 1.3 Event handling .................................................................................................. 5 1.3.2 The draw event ................................................................................... 6 1.4 The Widget toolkit ............................................................................................. 6 1.5 Window system event queue ............................................................................ 7 2. Training tasks ....................................................................................... 7 2.1 Task 1: Getting started ...................................................................................... 7 2.2 Task 2: Adding a button .................................................................................. 10 2.3 Task 3: Adding a basic frame .......................................................................... 10 2.4 Task 4: Connecting it all together .................................................................... 11 3. Revision history .................................................................................. 12 Atmel AVR1614: Widget Toolkit – Getting Started [APPLICATION NOTE] 2 8300B−AVR−07/2012 1. Introduction to the Window system and widget toolkit 1.1 Overview The graphical display system consists of several layers of drivers which can be used in a graphical application. The available layers are illustrated in Figure 1-1. Figure 1-1. Layers of the graphical display system. Atmel AVR1614: Widget Toolkit – Getting Started [APPLICATION NOTE] 3 8300B−AVR−07/2012 1.2 The Window system The Window system is a module for organizing two-dimensional windows. The windows are organized in a tree structure where each window can have one parent and several children. The Window system also allows events to be queued and handled by the event handler of the affected windows. Table 1-1 shows the properties that define a window. Table 1-1. Window properties. Property Description Position and area/size The position on screen and size of the window. Relation to parent and children Windows are organized in a tree structure where they can have one parent, several siblings and several children. Visibility A window can be visible/mapped or invisible/unmapped on the screen. Background A background bitmap which can be either a solid color or a bitmap stored in either data or program memory. Window behavior flags Currently implemented behaviors are: • Raise on press: raises the window as the top child when a pointer event occurs within the window • Redraw parent: redraws parent when drawing a window, useful for transparent windows Event handler Pointer to a function that handles events for the window. The Window system can be used on its own or together with the Widget toolkit. Figure 1-2 shows the relations between windows that are used to represent some example widgets. The figure shows the top_child and next_sibling pointers. The parent and prev_sibling pointers, which just point in the opposite direction, are omitted to simplify the figure. The figure also illustrates how the position and size affects how the windows could be represented on a display. Atmel AVR1614: Widget Toolkit – Getting Started [APPLICATION NOTE] 4 8300B−AVR−07/2012 Figure 1-2. Window representations. 1.3 Event handling The Window system uses events to update the available windows when user or system interaction occurs. A global event handler for the Window system calls the configured event handler function for each of the affected windows. Table 1-2 describes the types of events which can be issued by the Window system. Table 1-2. Event types for windows. Event name Description Pointer event The user has clicked, moved or released a mouse or touch screen inside a window. Keyboard event The user has pushed a key on a keyboard or keypad. Raise event The window has been raised to the top inside its parent window. Unraise event The window is no longer the top child as another window has been raised to the top. Get focus event The window got keyboard focus. Lose focus event The window lost keyboard focus. Draw event Request to draw window (after window background has been drawn). Attribute event Attributes of window has changed (such as background, position etc). Destroy event Request to free all memory allocated for the window not handled by the Window system itself. Atmel AVR1614: Widget Toolkit – Getting Started [APPLICATION NOTE] 5 8300B−AVR−07/2012 1.3.2 The draw event The draw event is used when drawing a window. When drawing a window, the following will happen: 1. Parent will be drawn if WIN_BEHAVIOR_REDRAW_PARENT attribute is set. 2. Background for window will be drawn. 3. Event handler for window will be called to draw the window/widget. 4. Children will be drawn starting with the bottom child and ending with the top child. 1.4 The Widget toolkit The Widget toolkit implements many common widgets for use on a graphical display. The toolkit uses the features from the Window system and display drivers to implement the widgets. A widget is defined as a graphical display element located on a screen that can show feedback to the user. Many widgets can also be manipulated by a mouse or touch screen. An example widget is a button widget. This widget is common in graphical user interfaces (GUI). This widget can show some text like “Initiate Launch Sequence”, and when the user clicks on the widget it will change color to indicate that it has been pressed. When user releases the press it will initiate an action as indicated by the text on the button. Table 1-3 lists the types of pre-implemented widgets that are distributed with the Widget toolkit, while Figure 1-3 shows how some of them can look when they are drawn on display. Table 1-3. Implemented widget types. Widget name Typical/example usage Basic frame Main window for the other widgets. Frame Frame with border and title bar. Button Register touch/mouse press from the user. Check box Allows the user to switch on (check) or off (uncheck) a feature. Progress bar Used to graphically represent a progress of a task or the current state of a variable (like the level of a tank or speed of a car). Radio button Allows the user to select one out of several features available. Slider Allows the user to set a specific input value with the mouse or touch input. Label Display text on the screen. Figure 1-3. Example rendering of widgets. Atmel AVR1614: Widget Toolkit – Getting Started [APPLICATION NOTE] 6 8300B−AVR−07/2012 1.5 Window system event queue As mentioned earlier, the Window system has an internal event queue. This queue must be processed regularly in order for user input to be handled and updates of the Window system to occur. Naturally, since the widget toolkit is based on the Window system, the widgets also require the Window system’s event queue to be processed regularly. In addition, the Window system does not automatically interface user input drivers (like touch sensors or push buttons), so it is the responsibility of the application to do the low-level handling of user input and generating the corresponding events in the Window system’s event queue. Refer to the work loop in the training project’s main function for an example of how to do such user input handling and event queue processing. 2. Training tasks This hands-on session covers how to get started with the Window system and widget toolkit. The goal of this training is to get familiar with the code and learn now to create your own GUI application. The training consists of the following four tasks: Task 1: Getting started This task shows how to start a new Widget toolkit training project in Atmel Studio, and how to get the application running on your board. Task 2: Adding a button This task shows how to add a button widget. Task 3: Adding a basic frame This task shows how to add a basic frame widget that can be used to draw on the screen. Task 4: Connecting it all together This task shows how to connect the button and frame together to allow the value of a counter to be manipulated and shown on the screen. Good luck! 2.1 Task 1: Getting started Let’s get started with the graphical user interfaces. The goal for this task is that you learn how to: • Connect the evaluation
Load more

Recommended publications
  • R&S®BBA100 Broadband Amplifier Open
    R&S®BBA100 Broadband Amplifier Open Source Acknowledgment 5353.8300.00 – 01 /RL/1/EN 01.00 / Broadcasting 3575.4620.02 M: - T - PAD Open Source Acknowledgment R&S BBA100 Introduction Contents 1 Introduction ......................................................................................... 3 1.1 Disclaimer ..................................................................................................................... 3 1.2 How to obtain the source code .................................................................................. 3 2 Software packages ............................................................................. 4 3 Verbatim license texts ........................................................................ 7 3.1 Apache License 2.0 ..................................................................................................... 7 3.2 GNU Library General Public License, Version 2.0 (LGPL 2.0) ..............................10 3.3 Boost Software License ............................................................................................18 3.4 GNU General Public License, Version 2.0 (GPL 2.0) ..............................................18 3.5 GNU Lesser General Public License, Version 2.1 (LGPL 2.1) ...............................24 3.6 Mozilla Public License, Version 1.1 (MPL 1.1) ........................................................32 3.7 MIT ...............................................................................................................................40 3.8 JDOM License
    [Show full text]
  • Grants.Gov Workspace
    Grants.gov Workspace Must have Adobe Reader or Pro Register Must be registered in Grants.gov 2 1. Go to www.grants.gov 2. Click on “Register” in the upper right corner 3 3. Click on “Get Registered Now” link near bottom of the page. On the following page, fill in requested information and select “Continue”. 4. Click “Send Temporary Code” on the next screen. The email you have registered on the earlier screen will receive a six digit code from the Grants.gov Registration Team. Retrieve from your email, enter where indicated, and select Continue. 5. Affiliate with our Institution by Selecting “Add Organization Applicant Profile”, enter UMKU DUNS number (010989619), a profile name (your choice), and your title. Save. 5 The Institutions authorized official will receive notification of your request automatically and will process your permissions. You can now apply for grants! 1 Initiate Workspace Application Once you’re registered, on the Grants.gov home page you can now select Login, which is in the upper right corner next to Register. There are couple of ways you can get to the correct application forms. Within the guidelines for the funding opportunity announcement (FOA), you can click on “Go to Grants.gov” to download an application package. You can search for the FOA from “Search Grants” tab in Grants.gov. o Once you find it, click on the Opp Number o Then click on “Package” o Then click on “Apply” o To receive updates on this funding opportunity, Select Subscribe to Opportunity in the top right of this page.
    [Show full text]
  • Civil 3D User Interface
    AutoCAD Civil 3D 2010 Education Curriculum Instructor Guide Unit 1: Civil 3D Environment Lesson 2 Civil 3D User Interface Overview This lesson describes the user interface in AutoCAD® Civil 3D® software and explains how you manage the user interface to maximize your productivity. Civil 3D is a complex design and drafting environment. Users work with many interface components to accomplish design and drafting tasks. When used properly, the final drafting and production of engineering and construction drawings is a by-product of the design process. Objectives After completing this lesson, you will be able to: . Navigate through the AutoCAD Civil 3D software. Use the user interface to open files and display static and contextual ribbons. Examine the two main components of Toolspace: the Prospector and Settings tabs. Describe the function of Toolspace in drawing creation and management. Use the Panorama window, Properties Palette, and Tool Palette . Explore existing workspaces and create a custom workspace. Create reports using the Toolbox tab of Toolspace. Exercises The following exercises are provided in a step-by-step format in this lesson: 1. Explore the Civil 3D User Interface 2. Explore Toolspace 3. The Panorama Window, Properties and Tool Palettes 4. Work with Workspaces 5. Create Reports The Interface The standard interface is shown in the graphic below. Notice the following elements: 1. The Graphic Window or Drawing Area: This is the main window where the user inputs, modifies, and views visual data. 2. Toolspace: Toolspace is an integral component in the user interface for accessing commands, styles, and data. Use it to access the Prospector, Settings, Survey, and Toolbox tabs.
    [Show full text]
  • PC Literacy II
    Computer classes at The Library East Brunswick Public Library PC Literacy II Common Window Elements Most windows have common features, so once you become familiar with one program, you can use that knowledge in another program. Double-click the Internet Explorer icon on the desktop to start the program. Locate the following items on the computer screen. • Title bar: The top bar of a window displaying the title of the program and the document. • Menu bar: The bar containing names of menus, located below the title bar. You can use the menus on the menu bar to access many of the tools available in a program by clicking on a word in the menu bar. • Minimize button: The left button in the upper-right corner of a window used to minimize a program window. A minimized program remains open, but is visible only as a button on the taskbar. • Resize button: The middle button in the upper-right corner of a window used to resize a program window. If a program window is full-screen size it fills the entire screen and the Restore Down button is displayed. You can use the Restore Down button to reduce the size of a program window. If a program window is less than full-screen size, the Maximize button is displayed. You can use the Maximize button to enlarge a program window to full-screen size. • Close button: The right button in the upper-right corner of a window used to quit a program or close a document window – the X • Scroll bars: A vertical bar on the side of a window and a horizontal bar at the bottom of the window are used to move around in a document.
    [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]
  • Graphical User Interface (Gui) Lab
    GRAPHICAL USER INTERFACE (GUI) LAB This lab will guide you through the complex process of graphical user interface (GUI) creation. GUI’s are interfaces computer users invoke to make computer programs easier to use. They provide a graphical means to perform simple and complex operations or procedures. Computer programmers make most of their applications as GUIs so users are not required to learn computer programming languages. We each use GUIs on a daily basis. Any computer program that implements buttons or menus to perform tasks is GUI based. Some examples include; Microsoft Word, ArcMap, ENVI, S-Plus, etc. GUIs in IDL In IDL there are two ways to create GUIs; manual script generation (writing code line by line as we have done in the previous labs) or semi-automatic script generation (this process uses a GUI already built into IDL to generate GUIs (this will make more sense later in the lab)). Before we create a functional GUI we need to understand basic GUI architecture. GUIs are comprised of numerous widgets that interact to accomplish a task. Common widgets used in IDL include the base widget (widget_base), button widgets (widget_button), text widgets (widget_text), and label widgets (widget_label). MANUAL GUI CREATION Let’s create a simple GUI (manually) to display a few basic concepts. First we must create the base widget (the matrix within which all other widgets in the GUI are contained). 1. Use the widget_base function to create a base widget by typing the following code in the IDL editor window. ; creates a widget_base called base Pro simp_widg base = widget_base(XSIZE = 175, YSIZE =50, TITLE='A Simple Example') ;realize the widget widget_control, base, /REALIZE end The XSIZE and YSIZE keywords specify the horizontal and vertical size (in pixels) of the base widget, while the TITLE keyword creates a title for the widget.
    [Show full text]
  • Customizing Eclipse RCP Applications Techniques to Use with SWT and Jface
    Customizing Eclipse RCP applications Techniques to use with SWT and JFace Skill Level: Intermediate Scott Delap ([email protected]) Desktop/Enterprise Java Consultant Annas Andy Maleh ([email protected]) Consultant 27 Feb 2007 Most developers think that an Eclipse Rich Client Platform (RCP) application must look similar in nature to the Eclipse integrated development environment (IDE). This isn't the case, however. This tutorial will explain a number of simple techniques you can use with the Standard Widget Toolkit (SWT) and JFace to create applications that have much more personality than the Eclipse IDE. Section 1. Before you start About this tutorial This tutorial will explain a number of UI elements that can be changed in Eclipse RCP, JFace, and SWT. Along the way, you will learn about basic changes you can make, such as fonts and colors. You will also learn advanced techniques, including how to create custom wizards and section headers. Using these in conjunction should provide you the ability to go from a typical-looking Eclipse RCP application to a distinctive but visually appealing one. Prerequisites Customizing Eclipse RCP applications © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 40 developerWorks® ibm.com/developerWorks You should have a basic familiarity with SWT, JFace, and Eclipse RCP. System requirements To run the examples, you need a computer capable of adequately running Eclipse V3.2 and 50 MB of free disk space. Section 2. Heavyweight and lightweight widgets Before diving into techniques that can be used to modify SWT, JFace, and Eclipse RCP in general, it's important to cover the fundamental characteristics of SWT and how they apply to the appearance of the widget set.
    [Show full text]
  • Organizing Windows Desktop/Workspace
    Organizing Windows Desktop/Workspace Instructions Below are the different places in Windows that you may want to customize. On your lab computer, go ahead and set up the environment in different ways to see how you’d like to customize your work computer. Start Menu and Taskbar ● Size: Click on the Start Icon (bottom left). As you move your mouse to the edges of the Start Menu window, your mouse icon will change to the resize icons . Click and drag the mouse to the desired Start Menu size. ● Open Start Menu, and “Pin” apps to the Start Menu/Taskbar by finding them in the list, right-clicking the app, and select “Pin to Start” or “More-> “Pin to Taskbar” OR click and drag the icon to the Tiles section. ● Drop “Tiles” on top of each other to create folders of apps. ● Right-click on Tiles (for example the Weather Tile), and you can resize the Tile (maybe for apps you use more often), and also Turn On live tiles to get updates automatically in the Tile (not for all Tiles) ● Right-click applications in the Taskbar to view “jump lists” for certain applications, which can show recently used documents, visited websites, or other application options. ● If you prefer using the keyboard for opening apps, you probably won’t need to customize the start menu. Simply hit the Windows Key and start typing the name of the application to open, then hit enter when it is highlighted. As the same searches happen, the most used apps will show up as the first selection.
    [Show full text]
  • The Glib/GTK+ Development Platform
    The GLib/GTK+ Development Platform A Getting Started Guide Version 0.8 Sébastien Wilmet March 29, 2019 Contents 1 Introduction 3 1.1 License . 3 1.2 Financial Support . 3 1.3 Todo List for this Book and a Quick 2019 Update . 4 1.4 What is GLib and GTK+? . 4 1.5 The GNOME Desktop . 5 1.6 Prerequisites . 6 1.7 Why and When Using the C Language? . 7 1.7.1 Separate the Backend from the Frontend . 7 1.7.2 Other Aspects to Keep in Mind . 8 1.8 Learning Path . 9 1.9 The Development Environment . 10 1.10 Acknowledgments . 10 I GLib, the Core Library 11 2 GLib, the Core Library 12 2.1 Basics . 13 2.1.1 Type Definitions . 13 2.1.2 Frequently Used Macros . 13 2.1.3 Debugging Macros . 14 2.1.4 Memory . 16 2.1.5 String Handling . 18 2.2 Data Structures . 20 2.2.1 Lists . 20 2.2.2 Trees . 24 2.2.3 Hash Tables . 29 2.3 The Main Event Loop . 31 2.4 Other Features . 33 II Object-Oriented Programming in C 35 3 Semi-Object-Oriented Programming in C 37 3.1 Header Example . 37 3.1.1 Project Namespace . 37 3.1.2 Class Namespace . 39 3.1.3 Lowercase, Uppercase or CamelCase? . 39 3.1.4 Include Guard . 39 3.1.5 C++ Support . 39 1 3.1.6 #include . 39 3.1.7 Type Definition . 40 3.1.8 Object Constructor . 40 3.1.9 Object Destructor .
    [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]
  • How to Use the Graphical User Interface TCS Technical Bulletin
    How to Use the Graphical User Interface TCS Technical Bulletin A. Create/Edit the Graphical Interface (Build Mode) Accessing the site using the Graphical Interface requires that you first build a layout (one or more layers/tabs depending on your site). This is done using the setup wizard to upload images/backgrounds and place controllers in appropriate locations on those images/backgrounds. When finished and saved, the User accesses the site using the Graphical Interface. 1. Click the “+” button to add a layer/tab for the site. (Skip to step 7 to edit an existing layer.) 2. Name the layer/tab by clicking in the field and entering the desired name. 3. Click the Choose File button to select the desired background image from your computer’s drive and click the Save button. 4. The Place View will open showing you the layer/tab title, a Save Positions button, the background image, and a bin of available controllers along the right-hand edge of the Graphical Interface which can be placed onto the layer/ tab. 5. Drag/drop controller icons from the icon bin to the desired location on the background image. Moving your mouse over each icon will show that controller’s name. The arrows at the top and bottom of scroll bar or the scroll bar itself allow you to scroll through the available controllers. NOTE: If you have placed controller icons too close to the icon bin and you would like to move them, you may need to scroll the available controllers up or down to clear the area around an icon to allow it to be dragged/dropped again.
    [Show full text]
  • Decwindows Motif Guide to Application Programming
    DECwindows Motif Guide to Application Programming Order Number: AA–PGZEB–TE January 1994 This document describes the programming interface for widgets provided by Digital in the DECwindows Motif Version 1.2 Toolkit. This document also includes tutorial programming information for the DECwindows Motif Version 1.2 Toolkit. Revision/Update Information: This is a revised manual. Operating System: OpenVMS AXP Version 1.5 VMS Version 5.5–2 Software Version: DECwindows Motif Version 1.2 for OpenVMS AXP DECwindows Motif Version 1.2 for OpenVMS VAX Digital Equipment Corporation Maynard, Massachusetts January 1994 The information in this document is subject to change without notice and should not be construed as a commitment by Digital Equipment Corporation. Digital Equipment Corporation assumes no responsibility for any errors that may appear in this document. The software described in this document is furnished under a license and may be used or copied only in accordance with the terms of such license. No responsibility is assumed for the use or reliability of software on equipment that is not supplied by Digital Equipment Corporation or its affiliated companies. Restricted Rights: Use, duplication, or disclosure by the U.S. Government is subject to restrictions as set forth in subparagraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause at DFARS 252.227-7013. © Digital Equipment Corporation 1994. All Rights Reserved. The postpaid Reader’s Comments forms at the end of this document request your critical evaluation to assist in preparing future documentation. The following are trademarks of Digital Equipment Corporation: Alpha AXP, AXP, Bookreader, DEC, DECpaint, DECterm, DECwindows, DECwrite, Digital, eXcursion, OpenVMS, VAX, VAX DOCUMENT, VMS, XUI, and the DIGITAL logo.
    [Show full text]