diff --git a/css/doctest.css b/css/doctest.css index 2d00933..fc9573c 100644 --- a/css/doctest.css +++ b/css/doctest.css @@ -18,7 +18,7 @@ html { margin: 0 auto; } -.dark-mode nav{ +.dark-mode nav { border-color: var(--white); } @@ -264,3 +264,23 @@ canvas { width: 100%; height: 100%; } + +#ctxmenu { + position: fixed; + background: white; + color: black; + cursor: pointer; + border: 1px lightgray solid; +} + +#ctxmenu > a { + display: block; + padding: 0.25rem 1rem; + font-size: 18px; + margin: 0.125rem; +} + +#ctxmenu > a:hover { + background: black; + color: white; +} diff --git a/css/index.css b/css/index.css index 10cff7f..f4a3209 100644 --- a/css/index.css +++ b/css/index.css @@ -34,7 +34,9 @@ h3 { background-color: rgba(0, 0, 15, 0.5); } -a { text-decoration: none; } +a { + text-decoration: none; +} div.wrapper { overflow: hidden; @@ -46,28 +48,48 @@ div.wrapper { /* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */ @-webkit-keyframes color_change { - from { background-color: rgba(0, 0, 0, 0); } - to { background-color: red; } + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: red; + } } @-moz-keyframes color_change { - from { background-color: rgba(0, 0, 0, 0); } - to { background-color: red; } + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: red; + } } @-ms-keyframes color_change { - from { background-color: rgba(0, 0, 0, 0); } - to { background-color: red; } + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: red; + } } @-o-keyframes color_change { - from { background-color: rgba(0, 0, 0, 0); } - to { background-color: red; } + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: red; + } } @keyframes color_change { - from { background-color: rgba(0, 0, 0, 0); } - to { background-color: red; } + from { + background-color: rgba(0, 0, 0, 0); + } + to { + background-color: red; + } } /*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/ @@ -83,7 +105,7 @@ div.wrapper { } .thumbnail::after { - content: ""; + content: ''; display: block; position: absolute; top: 0; @@ -141,16 +163,17 @@ div.title { .container { margin: 0; padding: 0; + margin-top: 32px; border: 2pt #000; min-height: 100%; min-width: 100%; display: -webkit-flex; - -webkit-align-items: flex-end; - align-items: flex-end; + -webkit-align-items: flex-start; + align-items: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; - -webkit-align-content: flex-end; - align-content: flex-end; + -webkit-align-content: flex-start; + align-content: flex-start; } /** See https://github.com/electron/electron/issues/4420 */ diff --git a/lib/_menu.js b/lib/_menu.js new file mode 100755 index 0000000..8b744d1 --- /dev/null +++ b/lib/_menu.js @@ -0,0 +1,27 @@ +const mapping = { + 'lib.Application': './app.html', + 'lib.Capabilities': './capabilities.html', + 'lib.Card': './card/index.html', + 'lib.Pixi': './pixi/index.html', + 'pixi.App': './pixi/app.html' +} + +function menu(event) { + let key = event.target.innerText + let html = '' + + for (let k of Object.keys(mapping)) { + if (k.startsWith(key)) { + let rest = k.slice(key.length) + let url = mapping[k] + html += `${rest}` + } + } + event.preventDefault() + let contextMenu = document.createElement('div') + contextMenu.id = 'ctxmenu' + contextMenu.style = `top:${event.pageY - 10}px;left:${event.pageX - 40}px` + contextMenu.onmouseleave = () => (contextMenu.outerHTML = '') + contextMenu.innerHTML = html + document.body.appendChild(contextMenu) +} diff --git a/lib/app.html b/lib/app.html index a5e1141..51f18cc 100644 --- a/lib/app.html +++ b/lib/app.html @@ -13,7 +13,7 @@

- Application + lib.Application

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. -

- User Agent -

-

-

-

- Device Pixel Ratio -

-

-

-

- Multi Touch Table -

-

-

-

- Supported Events -

-

-

- + + + +
+

lib.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. +

- Doctest.expect(Capabilities.supportsMouseEvents(), true) +

User Agent

+

+

Device Pixel Ratio

+

+

Multi Touch Table

+

+

Supported Events

+

+ -

- Interactive Alerts -

-

- 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. -

- - - -

- Result -

-
+ if (Capabilities.supportsPointerEvents()) { + Doctest.expect(Capabilities.supportsPointerEvents(), true) + } + +

Interactive Alerts

+

+ 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. +

+ + + +

Result

+
- -

- References -

- -
- +

References

+ +
+ + diff --git a/lib/card/index.html b/lib/card/index.html index aee6dd4..cbc6e6c 100644 --- a/lib/card/index.html +++ b/lib/card/index.html @@ -15,7 +15,7 @@

- Cards + lib.card.Cards

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 @@ - + + + + Coordinates Doctest + + + + + + - - - - + function animate(callback) { + requestAnimationFrame((dt) => { + drawPolygons() + callback() + animate(callback) + }) + } + + - -

- Coordinates -

-

- 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. -

-
- - + - - Canvas not supported. - -
+ + Canvas not supported. + + - - - \ 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 + lib.Doctests

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. -

-

- References -

- -
- + + + 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. +

+

References

+ +
+ + diff --git a/lib/events.html b/lib/events.html index d17af68..dbb0baf 100644 --- a/lib/events.html +++ b/lib/events.html @@ -1,26 +1,25 @@ - + - - - - - - - - - -

- Events -

-

-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.

-

+    
+        
+        
+        
+        
+        
+        
+    
+    
+        
lib.Events

+        

+            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>
 

-

-    
-    
-

-
-
-

-	References
-

-
-
-
+            Doctest.expectLog('Lady clicked', 'Movie clicked')
+        
+        
References

+        
+    
+
diff --git a/lib/flippable.html b/lib/flippable.html
index add8b31..a341182 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -1,52 +1,52 @@
-
+
 
-
-	
-	Flippable Doctest
-	
-	
-	
-    
-	
+    
+        
+        Flippable Doctest
+        
+        
+        
+        
+        
 
-    
-	
+    
+    
+        
lib.Flippable

+        

+            The flip effect simulates a flip between a front and back view of an object by means of a 3D rotation. The
+            DOMFlippable class implements this effect for two DOM nodes, one as the front view, the other as the back
+            view. Both views are connected via a HTML template that defines the placeholders for front and back views.
+            The style file "css/flipeffect.css" holds reasonable default styles for this kind of templates.
+        

+        

     <template id="flipTemplate">
         <div class="flipWrapper">
             <div class="flipCard">
@@ -59,27 +59,24 @@ templates.
     </template>
 
 

-

-	Example
-

-

-
-

-
-
+        
Example

+        

+        
+    
+
diff --git a/lib/frames.html b/lib/frames.html
index 8f70384..71ebd72 100644
--- a/lib/frames.html
+++ b/lib/frames.html
@@ -1,50 +1,51 @@
-
+
 
-
-	
-	
-	
-	
-    
-    
-    
-	
-
-
-

-	Frames
-

-

-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.

-

+    
+        
+        
+        
+        
+        
+
+        
+        
+    
+    
+        
lib.Frames

+        

+            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:
-

-
-

-	References
-

-
-
+        

+        
+        
References

+        
+    
+
diff --git a/lib/imageloader.html b/lib/imageloader.html
index 6823e00..55a14a2 100644
--- a/lib/imageloader.html
+++ b/lib/imageloader.html
@@ -1,52 +1,50 @@
-
+
 
-
-	
-	
-	
+    
+        
+        
+        
 
-	
-    
+        
+        
 
-	
+        
+    
+    
+        
lib.Image Loader Worker

+        

+            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:

+        
+        
+        
+        
+        
-
+            worker.postMessage({ command: 'load', urls: urls })
+            worker.postMessage({ command: 'abort', urls: urls })
+            worker.postMessage({ command: 'load', urls: urls })
+        
+    
+
diff --git a/lib/index.html b/lib/index.html
index fcdfe47..1fa1377 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -1,53 +1,58 @@
-
+
 
-
-    Lib Doctests
-    
-	
-	
-    
+    
+        Lib Doctests
+        
+        
+        
+        
 
-    
-    
-    
-    
+        
+        
 
-    
+    
+    
+        
+        
+    
 
diff --git a/lib/inspect.html b/lib/inspect.html
index 2feab2a..f6a38f3 100644
--- a/lib/inspect.html
+++ b/lib/inspect.html
@@ -1,36 +1,41 @@
-
+
 
-
-	
-	
-	
-	
-    
-
-
-

-	Code and Class Inspection
-

-

-    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.
-

-
-

-References
-

-
-
+    
+        
+        
+        
+        
+        
+    
+    
+        
lib.Code and Class Inspection

+        

+            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.
+        

+        
+        
References

+        
+    
+
diff --git a/lib/interaction.html b/lib/interaction.html
index 288f211..1b1d932 100644
--- a/lib/interaction.html
+++ b/lib/interaction.html
@@ -1,409 +1,495 @@
-
+
 
-
-	
-	Interaction Mapper Doctest
-	
-	
-	
-    
-    
+    
+        
+        Interaction Mapper Doctest
+        
+        
+        
+        
+        
 
-    
-
-
-

-	Interaction Pattern
-

-

-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.
-

-
+    
+    
+        
lib.Interaction

+        

+            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.
-

-
-    
-        
-        
-            
-            
-        
-        
-            
-            
-        
-    
-    
-        
-        tap
-    
-    
-        
-        
-            press
-            ​
-        
-    
-    
-        
-        pan
-    
-    
-        
-        swipe
-    
-    
-        
-        pinch
-    
-    
-        
-        rotate
-    
-    
-        
-        rotate
-    
-
+        
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.
+        

+        
+            
+                
+                
+                    
+                    
+                
+                
+                    
+                    
+                
+            
+            
+                
+                tap
+            
+            
+                
+                
+                    press
+                    ​
+                
+            
+            
+                
+                pan
+            
+            
+                
+                
+                    swipe
+                
+            
+            
+                
+                
+                    pinch
+                
+            
+            
+                
+                
+                    rotate
+                
+            
+            
+                
+                
+                    rotate
+                
+            
+        
 
-
+            InteractionMapper.on('click', document.getElementById('hammer-1'), (event) => {
+                console.log(event)
+            })
+        
 
-

-References
-

-
-
-
+        
References

+        
+    
+
diff --git a/lib/interface.html b/lib/interface.html
index 33b68d9..5215b1c 100644
--- a/lib/interface.html
+++ b/lib/interface.html
@@ -1,50 +1,43 @@
-
+
 
-
-    
-    
-    
-    
-    
-
-
-

-    Interfaces
-

-

-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:

-
+        
+    
+    
+        
lib.Interfaces

+        

+            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:

-
-

-

-References
-

-
-
+                run() {
+                    print('Running testable object')
+                }
+            }
+        
+        
We can now check whether the promised interface methods are implemented by the class:

+        
+        

+        
References

+        
+    
+
diff --git a/lib/logging.html b/lib/logging.html
index 3c117a9..bc6cb71 100644
--- a/lib/logging.html
+++ b/lib/logging.html
@@ -1,33 +1,30 @@
-
+
 
+    
+        Logging Doctest
+        
+        
+        
+        
+        
+        
+    
 
-
-    Logging Doctest
-    
-    
-    
-    
-    
-    
-
+    
+        
lib.Logging

+        
Store informations of your app permanently or use app specific logging functions.

+        
-    
You can overwrite the log, warn, and error handler by using Logging.setup with
-        app specific functions.

-    
-
\ No newline at end of file
+            Logging.setup({ log: (message) => console.log('app specific' + message) })
+            Logging.log('now app related')
+        
+        
You can overwrite the log, warn, and error handler by using Logging.setup with app specific functions.

+        
+    
+
diff --git a/lib/pixi/app.html b/lib/pixi/app.html
index a30bb36..5e29f03 100644
--- a/lib/pixi/app.html
+++ b/lib/pixi/app.html
@@ -15,7 +15,7 @@
     
 
 
-    
Application

+    
lib.pixi.Application

     

         The class PIXIApp is the main entry point to create a new PIXI Application.
         It inherits from PIXI.Application, set meaningfull defaults, creates a scene and
diff --git a/lib/pixi/application.html b/lib/pixi/application.html
index 8772ea8..2475d20 100644
--- a/lib/pixi/application.html
+++ b/lib/pixi/application.html
@@ -1,36 +1,40 @@
-
+
 
-
-    
+    
+        
 
-    PIXI.Application Doctest
+        PIXI.Application Doctest
 
-    
+        
+        
 
-    
-    
-
-
-    
Vanilla PIXI.Application

+        
 
-    
+        
+    
+    
+        
lib.pixi.Vanilla PIXI.Application

 
-        // Add the view to the DOM
-        document.body.appendChild(app.view)
+        
-
+            // ex, add display objects
+            const sprite = PIXI.Sprite.from('./assets/app-circle.png')
+            sprite.scale.set(0.3, 0.3)
+            app.stage.addChild(sprite)
+
+            sprite.interactive = true
+            sprite.buttonMode = true
+            sprite.on('click', (e) => {
+                console.log('sprite clicked')
+            })
+        
+    
+
diff --git a/lib/pixi/badge.html b/lib/pixi/badge.html
index 2033cb3..7dfac87 100644
--- a/lib/pixi/badge.html
+++ b/lib/pixi/badge.html
@@ -5,10 +5,7 @@
 
         PIXI Badge
 
-        
+        
         
 
         
@@ -18,16 +15,12 @@
         
     
     
-        
Badge

-        

-            Small and adaptive tag for adding context to just about any content.
-        

+        
lib.pixi.Badge

+        
Small and adaptive tag for adding context to just about any content.

         
Let's look at some badge examples:

         

         
-        

-            What you should see: Badges, badges, badges...
-        

+        
What you should see: Badges, badges, badges...

         
     
diff --git a/lib/pixi/blurfilter.html b/lib/pixi/blurfilter.html
index 9e63ec2..1009f51 100644
--- a/lib/pixi/blurfilter.html
+++ b/lib/pixi/blurfilter.html
@@ -1,50 +1,51 @@
-
+
 
-
-    
+    
+        
 
-    PIXI BlurFilter
+        PIXI BlurFilter
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
BlurFilter

-    

-        The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can specify
-        a range (defined as a PIXI.Rectangle) on which the filter should be applied.
-    

-    
Example with Image

-    
Let's look at an example of creating a new blur filter near the bottom:

-    
-    

-        What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).
-    

-    
+        
+    
+    
+        
lib.pixi.BlurFilter

+        

+            The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can
+            specify a range (defined as a PIXI.Rectangle) on which the filter should be applied.
+        

+        
Example with Image

+        
Let's look at an example of creating a new blur filter near the bottom:

+        
+        
What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).

+        
-
+            // Create three filters and assign them to the scene
+            const blurFilter1 = new BlurFilter(new PIXI.Rectangle(40, 40, 120, 80))
+            const blurFilter2 = new BlurFilter(new PIXI.Circle(240, 140, 60), 150)
+            const blurFilter3 = new BlurFilter(new PIXI.Rectangle(380, 40, 100, 100), 20)
+            app.scene.filters = [blurFilter1, blurFilter2, blurFilter3]
+        
+    
+
diff --git a/lib/pixi/button.html b/lib/pixi/button.html
index ebd00ec..718bdeb 100644
--- a/lib/pixi/button.html
+++ b/lib/pixi/button.html
@@ -1,338 +1,445 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Button
+        PIXI Button
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
Button

-    

-        The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
-        and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make 
-        buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set 
-        the button type to "checkbox".
-    

-    
JavaScript API

-    
Let's look at some button examples:


-    
-    

-        What you should see: Many buttons with very different styling and behaviour.
-    

-    
+        
+    
+    
+        
lib.pixi.Button

+        

+            The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
+            dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
+            active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
+            between active/inactive, set the button type to "checkbox".
+        

+        
JavaScript API

+        
Let's look at some button examples:

+        

+        
+        
What you should see: Many buttons with very different styling and behaviour.

+        
-
-
\ No newline at end of file
+            app.scene.addChild(button1, button2, button3, button4, button5, button6)
+            app.scene.addChild(button7, button8)
+            app.scene.addChild(button9, button10, button11)
+            app.scene.addChild(button12, button13)
+            app.scene.addChild(button14, button15, button16, button17)
+            app.scene.addChild(button18, button19, button20, button21)
+            app.scene.addChild(button22, button23, button24, button25)
+            app.scene.addChild(button26)
+        
+    
+
diff --git a/lib/pixi/buttongroup.html b/lib/pixi/buttongroup.html
index 93c5b36..a37da35 100644
--- a/lib/pixi/buttongroup.html
+++ b/lib/pixi/buttongroup.html
@@ -1,375 +1,390 @@
-
+
 
-
-    
+    
+        
 
-    PIXI ButtonGroup
+        PIXI ButtonGroup
 
-    
-    
+        
+        
 
-    
-    
-    
+        
+        
+        
 
-    
-    
-
-
-    
ButtonGroup

-    

-        Group a series of buttons together on a single line with the button group.
-    

-    
JavaScript API

-    
Let's look at some button groups:


-    
-    

-        What you should see: Many button groups with very different styling and behaviour.
-    

-    
+        
+    
+    
+        
lib.pixi.ButtonGroup

+        
Group a series of buttons together on a single line with the button group.

+        
JavaScript API

+        
Let's look at some button groups:

+        

+        
+        
What you should see: Many button groups with very different styling and behaviour.

+        
-
+            app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
+            app.scene.addChild(buttonGroup4)
+            app.scene.addChild(buttonGroup5, buttonGroup6)
+            app.scene.addChild(buttonGroup7, buttonGroup8)
+            app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
+            app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
+            app.scene.addChild(buttonGroup20, buttonGroup21)
+        
+    
 
diff --git a/lib/pixi/coordinates.html b/lib/pixi/coordinates.html
index a03af91..afe151a 100644
--- a/lib/pixi/coordinates.html
+++ b/lib/pixi/coordinates.html
@@ -15,7 +15,7 @@
 
 
     

-        Coordinates
+        lib.pixi.Coordinates
     

     

         To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
diff --git a/lib/pixi/deepzoom/deepzoom.html b/lib/pixi/deepzoom/deepzoom.html
index 786f82c..ed134d4 100644
--- a/lib/pixi/deepzoom/deepzoom.html
+++ b/lib/pixi/deepzoom/deepzoom.html
@@ -1,219 +1,226 @@
-
+
 
+    
+        
 
-
-    
+        DeepZoomImage Doctests
 
-    DeepZoomImage Doctests
+        
+        
 
-    
-    
+        
 
-    
+        
 
-    
+        
+        
 
-    
-    
+        
+    
 
-        #app > * {
-            margin-bottom: 5px;
-        }
-    
-
+    
+        

+            lib.pixi.deepzoom.
+            DeepZoom
+        

+        

+            The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
+            level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
+            instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
+            tiles at the larger level as fast as possible.
+        

+        

+        

+        

+        

+        
 
-        // create the ScatterContainer
-        //--------------------
-        const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
-        app2.scene.addChild(scatterContainer2)
+        
DeepZoomImage in DeepZoomImage

+        

+            The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
+            level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
+            instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
+            tiles at the larger level as fast as possible.
+        

+        

+        

+        
+            // create the ScatterContainer
+            //--------------------
+            const scatterContainer3 = new ScatterContainer(app3.renderer, {
+                app: app3,
+                showBounds: true,
+                claimEvent: false,
+                stopEvents: false
+            })
+            app3.scene.addChild(scatterContainer3)
 
-    
DeepZoomImage in DeepZoomImage

-    

-        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
-        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
-        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
-        as possible.
-    

-    

-    

-    
-
+            app3._deepZoomImage4 = deepZoomImage4
 
+            scatterContainer3.addChild(deepZoomImage4)
+        
+    
 
diff --git a/lib/pixi/deepzoom/image.html b/lib/pixi/deepzoom/image.html
index 67b8d99..5eadc12 100644
--- a/lib/pixi/deepzoom/image.html
+++ b/lib/pixi/deepzoom/image.html
@@ -1,143 +1,135 @@
-
+
 
+    
+        
 
-
-    
+        DeepZoomImage Doctests
 
-    DeepZoomImage Doctests
+        
+        
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-    
-
-
-
-    
DeepZoomImage

-    

-        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
-        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
-        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
-        as possible.
-    

-    

-    

-        
-        

-        

-    

-    
-
+            function changePIXI() {
+                if (typeof app != 'undefined') {
+                    //The parameter destroys the canvas, when destroying the app.
+                    // Not deleting a new canvas resulted in some
+                    // weird PIXI error.
+                    app.destroy(true)
+                }
 
+                //A new canvas has to be created
+                //for the new view.
+                var canvas = document.createElement('canvas')
+                canvas_container.appendChild(canvas)
+
+                app = new ScatterApp({
+                    resolution: state + 1,
+
+                    //Default parameters
+                    view: canvas,
+                    autoResize: false,
+                    width: 128,
+                    height: 128,
+                    backgroundColor: 0xffcccccc
+                })
+                    .setup()
+                    .run()
+
+                // To create a DeepZoomImage, a DeepZoomInfo has to
+                // be provided. It contains all the necessary informations
+                // for the DeepZoomImage, to behave as intended.
+                // (E.g. that it displays the right level of tiles for the current view distance.)
+
+                deepZoomInfo = new DeepZoomInfo({
+                    tileSize: 128,
+                    format: 'jpg',
+                    overlap: 0,
+                    type: 'map',
+                    height: 4096,
+                    width: 4096,
+                    path: '../assets/maps/test',
+                    urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
+                })
+
+                // Create the DeepZoomImage
+                deepZoomImage = new DeepZoomImage(deepZoomInfo, {
+                    highResolution: !!state,
+                    app
+                })
+
+                deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
+                    // Allow more flexible scaling for debugging purposes.
+                    minScale: 0,
+                    maxScale: 100,
+                    // Notify the DeepZoomImage, when it's container has
+                    // been transformed (translated, scaled, rotated, ...)
+                    onTransform: (event) => {
+                        deepZoomImage.transformed(event)
+                    }
+                })
+
+                // Add the DeepZoomImage to the scene.
+                app.scene.addChild(deepZoomImage)
+
+                //Set info text.
+                info.innerHTML = 'resolution: ' + app.renderer.resolution + '
high resolution: ' + !!state
+            }
+
+            // Add functionality to the button.
+            change_dpr.addEventListener('click', (event) => {
+                state = (state + 1) % 2
+                changePIXI()
+            })
+        
+    
 
diff --git a/lib/pixi/deepzoom/index.html b/lib/pixi/deepzoom/index.html
index bb4f524..c449129 100644
--- a/lib/pixi/deepzoom/index.html
+++ b/lib/pixi/deepzoom/index.html
@@ -1,38 +1,45 @@
 
-
-    PIXI Lib Doctests
-    
-    
-    
+    
+        PIXI Lib Doctests
+        
+        
+        
 
-    
+        
 
-    
+    
+    
+        
+        
+    
 
diff --git a/lib/pixi/flipeffect.html b/lib/pixi/flipeffect.html
index 042bdd9..2d0efd7 100644
--- a/lib/pixi/flipeffect.html
+++ b/lib/pixi/flipeffect.html
@@ -16,12 +16,12 @@
             

                 

                     
-                    
+                    
                 

                 
                 
-        

-            Flip Effect
-        

+        
lib.pixi.Flip Effect

         

             The flip effect, which simulates a flip between a front and back view of an object by means of a 3D
             rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as
@@ -63,10 +61,8 @@
             
             
  • If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.
    • 
         
-        
    
-            Example
-        
    
-        
    
+        
    Example
    
+        
    
             Canvas not supported
         
    
         
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-
-
-    
    Flippable
    
-    
    
-        Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted
-        (which can include another PIXI.DisplayObject), and turning it over to the back can
-        be adjusted by many parameters in speed and behavior.
-    
    
-    
    JavaScript API
    
-    
    Let's look at some flippable examples:

    
-    
-    
    
-        What you should see: Six flippable elements and one button.
-    
    
-    
+    
+    
+        
    lib.pixi.Flippable
    
+        
    
+            Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted (which can include
+            another PIXI.DisplayObject), and turning it over to the back can be adjusted by many parameters in speed and
+            behavior.
+        
    
+        
    JavaScript API
    
+        
    Let's look at some flippable examples:
    
+        
    
+        
+        
    What you should see: Six flippable elements and one button.
    
+        
-
+                    app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button)
+                },
+                { resolutionDependent: false }
+            )
+        
+    
+
diff --git a/lib/pixi/flippable.test.html b/lib/pixi/flippable.test.html
index fdec240..d9ab558 100644
--- a/lib/pixi/flippable.test.html
+++ b/lib/pixi/flippable.test.html
@@ -13,7 +13,7 @@
 
 
 
    
-	Functional Tests
+	lib.pixi.Functional Tests
 
    
 
    
 If you want to test the UI in all functional aspects, it'is important to be able
diff --git a/lib/pixi/forcelayout.html b/lib/pixi/forcelayout.html
index 162ea09..13edd9f 100644
--- a/lib/pixi/forcelayout.html
+++ b/lib/pixi/forcelayout.html
@@ -1,164 +1,180 @@
-
+
 
-
-    
+    
+        
 
-    PIXI ForceLayout
+        PIXI ForceLayout
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    ForceLayout
    
-    
    
-        Comparison of a D3 ForceLayout with a ForceAtlas 2 forcelayout.
-    
    
-    
    Let's look at the D3 ForceLayout:

    
-    
-    
+        
+    
+    
+        
    lib.pixi.ForceLayout
    
+        
    
+            Comparison of a D3 ForceLayout with a
+            ForceAtlas 2 forcelayout.
+        
    
+        
    Let's look at the D3 ForceLayout:
    
+        
    
+        
+        
 
-    // force simulation
-    //--------------------
-    const forceCollide = d3.forceCollide().radius(d => d.width / 2 + 1)
-    const simulation = d3.forceSimulation(sprites)
-        .on('tick', () => {
-            //forceCollide.radius(d => d.radius)
-        })
-        .force('collide', forceCollide)
-        .force('x', d3.forceX(app.center.x))
-        .force('y', d3.forceY(app.center.y))
-        .stop()
-        .force('radial', d3.forceRadial(d => {
-           return d.__random < .5 ? 60 : 160
-        }, app.center.x, app.center.y))
+        
    D3 ForceLayout with links:
    
+        
    
+        
+        
+                    app2.scene.addChild(...sprites)
 
-    
    D3 ForceLayout with links:

    
-    
-    
-
+                    d3.timeout(() => {
+                        simulation.restart()
+                    }, 1000)
+                },
+                { resolutionDependent: false }
+            )
+        
+    
+
diff --git a/lib/pixi/index.html b/lib/pixi/index.html
index 5b6cd78..90e8996 100644
--- a/lib/pixi/index.html
+++ b/lib/pixi/index.html
@@ -1,63 +1,71 @@
 
-
-    PIXI Lib Doctests
-    
-    
-    
+    
+        PIXI Lib Doctests
+        
+        
+        
 
-    
+        
 
-    
+    
+    
+        
+        
+    
 
diff --git a/lib/pixi/labeledgraphics.html b/lib/pixi/labeledgraphics.html
index fa8d4b5..a6424ae 100644
--- a/lib/pixi/labeledgraphics.html
+++ b/lib/pixi/labeledgraphics.html
@@ -1,84 +1,92 @@
-
+
 
-
-    
+    
+        
 
-    PIXI LabeledGraphics
+        PIXI LabeledGraphics
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    LabeledGraphics
    
-    
    
-        A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows
-        to place and reuse labels, i.e. PIXI.Text objects. The labels are cached by a given key
-        and only rendered anew if necessary.
-    
    
-    
    JavaScript API
    
-    
    Let's look at an example:

    
-    
-    
    
-        What you should see: A box with a label.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.LabeledGraphics
    
+        
    
+            A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows to place and reuse
+            labels, i.e. PIXI.Text objects. The labels are cached by a given key and only rendered anew if necessary.
+        
    
+        
    JavaScript API
    
+        
    Let's look at an example:
    
+        
    
+        
+        
    What you should see: A box with a label.
    
+        
-    
    Zoomable Labels
    
-    
    Labeled graphics can also be used to represent zoomable text columns in more complex layouts.
-        Use the mousewheel to zoom the following text column:
-    
    
+            app.scene.addChild(labeledBox)
+        
+        
    Zoomable Labels
    
+        
    
+            Labeled graphics can also be used to represent zoomable text columns in more complex layouts. Use the
+            mousewheel to zoom the following text column:
+        
    
 
-    
-    
-
-
+            app2.scene.addChild(column)
+        
+    
+
diff --git a/lib/pixi/list.html b/lib/pixi/list.html
index f1a5499..bad4006 100644
--- a/lib/pixi/list.html
+++ b/lib/pixi/list.html
@@ -1,191 +1,191 @@
-
+
 
-
-    
+    
+        
 
-    PIXI List
+        PIXI List
 
-    
-    
+        
+        
 
-    
-    
-    
+        
+        
+        
 
-    
-    
-
-
-    
    List
    
-    
    
-        Using the List class, any PIXI elements (PIXI.DisplayObject) can be included
-        in a scrollable list.
-    
    
-    
    JavaScript API
    
-    
    Let's look at some list examples:

    
-    
-    
    
-        What you should see: Three lists, one horizontal and two vertical.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.List
    
+        
    Using the List class, any PIXI elements (PIXI.DisplayObject) can be included in a scrollable list.
    
+        
    JavaScript API
    
+        
    Let's look at some list examples:
    
+        
    
+        
+        
    What you should see: Three lists, one horizontal and two vertical.
    
+        
 
-    // Add to scene
-    //--------------------
-    app.scene.addChild(elephantList, bambooList, textList)
+        
    List in a Scatter
    
+        
    A PixiJS UI List is displayed inside a ScatterObject.
    
+        
+        
    What you should see: A ScatterObject with a list in it.
    
+        
+            app2.loadTextures(
+                [
+                    './assets/jungle.jpg',
+                    './assets/elephant-1.jpg',
+                    './assets/elephant-2.jpg',
+                    './assets/elephant-3.jpg',
+                    './assets/elephant-4.jpg',
+                    './assets/elephant-5.jpg'
+                ],
+                (textures) => {
+                    // ScatterContainer
+                    //--------------------
+                    const scatterContainer = new ScatterContainer(app2.renderer, {
+                        showBounds: true,
+                        showPolygon: true,
+                        app: app2,
+                        stopEvents: true,
+                        claimEvents: true
+                    })
 
-    
    List in a Scatter
    
-    
    
-        A PixiJS UI List is displayed inside a ScatterObject.
-    
    
-    
-    
    
-        What you should see: A ScatterObject with a list in it.
-    
    
-    
-
+                    // Add to scene
+                    //--------------------
+                    jungle.addChild(elephantList)
+                },
+                { resolutionDependent: false }
+            )
+        
+    
+
diff --git a/lib/pixi/maps/geographics.html b/lib/pixi/maps/geographics.html
index 3591bd4..d59dcce 100644
--- a/lib/pixi/maps/geographics.html
+++ b/lib/pixi/maps/geographics.html
@@ -32,7 +32,7 @@
 
 
 
-    
    GeoGraphics
    
+    
    lib.pixi.maps.GeoGraphics
    
     
     GeoGraphics are graphical objects, that does not store the graphics information
         in screen space, but in geographical coordinates. Therefore GeoGraphics must be
         placed on GeoLayers to work properly. 
    
diff --git a/lib/pixi/maps/geojson.html b/lib/pixi/maps/geojson.html
index 6688a31..0f57639 100644
--- a/lib/pixi/maps/geojson.html
+++ b/lib/pixi/maps/geojson.html
@@ -85,7 +85,7 @@
 
 
 
-    
    GeoJson
    
+    
    lib.pixi.maps.GeoJson
    
     
    GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
         pairs
         to display one (or multiple) Point, Line or Polygon.
diff --git a/lib/pixi/maps/map.html b/lib/pixi/maps/map.html
index b83c9e5..9a5cd48 100644
--- a/lib/pixi/maps/map.html
+++ b/lib/pixi/maps/map.html
@@ -1,123 +1,103 @@
 
 
+    
+        
+        Map
 
-
-    
-    Map
+        
 
-    
+        
+        
+        
 
-    
-    
-    
+        
+        
+        
 
-    
-    
-    
-
-
-    
-
-
-
-    
    Map
    
-    
    
-        The Map class shows a geographical map using a scatter element.
-    
    
-
-    
    DeepZoomMap
    
-    
    Usually a DeepZoomMap will be used to display maps. It uses a DeepZoomImage to display the map in different resolutions depending on
-        the zoom factor.
    
-    
-
-    
-    
-    
-
-    
    ImageMap
    
-    
    Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
-        when there are no different tiles required or available.
    
-    
-
-    
-    
-    
+        
+
+        
    ImageMap
    
+        
    
+            Single images can be also used as maps. This can be useful for examples, debugging purposes or other
+            use-cases when there are no different tiles required or available.
+        
    
+         
+        
+        
-
-
-
\ No newline at end of file
+        
+    
+
diff --git a/lib/pixi/maps/mapapp.html b/lib/pixi/maps/mapapp.html
index d1df75d..7cafc20 100644
--- a/lib/pixi/maps/mapapp.html
+++ b/lib/pixi/maps/mapapp.html
@@ -1,163 +1,163 @@
 
 
+    
+        
+        MapApp
 
-
-    
-    MapApp
+        
 
-    
+        
+        
+        
 
-    
-    
-    
+        
+        
+        
 
-    
-    
-    
-
-
-    
-
-
-
-    
    MapApp
    
-    
    
-        This class extends the PIXIApp to simplify the process of rendering
-        Maps in the canvas. For that reason, it contains useful functions
-        for an easier handling of maps in the canvas.
-    
    
-    
-    
    
-    
    
-    
    WHAT TO SEE: The map should focus Paris.
    
-    
-    
+        
-
-
-
\ No newline at end of file
+            for (let [key, val] of Object.entries(capitals)) {
+                let cityBtn = document.createElement('button')
+                cityBtn.innerText = key
+                cityBtn.addEventListener('click', () => {
+                    app.mapLayer.map.moveTo(val)
+                })
+                cityControl.appendChild(cityBtn)
+            }
+        
+    
+
diff --git a/lib/pixi/maps/mapprojection.html b/lib/pixi/maps/mapprojection.html
index 2e477f4..9184cde 100644
--- a/lib/pixi/maps/mapprojection.html
+++ b/lib/pixi/maps/mapprojection.html
@@ -37,7 +37,7 @@
 
 
 
-    
    MapProjection
    
+    
    lib.pixi.maps.MapProjection
    
     
    The map projection calculates is responsible for transforming map coordinates to pixel coordinates and backwards.
    
 
     
    Static Squared World Map
    
diff --git a/lib/pixi/maps/maps.html b/lib/pixi/maps/maps.html
index 96c4d4f..f8bf83d 100644
--- a/lib/pixi/maps/maps.html
+++ b/lib/pixi/maps/maps.html
@@ -30,7 +30,7 @@
 
 
 
-    
    Maps
    
+    
    lib.pixi.maps.Maps
    
     
    Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods
         to
         handle the maps.
    
diff --git a/lib/pixi/maps/mapviewport.html b/lib/pixi/maps/mapviewport.html
index 4e1991f..f67ba79 100644
--- a/lib/pixi/maps/mapviewport.html
+++ b/lib/pixi/maps/mapviewport.html
@@ -1,163 +1,164 @@
 
 
+    
+        
+        MapViewport
 
-
-    
-    MapViewport
+        
 
-    
+        
+        
+        
 
-    
-    
-    
+        
+        
+        
 
-    
-    
-    
-
-
-    
-
-
-
-    
    MapViewport
    
-    
    
-        The MapViewport works under the hood of a map layer to track the informations about the current focus point and
-        zoom position.
-        This is important to maintain the same view when maps are changed.
-    
    
-    
-    
    
-    
    
-    
    WHAT TO SEE: The map should focus Paris.
    
-    
-    
+        
-
-
-
\ No newline at end of file
+            for (let [key, val] of Object.entries(capitals)) {
+                let cityBtn = document.createElement('button')
+                cityBtn.innerText = key
+                cityBtn.addEventListener('click', () => {
+                    app.mapLayer.map.moveTo(val)
+                })
+                cityControl.appendChild(cityBtn)
+            }
+        
+    
+
diff --git a/lib/pixi/maps/overlay.html b/lib/pixi/maps/overlay.html
index a9a63de..b2d920c 100644
--- a/lib/pixi/maps/overlay.html
+++ b/lib/pixi/maps/overlay.html
@@ -1,304 +1,277 @@
 
 
+    
+        
+        Overlay
 
-
-    
-    Overlay
+        
 
+        
+        
+        
 
+        
+        
+        
 
-    
+        
 
-    
-    
-    
+        
+    
 
-    
-
-
-    
-
-
-
-    
    Overlay
    
-    
-    
    
-        The overlayclass creates a convenient way to create and design
-        complex map overlays.
-    
    
-     
-    
-
-    
-
-    
+
+        
+
+        
-    
-
-
-
\ No newline at end of file
+        
+        
+    
+
diff --git a/lib/pixi/maps/scatter.html b/lib/pixi/maps/scatter.html
index 250c80e..5a45c8d 100644
--- a/lib/pixi/maps/scatter.html
+++ b/lib/pixi/maps/scatter.html
@@ -25,7 +25,7 @@
 
 
 
-    
    Scatter
    
+    
    lib.pixi.maps.Scatter
    
     
    The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.
    
 
     
    CoverScatter
    
diff --git a/lib/pixi/maps/utils.html b/lib/pixi/maps/utils.html
index c531761..877d09f 100644
--- a/lib/pixi/maps/utils.html
+++ b/lib/pixi/maps/utils.html
@@ -1,134 +1,146 @@
-
-
+
+
+    
+        
+        Utils
+        
+        
+        
+        
+        
+        
+        
 
-
-    
-    Utils
-    
-    
-    
-    
-    
-    
-    
+        
+    
 
-    
-
+    
+        
    lib.pixi.maps.Utils
    
+        
    Some utility functionalities for the Tuesch.
    
 
-
-    
    Utils
    
-    
    Some utility functionalities for the Tuesch.
    
+        
    Event Handler
    
+        
    
+            The event handler class generalizes a common design principle in javascript. When an event occurs, that is
+            of relevance for other objects, then this event should be sent out to all objects, that are interested in
+            that event. Objects interested in that event, subscribe the event handler and get notified via a callback
+            function.
+        
    
+        
 
-        // Remove all remaining elements.
-        eventHandler.empty()
-        eventHandler.call()
-        Doctest.expect(result.join(","), [].join(","))
-        result = []
+        
    DomUtils
    
 
+        Utility functions that help handling the DOM.
 
+        
    positionOnElement(element, position)
    
+        Function that returns the global position for a normalized position.
 
-    
+        
    
 
-    
    DomUtils
    
+        
-
-
-
-
\ No newline at end of file
+        
+    
+
diff --git a/lib/pixi/message.html b/lib/pixi/message.html
index dacbcf2..950bba4 100644
--- a/lib/pixi/message.html
+++ b/lib/pixi/message.html
@@ -1,78 +1,81 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Message
+        PIXI Message
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Message
    
-    
    
-        A message box is a timed popup window. By default, the message window appears in the upper right corner and disappears after 5 seconds.
-    
    
-    
    JavaScript API
    
-    
    Let's look at some message examples:

    
-    
-    
    
-        What you should see: Two buttons which start message windows.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Message
    
+        
    
+            A message box is a timed popup window. By default, the message window appears in the upper right corner and
+            disappears after 5 seconds.
+        
    
+        
    JavaScript API
    
+        
    Let's look at some message examples:
    
+        
    
+        
+        
    What you should see: Two buttons which start message windows.
    
+        
-
+            app.scene.addChild(button1, button2)
+            app.scene.addChild(button3)
+        
+    
+
diff --git a/lib/pixi/modal.html b/lib/pixi/modal.html
index 32333e1..2195361 100644
--- a/lib/pixi/modal.html
+++ b/lib/pixi/modal.html
@@ -1,169 +1,175 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Modal
+        PIXI Modal
 
-    
-    
+        
+        
 
-    
-    
-    
-    
-
-
-    
    Modal
    
-    
    
-        In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
-    
    
-    
    Let's look at some modal examples:

    
-    
-    
    
-        What you should see: Some buttons whichs starts different modal dialogs.
-    
    
-    
+        
+        
+        
+    
+    
+        
    lib.pixi.Modal
    
+        
    
+            In user interface design for computer applications, a modal window is a graphical control element
+            subordinate to an application's main window. It creates a mode that disables the main window, but keeps it
+            visible with the modal window as a child window in front of it. Users must interact with the modal window
+            before they can return to the parent application. This avoids interrupting the workflow on the main window.
+            Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
+        
    
+        
    Let's look at some modal examples:
    
+        
    
+        
+        
    What you should see: Some buttons whichs starts different modal dialogs.
    
+        
-
+            app.scene.addChild(button1, button2, button3, button4)
+            app.scene.addChild(button5, button6, button7)
+            app.scene.addChild(button8)
+        
+    
+
diff --git a/lib/pixi/popover.html b/lib/pixi/popover.html
index 8aa80f2..8eff788 100644
--- a/lib/pixi/popover.html
+++ b/lib/pixi/popover.html
@@ -1,42 +1,55 @@
-
+
 
-
-	
-	
-	
-	
-    
+    
+        
+        
+        
+        
+        
 
-    
-    
-
-
-	
    Popover
    
-	
    
-		Add small overlay content, like those found in iOS, to any element for housing secondary information.
-		The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or
-		touches an element. The difference is that the popover can contain much more content.
-	
    
-	
    Let's look at an example of a popover:
    
-	Canvas not supported
-	
+        
+    
+    
+        
    lib.pixi.Popover
    
+        
    
+            Add small overlay content, like those found in iOS, to any element for housing secondary information. The
+            Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or touches an
+            element. The difference is that the popover can contain much more content.
+        
    
+        
    Let's look at an example of a popover:
    
+        Canvas not supported
+        
-
+            let popover4 = new Popover({
+                title: 'Popover title 4',
+                text: text4,
+                x: 650,
+                y: 120,
+                width: 380,
+                placement: 'bottom',
+                titleStyle: {
+                    fontFamily: 'Arial',
+                    fontSize: 40,
+                    fontStyle: 'italic',
+                    fontWeight: 'bold',
+                    fill: ['#6b6acf', '#d7626c'], // gradient
+                    stroke: '#393879',
+                    strokeThickness: 6,
+                    dropShadow: true,
+                    dropShadowColor: '#e7bc51',
+                    dropShadowBlur: 4,
+                    dropShadowAngle: Math.PI / 6,
+                    dropShadowDistance: 3,
+                    wordWrap: true,
+                    wordWrapWidth: 440
+                },
+                textStyle: {
+                    fontFamily: 'Arial',
+                    fontSize: 10,
+                    fill: '#76a9c9',
+                    strokeThickness: 5,
+                    wordWrap: true
+                }
+            })
+            app.scene.addChild(popover4)
+        
+    
+
diff --git a/lib/pixi/popup.html b/lib/pixi/popup.html
index 5b5fad8..75969f6 100644
--- a/lib/pixi/popup.html
+++ b/lib/pixi/popup.html
@@ -1,77 +1,83 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Popup
+        PIXI Popup
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Popup
    
-    
    
-        This class represents a popup window that can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity.
-    
    
-    
    Let's look at some popup examples:

    
-    
-    
    
-        What you should see: Three popups and a button which opens a popup.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Popup
    
+        
    
+            This class represents a popup window that can be used to display an arbitrary view. The popup window is a
+            floating container that appears on top of the current activity.
+        
    
+        
    Let's look at some popup examples:
    
+        
    
+        
+        
    What you should see: Three popups and a button which opens a popup.
    
+        
-
+            app.scene.addChild(popup1, popup2, popup3)
+            app.scene.addChild(button1)
+        
+    
+
diff --git a/lib/pixi/popupmenu.html b/lib/pixi/popupmenu.html
index 13b8302..2f9da94 100644
--- a/lib/pixi/popupmenu.html
+++ b/lib/pixi/popupmenu.html
@@ -1,116 +1,135 @@
-
+
 
-
-    
+    
+        
 
-    PIXI PopupMenu
+        PIXI PopupMenu
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    PopupMenu
    
-    
    
-        A popup menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a click or touch operation. A context menu offers a limited set of choices that are available in the current state, or context, of the application to which the menu belongs. Usually the available choices are actions related to the selected object.
-    
    
-    
    Let's look at some popup menu examples:

    
-    
-    
    
-        What you should see: Some buttons whichs open popup menues.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.PopupMenu
    
+        
    
+            A popup menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a
+            click or touch operation. A context menu offers a limited set of choices that are available in the current
+            state, or context, of the application to which the menu belongs. Usually the available choices are actions
+            related to the selected object.
+        
    
+        
    Let's look at some popup menu examples:
    
+        
    
+        
+        
    What you should see: Some buttons whichs open popup menues.
    
+        
-
+                    app.scene.addChild(buttonGroup1)
+                },
+                { resolutionDependent: false }
+            )
+        
+    
+
diff --git a/lib/pixi/progress.html b/lib/pixi/progress.html
index 4e88944..29af4e1 100644
--- a/lib/pixi/progress.html
+++ b/lib/pixi/progress.html
@@ -1,76 +1,80 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Progress
+        PIXI Progress
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Progress
    
-    
    
-        A progress bar can be used to show a user how far along he/she is in a process.
-    
    
+        
+        
+    
+    
+        
    lib.pixi.Progress
    
+        
    A progress bar can be used to show a user how far along he/she is in a process.
    
 
-    
    Example 1
    
-    
    Let's look at the progress bar example:

    
-    
-    
    
-        What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
-    
    
-    
+            setTimeout(() => (progress1.progress = 10), 500)
+            setTimeout(() => (progress1.progress = 20), 800)
+            setTimeout(() => (progress1.progress = 50), 900)
+            setTimeout(() => (progress1.progress = 80), 1500)
+            setTimeout(() => (progress1.progress = 100), 1700)
+        
 
-    
    Example 2
    
-    
-    
    
-        What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
-    
    
-    
-
+            setTimeout(() => app2.progress(10), 1000)
+            setTimeout(() => app2.progress(30), 2000)
+            setTimeout(() => app2.progress(35), 2300)
+            setTimeout(() => app2.progress(50), 2800)
+            setTimeout(() => app2.progress(60), 3500)
+            setTimeout(() => app2.progress(90), 4500)
+            setTimeout(() => app2.progress(100), 5000)
+        
+    
+
diff --git a/lib/pixi/resolution.html b/lib/pixi/resolution.html
index 1d9e055..7924cf6 100644
--- a/lib/pixi/resolution.html
+++ b/lib/pixi/resolution.html
@@ -4,7 +4,8 @@
         
 
         PIXI Resolution Doctest
-
+        
+        
         
         
         
@@ -21,6 +22,7 @@
         
     
     
+        
    lib.pixi.Resolution
    
         
 
         
         
         
     
 
     
+        
    lib.pixi.Scatter Resolution
    
         
         
         
         
     
 
     
+        
    lib.pixi.Scatter Resolution 2
    
         Canvas not supported
         
+        
 
-
-    
-    PIXI Scatter Doctest
-    
-    
-    
-    
+        
+        
+    
 
-    
-    
-
+    
+        
    lib.pixi.Scatter
    
+        
    
+            Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to
+            "scattered" layouts. The PIXI scatter defined here is a specialization of the
+            abstract scatter pattern.
+        
    
+        
    
+            PIXI scatter are organized in ScatterContainer parent nodes and
+            DisplayObjectScatter child nodes.
+        
    
 
-
-    
    
-        Scatter
-    
    
-    
    
-        Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts.
-        The PIXI scatter defined here is a specialization of the
-        abstract scatter pattern.
-    
    
-    
    PIXI scatter are organized in
-        ScatterContainer parent nodes and
-        DisplayObjectScatter child nodes.
-        
    Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use
-            case that the scene itself is used as the
-            ScatterContainer. The
-            DisplayObjectScatter is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.
    
+        
    
+            Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a
+            common use case that the scene itself is used as the ScatterContainer. The
+            DisplayObjectScatter is simply used as a wrapper that makes any interative DisplayObject
+            zoomable, rotatable and translatable.
+        
    
         Canvas not supported
         
 
-        
    
-            Two ScatterContainers in one canvas-element
-        
    
+        
    Two ScatterContainers in one canvas-element
    
         
    
-            You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
-            ScatterContainer. You should interact the two images independently of each other.
+            You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the
+            King in the second ScatterContainer. You should interact the two images independently of each other.
         
    
         Canvas not supported
         
 
-        
    
-            Nested Scatter
-        
    
+        
    Nested Scatter
    
         
    
-            Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
-            another scatter is displayed on the map.
+            Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed
+            as scatter and another scatter is displayed on the map.
         
    
         Canvas not supported
         
-
+    
+
diff --git a/lib/pixi/scrollview.html b/lib/pixi/scrollview.html
index 99c370b..cbdf929 100644
--- a/lib/pixi/scrollview.html
+++ b/lib/pixi/scrollview.html
@@ -15,7 +15,7 @@
     
 
 
-    
    Scrollview
    
+    
    lib.pixi.Scrollview
    
     
    A configurable scrollbox designed for pixi.js.
    
     
    Features:
    
     
    
diff --git a/lib/pixi/slider.html b/lib/pixi/slider.html
index d6ebcc6..beb6a2a 100644
--- a/lib/pixi/slider.html
+++ b/lib/pixi/slider.html
@@ -1,100 +1,104 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Slider
+        PIXI Slider
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Slider
    
-    
    A slider is used whenever a numeric value within a certain range is to be obtained.
    
-    
    The advantage of a slider over text input is that it becomes impossible
-        for the user to enter a bad value. Any value that they can pick with the slider is valid.
    
-    
    Let's look at some slider examples:

    
-    
-    
    
-        What you should see: Many sliders with very different styling and behaviour.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Slider
    
+        
    A slider is used whenever a numeric value within a certain range is to be obtained.
    
+        
    
+            The advantage of a slider over text input is that it becomes impossible for the user to
+            enter a bad value. Any value that they can pick with the slider is valid.
+        
    
+        
    Let's look at some slider examples:
    
+        
    
+        
+        
    What you should see: Many sliders with very different styling and behaviour.
    
+        
-
+            app.scene.addChild(slider1, slider2, slider3, slider4)
+            app.scene.addChild(button1, slider5)
+        
+    
+
diff --git a/lib/pixi/stylus.html b/lib/pixi/stylus.html
index 6159505..12c5f71 100644
--- a/lib/pixi/stylus.html
+++ b/lib/pixi/stylus.html
@@ -1,156 +1,156 @@
-
+
 
+    
+        
 
-
-    
+        PIXI Stylus
 
-    PIXI Stylus
+        
+        
 
-    
-    
+        
 
-    
+        
+        
+        
+    
 
-    
-    
-    
-
-
-
-    
    Stylus
    
-    
    The Stylus class extends the PIXI.Graphics class and allows to draw into
-        a graphics object. Select the pen tool in the following example app and draw into the canvas.
-    
    
-    
-    
    
-        What you should see: A blank sytlus canvas.
-    
    
-    
-    
    
-        References
-    
    
-    
-
\ No newline at end of file
+            const app = new StylusApp({
+                view: canvas,
+                width: 640,
+                height: 480,
+                autoResize: false
+            })
+            window.app = app
+            app.setup()
+            app.run()
+        
+        
    References
    
+        
+    
+
diff --git a/lib/pixi/switch.html b/lib/pixi/switch.html
index b35e4fd..412be57 100644
--- a/lib/pixi/switch.html
+++ b/lib/pixi/switch.html
@@ -1,125 +1,143 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Switch
+        PIXI Switch
 
-    
-    
+        
+        
 
-    
+        
 
-    
-    
-    
-
-
-    
    Switch
    
-    
    A switch is a visual toggle between two mutually exclusive states—on and off.
    
-    
    Consider adjusting a switch’s appearance to match the style of your app. If it works well in your app, change the colors of a switch in its on and off states or use custom imagery to represent the switch.
    
-    
    Use switches in table rows only. Switches are intended for use in tables, such as in a list of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation bar, use a button instead, and provide two distinct icons that communicate the states.
    
-    
    Avoid adding labels to describe the values of a switch. Switches are either on or off. Providing labels that describe these states is redundant and clutters the interface.
    
-    
    Consider using switches to manage the availability of related interface elements. Switches often affect other content onscreen. Enabling the Airplane Mode switch in Settings, for example, disables certain other settings, such as Cellular and Personal Hotspot. Disabling the Wi-Fi switch in Settings > Wi-Fi causes available networks and other options to disappear.
    
-    
    Let's look at some switch examples:

    
-    
-    
    
-        What you should see: Many switches with very different styling and behaviour.
-    
    
-    
+        
+        
+    
+    
+        
    lib.pixi.Switch
    
+        
    A switch is a visual toggle between two mutually exclusive states—on and off.
    
+        
    
+            Consider adjusting a switch’s appearance to match the style of your app. If it works well
+            in your app, change the colors of a switch in its on and off states or use custom imagery to represent the
+            switch.
+        
    
+        
    
+            Use switches in table rows only. Switches are intended for use in tables, such as in a list
+            of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation
+            bar, use a button instead, and provide two distinct icons that communicate the states.
+        
    
+        
    
+            Avoid adding labels to describe the values of a switch. Switches are either on or off.
+            Providing labels that describe these states is redundant and clutters the interface.
+        
    
+        
    
+            Consider using switches to manage the availability of related interface elements. Switches
+            often affect other content onscreen. Enabling the Airplane Mode switch in Settings, for example, disables
+            certain other settings, such as Cellular and Personal Hotspot. Disabling the Wi-Fi switch in Settings >
+            Wi-Fi causes available networks and other options to disappear.
+        
    
+        
    Let's look at some switch examples:
    
+        
    
+        
+        
    What you should see: Many switches with very different styling and behaviour.
    
+        
-
+            app.scene.addChild(switch1, switch2, switch3)
+            app.scene.addChild(switch4, switch5, switch6, switch7)
+        
+    
+
diff --git a/lib/pixi/text-transform.html b/lib/pixi/text-transform.html
index 60faa13..894bf11 100644
--- a/lib/pixi/text-transform.html
+++ b/lib/pixi/text-transform.html
@@ -1,162 +1,166 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Text
+        PIXI Text
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-
-
-    
    Text
    
-    
    
-        The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).
-    
    
-    
    Let's look at some tooltip examples:

    
-    
-    
    
-        What you should see: Ten colored circles with different tooltips.
-    
    
-    
+    
+    
+        
    lib.pixi.Text
    
+        
    
+            The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction
+            with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a
+            tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do
+            not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed
+            when using a mouse).
+        
    
+        
    Let's look at some tooltip examples:
    
+        
    
+        
+        
    What you should see: Ten colored circles with different tooltips.
    
+        
-
+                    const sliderSprite = new Slider({
+                        value: 50,
+                        tooltip: 'Scale PIXI.Sprite',
+                        container: app.view,
+                        onUpdate: function () {
+                            const value = scaleSprite(this.value)
+                            sprite.scale.set(value, value)
+                        }
+                    })
+                    sliderSprite.x = (app.size.width / 6) * 5 - sliderSprite.width / 2
+                    sliderSprite.y = app.size.height - 10 - sliderSprite.height
+                    app.scene.addChild(sliderSprite)
+                },
+                { resolutionDependent: false }
+            )
+        
+    
+
diff --git a/lib/pixi/text.html b/lib/pixi/text.html
index 8fc6e8d..1c55a2f 100644
--- a/lib/pixi/text.html
+++ b/lib/pixi/text.html
@@ -1,44 +1,45 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Text
+        PIXI Text
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Text
    
-    
    
-        The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
-        and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make 
-        buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set 
-        the button type to "checkbox".
-    
    
-    
    JavaScript API
    
-    
    Let's look at some text examples:

    
-    
-    
    
-        What you should see: Many texts with very different styling and behaviour.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Text
    
+        
    
+            The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
+            dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
+            active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
+            between active/inactive, set the button type to "checkbox".
+        
    
+        
    JavaScript API
    
+        
    Let's look at some text examples:
    
+        
    
+        
+        
    What you should see: Many texts with very different styling and behaviour.
    
+        
-
-
\ No newline at end of file
+            app.scene.addChild(text1)
+        
+    
+
diff --git a/lib/pixi/theme.html b/lib/pixi/theme.html
index 90f2f0d..3acef57 100644
--- a/lib/pixi/theme.html
+++ b/lib/pixi/theme.html
@@ -1,123 +1,118 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Theme
+        PIXI Theme
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Theme
    
-    
    
-        The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
-        and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make 
-        buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set 
-        the button type to "checkbox".
-    
    
-    
    Let's look at some button examples:

    
-    
-    
    
-        What you should see: Many buttons with very different styling and behaviour.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Theme
    
+        
    
+            The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
+            dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
+            active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
+            between active/inactive, set the button type to "checkbox".
+        
    
+        
    Let's look at some button examples:
    
+        
    
+        
+        
    What you should see: Many buttons with very different styling and behaviour.
    
+        
-
-
\ No newline at end of file
+            app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
+            app.scene.addChild(switchDark, switchLight, switchRed)
+            app.scene.addChild(buttonYellow)
+        
+    
+
diff --git a/lib/pixi/tooltip.html b/lib/pixi/tooltip.html
index a32f1e2..6168939 100644
--- a/lib/pixi/tooltip.html
+++ b/lib/pixi/tooltip.html
@@ -1,176 +1,189 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Tooltip
+        PIXI Tooltip
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Tooltip
    
-    
    
-        The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).
-    
    
-    
    Let's look at some tooltip examples:

    
-    
-    
    
-        What you should see: Ten colored circles with different tooltips.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Tooltip
    
+        
    
+            The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction
+            with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a
+            tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do
+            not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed
+            when using a mouse).
+        
    
+        
    Let's look at some tooltip examples:
    
+        
    
+        
+        
    What you should see: Ten colored circles with different tooltips.
    
+        
-
+            app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
+            app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
+        
+    
+
diff --git a/lib/pixi/volatile.html b/lib/pixi/volatile.html
index b49b5c8..0dcdf23 100644
--- a/lib/pixi/volatile.html
+++ b/lib/pixi/volatile.html
@@ -1,64 +1,70 @@
-
+
 
-
-    
+    
+        
 
-    PIXI Volatile
+        PIXI Volatile
 
-    
-    
+        
+        
 
-    
-    
+        
+        
 
-    
-    
-
-
-    
    Volatile
    
-    
    
-        The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a predetermined direction.
-    
    
-    
    Let's look at some volatile examples:

    
-    
-    
    
-        What you should see: Buttons which starts an volatile animation.
-    
    
-    
+        
+    
+    
+        
    lib.pixi.Volatile
    
+        
    
+            The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a
+            predetermined direction.
+        
    
+        
    Let's look at some volatile examples:
    
+        
    
+        
+        
    What you should see: Buttons which starts an volatile animation.
    
+        
-
+            app.scene.addChild(button1, button2)
+        
+    
+
diff --git a/lib/poppable.html b/lib/poppable.html
index fad3d18..550e1d6 100644
--- a/lib/poppable.html
+++ b/lib/poppable.html
@@ -1,49 +1,42 @@
-
+
 
+    
+        Poppable Doctest
+        
+        
+        
+        
+        
+        
+    
 
-
-    Poppable Doctest
-    
-    
-    
-    
-    
-    
-
+    
+        
    lib.Poppables
    
+        
    
+            Poppables present information on demand in a given context. This is an abstract base class for Popup menus
+            and other contextual information like image highlights. It's main purpose is to ensure that only one
+            poppable at a time can be shown in a given context. Note that in an application multiple poppables can be
+            shown in different context at the same time.
+        
    
+        
    
+            Let's look at an example of a popup class. In this class the register method is called by the constructor.
+            The class also implements a close method which is called if the second poppable is registered.
+            
-    
    
-
-
+                let context = window
+                let a = new ConcretePoppable(context)
+                let b = new ConcretePoppable(context)
+            
+        
    
+    
+
diff --git a/lib/popup.html b/lib/popup.html
index 18cca46..eb7be29 100644
--- a/lib/popup.html
+++ b/lib/popup.html
@@ -13,7 +13,7 @@
 
 
     
    
-        Popups
+        lib.Popup
     
    
     
    
         Popups present context information on demand at a specific place.
diff --git a/lib/popupmenu.html b/lib/popupmenu.html
index 531f2fe..60c2015 100644
--- a/lib/popupmenu.html
+++ b/lib/popupmenu.html
@@ -12,7 +12,7 @@
 
 
     
    
-        Popup Menus
+        lib.Popup Menus
     
    
     
    
         Popup menus are a simple but effective solution to the problem that context dependent commands like "Delete", "Show", "Open"
diff --git a/lib/scatter.html b/lib/scatter.html
index e1589b0..6a0b5f0 100644
--- a/lib/scatter.html
+++ b/lib/scatter.html
@@ -1,70 +1,70 @@
-
+
 
-
-	
-	Scatter Doctest
-	
-	
-	
-    
-	
-	
+        
+        
+        
-
-
-
    
-	Scatter
-
    
-
    
-Scatter objects are UI elements that can be rotated, scaled or moved around,
-which typically leads to "scattered" layouts. Scatters come in two flavours:
-DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter
-work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here
-we describe the more basic DOM scatter.
-
    
-
    Let's look at an example.
    
-
    
-    
-    
-    
+            
+            
 
-    
-        Canvas not supported.
-    
-
    
+            
+                Canvas not supported.
+            
+        
    
 
-
-
    
-	Interactive Content
-
    
-
    
-Scatter objects may contain interactive HTML structures. There is one major flag that allows
-to simulate click events by using taps. If the scatter detects a tap it looks for clickable
-elements under or nearby the event position and calls the click handler. Thus gestures
-can be disambiguated as moves, zooms. or taps.
+                        maxScale: 1.5
+                    })
+                    dx += 300
+                    angle = -angle
+                }
+            }
+            app.run()
+            animatePolygons()
+        
+        
    Interactive Content
    
+        
    
+            Scatter objects may contain interactive HTML structures. There is one major flag that allows to simulate
+            click events by using taps. If the scatter detects a tap it looks for clickable elements under or nearby the
+            event position and calls the click handler. Thus gestures can be disambiguated as moves, zooms. or taps.
+            Note that on touch devices you can tap beside the object if you use an object that implements the
+            ITapDelegate interface. An ITapDelegate allowes a distance that can be configured by allowClickDistance. The
+            default value is 44px but here we use 88px.
+        
    
 
-Note that on touch devices you can tap beside the object if you use an object that implements the ITapDelegate interface. 
-An ITapDelegate allowes a distance that can be configured by allowClickDistance. The default value is 44px but here we
-use 88px.
-
    
+        
    
+            
    
+                
+                A Link
+                
    
+                    A Div with click handler
+                
    
+                
+                    
+                    
+                    
+                
+            
    
+        
    
 
-
    
-  
-    
    
-        
-        A Link
-        
    A Div with click handler
    
-        
-            
-            
-            
-        
-    
    
-
    
+        
-
-
+            let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88 })
+            new DOMScatter(interactiveContent, contentContainer, {
+                x: 44,
+                y: 44,
+                width: 274,
+                height: 184,
+                tapDelegate,
+                throwVisibility: 88,
+                minScale: 0.5,
+                maxScale: 1.5
+            })
+        
+    
+
diff --git a/lib/test.html b/lib/test.html
index 1ea5640..dd8123e 100644
--- a/lib/test.html
+++ b/lib/test.html
@@ -13,7 +13,7 @@
 
 
 
    
-	Functional Tests
+	lib.Functional Tests
 
    
 
    
 If you want to test the UI in all functional aspects, it'is important to be able
diff --git a/lib/uitest.html b/lib/uitest.html
index f97204d..9a0d8d0 100644
--- a/lib/uitest.html
+++ b/lib/uitest.html
@@ -1,91 +1,96 @@
-
+
 
-
-	
-	UITest Doctest
-	
-	
-	
-    
-    
-
-
-
    
-	UITest
-
    
-
    
-    Testing the user interface (UI) of an application is a critical part of the software development lifecycle.  Most end users focus on the usability and aesthetics of the applications they interact with and are blind to the underlying source code and other technical aspects that make those apps functional. A poorly designed UI will undoubtedly lead to unhappy customers, so it’s important to test early and often to prevent as many bugs as possible from reaching the UI level.
-    

    
-    Graphical user interface (GUI) testing is the process of testing an application’s visual elements to ensure the images and other features that are visible to the customer behave and look as expected. This article describes what GUI testing is, its importance, and what features your GUI testing tools should have to help you ensure proper test coverage.
-
    
-
    Let's look at an example.
    
-
    
-    
-    
-    
    
-    
-    
-    
    
-    
-    
-    
    
-    
-        
-    
-    
    
-    
-        
-    
-
    
+    
+        
+        UITest Doctest
+        
+        
+        
+        
+        
+    
+    
+        
    lib.UITest
    
+        
    
+            Testing the user interface (UI) of an application is a critical part of the software development lifecycle.
+            Most end users focus on the usability and aesthetics of the applications they interact with and are blind to
+            the underlying source code and other technical aspects that make those apps functional. A poorly designed UI
+            will undoubtedly lead to unhappy customers, so it’s important to test early and often to prevent as many
+            bugs as possible from reaching the UI level.
+            

    
+            Graphical user interface (GUI) testing is the process of testing an application’s visual elements to ensure
+            the images and other features that are visible to the customer behave and look as expected. This article
+            describes what GUI testing is, its importance, and what features your GUI testing tools should have to help
+            you ensure proper test coverage.
+        
    
+        
    Let's look at an example.
    
+        
    
+            
+            
+            
    
+            
+            
+            
    
+            
+            
+            
    
+            
+                
+            
+            
    
+            
+                
+            
+        
    
 
-
-
-
+            const test5 = new UITest({ onComplete: () => console.log('completed') })
+            for (let i = 1; i < 6; i++) {
+                test5.tap('#circle2', i, { eventType: 'click' })
+            }
+            test5.start()
+        
+    
+
diff --git a/lib/utils.html b/lib/utils.html
index 9b6c472..870c81d 100644
--- a/lib/utils.html
+++ b/lib/utils.html
@@ -1,173 +1,163 @@
-
+
 
-
-	
-	Doctests
-	
-	
-	
-	
-
-
-
    
-
    
-	Utils
-
    
-
    
-Utility functions can be used across modules. To avoid name conflicts most
-of them are defined as static class functions (i.e. the class mainly serves
-as a namespace). Typically this class name is in the plural, e.g. "Points", "Dates" to ensure that
-existing class names like "Point", "Date" are not in conflict with the namespace.
-
    
-
    
-    Cycle
-
    
-
    Cycles simplify to switch between values in a cyclic way.
    
+    
+        
+        Doctests
+        
+        
+        
+        
+    
+    
+        
    
+            
    lib.Utils
    
+            
    
+                Utility functions can be used across modules. To avoid name conflicts most of them are defined as static
+                class functions (i.e. the class mainly serves as a namespace). Typically this class name is in the
+                plural, e.g. "Points", "Dates" to ensure that existing class names like "Point", "Date" are not in
+                conflict with the namespace.
+            
    
+            
    Cycle
    
+            
    Cycles simplify to switch between values in a cyclic way.
    
 
-
 
-    let cycle = new Cycle(1, 2, 3)
-    Doctest.expect(cycle.next(), 1)
-    Doctest.expect(cycle.next(), 2)
-    Doctest.expect(cycle.next(), 3)
-    Doctest.expect(cycle.next(), 1)
+            
    Dates
    
+            
+                let mar1913 = new Date(1913, 2, 1)
+                Doctest.expect(Dates.daysInMonth(mar1913), 31)
+            
 
-
    
-	Dates
-
    
-
+            
    The following iterators guarantee that correct labels are generated:
    
 
-    let feb1900 = new Date(1900, 1, 1)
-    Doctest.expect(Dates.daysInMonth(feb1900), 28)
-    // 1900 was no leap year
-    let feb2000 = new Date(2000, 1, 1)
-    Doctest.expect(Dates.daysInMonth(feb2000), 29)
-    // 2000 was a leap year
+            
 
-    let mar1913 = new Date(1913, 2, 1)
-    Doctest.expect(Dates.daysInMonth(mar1913), 31)
-
+            
    Sets
    
+            
    
+                Unfortunately the common set operations of other languages are missing in JavaScript. Therefore we use a
+                Sets helper class with static methods:
+            
    
+            
+            
    Polygon
    
+            
    
+                An intersection of polygons is needed to compute the overlap of rotated rectangles. We are using the
+                library jspolygon.js but provide a
+                more convenient API that is compatible with arrays of absolute points.
+            
    
+            
    
+                To detect intersection with another Polygon object, the instance method uses the Separating Axis
+                Theorem. It returns false if there is no intersection, or an object if there is. The object contains 2
+                fields, overlap and axis. Moving the other polygon by overlap on axis will get the polygons out of
+                intersection.
+            
    
+            
    
+                The following triangles show an overlap. Moving the triangle along the red line would remove the
+                overlap.
+            
    
+            Canvas not supported
+            
+            
    Low Pass Filter
    
+            
    
+                Low Pass Filter muffles fast (high-frequency) changes to the signal. For more information visit the
+                wikipedia article.
+            
    
+            
-
    
-The following iterators guarantee that correct labels are generated:
    
+                Doctest.expect(lpf.next(20), 10.0)
+                Doctest.expect(lpf.next(20), 12.5)
+                Doctest.expect(lpf.next(20), 14.375)
+                Doctest.expect(lpf.next(20), 15.78125)
 
-
-
-
    
-	Sets
-
    
-
    
-    Unfortunately the common set operations of other languages are missing in JavaScript. Therefore we use
-    a Sets helper class with static methods:
-
    
-
-
    
-	Polygon
-
    
-
    An intersection of polygons is needed to compute the overlap of rotated rectangles.
-We are using the library jspolygon.js but provide a more convenient API that
-is compatible with arrays of absolute points.
-
    
-
    To detect intersection with another Polygon object, the instance
-    method uses the Separating Axis Theorem. It returns false
-    if there is no intersection, or an object if there is. The object
-    contains 2 fields, overlap and axis. Moving the other polygon by overlap
-    on axis will get the polygons out of intersection.
-
    
-
    The following triangles show an overlap. Moving the triangle along the red line would remove the overlap.
-
    
-Canvas not supported
-
-
    
-    Low Pass Filter
-
    
-
    
-    Low Pass Filter muffles fast (high-frequency) changes to the signal. 
-    For more information visit the wikipedia article.
-
    
-
-
    
-	References
-
    
-
-
-
    
-
+                lpf = new LowPassFilter(0.2)
+                lpf.setup([10, 10, 10, 10, 10, 10, 10, 10, 10, 10])
+                Doctest.expect(lpf.next(20), 12.0)
+                Doctest.expect(lpf.next(10), 10.32)
+            
+            
    References
    
+            
+        
    
+    
+