diff options
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 /basicsuite/webengine | |
parent | 6168bce3ae5da77cb3cf4cb0003e2d2c9db36b62 (diff) |
Add local CSS tetrahedron example and home page to webengine demo
Change-Id: I9f1db26846dc43215fc3f987e41fa177ed1f64cc
Reviewed-by: Zeno Albisser <zeno.albisser@digia.com>
Diffstat (limited to 'basicsuite/webengine')
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/index.html | 25 | ||||
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/screenshot.png | bin | 0 -> 7405 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/style.css | 109 | ||||
-rw-r--r-- | basicsuite/webengine/content/webgl/screenshot.png | bin | 0 -> 17367 bytes | |||
-rw-r--r-- | basicsuite/webengine/main.qml | 27 | ||||
-rw-r--r-- | basicsuite/webengine/ui/PageView.qml | 81 |
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 Binary files differnew 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 Binary files differnew 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() + } + } + } + } +} |