Merge commit '3473ec2b9a38a703310b773e51ce059a8423e379' into releaseQtEE_v3.1.0

* commit '3473ec2b9a38a703310b773e51ce059a8423e379': (32 commits)
  [Doc] Use symbolic links for demo preview images
  Changed the audio track on the Qt_EnterpriseEmbedded_1080p.mp4 video.
  Fix demo descriptions.
  launchersettings: make ip field span two columns
  Remove deleted demos also from doc
  Update all VirtualKeyboard import to version 1.1
  Doc: Bump version to 3.1.0
  Doc: Content/language improvement for About QtEE demo.
  Disable GraphicalEffects demo on beagleboneblack
  about: fit text properly to the box
  Fix Meet Qt Enterprise Embedded video url on startup
  Fix a typo in the new About presentation
  About Boot to Qt-demo update
  Update Enterprise gallery demo description
  Remove incorrect assingment of QUrl to bool
  Add Meet Qt Enterprise Embedded video to mediaplayer demo
  disable camera and sensor demo from Toradex Apalis iMX6
  webengine: enable the browser example on android-nexus7v2
  Delete obsoleted demos from Boot2Qt launcher
  webengine: Add offline Morphing Cubes demo
  ...

Change-Id: Ic39278a1bc92386b9b9fe15e9d90097a67656a37

1 files changed, 492 insertions, 0 deletions

diff --git a/basicsuite/webengine/content/rubiks/js/rubik.js b/basicsuite/webengine/content/rubiks/js/rubik.js
new file mode 100644
index 0000000..4e6cf28
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/js/rubik.js
@@ -0,0 +1,492 @@
+Array.prototype.clone = function() {
+    var c = [];
+    var len = this.length;
+    for (var i=0;i<len;i++) { c.push(this[i]); }
+    return c;
+}
+
+Array.prototype.random = function() {
+    return this[Math.floor(Math.random()*this.length)];
+}
+
+var Face = OZ.Class();
+Face.SIZE	= 100;
+Face.LEFT	= 0;
+Face.RIGHT	= 1;
+Face.TOP	= 2;
+Face.BOTTOM	= 3;
+Face.FRONT	= 4;
+Face.BACK	= 5;
+
+Face.ROTATION = [
+    [Face.TOP, Face.FRONT, Face.BOTTOM, Face.BACK].reverse(),
+    [Face.LEFT, Face.BACK, Face.RIGHT, Face.FRONT].reverse(),
+    [Face.LEFT, Face.BOTTOM, Face.RIGHT, Face.TOP].reverse()
+];
+
+Face.prototype.init = function(cube, type) {
+    this._cube = cube;
+    this._type = type;
+    this._color = null;
+    this._node = OZ.DOM.elm("div", {className:"face face"+type, width:Face.SIZE+"px", height:Face.SIZE+"px", position:"absolute", left:"0px", top:"0px"});
+    OZ.CSS3.set(this._node, "box-sizing", "border-box");
+//	OZ.CSS3.set(this._node, "backface-visibility", "hidden");
+
+    switch (type) {
+        case Face.LEFT:
+            OZ.CSS3.set(this._node, "transform-origin", "100% 50%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(-"+Face.SIZE+"px, 0px, 0px) rotateY(-90deg)");
+        break;
+        case Face.RIGHT:
+            OZ.CSS3.set(this._node, "transform-origin", "0% 50%");
+            OZ.CSS3.set(this._node, "transform", "translate3d("+Face.SIZE+"px, 0px, 0px) rotateY(90deg)");
+        break;
+        case Face.TOP:
+            OZ.CSS3.set(this._node, "transform-origin", "50% 100%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, -"+Face.SIZE+"px, 0px) rotateX(90deg)");
+        break;
+        case Face.BOTTOM:
+            OZ.CSS3.set(this._node, "transform-origin", "50% 0%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, "+Face.SIZE+"px, 0px) rotateX(-90deg)");
+        break;
+        case Face.FRONT:
+        break;
+        case Face.BACK:
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, 0px, -"+Face.SIZE+"px) rotateY(180deg)");
+        break;
+    }
+}
+
+Face.prototype.getCube = function() {
+    return this._cube;
+}
+
+Face.prototype.getNode = function() {
+    return this._node;
+}
+
+Face.prototype.getType = function() {
+    return this._type;
+}
+
+Face.prototype.setColor = function(color) {
+    this._color = color;
+    this._node.style.backgroundColor = color;
+}
+
+Face.prototype.getColor = function() {
+    return this._color;
+}
+
+var Cube = OZ.Class();
+Cube.prototype.init = function(position) {
+    this._rotation = null;
+    this._position = position;
+    this._node = OZ.DOM.elm("div", {className:"cube", position:"absolute", width:Face.SIZE+"px", height:Face.SIZE+"px"});
+    this._faces = {};
+    this._tmpFaces = {};
+    OZ.CSS3.set(this._node, "transform-style", "preserve-3d");
+
+    this._update();
+}
+
+Cube.prototype.getFaces = function() {
+    return this._faces;
+}
+
+Cube.prototype.setFace = function(type, color) {
+    if (!(type in this._faces)) {
+        var face = new Face(this, type);
+        this._node.appendChild(face.getNode());
+        this._faces[type] = face;
+    }
+    this._faces[type].setColor(color);
+}
+
+Cube.prototype.setRotation = function(rotation) {
+    this._rotation = rotation;
+    this._update();
+}
+
+Cube.prototype.complete = function() {
+    for (var i=0;i<6;i++) {
+        if (i in this._faces) { continue; }
+        this.addFace(i, "black");
+    }
+}
+
+Cube.prototype.prepareColorChange = function(sourceCube, rotation) {
+    this._tmpFaces = {};
+    var sourceFaces = sourceCube.getFaces();
+    for (var p in sourceFaces) {
+        var sourceType = parseInt(p);
+        var targetType = this._rotateType(sourceType, rotation);
+        this._tmpFaces[targetType] = sourceFaces[sourceType].getColor();
+    }
+}
+
+Cube.prototype.commitColorChange = function() {
+//	var parent = this._node.parentNode;
+//	parent.removeChild(this._node);
+
+    OZ.DOM.clear(this._node);
+    this._faces = {};
+    for (var p in this._tmpFaces) {
+        var type = parseInt(p);
+        this.setFace(type, this._tmpFaces[p]);
+    }
+    this._tmpFaces = {};
+
+    this._rotation = null;
+    this._update();
+//	parent.appendChild(this._node);
+}
+
+Cube.prototype._rotateType = function(type, rotation) {
+    for (var i=0;i<3;i++) {
+        if (!rotation[i]) { continue; }
+        var faces = Face.ROTATION[i];
+        var index = faces.indexOf(type);
+        if (index == -1) { continue; } /* no rotation available */
+        index = (index + rotation[i] + faces.length) % faces.length;
+        return faces[index];
+    }
+
+    return type;
+}
+
+Cube.prototype._update = function() {
+    var transform = "";
+    transform += "translate3d("+(-Face.SIZE/2)+"px, "+(-Face.SIZE/2)+"px, "+(-Face.SIZE/2)+"px) ";
+    if (this._rotation) { transform += this._rotation + " "; }
+
+    var half = Math.floor(Rubik.SIZE/2);
+    var x = this._position[0];
+    var y = this._position[1];
+    var z = -this._position[2];
+    x -= half;
+    y -= half;
+    z += half + 1/2;
+    transform += "translate3d("+(x*Face.SIZE)+"px, "+(y*Face.SIZE)+"px, "+(z*Face.SIZE)+"px)";
+
+    var prop = OZ.CSS3.getProperty("transform");
+    var val = this._rotation ? prop + " 300ms" : "";
+    OZ.CSS3.set(this._node, "transition", val);
+
+    OZ.CSS3.set(this._node, "transform", transform);
+}
+
+Cube.prototype.getPosition = function() {
+    return this._position;
+}
+
+Cube.prototype.getNode = function() {
+    return this._node;
+}
+
+Cube.prototype.getFaces = function() {
+    return this._faces;
+}
+
+var Rubik = OZ.Class();
+Rubik.SIZE = 3;
+Rubik.prototype.init = function() {
+    this._cubes = [];
+    this._faces = [];
+    this._faceNodes = [];
+    this._help = {};
+    this._drag = {
+        ec: [],
+        mouse: [],
+        face: null
+    };
+
+    this._rotation = Quaternion.fromRotation([1, 0, 0], -35).multiply(Quaternion.fromRotation([0, 1, 0], 45));
+    this._node = OZ.DOM.elm("div", {position:"absolute", left:"50%", top:"55%", width:"0px", height:"0px"});
+    document.body.appendChild(this._node);
+
+    OZ.CSS3.set(document.body, "perspective", "460px");
+    OZ.CSS3.set(this._node, "transform-style", "preserve-3d");
+
+    this._build();
+    this._update();
+    OZ.Event.add(document.body, "mousedown touchstart", this._dragStart.bind(this));
+
+    setTimeout(this.randomize.bind(this), 500);
+}
+
+Rubik.prototype.randomize = function() {
+    var remain = 10;
+    var cb = function() {
+        remain--;
+        if (remain > 0) {
+            this._rotateRandom();
+        } else {
+            OZ.Event.remove(e);
+
+            this._help.a = OZ.DOM.elm("p", {innerHTML:"Drag or swipe the background to rotate the whole cube."});
+            this._help.b = OZ.DOM.elm("p", {innerHTML:"Drag or swipe the cube to rotate its layers."});
+            document.body.appendChild(this._help.a);
+            document.body.appendChild(this._help.b);
+            OZ.CSS3.set(this._help.a, "transition", "opacity 500ms");
+            OZ.CSS3.set(this._help.b, "transition", "opacity 500ms");
+
+        }
+    }
+    var e = OZ.Event.add(null, "rotated", cb.bind(this));
+    this._rotateRandom();
+}
+
+Rubik.prototype._rotateRandom = function() {
+    var method = "_rotate" + ["X", "Y", "Z"].random();
+    var dir = [-1, 1].random();
+    var layer = Math.floor(Math.random()*Rubik.SIZE);
+    this[method](dir, layer);
+}
+
+Rubik.prototype._update = function() {
+    OZ.CSS3.set(this._node, "transform", "translateZ(" + (-Face.SIZE/2 - Face.SIZE) + "px) " + this._rotation.toRotation() + " translateZ("+(Face.SIZE/2)+"px)");
+}
+
+Rubik.prototype._eventToFace = function(e) {
+    if (document.elementFromPoint) {
+        e = (e.touches ? e.touches[0] : e);
+        var node = document.elementFromPoint(e.clientX, e.clientY);
+    } else {
+        var node = OZ.Event.target(e);
+    }
+    var index = this._faceNodes.indexOf(node);
+    if (index == -1) { return null; }
+    return this._faces[index];
+}
+
+Rubik.prototype._dragStart = function(e) {
+    this._faces = [];
+    this._faceNodes = [];
+    for (var i=0;i<this._cubes.length;i++) {
+        var faces = this._cubes[i].getFaces();
+        for (var p in faces) {
+            this._faces.push(faces[p]);
+            this._faceNodes.push(faces[p].getNode());
+        }
+    }
+
+    OZ.Event.prevent(e);
+    this._drag.face = this._eventToFace(e);
+    e = (e.touches ? e.touches[0] : e);
+    this._drag.mouse = [e.clientX, e.clientY];
+
+    this._drag.ec.push(OZ.Event.add(document.body, "mousemove touchmove", this._dragMove.bind(this)));
+    this._drag.ec.push(OZ.Event.add(document.body, "mouseup touchend", this._dragEnd.bind(this)));
+}
+
+Rubik.prototype._dragMove = function(e) {
+    if (e.touches && e.touches.length > 1) { return; }
+
+    if (this._drag.face) { /* check second face for rotation */
+        var thisFace = this._eventToFace(e);
+        if (!thisFace || thisFace == this._drag.face) { return; }
+        this._dragEnd();
+        this._rotate(this._drag.face, thisFace);
+    } else { /* rotate cube */
+        e = (e.touches ? e.touches[0] : e);
+        var mouse = [e.clientX, e.clientY];
+        var dx = mouse[0] - this._drag.mouse[0];
+        var dy = mouse[1] - this._drag.mouse[1];
+        var norm = Math.sqrt(dx*dx+dy*dy);
+        if (!norm) { return; }
+        var N = [-dy/norm, dx/norm];
+
+        this._drag.mouse = mouse;
+        this._rotation = Quaternion.fromRotation([N[0], N[1], 0], norm/2).multiply(this._rotation);
+        this._update();
+    }
+}
+
+Rubik.prototype._dragEnd = function(e) {
+    while (this._drag.ec.length) { OZ.Event.remove(this._drag.ec.pop()); }
+
+    if (!this._drag.face && this._help.a) {
+        this._help.a.style.opacity = 0;
+        this._help.a = null;
+    }
+}
+
+Rubik.prototype._rotate = function(face1, face2) {
+    var t1 = face1.getType();
+    var t2 = face2.getType();
+    var pos1 = face1.getCube().getPosition();
+    var pos2 = face2.getCube().getPosition();
+
+    /* find difference between cubes */
+    var diff = 0;
+    var diffIndex = -1;
+    for (var i=0;i<3;i++) {
+        var d = pos1[i]-pos2[i];
+        if (d) {
+            if (diffIndex != -1) { return; } /* different in >1 dimensions */
+            diff = (d > 0 ? 1 : -1);
+            diffIndex = i;
+        }
+    }
+
+    if (t1 == t2) { /* same face => diffIndex != -1 */
+        switch (t1) {
+            case Face.FRONT:
+            case Face.BACK:
+                var coef = (t1 == Face.FRONT ? 1 : -1);
+                if (diffIndex == 0) { this._rotateY(coef*diff, pos1[1]); } else { this._rotateX(coef*diff, pos1[0]); }
+            break;
+
+            case Face.LEFT:
+            case Face.RIGHT:
+                var coef = (t1 == Face.LEFT ? 1 : -1);
+                if (diffIndex == 2) { this._rotateY(-coef*diff, pos1[1]); } else { this._rotateZ(coef*diff, pos1[2]); }
+            break;
+
+            case Face.TOP:
+            case Face.BOTTOM:
+                var coef = (t1 == Face.TOP ? 1 : -1);
+                if (diffIndex == 0) { this._rotateZ(-coef*diff, pos1[2]); } else { this._rotateX(-coef*diff, pos1[0]); }
+            break;
+        }
+        return;
+    }
+
+    switch (t1) { /* different face => same cube, diffIndex == 1 */
+        case Face.FRONT:
+        case Face.BACK:
+            var coef = (t1 == Face.FRONT ? 1 : -1);
+            if (t2 == Face.LEFT) { this._rotateY(1 * coef, pos1[1]); }
+            if (t2 == Face.RIGHT) { this._rotateY(-1 * coef, pos1[1]); }
+            if (t2 == Face.TOP) { this._rotateX(1 * coef, pos1[0]); }
+            if (t2 == Face.BOTTOM) { this._rotateX(-1 * coef, pos1[0]); }
+        break;
+
+        case Face.LEFT:
+        case Face.RIGHT:
+            var coef = (t1 == Face.LEFT ? 1 : -1);
+            if (t2 == Face.FRONT) { this._rotateY(-1 * coef, pos1[1]); }
+            if (t2 == Face.BACK) { this._rotateY(1 * coef, pos1[1]); }
+            if (t2 == Face.TOP) { this._rotateZ(1 * coef, pos1[2]); }
+            if (t2 == Face.BOTTOM) { this._rotateZ(-1 * coef, pos1[2]); }
+        break;
+
+        case Face.TOP:
+        case Face.BOTTOM:
+            var coef = (t1 == Face.TOP ? 1 : -1);
+            if (t2 == Face.FRONT) { this._rotateX(-1 * coef, pos1[0]); }
+            if (t2 == Face.BACK) { this._rotateX(1 * coef, pos1[0]); }
+            if (t2 == Face.LEFT) { this._rotateZ(-1 * coef, pos1[2]); }
+            if (t2 == Face.RIGHT) { this._rotateZ(1 * coef, pos1[2]); }
+        break;
+    }
+
+}
+
+Rubik.prototype._rotateX = function(dir, layer) {
+    var cubes = [];
+    for (var i=0;i<Rubik.SIZE*Rubik.SIZE;i++) {
+        cubes.push(this._cubes[layer + i*Rubik.SIZE]);
+    }
+    this._rotateCubes(cubes, [dir, 0, 0]);
+}
+
+Rubik.prototype._rotateY = function(dir, layer) {
+    var cubes = [];
+    for (var i=0;i<Rubik.SIZE;i++) {
+        for (var j=0;j<Rubik.SIZE;j++) {
+            cubes.push(this._cubes[j + layer*Rubik.SIZE + i*Rubik.SIZE*Rubik.SIZE]);
+        }
+    }
+    this._rotateCubes(cubes, [0, -dir, 0]);
+}
+
+Rubik.prototype._rotateZ = function(dir, layer) {
+    var cubes = [];
+    var offset = layer * Rubik.SIZE * Rubik.SIZE;
+    for (var i=0;i<Rubik.SIZE*Rubik.SIZE;i++) {
+        cubes.push(this._cubes[offset+i]);
+    }
+    this._rotateCubes(cubes, [0, 0, dir]);
+}
+
+Rubik.prototype._rotateCubes = function(cubes, rotation) {
+    var suffixes = ["X", "Y", ""];
+
+    var prefix = OZ.CSS3.getPrefix("transition");
+    if (prefix === null) {
+        this._finalizeRotation(cubes, rotation);
+    } else {
+        var cb = function() {
+            OZ.Event.remove(e);
+            this._finalizeRotation(cubes, rotation);
+        }
+        var e = OZ.Event.add(document.body, "webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd", cb.bind(this));
+
+        var str = "";
+        for (var i=0;i<3;i++) {
+            if (!rotation[i]) { continue; }
+            str = "rotate" + suffixes[i] + "(" + (90*rotation[i]) + "deg)";
+        }
+        for (var i=0;i<cubes.length;i++) { cubes[i].setRotation(str); }
+    }
+
+}
+
+/**
+ * Remap colors
+ */
+Rubik.prototype._finalizeRotation = function(cubes, rotation) {
+    var direction = 0;
+    for (var i=0;i<3;i++) {
+        if (rotation[i]) { direction = rotation[i]; }
+    }
+
+    if (rotation[0]) { direction *= -1; } /* FIXME wtf */
+
+    var half = Math.floor(Rubik.SIZE/2);
+
+    for (var i=0;i<cubes.length;i++) {
+        var x = i % Rubik.SIZE - half;
+        var y = Math.floor(i / Rubik.SIZE) - half;
+
+        var source = [y*direction + half, -x*direction + half];
+        var sourceIndex = source[0] + Rubik.SIZE*source[1];
+
+        cubes[i].prepareColorChange(cubes[sourceIndex], rotation);
+    }
+
+    for (var i=0;i<cubes.length;i++) { cubes[i].commitColorChange(); }
+
+    setTimeout(function() {
+        if (this._help.b) {
+            this._help.b.style.opacity = 0;
+            this._help.b = null;
+        }
+
+        this.dispatch("rotated");
+    }.bind(this), 100);
+}
+
+Rubik.prototype._build = function() {
+    for (var z=0;z<Rubik.SIZE;z++) {
+        for (var y=0;y<Rubik.SIZE;y++) {
+            for (var x=0;x<Rubik.SIZE;x++) {
+                var cube = new Cube([x, y, z]);
+                this._cubes.push(cube);
+
+                if (z == 0) { cube.setFace(Face.FRONT, "red"); }
+                if (z == 2) { cube.setFace(Face.BACK, "blue"); }
+
+                if (x == 0) { cube.setFace(Face.LEFT, "green"); }
+                if (x == 2) { cube.setFace(Face.RIGHT, "yellow"); }
+
+                if (y == 0) { cube.setFace(Face.TOP, "cyan"); }
+                if (y == 2) { cube.setFace(Face.BOTTOM, "teal"); }
+                this._node.appendChild(cube.getNode());
+            }
+        }
+    }
+
+}