Publish on 07th November 2019
Category: Birds
0

Lecture11:Constraints

Brad Myers05-830Advanced User Interface Software

1

© 2013 - Brad Myers

Constraints

Relationships defined once and maintained by the systemUseful for keeping parts of the graphics together.Typically expressed as arithmetic or code relationships among variables.Variables are often the properties of objects (left, color)Types:"Dataflow" constraints; Choices:Single-Output vs. Multi-outputTypes: One-way, Multi-way, Simultaneous equations, Incremental, Special purposeCycles: supported or notOthers: AI systems, scheduling systems, etc.

2

© 2013 - Brad Myers

Historical Note: “Active Values”

Old Lisp systems had active valuesAttach procedures to be called when changedSame as today’s “Listeners”“Data linking” in Adobe FlashLike the “reverse” of constraintsProcedures are attached to values which change instead of values where neededInefficient because all downstream values are re-evaluated, possibly many timesE.g., when x and y values change

3

© 2013 - Brad Myers

One Way Constraints

Simplest form of constraintsD = F(I1, I2, ... In)Often calledformulassince like spreadsheetsCan be other dependencies on DCurrentSliderVal = mouseX - scrollbar.left scrollbar.left = window.left + 200 scrollbar.visible = window.has_focus

4

© 2013 - Brad Myers

One Way Constraints, cont.

Not just for numbers:mycolor=x.colorSeeold Garnet video0:51(1990)Implementations:1.Just re-evaluate all required equations every time a value is requestedleast storage, least overheadEquations may be re-evaluated many times when not changed. (e.g,scrollbar.leftwhen mouse moves)cycles:file_position= F1(scrollbar.Val)scrollbar.Val= F2(file_position)Cannot detect when values change (to optimize redraw)

5

© 2013 - Brad Myers

One-Way Implementation 2

Cache current values with each constraint; lazy evalExample:A = 10B = A + 5C = A * BD = A + EE = 20F = D + Cnow need to know when values become invalid and recalculate in right order

6

© 2013 - Brad Myers

Implementation 2, cont.

two phases: invalidate and re-calculateinvalidate all values that depend on the changed valuerecalculate only values that are demandeddata structures: depends-on-me, i-depend-onmay re-evaluate values that haven't changed unnecessarily when conditionals, "max", etc.can mark slots/objects that changecan detect cycles with a counterScott will describe his algorithm in detail next lecture

7

© 2013 - Brad Myers

One-Way Variations

Multiple outputs(D1, D2, ... Dm) = F(I1, I2, ... In)Side-effects in the formulasuseful for creating objectswhen happen?what if create new objects with new constraintscycles cannot be detectedVariables in the dependencies:D =p^.left+ 10important innovation in Garnet we invented, now ubiquitoussupports feedback objectssupports loops:D = Max(components^)requires the dependencies be dynamically determinedConstant formula eliminationTo decrease the size used by constraints

8

© 2013 - Brad Myers

Examples of Expressing Constraints

Garnet:(create-instance NILopal:line(:points '(340 318 365 358))(:grow-p T)(:x1 (o-formula (first (gvl:points))))(:y1 (o-formula (second (gvl:points))))(:x2 (o-formula (third (gvl:points))))(:y2 (o-formula (fourth (gvl:points)))))Amulet:Am_Define_Formula(int,height_of_layout) {inth = (int)Am_Height_Of_Parts( self) + 2 * ((int)self.Get(Am_TOP_OFFSET));return h < 75 ? 75 : h;}am_empty_dialog=Am_Window.Create("empty_dialog_window").Set (Am_LEFT_OFFSET, 5) // used inwidth_of_layout.Set (Am_TOP_OFFSET, 5) // used inheight_of_layout.Set (Am_WIDTH,width_of_layout).Set (Am_HEIGHT,height_of_layout)...

9

Two-Way (Multi-way) Constraints

FromThingLab(~1979)Constraints are expressions with multiple variablesAny may be modified to get the right valuesExample:A.right=A.left+A.width- 1Often requires programmer to provide methods for solving the constraint in each direction:A.left=A.right-A.width+ 1A.width=A.right-A.left+ 1Useful if mouse expressed as a constraintVideo(3:11)

10

© 2013 - Brad Myers

Two-Way implementations

Requires aplanningstep to decide which way to solveMany systems compute plans and save them around since usually change same variable repeatedlyIn general, have a graph of dependencies, find a path through the graphHow control which direction is solved?CurrentSliderVal=mouseX-scrollbar.left"Constraint hierarchies" = prioritiesconstants, interaction use "stay" constraints with high priorityDynamically add and remove constraintsBrad VanderZanden's"QuickPlan" solverHandles multi-output, multi-way cyclic constraints in O(n2) time instead of exponential like previous algorithms

11

© 2013 - Brad Myers

Simultaneous Equations

Required for parallel, perpendicular lines; tangency, etc.Also for aggregate's sizeNumerical (relaxation) or symbolic techniques

12

© 2013 - Brad Myers

Incremental

MichaelGleicher'sPhDthesis, 1994Only express forward computationsTries to get reverse by incrementally changing the forward computation in the right direction using derivatives.Supports interactions otherwise not possibleProduces smooth animationsVideo(2:38)

13

© 2013 - Brad Myers

Animation Constraints in Amulet

Implemented using Amulet's constraint mechanismWhen slot set with a new value, restores old value, and animates from old to new valueUsually, linear interpolationFor colors, through either HSV or RGB spaceFor visibility, various special effects between TRUE and FALSEDemo

14

© 2013 - Brad Myers

Some Constraint Systems Today

Flex “data bindings”Ember.http://emberjs.com/MVC, “Computed Properties”KnockoutJS.http://knockoutjs.com/Backbone:http://documentcloud.github.com/backbone/MVC, “Change” eventsconstraints apparently implemented by others on top

© 2013 - Brad Myers

15

ConstraintJS

PhD work of Stephen OneyStephen Oney, Brad A. Myers, Joel Brandt, "ConstraintJS: Programming Interactive Behaviors for the Web by Integrating Constraints and States",UIST'2012: ACM Symposium on User Interface Software and Technology, October 7-10, 2012. Cambridge, MA. pp. 229-238.ACMDLorlocalpdf.Integrate constraints with JavaScript and CSSCombine constraints with transition networksSince constraints often only hold under certain situationsConstraintJS.com

© 2013 - Brad Myers

16

0

Embed

Upload

Human-Computer Interaction in eCommerce