IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
diff --git a/lib/capabilities.html b/lib/capabilities.html
index c98aae1..7a6fbca 100644
--- a/lib/capabilities.html
+++ b/lib/capabilities.html
@@ -1,75 +1,56 @@
-
+
-
-
- Doctests Capabilities
-
-
-
-
-
-
-
-
- Capabilities
-
-
Browsers differ in many aspects, from touch support, support of CSS and HTML5 standards, to
-javascript versions. This page collects some of these differences.
-
+ Browsers differ in many aspects, from touch support, support of CSS and HTML5 standards, to javascript
+ versions. This page collects some of these differences.
+
- Standard alerts are displayed quite differently, on Windows 10, for instance
- the browser URL is encluded, and a checkbox that allows to hide the
- alert dialogs.
-
+ Standard alerts are displayed quite differently, on Windows 10, for instance the browser URL is
+ encluded, and a checkbox that allows to hide the alert dialogs.
+
Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces
diff --git a/lib/coordinates.html b/lib/coordinates.html
index bb22d94..04456f3 100644
--- a/lib/coordinates.html
+++ b/lib/coordinates.html
@@ -1,110 +1,115 @@
-
+
+
- To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
- Unfortunately, several systems with several conventions are involved:
- DOM & CSS,
- SVG,
- Canvas
-
-
- We need a common reference system to switch between these coordinate systems. As the uttermost context, the browser page
- coordinate system is the most natural one. A simple API was long missing but has now been established in most modern
- browsers with
- window.convertPointFromNoteToPage and the inverse
- window.convertPointFromPageToNode.
- Although MDN Web Docs warns about their Non-standard nature the methods work in browsers targeted
- by the IWM Browser project. This doctest assures that this assumption can be tested.
-
-
Let's look at a scatter object with a rotatable local coordinate system. We try to follow a point in this local coordinate
- system by showing a marker outside the scatter that follows the point.
-
-
-
-
+
-
-
+
+
-
-
-
\ No newline at end of file
+ context.strokeStyle = 'red'
+ context.beginPath()
+ context.arc(canvasPoint.x, canvasPoint.y, 12, 0, Math.PI * 2)
+ context.stroke()
+ }
+ animate(followPoint)
+
+
+
diff --git a/lib/doctest.html b/lib/doctest.html
index ab5fb7b..6942ec3 100644
--- a/lib/doctest.html
+++ b/lib/doctest.html
@@ -12,7 +12,7 @@
Doctests are explanatory descriptions of programs with executable code examples.
diff --git a/lib/electron.html b/lib/electron.html
index 90e4235..ef03e26 100644
--- a/lib/electron.html
+++ b/lib/electron.html
@@ -1,47 +1,48 @@
-
+
-
-
- Electron Node.js Test
-
-
-
-
-
-
-
-
-
- Electron Node.js Test
-
-
-This doctest is expected to work only within the IWMBrowser. IWMBrowser windows
-are opened with a preload.js which is evaluated before the HTML is loaded.
-According to
-"I can not use jQuery/RequireJS/Meteor/AngularJS in Electron" we
-have to rename the symbols in the page before other libraries are included.
-In order to access node.js modules we can use `nodeRequire` instead.
-
-
As a simple test we try to load a file from the filesystem:
-
-
As simple as this test is, it shows that within the IWMBrowser one import all node.js
-modules. Don't forget to test for nodeRequire to avoid runtime errors in other browsers.
-
+ This doctest is expected to work only within the IWMBrowser. IWMBrowser windows are opened with a
+ preload.js which is evaluated before the HTML is loaded. According to
+ "I can not use jQuery/RequireJS/Meteor/AngularJS in Electron"
+ we have to rename the symbols in the page before other libraries are included. In order to access
+ node.js modules we can use `nodeRequire` instead.
+
+
As a simple test we try to load a file from the filesystem:
+
+
+ As simple as this test is, it shows that within the IWMBrowser one import all node.js modules. Don't
+ forget to test for nodeRequire to avoid runtime errors in other browsers.
+
-For functional tests it can be useful to simulate event or record and playback events.
-This module provides basic support for extracting data from events and serializing
-events into a JSON format that allows to save and load sequences of events.
-
-
-Let's look at an example of a HTML structure with click handlers. The click
-handler actions log messages that can be tested.
+ For functional tests it can be useful to simulate event or record and playback events. This module provides
+ basic support for extracting data from events and serializing events into a JSON format that allows to save
+ and load sequences of events.
+
+
+ Let's look at an example of a HTML structure with click handlers. The click handler actions log messages
+ that can be tested.
+
+
<div>
<img id="women" src="examples/women.jpeg"
onclick="record(event); Doctest.log('Lady clicked')"/>
@@ -31,46 +30,53 @@ handler actions log messages that can be tested.
</vide>
</div>
-Frames are a major way to modularize the design of complex applications. Since
-pages presented in frames are independent of each other they can fail without
-impact on other pages. In addition preparing content in individual HTML files
-largely simplfies the workflow of content production.
-
-
This approach, however, has limitations:
-
-
Some pages may prevent embedding them
-by 'X-Frame-Options', e.g. www.apple.com
-
-
Sites with responsive design might not be able to detect the available space,
- e.g. de.wikipedia.org
-
-
Touch events are not dispatched correctly to multiple frames on platforms with
-TouchEvents, e.g. if frame one
-receives touch1, all related touch points touch2, ... touchN, are send to frame1
-although they might occur over frame two.
-
-
-
To solve the last mentioned problem, we prevent frames form touch events by
-assigning a
pointer-events: none;
style. A wrapping div is used to capture
-the events instead. Captured events are collected by an InteractionMapper and
-distributed as synthesized mouse or touch events to the wrapped iframes.
-
-Let's look at an example of two HTML IFrames embedded in this Doctest.
+ Frames are a major way to modularize the design of complex applications. Since pages presented in frames are
+ independent of each other they can fail without impact on other pages. In addition preparing content in
+ individual HTML files largely simplfies the workflow of content production.
+
+
This approach, however, has limitations:
+
+
+
+ Some pages may prevent embedding them by 'X-Frame-Options', e.g.
+ www.apple.com
+
+
+ Sites with responsive design might not be able to detect the available space, e.g.
+ de.wikipedia.org
+
+
+ Touch events are not dispatched correctly to multiple frames on platforms with TouchEvents, e.g.
+ if frame one receives touch1, all related touch points touch2, ... touchN, are send to frame1 although
+ they might occur over frame two.
+
+
+
To solve the last mentioned problem, we prevent frames form touch events by assigning a
+
pointer-events: none;
+ style. A wrapping div is used to capture the events instead. Captured events are collected by an
+ InteractionMapper and distributed as synthesized mouse or touch events to the wrapped iframes.
+
Let's look at an example of two HTML IFrames embedded in this Doctest.
+
<div id="frameWrapper1">
<iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
</div>
@@ -53,29 +54,41 @@ Let's look at an example of two HTML IFrames embedded in this Doctest.
</div>
-
-
-
-
-
-
-
-
-
The distribution of events is handled by the enclosing container. The container
-registers a InteractionMapper and provides adapter for iframes, that implement
-IInteractionTarget by sending programmatically generated events. If you test
-these frames on a multitouch device you will notice that the scatters within
-the frames can be manipulated independently of each other:
-
+ The loading of multiple small images (e.g. loadimng tiles of a zoomable map) is a time consuming task that
+ leads to small but noticeable delays in touch interaction if standard DOM events are used. With a worker we
+ can try to do most of the time consuming processing in the background.
+
+
Let's look at an example of a image loader worker:
- To Do: Use SystemJS to load modules and main code. This ensures that
- all code can be parsed by acorn into an Abstract Syntax Tree which
- in turn allows to extract class statements and related extends phrases.
-
+ To Do: Use SystemJS to load modules and main code. This ensures that all code can be parsed by acorn into an
+ Abstract Syntax Tree which in turn allows to extract class statements and related extends phrases.
+
-Since the correct handling of the divergent browser specific multitouch
-implementations is a difficult and recurring task we decided to encapsulate
-all related handlers for TouchEvent (WebKit, Mozilla) and
-PointerEvent (IE, Edge, Chrome) in
-a single delegate pattern.
-
-
The main differences are that PointerEvent are fired for each
-touch point, whereas the TouchEvent collects multiple
-TouchPoints into a single event. The basic PointMap and Interaction
-classes unify this behavior by collecting all contact points regardless
-of their original mouse, touch, or pointer events.
-
- Point Maps
-
-
The touch and pointer positions are collected in PointMaps which provide
-access to the positions via stringified touch and pointer ids. For mouse events the
-special id "mouse" is used. PointMaps can be cloned and pretty printed. In addition
-they provide auxiliary methods like mean and farthests
-which can be used to simplify the computation of gestures. In general
-mean can be used to compute the "center of interaction", i.e. the
-best guess of the anchor point for rotation and scaling operations.
-
+ Since the correct handling of the divergent browser specific multitouch implementations is a difficult and
+ recurring task we decided to encapsulate all related handlers for TouchEvent (WebKit, Mozilla)
+ and PointerEvent (IE, Edge, Chrome) in a single delegate pattern.
+
+
+ The main differences are that PointerEvent are fired for each touch point, whereas the
+ TouchEvent collects multiple TouchPoints into a single event. The basic PointMap
+ and Interaction classes unify this behavior by collecting all contact points regardless of their original
+ mouse, touch, or pointer events.
+
+
Point Maps
+
+ The touch and pointer positions are collected in PointMaps which provide access to the positions via
+ stringified touch and pointer ids. For mouse events the special id "mouse" is used. PointMaps can be cloned
+ and pretty printed. In addition they provide auxiliary methods like mean and
+ farthests
+ which can be used to simplify the computation of gestures. In general
+ mean can be used to compute the "center of interaction", i.e. the best guess of the anchor
+ point for rotation and scaling operations.
+
+
-
If more than two touch points are involved it may be best to look for the
-pair of points which are farthest away from each other. These points will
-represent the fingers farthest away from each other, a more simple substitute
-for 3, 4 or 5 touch points. Here we add a third point to our example touches
-and test whether the maximal distant points are found:
-
-
-Interaction Points and Interactions
-
-Events and points change in time and gestures are computed from this dynamic behavior.
-To collect theses changes and to simplify the computation of gestures we
-collect PointMaps in a composite class InteractionPoints, which distinguishes
-start, current, previous, and ended point coordinates as well as the start timestamps.
-
+
+ If more than two touch points are involved it may be best to look for the pair of points which are farthest
+ away from each other. These points will represent the fingers farthest away from each other, a more simple
+ substitute for 3, 4 or 5 touch points. Here we add a third point to our example touches and test whether the
+ maximal distant points are found:
+
+
-let interactionPoints = new InteractionPoints()
+
Interaction Points and Interactions
+ Events and points change in time and gestures are computed from this dynamic behavior. To collect theses changes
+ and to simplify the computation of gestures we collect PointMaps in a composite class InteractionPoints, which
+ distinguishes start, current, previous, and ended point coordinates as well as the start timestamps.
+
+
+ Interaction objects extend the idea of mapping touch ids to points to multiple target objects. Each touch id
+ is mapped not only to the changing points of this touch but also to the object that has been hit by the
+ starting touch point. This object is the target of the interaction and remains for the whole duration of the
+ multitouch gesture.
+
-
-
Interaction objects extend the idea of mapping touch ids to
-points to multiple target objects. Each touch id is mapped not only to the
-changing points of this touch but also to the object that has been
-hit by the starting touch point. This object is the target of the interaction
-and remains for the whole duration of the multitouch gesture.
+
Interaction Delegate
+
+ The delegator registers all needed TouchEvent, PointerEvent, and
+ MouseEvent
+ handlers on a provided DOM elememt for a given target object, ensures that the events are captured by the
+ target and boils the event handling down to simple
+ onStart, onMove, onEnd events.
+
+
+ Let's look at an example of an InteractionDelegate and a target object that implements the
+ IInteractionTarget interface. Typically you setup the delegator in the constructor of the class
+ that uses the interation.
+
+
-
We can now check whether the promised interface methods are implemented by the
-class:
-
-
If we define an InteractionTarget that violates the IInteractionTarget interface
-we get an error. The following example of an interaction target uses an
-InteractionDelegate but does not implement the necessary methods:
-
-
-
-
- Interaction Mapper
-
-
Often we need to assign UI elements to touch and pointer events. This is
-supported by a special InteractionMapper delegate. A InteractionMapper
-maps events to specific parts of a container interaction target. The
-InteractionTarget must implement a findTarget method that returns an
-object implementing the IInteractionTarget interface.
-
-
-If the InteractionTarget also implements a mapPositionToPoint method this
-is used to map the points to the local coordinate space of the the target.
-This makes it easier to lookup elements and relate events to local
-positions.
-
-
Let's see an example. A graph that uses an InterationMapper for it´s child
-objects:
-
-
+
We can now check whether the promised interface methods are implemented by the class:
+
+
+ If we define an InteractionTarget that violates the IInteractionTarget interface we get an error. The
+ following example of an interaction target uses an InteractionDelegate but does not implement the necessary
+ methods:
+
+
- constructor(name) {
- this.name = name
- }
+
Interaction Mapper
+
+ Often we need to assign UI elements to touch and pointer events. This is supported by a special
+ InteractionMapper delegate. A InteractionMapper maps events to specific parts of a container interaction
+ target. The InteractionTarget must implement a findTarget method that returns an object implementing the
+ IInteractionTarget interface.
+
+
+ If the InteractionTarget also implements a mapPositionToPoint method this is used to map the
+ points to the local coordinate space of the the target. This makes it easier to lookup elements and relate
+ events to local positions.
+
+
Let's see an example. A graph that uses an InterationMapper for it´s child objects:
+
-
Now we simulate a sequence of onStart, onMove, onEnd events by calling
-the registered event handlers programmatically. Note that the defined
-event handlers log their calls.
-
+
+ Now we simulate a sequence of onStart, onMove, onEnd events by calling the registered event
+ handlers programmatically. Note that the defined event handlers log their calls.
+
+
-
- Simple Dragging
-
-
Drag & Drop is a common interaction pattern. This behavior can be accomplished
-by a class that implements IInteractionMapperTarget as well as IInteractionTarget.
-You can grab the blue circle with touches or mouse and drag it around.
-
-
-
-
+
Simple Dragging
+
+ Drag & Drop is a common interaction pattern. This behavior can be accomplished by a class that implements
+ IInteractionMapperTarget as well as IInteractionTarget. You can grab the blue circle with touches or mouse
+ and drag it around.
+
+
+
+
+
+ new Dragger(circle, document.body)
+
-
- Multitouch
-
-
- Multitouch-Events (simultaneous events) in browsers cannot be used by default.
- Even libraries like jQuery do not fix this problem. The static method "on" of the
- InteractionMapper allows simultaneous events and thus multitouch. The following
- events (and their specializations) can be used in addition to the default browser
- events: tap, doubletap, press, pan, swipe, pinch and rotate. See http://hammerjs.github.io
- for more details.
-
-
+
Multitouch
+
+ Multitouch-Events (simultaneous events) in browsers cannot be used by default. Even libraries like jQuery do
+ not fix this problem. The static method "on" of the InteractionMapper allows simultaneous events and thus
+ multitouch. The following events (and their specializations) can be used in addition to the default browser
+ events: tap, doubletap, press, pan, swipe, pinch and rotate. See http://hammerjs.github.io for more details.
+
-Interfaces are objects that specify (document) the external behavior of objects
-that “provide” them. An interface specifies behavior through method definitions
-that specify functions and their signatures.
-
-
Let's look at an example of an interface and a class implementing the interface:
+ Interfaces are objects that specify (document) the external behavior of objects that “provide” them. An
+ interface specifies behavior through method definitions that specify functions and their signatures.
+
+
Let's look at an example of an interface and a class implementing the interface:
+
-
We can now check whether the promised interface methods are implemented by the
-class:
+ 
-
-