Add local CSS tetrahedron example and home page to webengine demo

Change-Id: I9f1db26846dc43215fc3f987e41fa177ed1f64cc Reviewed-by: Zeno Albisser <zeno.albisser@digia.com>
author: Andras Becsi <andras.becsi@digia.com> 2014-05-20 14:17:13 +0200
committer: Zeno Albisser <zeno.albisser@digia.com> 2014-05-20 16:13:39 +0300
commit: d2741203d3096aba2b58f340a02a8bac12a4a555 (patch)
tree: 6de7a26801261db6c97b878b7a77b016ae24005b
parent: 6168bce3ae5da77cb3cf4cb0003e2d2c9db36b62 (diff)
6 files changed, 241 insertions, 1 deletions
diff --git a/basicsuite/webengine/content/csstetrahedron/index.html b/basicsuite/webengine/content/csstetrahedron/index.html
new file mode 100644
index 0000000..540890b
--- /dev/null
+++ b/basicsuite/webengine/content/csstetrahedron/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <title>A tetrahedron built with CSS 3D transforms</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body bgcolor="black">
+<div id="header"></div>
+<article id="viewport">
+    <section id="pyramid">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </section>
+</article>
+<script language="javascript">
+var container = document.getElementById("header");
+container.innerHTML = "<div style=\"font-family: monospace; font-size: 13px; margin: 5em auto 0px; padding: 2em; width: 600px; "
+                      + "height 100px; text-align: center; background-color: rgb(238, 238, 238);\">" + navigator.userAgent + "</div>";
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/basicsuite/webengine/content/csstetrahedron/screenshot.png b/basicsuite/webengine/content/csstetrahedron/screenshot.png
new file mode 100644
index 0000000..1c1283f
--- /dev/null
+++ b/basicsuite/webengine/content/csstetrahedron/screenshot.png
diff --git a/basicsuite/webengine/content/csstetrahedron/style.css b/basicsuite/webengine/content/csstetrahedron/style.css
new file mode 100644
index 0000000..70d872a
--- /dev/null
+++ b/basicsuite/webengine/content/csstetrahedron/style.css
@@ -0,0 +1,109 @@
+#pyramid {
+    position: relative;
+    margin: 0px auto;
+    height: 350px;
+    width: 100px;
+    -webkit-transform-style: preserve-3d;
+    -webkit-animation: spin 10s linear infinite;
+    -webkit-transform-origin: 116px 200px 116px;
+
+    -moz-transform-style: preserve-3d;
+    -moz-animation: spin 10s linear infinite;
+    -moz-transform-origin: 116px 200px 116px;
+
+    -ms-transform-style: preserve-3d;
+    -ms-animation: spin 10s linear infinite;
+    -ms-transform-origin: 116px 200px 116px;
+
+    transform-style: preserve-3d;
+    animation: spin 10s linear infinite;
+    transform-origin: 116px 200px 116px;
+
+}
+
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  to {
+    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  to {
+    -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+@-ms-keyframes spin {
+  from {
+    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  to {
+    -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  to {
+    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+#pyramid > div {
+    position: absolute;
+    border-style: solid;
+    border-width: 200px 0 200px 346px;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin:    0 0;
+    -ms-transform-origin:     0 0;
+    transform-origin:         0 0;
+}
+
+/* Put some text on each face */
+#pyramid > div:after {
+    position: absolute;
+    content: "QtWebEngine";
+    color: #fff;
+    left: -250px;
+    text-align: center;
+}
+
+#pyramid > div:first-child  {
+    border-color: transparent transparent transparent rgba(40, 150, 10, 0.6);
+    -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
+    -moz-transform:    rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
+    -ms-transform:     rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
+    transform:         rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
+}
+
+#pyramid > div:nth-child(2) {
+    border-color: transparent transparent transparent rgba(30, 120, 10, 0.6);
+    -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
+    -moz-transform:    rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
+    -ms-transform:     rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
+    transform:         rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
+}
+
+#pyramid > div:nth-child(3) {
+    border-color: transparent transparent transparent rgba(20, 100, 10, 0.9);
+    -webkit-transform: rotateX(60deg) rotateY(19.5deg);
+    -moz-transform:    rotateX(60deg) rotateY(19.5deg);
+    -ms-transform:     rotateX(60deg) rotateY(19.5deg);
+    transform:         rotateX(60deg) rotateY(19.5deg);
+}
+
+#pyramid > div:nth-child(4) {
+    border-color: transparent transparent transparent rgba(10, 80, 10, 0.8);
+    -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
+    -moz-transform:    rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
+    -ms-transform:     rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
+    transform:         rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
+}
diff --git a/basicsuite/webengine/content/webgl/screenshot.png b/basicsuite/webengine/content/webgl/screenshot.png
new file mode 100644
index 0000000..388b45b
--- /dev/null
+++ b/basicsuite/webengine/content/webgl/screenshot.png
diff --git a/basicsuite/webengine/main.qml b/basicsuite/webengine/main.qml
index 299d779..cded371 100644
--- a/basicsuite/webengine/main.qml
+++ b/basicsuite/webengine/main.qml
@@ -44,6 +44,8 @@ import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 import QtWebEngine 0.9
 
+import "ui"
+
 Rectangle {
     id: root
     z: 0
@@ -53,7 +55,8 @@ Rectangle {
     width: 1280
     height: 800
 
-    property url defaultUrl: "content/webgl/helloqt.html"
+    property url defaultUrl: "about:blank"
+    function load(url) { mainWebView.url = url }
 
     WebEngineView {
         id: mainWebView
@@ -67,6 +70,15 @@ Rectangle {
         }
     }
 
+    PageView {
+        id: pageView
+        visible: true
+        opacity: 1
+        Behavior on opacity {
+            NumberAnimation { duration: 250 }
+        }
+    }
+
     MultiPointTouchArea {
         z: showToolBarButton.z
         width: parent.width
@@ -164,6 +176,19 @@ Rectangle {
                 iconSource: mainWebView.loading ? "ui/icons/process-stop.png" : "ui/icons/view-refresh.png"
                 onClicked: mainWebView.loading ? mainWebView.stop() : mainWebView.reload()
             }
+            ToolButton {
+                id: homeButton
+                width: 20
+                Layout.fillHeight: true
+                iconSource: pageView.opacity == 1 ? "ui/icons/window.png" : "ui/icons/home.png"
+                onClicked: {
+                    if (pageView.opacity == 0) {
+                        pageView.opacity = 1
+                    } else {
+                        pageView.opacity = 0
+                    }
+                }
+            }
             TextField {
                 id: addressBar
                 focus: true
diff --git a/basicsuite/webengine/ui/PageView.qml b/basicsuite/webengine/ui/PageView.qml
new file mode 100644
index 0000000..ac95306
--- /dev/null
+++ b/basicsuite/webengine/ui/PageView.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: For any questions to Digia, please use the contact form at
+** http://qt.digia.com/
+**
+** This file is part of the examples of the Qt Enterprise Embedded.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Layouts 1.1
+
+Rectangle {
+    id: root
+    color: "darkgrey"
+    visible: true
+    anchors {
+        fill: parent
+    }
+    RowLayout {
+        anchors {
+            centerIn: root
+        }
+        Image {
+            sourceSize.width: 300
+            sourceSize.height: 175
+            source: "../content/webgl/screenshot.png"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    load(Qt.resolvedUrl("../content/webgl/helloqt.html"))
+                    homeButton.clicked()
+                }
+            }
+        }
+        Image {
+            sourceSize.width: 300
+            sourceSize.height: 175
+            source: "../content/csstetrahedron/screenshot.png"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    load(Qt.resolvedUrl("../content/csstetrahedron/index.html"))
+                    homeButton.clicked()
+                }
+            }
+        }
+    }
+}
author	Andras Becsi <andras.becsi@digia.com>	2014-05-20 14:17:13 +0200
committer	Zeno Albisser <zeno.albisser@digia.com>	2014-05-20 16:13:39 +0300
commit	d2741203d3096aba2b58f340a02a8bac12a4a555 (patch)
tree	6de7a26801261db6c97b878b7a77b016ae24005b
parent	6168bce3ae5da77cb3cf4cb0003e2d2c9db36b62 (diff)