CGLIB - Constraint-based
Graphics Library
 Features
– Use constraints to specify the layouts of objects
– Use action rules to specify interactions
 Implementation
– Implemented in B-Prolog, Java, and C
 Applications
– Drawing editors, interactive user interfaces, document
authoring, animation, information visualization,
intelligent agents, and games.
An Illustrative Example
go:cgButton(B),
(1)
B^text #= “Hello World!”, (2)
handleButtonClick(B),
(3)
cgShow(B).
(4)
handleButtonClick(B),
(5)
{actionPerformed(B)}
(6)
=>
(7)
halt.
(8)
Objects
 cgButton(X)
– Create a button X
 cgButton([X1,…,Xn])
– Create a list of buttons
Attributes of Objects
B is a button
 Base  Derivative
y
x
width
B^window
B^x
height B^y
B^width
B^height
B^text
B^color
B^font
B^rightX
B^bottomY
B^centerX
B^centerY
B^leftTopPoint
B^leftBottomPoint
B^rightTopPoint
B^rightBottomPoint
B^center
Constraints
 Arithmetic constraints
• O1^x +O1^width//2 #= O2^x
• O1^centerX #= O2^x
 Positioning constraints
• cgLeft(O1,O2)
 Same property constraints
• cgSame([O1,O2],size)
• cgSame([O1,O2],width,100)
Constraints (Cont.)
 Grid constraints
cgGrid([[_, S1,_],
[S2,S3,S4],
[_,S5,_]])
cgGrid([[Bc,Bdiv,Bmul,Bsub],
[B7,B8, B9, Badd],
[B4,B5, B6, Badd],
[B1,B2, B3, Beq],
[B0,B0, Bdot,Beq]],1,1),
Constraints (Cont.)
 Table constraints
cgTable([[Larc,Arc,Button,Lbutton],
[Lcheckbox, Checkbox, Choice, Lchoice],
[Lcircle,Circle,Image,Limage],
[Llabel,Label,Line,Lline],
[Llist,List,Oval,Loval],
[Lrrectangle,Rrectangle,Rectangle,Lrectangle],
[Lpolygon,Polygon,Square,Lsquare],
[Lstar,Star,TextArea,Ltextarea],
[Ltextfield,TextField,TextBox,Ltextbox],
[Ltriangle,Triangle,_,_]],20,20),
Constraints (Cont.)
 Tree constraints
T=node(C0,[node(C1,[node(C3,[]
node(C4,[])]),
node(C2,[node(C5,[]),
node(C6,[])])]),
cgTree(T,top_down,10,10,centered).
Event Handling
 Action rule
Agent ConditionSeq {Event} => ActionSeq
 Examples
handleButtonClick(B),{actionPerformed(B)} => …
handleMousePress(O),{mousePressed(O,E)} =>
E^x #= X, E^y #= Y,
write(mouse_pressed_at(X,Y)),nl.
handleKeyType(O),{keyTyped(O,E)} =>
E^char #= Char, write(Char).
Other Primitives in CGLIB
 Packing and showing objects
• cgPack(O)& cgShow(O)
 Altering and moving objects
• O^attr #:= Value
• cgScale(O,F)& cgResize(O,W,H)
• cgMove(O,X,Y)
 Animation
• cgSleep(Time)
 Generating Java applets
• cgStartRecord(FileName) & cgStopRecord
Demo of CGLIB
Related Work
 Postscript & Latex
– Every detail must be specified
 Java & Tcl/Tk
– Layout managers are helpful for certain layouts
 Functional programming
– New data types and functions for events, time, and
behaviors
 Constraints & Constraint programming
– Sketchpad, ThinkLab, Amulet, SubArctic
Further Work
 Extension of the set of base objects
– Application-specific objects
– 3D objects
 Constructs for users to define their own objects
 Non-linear and soft constraints
 Improving the performance
– Constraint solving
– Graphics rendering
Papers
1. N.F. Zhou: CGLIB - A Constraint-based
Graphics Library, Software - Practice and
Experience, Vol. 33, No.13, pp.1199-1216,
2003.
2. N.F. Zhou: Authoring Graphics-rich and
Interactive Documents in CGLIB - A
Constraint-based Graphics Library,
Proceedings of the ACM Symposium on
Document Engineering, pp.28-38, November,
2001.