Basic GUI DrawingDrawing models, Graphics context, Display lists, Painter’s Algorithm

CS 349 - X Windows Drawing1

Loca

l Coo

rdin

ates • Any modern OS manages multiple windows

• Base Window System (BWS) manages:– where the window is located, whether it is

covered by another window, etc...– enables drawing using local coordinate system

for window

CS 349 - X Windows Drawing2

(o, o)+x

+y

(o, o)+x

+y

Dra

win

g M

odel

s Three different conceptual drawing models:

CS 349 - X Windows Drawing3

PixelSetPixel(x, y, colour)

DrawImage(x, y, w, h, img)

StrokeDrawLine(x1, y1, x2, y2, colour)

DrawRect(x, y, w, h, colour)

RegionDrawLine(x1, y1, x2, y2, color, thick)

DrawRect(x, y, w, h, colour, thick, fill)

DrawText(“A”, x, y, colour)

Dra

win

g O

ptio

ns • Lots of options for drawing– e.g. drawLine(x1,y1,x2,y2)

• what colour?• how thick?• dashed or solid?• where are the end points?• should the ends overlap?

• Observation: most choices are the same for multiple calls to drawLine()

• How to communicate all the options?– lots of parameters?– functions that are more specific?– some other way?

CS 349 - X Windows Drawing4

Gra

phic

s C

onte

xt (G

C) • Solution: Gather all drawing options into a single

structure and pass it to the drawing routines– In X, this is the Graphics Context (GC) structure

• All graphics environments use variation on this approach– Java/C#: Graphics Object– OpenGL: Attribute State

• In X, the graphics context is stored on X server– Can switch between multiple saved contexts to reduce

network traffic (but limited memory on X server)– There is a default (global) graphics context shared by

all applications. • With modern applications, we don’t separate client

application and X server UI routines, but this assumption of repeated attributes (and GC) still applies

CS 349 - X Windows Drawing5

Dra

win

g in

X W

indo

ws

(1)

Step 1: setup display and open a window

Dra

win

g in

X W

indo

ws

(2)

Step 2: setup GC and use to draw shapes

See drawing.cpp for a structured example of this.

Sim

plify

ing

Dra

win

g W

ith C

lippi

ng • What are some other problems that might arise when trying to draw on a computer display?

Clipping and the Painter’s Algorithm

Clip

ping

: Mor

e on

this

late

r …

CS 349 - X Windows Events9

Clip

ping

in X

Win

dow

s • XSetClipMask• XSetClipRectangles

CS 349 - X Windows Events10

if (!is_clipping)XSetClipMask(display, gc, None);

elseXSetClipRectangles(

display, gc, 0, 0, &clip_rect, 1,Unsorted);

See clipping.cpp for a working demo of this code.

Pain

ter’s

Alg

orith

m • The basic graphics primitives are simple and only support drawing basic shapes.

• To draw more complex shapes (composite):– Draw back-to-front, layering the image– Called “Painter’s Algorithm”

• Also allows ”stacking” shapes to simulate depth

CS 349 - X Windows Drawing11

Pain

ters

Alg

orith

m A

nalo

gy

CS 349 - X Windows Drawing12

Fast and with music: http://youtu.be/ghHxTjXAnM4

Usi

ng th

e Pa

inte

rs A

lgor

ithm • How to implement the painter’s algorithm:

– Describe shapes that you wish to paint on-screen as “displayable” objects• Each object needs to be capable of displaying

itself on the screen• Implement as base class with a “paint” method• Define derived classes for different kinds of

displayables: text, game sprites, etc.– Keep an ordered list of “displayables”

• Order the list back-to-front. – To repaint

• Clear the screen (window).• Repaint everything in the display list, in back-to-

front order.

CS 349 - X Windows Drawing13

Dis

play

able

Bas

e C

lass

/** An abstract class representing displayable * things. */class Displayable{

public:virtual void paint(XInfo &xinfo) = 0;

};

CS 349 - X Windows Drawing14

Dis

play

able

Tex

t /* Display some text */class Text : public Displayable {

public:virtual void paint(XInfo &xinfo) {

XDrawImageString( xinfo.display, xinfo.window, xinfo.gc, this->x, this->y, this->s.c_str(), this->s.length() );

}

// constructorText(int x, int y, string s):x(x), y(y), s(s) {}

private:int x;int y;string s;

};

CS 349 - X Windows Drawing15

Dis

play

able

Pol

ylin

e

CS 349 - X Windows Drawing16

/* Display a polyline */class Polyline : public Displayable {

public:virtual void paint(XInfo& xinfo) {

XDrawLines(xinfo.display, xinfo.window, xinfo.gc, &points[0], points.size(), CoordModeOrigin );

}

// Polyline(int x, int y) { add_point(x,y); }

void add_point(int x, int y) {XPoint p; // XPoint is a built in structp.x = x; p.y = y;points.push_back(p);

}

private:vector <XPoint> points; // XPoint is a built in struct

};

Dis

play

ing

the

Dis

play

Lis

t

CS 349 - X Windows Drawing17

list<Displayable*> dList; // list of Displayables

dList.push_front(new Paddle(…));dList.push_front(new Ball(…));dList.push_front(new Background(…));

/* Function to repaint a display list */void repaint( list<Displayable*> dList, XInfo& xinfo) {

list<Displayable*>::const_iterator begin = dList.begin();list<Displayable*>::const_iterator end = dList.end();

XClearWindow( xinfo.display, xinfo.window );while( begin != end ) {

Displayable* d = *begin;d->paint(xinfo);begin++;

}XFlush( xinfo.display );

}

Dis

play

Lis

t Exa

mpl

es • These examples all make use of the display list:– doublebuffer.cpp– animation.cpp– eventloop.cpp

• We’ll examine these in more depth as we discuss events (next!).

Sum

mar

y • Models (pixel, stroke, region)• Graphics contexts• Drawing primitives• Painter’s algorithm• Display lists

CS 349 - X Windows Events19