Publications: 60 | Followers: 0

Human-Computer Interaction in eCommerce

Publish on Category: Birds 0

Brad Myers05-830Advanced User Interface Software
© 2013 - Brad Myers
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.
© 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
© 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
© 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)
© 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
© 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
© 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
© 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)...
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)
© 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
© 2013 - Brad Myers
Simultaneous Equations
Required for parallel, perpendicular lines; tangency, etc.Also for aggregate's sizeNumerical (relaxation) or symbolic techniques
© 2013 - Brad Myers
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)
© 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
© 2013 - Brad Myers
Some Constraint Systems Today
Flex “data bindings”Ember., “Computed Properties”KnockoutJS., “Change” eventsconstraints apparently implemented by others on top
© 2013 - Brad Myers
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
© 2013 - Brad Myers





Make amazing presentation for free
Human-Computer Interaction in eCommerce