algorithms for constraint satisfaction in user interfaces scott hudson
DESCRIPTION
Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson. Constraints. General mechanism for establishing and maintaining relationships between things layout is a good motivating example several other uses in UI deriving appearance from data automated semantic feedback - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/1.jpg)
Algorithms for Constraint Satisfaction in User
Interfaces
Scott Hudson
![Page 2: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/2.jpg)
2
Constraints General mechanism for establishing
and maintaining relationships between things– layout is a good motivating example– several other uses in UI
deriving appearance from data• automated semantic feedback
maintaining highlight & enable statusmultiple views of same data
![Page 3: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/3.jpg)
3
General form: declare relationships Declare “what” should hold
– this should be centered in that– this should be 12 pixels to the right of that– parent should be 5 pixels larger than its
children System automatically maintains
relationships under change– system provides the “how”
![Page 4: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/4.jpg)
4
You say whatSystem figures out how A very good deal But sounds too good to be true
![Page 5: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/5.jpg)
5
You say whatSystem figures out how A very good deal But sounds too good to be true
– It is: can’t do this for arbitrary things (unsolvable problem)
Good news: this can be done if you limit form of constraints– limits are reasonable– can be done very efficiently
![Page 6: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/6.jpg)
6
Form of constraints For UI work, typically express in
form of equations– this.x = that.x + that.w + 5
5 pixels to the right– this.x = that.x + that.w/2 - this.w/2
centered– this.w = 10 + max child[i].x + child[i].w
10 larger than children
![Page 7: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/7.jpg)
7
Power of constraints
If something changes, system can determine effects– automatically– just change the object that has to
change, the rest “just happens”very nice property
![Page 8: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/8.jpg)
8
Dependency graphs
Useful to look at a system of constraints as a “dependency graph”– graph showing what depends on what– two kinds of nodes (bipartite graph)
variables (values to be constrained)constraints (equations that relate)
![Page 9: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/9.jpg)
9
Dependency graphs
Example: A = f(B, C, D)
Edges are dependencies
ABCD
f
![Page 10: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/10.jpg)
10
Dependency graphs
Dependency graphs chain together: X = g( A, Y)
ABCD
fX
Y
g
![Page 11: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/11.jpg)
11
Kinds of constraint systems Actually lots of kinds, but 3 major
varieties used in UI work – one-way, multi-way, numerical (less use)– reflect kinds of limitations imposed
One-Way constraints– must have a single variable on LHS– information only flows to that variable
can change B,C,D system will find Acan’t do reverse (change A …)
![Page 12: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/12.jpg)
12
One-Way constraints Results in a directed dependency graph: A
= f(B,C,D)
Normally require dependency graph to be acyclic– cyclic graph means cyclic definition
ABCD
f
![Page 13: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/13.jpg)
13
One-Way constraints
Problem with one-way: introduces an asymmetry
this.x = that.x + that.w + 5– can move “that” (change that.x)
but can’t move “this”
![Page 14: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/14.jpg)
14
Multi-way constraints Don’t require info flow only to
the left in equation– can change A and have system find
B,C,D Not as hard as it might seem
– most systems require you to explicitly factor the equations for themprovide B = g(A,C,D), etc.
![Page 15: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/15.jpg)
15
Multi-way constraints
Modeled as an undirected dependency graph
No longer have asymmetry
![Page 16: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/16.jpg)
16
Multi-way constraints
But all is not rosy– most efficient algorithms require that
dependency graph be a tree (acyclic undirected graph)
OK
ABCD
fX
Y
g
![Page 17: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/17.jpg)
17
Multi-way constraints
But: A = f(B,C,D) & X = h(D,A)
Not OK because it has a cycle (not a tree)
ABCD
fX h
![Page 18: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/18.jpg)
18
Another important issue
A set of constraints can be:– Over-constrained
No valid solution that meets all constraints
– Under-constrainedMore than one solution
• sometimes infinite numbers
![Page 19: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/19.jpg)
19
Over- and under-constrained
Over-constrained systems– solver will fail– isn’t nice to do this in interactive
systems– typically need to avoid this
need at least a “fallback” solution
![Page 20: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/20.jpg)
20
Over- and under-constrained
Under-constrained– many solutions– system has to pick one– may not be the one you expect– example: constraint: point stays at
midpoint of line segmentmove end point, then?
![Page 21: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/21.jpg)
21
Over- and under-constrained Under-constrained
– example: constraint: point stays at midpoint of line segmentmove end point, then?Lots of valid solutions
• move other end point• collapse to one point• etc.
![Page 22: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/22.jpg)
22
Over- and under-constrained
Good news is that one-way is never over- or under-constrained (assuming acyclic)– system makes no arbitrary choices– pretty easy to understand
![Page 23: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/23.jpg)
23
Over- and under-constrained Multi-way can be either over- or
under-constrained– have to pay for extra power
somewhere– typical approach is to over-constrain,
but have a mechanism for breaking / loosening constraints in priority orderone way: “constraint hierarchies”
![Page 24: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/24.jpg)
24
Over- and under-constrained
Multi-way can be either over- or under-constrained– unfortunately system still has to make
arbitrary choices– generally harder to understand and
control
![Page 25: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/25.jpg)
25
Implementing constraints
Algorithm for one-way systems– Need bookkeeping for variables– For each keep:
value - the value of the vareqn - code to eval constraintdep - list of vars we depend ondone - boolean “mark” for alg
![Page 26: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/26.jpg)
26
Naïve algorithmFor each variable v doevaluate(v)
evaluate(v):Parms = emptyfor each DepVar in v.dep do
Parms += evaluate(DepVar)v.value = v.eqn(Parms)return v.value
![Page 27: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/27.jpg)
27
Why is this not a good plan?
![Page 28: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/28.jpg)
28
Exponential Wasted Work
![Page 29: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/29.jpg)
29
Exponential Wasted Work
1 3 279 3n
![Page 30: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/30.jpg)
30
Exponential Wasted Work Breadth first does not fix this
No fixed order works for all graphs Must respect topological ordering of
graph (do in reverse topsort order)
1 2 84 2n
![Page 31: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/31.jpg)
31
Simple algorithm for one-way(Embed evaluation in topsort)
After any change:// reset all the marksfor each variable V doV.done = false
// make each var up-to-datefor each variable V doevaluate(V)
![Page 32: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/32.jpg)
32
Simple algorithm for one-way
evaluate(V):if (!V.done)V.done = trueParms = emptyfor each DepVar in V.dep doParms += evaluate(DepVar)
V.value = V.eqn(Parms)return V.value
![Page 33: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/33.jpg)
33
Still a lot of wasted work Typically only change small part of
system, but this algorithm evaluates all variables every time
Also evaluates variables even if nothing they depend on has changed, or system never needs value – e.g., with non-strict functions such as
boolean ops and conditionals
![Page 34: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/34.jpg)
34
An efficient incremental algorithm Add bookkeeping
– For each variable: OODMarkIndicates variable may be out of date with respect to its constraint
– For each dependency edge: pendingIndicates that variable depended upon has changed, but value has not propagated across the edge
![Page 35: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/35.jpg)
35
Part one (of two) When variable (or constraint)
changed, call MarkOOD() at point of change
MarkOOD(v): [x]if !v.OODMark
v.OODMark = truefor each depV depending upon v do
MarkOOD(depV)
![Page 36: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/36.jpg)
36
Part 2: only evaluate variables when value requested (lazy eval)Evaluate(v,depEdge):
if v.OODMarkv.OODMark = falseParms = empty for each depVar in V.dep do
Parms += eval(depVar,edge(v,depVar))
UpdateIfPending(v,Parms,depEdge)return v.value
![Page 37: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/37.jpg)
37
Part 2: only evaluate variables when value requested (lazy eval)UpdateIfPending(v,Parms,depEdge): pendingIn = false //any incoming pending? For each incoming dep edge E do
pendingIn |= E.pendingE.pending = false
if pendingIn newVal = V.eqn(Parms) [*] if newval != v.value
v.value = newval Foreach outgoing dependency edge D do
D.pending = true
![Page 38: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/38.jpg)
38
Algorithm is “partially optimal” Optimal in set of equations
evaluated [*]– Under fairly strong assumptions
Does non-optimal total work [x]– “Touches” more things than optimal set
during Mark_OOD phaseFortunately simplest / fastest part
– Very close to theoretical lower bound – No better algorithm known
![Page 39: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/39.jpg)
39
Good asymptotic result, but also very practical Minimal amount of bookkeeping
– Simple and statically allocated– Only local information
Operations are simple Also has very simple extension
to handling pointers and dynamic dependencies
![Page 40: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/40.jpg)
40
Multi-way implementation
Use a “planner” algorithm to assign a direction to each undirected edge of dependency graph
Now have a one-way problem
![Page 41: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/41.jpg)
41
The DeltaBlue incremental planning algorithm Assume “constraint hierarchies”
– Strengths of constraints– Important to allow most control when over
or under constrainedForce all to be over constrained, then
relax weakest constraintsSubstantially improves predictability
Restriction: acyclic (undirected) dependency graphs only
![Page 42: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/42.jpg)
42
A plan is a set of edge directions
Assume we have multiple methods for enforcing a constraint– One per (output) variable– Picking method sets edge directions
Given existing plan and change to constraints, find a new plan
![Page 43: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/43.jpg)
43
Finding a new plan
For added constraints– May need to break a weaker
constraint (somewhere) to enforce new constraint
For removed constraints– May have weaker unenforced
constraints that can now be satisfied
![Page 44: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/44.jpg)
44
Finding possible constraints to break when adding a new one For some variable referenced by
new constraint– Find an undirected path from var to a
variable constrained by a weaker constraint (if any)
– Turn edges around on that path– Break the weaker constraint
![Page 45: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/45.jpg)
45
Key to finding path: “Walkabout Strengths” Walkabout strength of variable
indicates weakest constraint “upstream” from that variable– Weakest constraint that could be
revoked to allow that variable to be controlled by a different constraint
![Page 46: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/46.jpg)
46
Walkabout strength
Walkabout strength of var V currently defined by method M of constraint C is:– Min of C.strength and walkabout
strengths of variables providing input to M
![Page 47: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/47.jpg)
47
DeltaBlue planning Given WASs of all vars To add a constraint C:
– Find method of C whose output var has weakest WAS and is weaker than C If none, constraint can’t be satisfied
– Revoke constraint currently defining that var– Attempt to reestablish that constraint recursively
Will follow weakest WAS – Update WASs as we recurse
![Page 48: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/48.jpg)
48
DeltaBlue Planning
To remove a constraint C– Update all downstream WASs– Collect all unenforced weaker
constraints along that path– Attempt to add each of them (in
strength order)
![Page 49: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/49.jpg)
49
DeltaBlue Evaluation
A DeltaBlue plan establishes an evaluation direction on each undirected dependency edge
Based on those directions, can then use a one-way algorithm for actual evaluation
![Page 50: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/50.jpg)
50
References Optimal one-way algorithmhttp://www.acm.org/pubs/citations/journals/toplas/1991-13-3/p315-hudson/
Note: constraint graph formulated differently Edges in the other directionNo nodes for functions (not bipartite graph)
DeltaBluehttp://www.acm.org/pubs/citations/journals/cacm/1990-33-1/p54-freeman-benson/
![Page 51: Algorithms for Constraint Satisfaction in User Interfaces Scott Hudson](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814aee550346895db7fce3/html5/thumbnails/51.jpg)
51