Talk:Canvas 2D Web Apps

To do list
I'll have to go through the whole book and revise the code to implement the following general changes: ✅ (the remaining ideas have to wait --Martin Kraus (discuss • contribs) 20:27, 18 August 2013 (UTC)) --Martin Kraus (discuss • contribs) 11:08, 6 August 2013 (UTC)
 * add check of isAnimationPlaying in all event handlers
 * set xInPage and yInPage in all event handlers, use them for all testing
 * use update(event) for event handling and update(null) for redrawing ✅
 * regularly call the redraw function but return immediately if it isn't requested ✅
 * package "library" code in a script file ("can2gui.js") ✅
 * new functions to create objects that can be called in the init function. ✅

--Martin Kraus (discuss • contribs) 11:49, 8 August 2013 (UTC)
 * explain clicks on background in the buttons example (resetting color to black) ✅

--Martin Kraus (discuss • contribs) 08:56, 9 August 2013 (UTC)
 * call library "cui2d.js" (canvas 2d user interface) and prefix functions and global variables with "cui" (sometimes instead of "my") ✅
 * set size of canvas only if it has changed, always clear

--Martin Kraus (discuss • contribs) 13:08, 9 August 2013 (UTC)
 * decide what to do with onclick (since dealing with all of click, mouseup, and touchend events can be complicated): handler that does nothing but preventing default behavior but internally deal with click like with mouseup? ✅

--Martin Kraus (discuss • contribs) 21:46, 9 August 2013 (UTC)
 * make isDraggableWithOneFinger an argument of isObjectTransformed ✅
 * make x, y, width, height arguments of isObjectDragged and isObjectTransformed; add translationX, translationY, translationXGrabbed and translationYGrabbed to state variable ✅
 * make keyframes and stretch arguments of animateValues and let animateValues determine when to stop animating cuiAnimation.play ✅
 * provide constructors without arguments for buttons, animations, transitions, draggable objects, transformable objects ✅

--Martin Kraus (discuss • contribs) 23:06, 11 August 2013 (UTC)
 * test whether clearRect is necessary
 * panning and zooming of pages ✅
 * new chapter about basics of cui2d (hello world program) ✅

--Martin Kraus (discuss • contribs) 06:17, 12 August 2013 (UTC)
 * make sure that the render loop doesn't render while the transition canvases are rendered. ✅

--Martin Kraus (discuss • contribs) 00:27, 13 August 2013 (UTC)
 * add information about devicemotion events ✅

--Martin Kraus (discuss • contribs) 05:49, 13 August 2013 (UTC)
 * add constructor with arguments for cuiKeyframe ✅

--Martin Kraus (discuss • contribs) 07:28, 13 August 2013 (UTC)
 * add cuiRepaint to set cuiCanvasNeedsRedraw = true (in anaology to Java's repaint function and glut's glutPostRedisplay) ✅

--Martin Kraus (discuss • contribs) 14:19, 13 August 2013 (UTC)
 * change isDragged and isTransformed to update process with return value indicating whether the event has been should be further processed ✅

--Martin Kraus (discuss • contribs) 19:52, 13 August 2013 (UTC)
 * functions to determine whether a click was a double click and/or a long click. (the main application of a double click is to make it easier to click draggable objects) ✅

--Martin Kraus (discuss • contribs) 21:18, 16 August 2013 (UTC)
 * implement a mechanism to react to long mouse clicks after some time without further events (called isHeldDown) ✅

--Martin Kraus (discuss • contribs) 19:19, 17 August 2013 (UTC)
 * implement a mechanism to identify a single mouse click (not a double click) after some time without further events

--Martin Kraus (discuss • contribs) 21:38, 13 August 2013 (UTC)
 * function cuiPage.prototype.transformPageToTransitionCoordinates (for minimize and maximize transition) ✅

--Martin Kraus (discuss • contribs) 22:02, 13 August 2013 (UTC)
 * improve button, draggable, and transformable mouse event handlers by including button state information for mousemove ✅

--Martin Kraus (discuss • contribs) 15:06, 14 August 2013 (UTC)
 * check whether scroll wheel events can be used on cuiTransformables for scaling. ( deltaX deltaY property of wheel events, which inherit from mouse events) ✅

--Martin Kraus (discuss • contribs) 21:25, 16 August 2013 (UTC)
 * update chapter on responsive buttons with implementation of buttons ✅

--Martin Kraus (discuss • contribs) 13:54, 19 August 2013 (UTC)
 * fix problems with Chrome & Safari (dragging) and with IE (errors) ✅ ; update cui2d.js of helloworld, staticbuttons, animations ✅

--Martin Kraus (discuss • contribs) 21:26, 20 August 2013 (UTC)
 * remove JSDoc comments from cuiCanvasNeedsRepaint, cuiAnimationsEnd, cuiAnimationForTransitions, cuiPageForTransitions, cuiProcess, cuiDrawTransition, and event handler; put documentation online. ✅

--Martin Kraus (discuss • contribs) 22:55, 21 August 2013 (UTC)
 * allow objects with numeric properties as cuiKeyframe.values by using keys, sorting the names, getting all the properties' values, and then deleting the ones whose typeof is not "number" (it also requires the construction of an object with the interpolated properties; I don't think it is worth the effort)

--Martin Kraus (discuss • contribs) 05:23, 23 August 2013 (UTC)
 * document members of cuiKeyframe and mention object initialization. ✅

--Martin Kraus (discuss • contribs) 21:40, 24 August 2013 (UTC)
 * new chapter on overlay rendering (for top edge, bottom edge, left edge, right edge): just adjust 2d context transformation appropriately and draw at the beginning of the process function of the page this wouldn't allow for buttons! Allow to overlay one page with another page and define the transformation of the overlay page appropriately. Write new chapter on overlays. ✅

--Martin Kraus (discuss • contribs) 05:23, 23 August 2013 (UTC)
 * mention how to start a page with scaling > 1 (see next)

--Martin Kraus (discuss • contribs) 22:55, 24 August 2013 (UTC)
 * options for page: adjust for height, adjust for width, allow vertical dragging, allow horizontal dragging, allow scaling, initial positioning: horizontal position (left, right, center), vertical position (top, bottom, center) ✅

--Martin Kraus (discuss • contribs) 09:36, 24 August 2013 (UTC)
 * query and set current scale of page, query and set current rotation angle of page, query and set center in page coordinates for the current window dimensions (cuiDraggable and cuiTransformable are always specified relative to the coordinates specified with the process function; thus, one cannot specify a position in absolute page coordinates) ✅

--Martin Kraus (discuss • contribs) 22:55, 24 August 2013 (UTC)
 * cuiFillRaggedText(text, x, y, maxWidth, height, baselineSkip) cuiFillMultiLineText(text, x, y, maxWidth, maxHeight, baselineSkip): write multi-line text in a box with baselineSkip pixels between lines ✅

--Martin Kraus (discuss • contribs) 08:24, 25 August 2013 (UTC)
 * isLooping property of cuiAnimation ✅

--Martin Kraus (discuss • contribs) 09:54, 25 August 2013 (UTC)
 * add isRotatable and isScalable arguments to cuiTransformable.process ✅

--Martin Kraus (discuss • contribs) 19:52, 25 August 2013 (UTC)
 * fix documentation of isDraggableVertically; use method/name/alias tag to fix problems with link and see; use name for file; maybe use module ✅

--Martin Kraus (discuss • contribs) 09:03, 26 August 2013 (UTC)
 * fix wheel events with chrome and safari (they require mousewheel events) ✅

--Martin Kraus (discuss • contribs) 13:50, 27 August 2013 (UTC)
 * implement release notifications with flick velocity

--Martin Kraus (discuss • contribs) 06:32, 28 August 2013 (UTC)
 * update animation chapter moving arguments to play ✅

--Martin Kraus (discuss • contribs) 06:32, 28 August 2013 (UTC)
 * implement pause, unpause, seek, and stop for animations

--Martin Kraus (discuss • contribs) 07:47, 28 August 2013 (UTC)
 * document event.x and event.y and the event types for cuiPage.process


 * update chapters for the interactionBits, document the constants, update reference --Martin Kraus (discuss • contribs) 21:01, 3 September 2013 (UTC) ✅


 * implement 3-finger gestures; clean up 1- and 2-finger interactionBits --Martin Kraus (discuss • contribs) 04:07, 7 September 2013 (UTC)


 * fix pinch gesture for iOS ✅ --Martin Kraus (discuss • contribs) 14:02, 12 March 2014 (UTC)


 * have a mode such that the point at the center of the screen doesn't move when the device orientation changes --212.10.156.61 (discuss) 22:10, 6 April 2014 (UTC)

Object Design Guidelines
The employed guidelines for defining objects are simplicity, explicitness, and scoped (from SECS: simple, explicit, consistent, scoped; see http://syque.com/cstyle/index.htm): --Martin Kraus (discuss • contribs) 23:06, 11 August 2013 (UTC)
 * Explicit configuration with minimal scope (temporal and structural): Configuration information of GUI components should be provided explicitly and only just-in-time when the component is updated and then go out of scope until the next update. (Thus, objects should only contain state information.) This keeps configuration information in a single place close to the program logic for the GUI component and the layout of the GUI component.
 * Simple constructors: Constructors should have no arguments which is possible because many GUI components have a generic initial state before users interact with them.
 * Simplicity by encapsulation: The state information (including the initial state) is encapsuled in the object; thus, application programmers should not have to deal with the internal state information of a GUI component (including the initial state) unless they want to change that state (for example in order to restrict the user's input).

Further UI Components
--Martin Kraus (discuss • contribs) 06:10, 10 August 2013 (UTC) --Martin Kraus (discuss • contribs) 21:55, 28 August 2013 (UTC)
 * Panning and zooming of page; overlayed content ✅ later: optional scrollbars + compass
 * Sliders
 * Checkboxes
 * Window: transformable container for a clipped page with optional close icon and optional background image (scrolling is in the responsibility of the page)
 * draggables and transformables should have custom process functions (allowing them to become containers of further UI components); the custom process functions have access to the width and height of the draggable/transformable which is still specified by arguments of the built-in process function (think of dialog boxes!) (custom process functions are provided by the application programmer and have only one argument: an event; e.g. the current page process function)
 * deformables: like transformables but also support 3-finger gestures for non-uniform scaling (new argument gestureBits: CUI_NONE, CUI_IS_DRAGGABLE_WITH_ONE_FINGER, CUI_IS_DRAGGABLE_WITH_TWO_FINGERS, CUI_IS_ROTATABLE_WITH_TWO_FINGERS, CUI_IS_UNIFORMLY_SCALABLE_WITH_TWO_FINGERS, CUI_IS_TRANSFORMABLE_WITH_TWO_FINGERS, CUI_IS_DRAGGABLE_WITH_THREE_FINGERS, CUI_IS_ROTATABLE_WITH_THREE_FINGERS, CUI_IS_UNIFORMLY_SCALABLE_WITH_THREE_FINGERS, CUI_IS_NONUNIFORMLY_SCALABLE_WITH_THREE_FINGERS, CUI_IS_SHEARABLE_WITH_THREE_FINGERS, CUI_IS_DEFORMABLE_WITH_THREE_FINGERS, CUI_IS_LIMITED_TO_HORIZONTAL_DRAGGING, CUI_IS_LIMITED_TO_VERTICAL_DRAGGING)
 * pane: clipping rectangle with a page as content (all the alignment, adjustment, and scrollbar settings are also applicable; thus, it is not practical to have everything in a function call)
 * numeric and alphanumeric keyboards --Martin Kraus (discuss • contribs) 15:19, 5 April 2014 (UTC)