Events. Events and the Event Loop Animation Double Buffering. 1.5 Events 1

Similar documents
Xwindows. Xwindows: Windows. Windows Drawing Events Advanced Topics. Window Models Creating Windows in X X11 Architecture. Before Windowing Systems

Event Dispatch. Review: Events

Events. Dispatch, event-to-code binding. Review: Events Defined 1/17/2014. occurrence.

Volume One. Xlib Programming Manual

CISC 1600 Lecture 2.2 Interactivity&animation in Processing

Adobe Flash CS3 Reference Flash CS3 Application Window

Input (part 2: input models)

CISC 1600 Lecture 2.2 Interactivity&animation in Processing

A B C D CS105 03a Interaction

Event Binding. Different Approaches Global Hooks. 2.5 Event Binding 1

IT101. Graphical User Interface

GRAPHICS PROGRAMMING. LAB #3 Starting a Simple Vector Animation

Operating systems. Lecture 15

CS 160: Interactive Programming

Windowing Systems. (using X Windows as case study) GUI Architecture Base Window System Window Manager. Windowing Systems 1

Chapter 7 Applets. Answers

Lecture 7. Processing Development Environment (or PDE)

377 Student Guide to C++

Program threaded-fft-mutex.cc

Graphics Overview ECE2893. Lecture 19. ECE2893 Graphics Overview Spring / 15

Event Driven Programming

Windows and Events. created originally by Brian Bailey

GUI Basics and Windowing Systems

Unit 8: Threads. Prepared by: Dr. Abdallah Mohamed, AOU-KW Updated by Mrs. Malak EL-Amir AOU SAB Fall 14-15

Index. Guide. Camera Detect Event Guide. AcuraVision

Lomse library. Tutorial 1 for X11

Lesson 34. Write down program of maze solver. Maze Solver

GUI Basics and Windowing Systems. Using X Windows as a case study

Module 5 The Applet Class, Swings. OOC 4 th Sem, B Div Prof. Mouna M. Naravani

CSE 331 Software Design and Implementation. Lecture 19 GUI Events

Cache Awareness. Course Level: CS1/CS2. PDC Concepts Covered: PDC Concept Locality False Sharing

a data type is Types

Graphical User Interface (GUI)

Hands-On Lab. Multitouch Gestures - Native. Lab version: Last updated: 12/3/2010

Algunas Funciones y Estructuras de Datos XWindow

1. Multimedia authoring is the process of creating a multimedia production:

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?

GUI Basics and Windowing Systems. Using X Windows as a case study

Lecture 2 Finite Automata

Project Sketchpad. Ivan Sutherland (MIT 1963) established the basic interactive paradigm that characterizes interactive computer graphics:

X Windows Version 11.5 A Concise Description

Graphical User Interface (GUI)

HOUR 4 Understanding Events

The Big Picture So Far. Chapter 4: Processes

How to Talk To Windows. What did it say?

assembler Machine Code Object Files linker Executable File

Lecture 24 Notes Search in Graphs

Computer Graphics Lecture 2

CSE1720 Lecture 08; Week 05 Lecture 09 Second level Third level Fourth level Fifth level

Smoother Graphics Taking Control of Painting the Screen

Basic programming knowledge (arrays, looping, functions) Basic concept of parallel programming (in OpenMP)

.NET Wrapper SDK Descriptor

VD Interfaces V0.1. Draft 2

Lecture 19 GUI Events

Fruit Snake SECTION 1

+ Inheritance. Sometimes we need to create new more specialized types that are similar to types we have already created.

Jordan University of Science & Technology Department of Computer Science CS 211 Exam #1 (23/10/2010) -- Form A

1 Getting started with Processing

Lecture 13: I/O I/O. Interrupts. How?

Agenda. The main body and cout. Fundamental data types. Declarations and definitions. Control structures

Load your files from the end of Lab A, since these will be your starting point.

Outline. Topic 9: Swing. GUIs Up to now: line-by-line programs: computer displays text user types text AWT. A. Basics

Block I Unit 2. Basic Constructs in Java. AOU Beirut Computer Science M301 Block I, unit 2 1

CSE 331 Software Design & Implementation

The Big Picture So Far. Chapter 4: Processes

Program threaded-fft-bakery.cc

CP SC 4040/6040 Computer Graphics Images. Joshua Levine

Road Map. Introduction to Java Applets Review applets that ship with JDK Make our own simple applets

8. The C++ language, 1. Programming and Algorithms II Degree in Bioinformatics Fall 2017

Lecture 2, September 4

GUI DYNAMICS Lecture July 26 CS2110 Summer 2011

Diagram of Process State Process Control Block (PCB)

Copyright 1998 CH-UH Schools Revised 10/31/98 Authored by: Bob Torrelli Jim Harmon Hannah Reid. Technology Specialists, CH-UH Schools

Mach4 CNC Controller Screen Editing Guide Version 1.0

Separate Compilation Model

SpiNNaker Application Programming Interface (API)

Demo Scene Quick Start

(Refer Slide Time 00:01:09)

Topic 9: Swing. Swing is a BIG library Goal: cover basics give you concepts & tools for learning more

Topic 9: Swing. Why are we studying Swing? GUIs Up to now: line-by-line programs: computer displays text user types text. Outline. 1. Useful & fun!

Operating Systems 2010/2011

Animating Layers with Timelines

G51PRG: Introduction to Programming Second semester Applets and graphics

Event-driven Programming: GUIs

GLUT Tutorial. Keyboard

Notes on creating graphical output using X-11 graphics. Ubuntu Virtual Machine

Fall UI Design and Implementation 1

05-01 Discussion Notes

Comp 11 - Summer Session Hashmap

Computer Basics 1/24/13. Computer Organization. Computer systems consist of hardware and software.

What have we learnt last week? Wireless Online Game Development for Mobile Device. Introduction to Thread. What is Thread?

Computer Programming

C SCI The X Window System Stewart Weiss

CSCI-1200 Data Structures Spring 2018 Lecture 8 Templated Classes & Vector Implementation

Motivation was to facilitate development of systems software, especially OS development.

Interactive Tourist Map

Review Questions FL Chapter 3: Working With Symbols and Interactivity

OpenGL Drawing Widgets and Related Functions

Answers to Even- Numbered Exercises

Εργαστήριο 9 I/O Multiplexing

Transcription:

Events Events and the Event Loop Animation Double Buffering 1.5 Events 1

Human vs. System User Interactive System perceive present seconds milliseconds or faster express translate 1.5 Events 2

Event Driven Programming Nothing happens unless the something else happens: - user presses a key, moves the mouse, - window is resized, closed, covered - certain time passes - (file changes, network connection, database updates, order arrives, sensor is triggered, ) 1.5 Events 3

Events Defined English: - An observable occurrence, often extraordinary occurrence User Interface Architecture: - A message to notify an application that something happened Examples: - Keyboard (key press, key release) - Pointer Events (button press, button release, motion) - Window crossing (mouse enters, leaves) - Input focus (gained, lost) - Window events (exposure, destroy, minimize) - Timer events 1.5 Events 4

Role of the Base Window System Collect event information Put relevant information in a known structure Order the events by time Decide which application/window should get event Deliver the event Some events come from the user via the underlying hardware; some from the window manager. 1.5 Events 5

Receiving Events In X Windows, applications get the next event using: XNextEvent(Display* display, XEvent* evt) - Gets and removes the next event in the queue - If empty, it blocks until another event arrives Can avoid blocking by checking if events available using: XPending(Display* display) - Query number of events in queue, never blocks 1.5 Events 6

Event Driven Programming Write code to: 1. Register to receive events 2. Receive and interpret those types of events 3. Update program content based on event 4. Redraw the display (provide feedback) to communicate to user what changed 1.5 Events 7

Simple Event Loop: eventloop.min.cpp // select events XSelectInput(dis, win, PointerMotionMask KeyPressMask);... XEvent event; // save the event here while( true ) { // event loop // wait for next event XNextEvent( display, &event ); switch( event.type ) { case MotionNotify: // mouse movement event // handle here break; case KeyPress: // key press event // handle here exit(0); // need a way to exit infinite event loop break; 1.5 Events 8

Selecting Input Events to listen to // Tell the base window system what input events you want. XSelectInput( display, window, ButtonPressMask KeyPressMask ButtonMotionMask ); Defined masks: NoEventMask, KeyPressMask, KeyReleaseMask, ButtonPressMask, ButtonReleaseMask, EnterWindowMask, LeaveWindowMask, PointerMotionMask, PointerMotionHintMask, Button1MotionMask, Button2MotionMask,..., ButtonMotionMask, KeymapStateMask, ExposureMask, VisibilityChangeMask,... See - http://www.tronche.com/gui/x/xlib/events/types.html - http://www.tronche.com/gui/x/xlib/events/mask.html 1.5 Events 9

Event Structure: Union X uses a union typedef union { int type; XKeyEvent xkey; XButtonEvent xbutton; XMotionEvent xmotion; // etc.... XEvent; Each structure contains at least the following typedef struct { int type; unsigned long serial; // sequential # Bool send_end; // from SendEvent request? Display* display; // display event was read from Window window; // window which event is relative to XKeyEvent; 1.5 Events 10

Responding to Events (blocking) while( true ) { XNextEvent(display, &event); // wait for next event switch(event.type) { case Expose: //... handle expose event... cout << event.xexpose.count << endl; break; case ButtonPress: //... handle button press event... cout << event.xbutton.x << endl; break; case MotionNotify: //... handle event... cout << event.xmotion.x << endl; break; repaint(... ); // call my repaint function 1.5 Events 11

Code Review: eventloop.cpp XSelectInput XNextEvent event loop Notes: KeyPress and XLookupString - character vs. scan codes - Uses Displayables 1.5 Events 12

Events in Modern Languages The process of registering for, and handling events is simplified Examples: - Java: listener model - C#: delegate model - Javascript: (looks like Java/C# hybrid, but is not) http://www.quirksmode.org/js/introevents.html 1.5 Events 13

Animation A simulation of movement created by displaying a series of pictures, or frames. Goals: - Move things around on the screen - Repaint 24-60 times per second (frames-per-second, frame rate, or FPS ) - Make sure events are handled on a timely basis - Don t use more CPU than necessary 1.5 Events 14

Animation Timing and Responding to Events (non-blocking) while( true ) { if (XPending(display) > 0) { // any events pending? XNextEvent(display, &event ); // yes, process them switch( event.type ) { // handle event cases here... // now() is a helper function I made unsigned long end = now(); // time in microseconds if (end - lastrepaint > 1000000/FPS) { // repaint at FPS handleanimation(xinfo); // update animation objects repaint(xinfo); // my repaint lastrepaint = now(); // remember when the paint happened // IMPORTANT: sleep for a bit to let other processes work if (XPending(xinfo.display) == 0) { usleep(1000000 / FPS - (end - lastrepaint)); 1.5 Events 15

get current time in microseconds: now() #include <sys/time.h> // get microseconds unsigned long now() { timeval tv; gettimeofday(&tv, NULL); return tv.tv_sec * 1000000 + tv.tv_usec; 1.5 Events 16

Code Review: animation.min.cpp Highlights: XClearWindow(display, window); ballpos.x += balldir.x; Experiments to try: 1. Resize the window. 2. Comment out this: XClearWindow(display, window); 3. Comment out this (and closing bracket): if (XPending(display) > 0) { XNextEvent( display, &event ); 4. Comment out this: if (XPending(display) == 0) { usleep(1000000/fps-(end-lastrepaint)); and try clicking mouse and look at CPU usage 1.5 Events 17

Double Buffering Flickering when an intermediate image is on the display Solution: - Create an off screen image buffer - Draw to the buffer - Fast copy the buffer to the screen 1.5 Events 18

Double Buffering: doublebuffer.cpp // create off screen buffer xinfo.pixmap = XCreatePixmap(xinfo.display, xinfo.window, width, height, depth); // size and *depth* of pixmap // draw into the buffer // note that a window and a pixmap are drawables XFillRectangle(xinfo.display, xinfo.pixmap, xinfo.gc[0], 0, 0, width, height); // copy buffer to window XCopyArea(xinfo.display, xinfo.pixmap, xinfo.window, xinfo.gc[0], 0, 0, width, height, // pixmap region to copy 0, 0); // top left corner of pixmap in window XFlush( xinfo.display ); 1.5 Events 19

Painting Advice Keep it simple - Clear the window and redraw everything each frame - Use advanced methods (e.g. selective clearing, clipping) only if you really need them for performance Don t repaint too often - remember framerate of display (60 FPS) - consider adding single somechanged bool flag Don t flush too often - remember display framerate usually 60 FPS 1.4 Drawing 20

Summary Events (definition, structure, selecting, etc) Blocking vs Non-Blocking Event Loop Animation Double Buffering 1.5 Events 21