diff options
84 files changed, 3044 insertions, 0 deletions
diff --git a/mobile-hybrid-demo/.gitignore b/mobile-hybrid-demo/.gitignore new file mode 100644 index 0000000..a1f0596 --- /dev/null +++ b/mobile-hybrid-demo/.gitignore @@ -0,0 +1,103 @@ + +callgrind.out.* +pcviewer.cfg +*~ +*.a +*.la +*.core +*.moc +*.o +*.obj +*.orig +*.swp +*.rej +*.so +*.pbxuser +*.mode1 +*.mode1v3 +*_pch.h.cpp +*_resource.rc +.#* +*.*# +core +.qmake.cache +.qmake.vars +*.prl +tags +.DS_Store +*.debug +Makefile* +*.prl +*.app +*.pro.user +*.pro.user.2.2pre5 +*.gcov +moc_*.cpp +ui_*.h +.com.apple.timemachine.supported +qrc_*.cpp + +# xemacs temporary files +*.flc + +# Vim temporary files +.*.swp + +# Visual Studio generated files +*.ib_pdb_index +*.idb +*.ilk +*.pdb +*.sln +*.suo +*.vcproj +*vcproj.*.*.user +*.ncb + +# MinGW generated files +*.Debug +*.Release + +.DS_Store +.pch +.rcc +*.app + +# Directories to ignore +# --------------------- + +debug +release +tmp +.rcc +.pch +.metadata +qtc_packaging + +# Symbian build system generated files +# --------------------- + +ABLD.BAT +bld.inf +*.mmp +*.mk +*.rss +*.loc +!s60main.rss +*.pkg +plugin_commonU.def +*.qtplugin +*.sis +*.sisx +*.lst + +# Generated by abldfast.bat from devtools. +.abldsteps.* + +# Carbide project files +# --------------------- +.project +.cproject +.make.cache +*.d + diff --git a/mobile-hybrid-demo/HTML5.svg b/mobile-hybrid-demo/HTML5.svg new file mode 100755 index 0000000..399ba1b --- /dev/null +++ b/mobile-hybrid-demo/HTML5.svg @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> +<radialGradient id="SVGID_1_" cx="1123.1543" cy="2244.2637" r="41.0273" gradientTransform="matrix(1 0 0 1 -1090.6543 -2220.7617)" gradientUnits="userSpaceOnUse"> + <stop offset="0" style="stop-color:#2466CC"/> + <stop offset="1" style="stop-color:#000030"/> +</radialGradient> +<path fill="url(#SVGID_1_)" d="M64,59.495c0,2.485-2.02,4.509-4.506,4.509H4.506C2.018,64.001,0,61.982,0,59.495V4.508 + C0,2.02,2.018,0,4.506,0h54.988C61.98,0,64,2.02,64,4.508V59.495z"/> +<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="853.0557" y1="948.3672" x2="853.0557" y2="1012.3711" gradientTransform="matrix(1 0 0 1 -821.0547 -948.3613)"> + <stop offset="0" style="stop-color:#047391"/> + <stop offset="0.2404" style="stop-color:#5791FF"/> + <stop offset="1" style="stop-color:#04264A"/> +</linearGradient> +<path fill="url(#SVGID_2_)" d="M59.494,0.006H4.506C2.018,0.006,0,2.025,0,4.514v54.987c0,2.487,2.019,4.506,4.506,4.509h54.988 + c2.486,0,4.506-2.021,4.506-4.509V4.514C64,2.025,61.98,0.006,59.494,0.006z M61.615,59.501c0,1.171-0.954,2.124-2.121,2.124H4.509 + c-1.171-0.003-2.124-0.956-2.124-2.124V4.514c0-1.17,0.953-2.123,2.121-2.123h54.988c1.167,0,2.121,0.953,2.121,2.123V59.501 + L61.615,59.501z"/> +<g> + <path fill="#E34F26" d="M15.867,50.639L12.26,10.166h39.68l-3.607,40.473l-16.278,4.573"/> + <path fill="#EF652A" d="M32.144,51.693l13.109-3.607l3.08-34.665H32.144"/> + <path fill="#EBEBEB" d="M32.144,28.466h-6.599l-0.44-5.103h7.039v-4.927h-0.089H19.651l0.087,1.32l1.233,13.726h11.173V28.466z + M32.144,41.4h-0.089l-5.542-1.496l-0.352-3.959h-2.64h-2.287l0.616,7.832l10.205,2.813h0.089V41.4z"/> + <path fill="#FFFFFF" d="M32.055,28.466v5.017h6.159l-0.615,6.422L32.055,41.4v5.189l10.206-2.813l0.09-0.883l1.143-13.108 + l0.176-1.32h-1.408H32.055z M32.055,18.436v3.08v1.848l0,0h12.053l0,0l0,0l0.09-1.056l0.264-2.551l0.088-1.32H32.055z"/> +</g> +<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1122.6543" y1="2252.7354" x2="1122.6543" y2="2220.7656" gradientTransform="matrix(1 0 0 1 -1090.6543 -2220.7617)"> + <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.51"/> + <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.48"/> +</linearGradient> +<path opacity="0.39" fill="url(#SVGID_3_)" enable-background="new " d="M59.494,0.004H4.506C2.018,0.004,0,2.023,0,4.512v24.266 + c10.057,2.055,21.027,3.195,32.529,3.195c11.102,0,21.707-1.062,31.471-2.981V4.512C64,2.023,61.98,0.004,59.494,0.004z"/> +</svg> diff --git a/mobile-hybrid-demo/deployment.pri b/mobile-hybrid-demo/deployment.pri new file mode 100755 index 0000000..e89f80d --- /dev/null +++ b/mobile-hybrid-demo/deployment.pri @@ -0,0 +1,112 @@ +# checksum 0x2939 version 0x20001 +# This file was generated by an application wizard of Qt Creator. +# The code below handles deployment to Symbian and Maemo, aswell as copying +# of the application data to shadow build directories on desktop. +# It is recommended not to modify this file, since newer versions of Qt Creator +# may offer an updated version of it. + +defineTest(qtcAddDeployment) { +for(deploymentfolder, DEPLOYMENTFOLDERS) { + item = item$${deploymentfolder} + itemsources = $${item}.sources + $$itemsources = $$eval($${deploymentfolder}.source) + itempath = $${item}.path + $$itempath= $$eval($${deploymentfolder}.target) + export($$itemsources) + export($$itempath) + DEPLOYMENT += $$item +} + +MAINPROFILEPWD = $$PWD + +symbian { + ICON = $${TARGET}.svg + TARGET.EPOCHEAPSIZE = 0x20000 0x2000000 + contains(DEFINES, ORIENTATIONLOCK):LIBS += -lavkon -leikcore -lcone + contains(DEFINES, NETWORKACCESS):TARGET.CAPABILITY += NetworkServices +} else:win32 { + + copyCommand = + for(deploymentfolder, DEPLOYMENTFOLDERS) { + source = $$MAINPROFILEPWD/$$eval($${deploymentfolder}.source) + source = $$replace(source, /, \\) + sourcePathSegments = $$split(source, \\) + target = $$OUT_PWD/$$eval($${deploymentfolder}.target)/$$last(sourcePathSegments) + target = $$replace(target, /, \\) + !isEqual(source,$$target) { + !isEmpty(copyCommand):copyCommand += && + copyCommand += $(COPY_DIR) \"$$source\" \"$$target\" + } + } + !isEmpty(copyCommand) { + copyCommand = @echo Copying application data... && $$copyCommand + copydeploymentfolders.commands = $$copyCommand + first.depends = $(first) copydeploymentfolders + export(first.depends) + export(copydeploymentfolders.commands) + QMAKE_EXTRA_TARGETS += first copydeploymentfolders + } +} else:unix { + maemo5 { + installPrefix = /opt/usr + desktopfile.path = /usr/share/applications/hildon + } else { + installPrefix = /usr/local + desktopfile.path = /usr/share/applications + copyCommand = + for(deploymentfolder, DEPLOYMENTFOLDERS) { + source = $$MAINPROFILEPWD/$$eval($${deploymentfolder}.source) + source = $$replace(source, \\, /) + macx { + target = $$OUT_PWD/$${TARGET}.app/Contents/Resources/$$eval($${deploymentfolder}.target) + } else { + target = $$OUT_PWD/$$eval($${deploymentfolder}.target) + } + target = $$replace(target, \\, /) + sourcePathSegments = $$split(source, /) + targetFullPath = $$target/$$last(sourcePathSegments) + !isEqual(source,$$targetFullPath) { + !isEmpty(copyCommand):copyCommand += && + copyCommand += $(MKDIR) \"$$target\" + copyCommand += && $(COPY_DIR) \"$$source\" \"$$target\" + } + } + !isEmpty(copyCommand) { + copyCommand = @echo Copying application data... && $$copyCommand + copydeploymentfolders.commands = $$copyCommand + first.depends = $(first) copydeploymentfolders + export(first.depends) + export(copydeploymentfolders.commands) + QMAKE_EXTRA_TARGETS += first copydeploymentfolders + } + } + for(deploymentfolder, DEPLOYMENTFOLDERS) { + item = item$${deploymentfolder} + itemfiles = $${item}.files + $$itemfiles = $$eval($${deploymentfolder}.source) + itempath = $${item}.path + $$itempath = $${installPrefix}/share/$${TARGET}/$$eval($${deploymentfolder}.target) + export($$itemfiles) + export($$itempath) + INSTALLS += $$item + } + icon.files = $${TARGET}.png + icon.path = /usr/share/icons/hicolor/64x64/apps + desktopfile.files = $${TARGET}.desktop + target.path = $${installPrefix}/bin + export(icon.files) + export(icon.path) + export(desktopfile.files) + export(desktopfile.path) + export(target.path) + INSTALLS += desktopfile icon target +} + +export (ICON) +export (INSTALLS) +export (DEPLOYMENT) +export (TARGET.EPOCHEAPSIZE) +export (TARGET.CAPABILITY) +export (LIBS) +export (QMAKE_EXTRA_TARGETS) +} diff --git a/mobile-hybrid-demo/html/base.css b/mobile-hybrid-demo/html/base.css new file mode 100755 index 0000000..ccf322d --- /dev/null +++ b/mobile-hybrid-demo/html/base.css @@ -0,0 +1,109 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +div#content { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + color: red; + -webkit-user-select:none; +} +div#mask { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + color: red; + -webkit-user-select:none; +} + +div#output { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 30px; + color: red; + z-index: 1000; + -webkit-user-select:none; +} + +div#loadingScreen { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + opacity: 1; + background: url(http://code.qt.io/images/menu_bg.jpg); + z-index:10000; + -webkit-transition-property: opacity; + -webkit-transition-duration: 0.5s; + -webkit-user-select:none; +} + +div#loadedBar { + position: absolute; + background: #FFFFFF; + -webkit-transition-property: width; + -webkit-transition-duration: 0.1s; + -webkit-user-select:none; + z-index: 1; +} + +div#toLoadBar { + position: absolute; + background: #000000; + -webkit-user-select:none; +} + +body#body { + overflow:hidden; + background: black; +} + +img#close { + position:absolute; + opacity:0; + top:0px; + z-index:300; +} +img#play { + position:absolute; + opacity:0; + top:0px; + -webkit-transition-property: opacity; + -webkit-transition-duration: 0.5s; + -webkit-user-select:none; + z-index:300; +} diff --git a/mobile-hybrid-demo/html/canvas.css b/mobile-hybrid-demo/html/canvas.css new file mode 100755 index 0000000..dbd5c32 --- /dev/null +++ b/mobile-hybrid-demo/html/canvas.css @@ -0,0 +1,37 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +canvas#canvas { + position: absolute; + width:360px; + height: 640px; + top: 0px; + left:0px; +} diff --git a/mobile-hybrid-demo/html/canvas.js b/mobile-hybrid-demo/html/canvas.js new file mode 100755 index 0000000..346733b --- /dev/null +++ b/mobile-hybrid-demo/html/canvas.js @@ -0,0 +1,161 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// this effect demonstrates a fullscreen canvas and the drawing speed of it +// it simulates a gravity system where the center of gravity is moved by touching the screen + +var canvasEffect = { + timer: null, + context: null, + cogravitypos: new Array(180, 320, 500), + gravityballpos: new Array(), + gravityballvelocity: new Array(), + gravityballcolor: new Array(), + tick: 0, + click: function (x, y) {}, + swipe: function (dir) {}, + drag: function (amt, x, y) { + // move the center of gravity + canvasEffect.cogravitypos[0] = x; + canvasEffect.cogravitypos[1] = y; + }, + releaseDrag: function (amt) {}, + randomcolor: function () { + // helper function to generate a random color fitting the color scheme. + var c = (127 + Math.round(Math.random() * 127)) + (Math.round(Math.random() * 100) << 8) + (Math.round(Math.random() * 25) << 16); + return c.toString(16); + }, + init: function () { + console.log("canvasEffect init."); + gete("content").style.background = "black"; + canvasEffect.canvas = document.createElement("canvas"); + canvasEffect.canvas.setAttribute("id", "canvas"); + gete("content").appendChild(canvasEffect.canvas); + gete("canvas").style.width = "360px"; + gete("canvas").style.height = "640px"; + canvasEffect.canvas.width = 360; + canvasEffect.canvas.height = 640; + if (canvasEffect.canvas && canvasEffect.canvas.getContext) { + canvasEffect.context = canvasEffect.canvas.getContext("2d"); + } + for (n = 0; n < 5; n++) { + // generate initial gravity balls + // gravityballpos also includes mass as the third element + canvasEffect.gravityballpos.push(new Array(Math.random() * 360, Math.random() * 640, Math.random() * 20 + 1)); + canvasEffect.gravityballvelocity.push(new Array(Math.random() * 10 - 5, Math.random() * 10 - 5)); + canvasEffect.gravityballcolor.push("#" + canvasEffect.randomcolor()); + } + }, + start: function () { + output("start gravity."); + canvasEffect.context.lineWidth = 1.0; + canvasEffect.context.strokeStyle = "#103040"; + canvasEffect.context.globalCompositeOperation = "lighter"; + canvasEffect.timer = setTimeout("canvasEffect.draw()", 1); + }, + deinit: function () { + delete canvasEffect.context; + gete("content").style.background = "white"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + + }, + resize: function () {}, + images: function () { + // no images to preload in this effect + return new Array(); + }, + gravity: function (source, dest) { + // calculates the gravity between two objects + out = new Array(); + dx = (dest[0] - source[0]); + dy = (dest[1] - source[1]); + d = Math.sqrt(dx * dx + dy * dy); + dx = dx / d; + dy = dy / d; + var f = Math.min(6, (source[2] * dest[2]) / (d * d)); + out.push(dx * f); + out.push(dy * f); + return out; + }, + draw: function () { + canvasEffect.tick++; + if (canvasEffect.tick % 10 == 0) { + // darken the screen every 10 ticks to fade out the old image + canvasEffect.context.globalCompositeOperation = "source-over"; + canvasEffect.context.fillStyle = "#000000"; + canvasEffect.context.globalAlpha = 0.025; + canvasEffect.context.fillRect(0, 0, 360, 640); + canvasEffect.context.globalCompositeOperation = "lighter"; + canvasEffect.context.globalAlpha = 1.0; + } + for (b = 0; b < 5; b++) { + canvasEffect.context.strokeStyle = canvasEffect.gravityballcolor[b]; + // draw lines from the old position to the new position and to the center of gravity + canvasEffect.context.beginPath(); + canvasEffect.context.moveTo(canvasEffect.gravityballpos[b][0], canvasEffect.gravityballpos[b][1]); + // move the gravity ball to the new position + canvasEffect.gravityballpos[b][0] += (canvasEffect.gravityballvelocity[b][0]); + canvasEffect.gravityballpos[b][1] += (canvasEffect.gravityballvelocity[b][1]); + canvasEffect.context.lineTo(canvasEffect.gravityballpos[b][0], canvasEffect.gravityballpos[b][1]); + canvasEffect.context.lineTo(canvasEffect.cogravitypos[0], canvasEffect.cogravitypos[1]); + canvasEffect.context.stroke(); + // calculate new velocity for each gravity ball, starting with the center of gravity + var vv = canvasEffect.gravity(canvasEffect.gravityballpos[b], canvasEffect.cogravitypos); + canvasEffect.gravityballvelocity[b][0] += vv[0]; + canvasEffect.gravityballvelocity[b][1] += vv[1]; + // and then to all the other gravity balls + for (c = 0; c < 5; c++) { + if (c != b) { + vv = canvasEffect.gravity(canvasEffect.gravityballpos[b], canvasEffect.gravityballpos[c]); + canvasEffect.gravityballvelocity[b][0] += vv[0]; + canvasEffect.gravityballvelocity[b][1] += vv[1]; + } + } + // cap velocity to 100 + canvasEffect.gravityballvelocity[b][0] = Math.max(-100, Math.min(100, canvasEffect.gravityballvelocity[b][0])); + canvasEffect.gravityballvelocity[b][1] = Math.max(-100, Math.min(100, canvasEffect.gravityballvelocity[b][1])); + // if the ball is too far off the screen, generate a new ball in its place + if (canvasEffect.gravityballpos[b][0] < -300 || canvasEffect.gravityballpos[b][0] > 660 || canvasEffect.gravityballpos[b][1] < -300 || canvasEffect.gravityballpos[b][1] > 940) { + canvasEffect.gravityballpos[b] = new Array(Math.random() * 360, Math.random() * 640, Math.random() * 40 + 1); + canvasEffect.gravityballvelocity[b] = new Array(Math.random() * 10 - 5, Math.random() * 10 - 5); + + } else + // if the gravity ball is too close to the center of gravity, also generate a new ball. + if (Math.abs(canvasEffect.gravityballpos[b][0] - canvasEffect.cogravitypos[0]) < 1 && Math.abs(canvasEffect.gravityballpos[b][1] - canvasEffect.cogravitypos[1]) < 1) { + canvasEffect.gravityballpos[b] = new Array(Math.random() * 360, Math.random() * 640, Math.random() * 40 + 1); + canvasEffect.gravityballvelocity[b] = new Array(Math.random() * 10 - 5, Math.random() * 10 - 5); + } + } + canvasEffect.timer = setTimeout("canvasEffect.draw()", 50); + } + + +} diff --git a/mobile-hybrid-demo/html/climbergame.css b/mobile-hybrid-demo/html/climbergame.css new file mode 100755 index 0000000..32261a4 --- /dev/null +++ b/mobile-hybrid-demo/html/climbergame.css @@ -0,0 +1,73 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +div#hero{ + position: absolute; + width: 80px; + height: 80px; + background-image: url("http://code.qt.io/images/climber_hero_l_0.png"); + background-repeat: no-repeat; + z-index:10; +} + +div.platform { + position:absolute; + width:90px; + height:38px; + background-image:url("http://code.qt.io/images/climber_platform_0.png"); + display:none; + background-repeat: no-repeat; + z-index:9; +} + +div#cliff { + position:absolute; + width: 96px; + height: 640px; + background-image:url("http://code.qt.io/images/climber_cliff_0.png"); + background-repeat: no-repeat; + background-position:0px 130px; + z-index:8; +} + +div.cloudlow { + position:absolute; + width: 88px; + height: 18px; + background-image:url("http://code.qt.io/images/climber_cloud_0.png"); +} + +div.cloudhigh { + position:absolute; + width: 68px; + height: 14px; + background-image:url("http://code.qt.io/images/climber_cloud_1.png"); +} + diff --git a/mobile-hybrid-demo/html/climbergame.js b/mobile-hybrid-demo/html/climbergame.js new file mode 100755 index 0000000..8daddef --- /dev/null +++ b/mobile-hybrid-demo/html/climbergame.js @@ -0,0 +1,154 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// a simple game with multiple layers of background + +var climbergameEffect = { + timer: false, + dimensions: Array(), + maxWidth: 360, + maxHeight: 640, + screenYpos: 0, + heroX: 180, + heroY: 20, + heroVX: 0, + heroVY: 0, + platforms: Array(), + clouds: Array(), + click: function (x, y) {}, + swipe: function (dir) {}, + drag: function (amt, x, y) {}, + releaseDrag: function (amt) {}, + init: function () { + console.log("climber init."); + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + gete("content").style.backgroundPosition = "0px 100px"; + climbergameEffect.resize(); + this.hero = document.createElement("div"); + this.hero.setAttribute("id", "hero"); + gete("content").appendChild(this.hero); + this.cliff = document.createElement("div"); + this.cliff.setAttribute("id", "cliff"); + gete("content").appendChild(this.cliff); + this.platforms = new Array(); + this.screenYpos = 0; + this.heroVY = 0; + this.heroVX = 0; + // generate clouds + for (var n = 0; n < 6; n++) { + var temp = document.createElement("div"); + temp.xp = Math.round(Math.random() * 270); + temp.style.left = temp.xp + "px"; + temp.yp = Math.round(Math.random() * 600); + temp.ptype = Math.round(Math.random() * 2); + if (temp.ptype == 1) { + temp.setAttribute("class", "cloudlow"); + } else { + temp.setAttribute("class", "cloudhigh"); + } + this.clouds.push(temp); + gete("content").appendChild(temp); + } + // generate platforms + for (var n = 0; n < 30; n++) { + var temp = document.createElement("div"); + temp.setAttribute("class", "platform"); + temp.xp = Math.round(Math.random() * 270); + temp.style.left = temp.xp + "px"; + temp.yp = 600 - n * (145 + Math.random() * 10); + temp.ptype = Math.round(Math.random() * 2); + temp.style.backgroundImage = "url(http://code.qt.io/images/climber_platform_%22%20+%20temp.ptype%20+%20%22.png)"; + this.platforms.push(temp); + gete("content").appendChild(temp); + } + this.heroY = 220; + this.heroX = 180; + }, + start: function () { + this.timer = setTimeout("climbergameEffect.renderframe()", 200); + }, + deinit: function () { + gete("content").style.background = "white"; + gete("content").style.backgroundPosition = "0px 0px"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + delete this.timer; + }, + resize: function () { + gete("content").style.background = "url(http://code.qt.io/images/climber_bg.jpg)"; + gete("content").style.backgroundPosition = "0px -640px"; + climbergameEffect.dimensions = Array(0, 360, 0, 640); + }, + images: function () { + // images to preload + return new Array("images/climber_bg.jpg", "images/climber_cliff_0.png", "images/climber_cloud_0.png", "images/climber_cloud_1.png", "images/climber_hero_l_0.png", "images/climber_hero_l_1.png", "images/climber_hero_l_2.png", "images/climber_hero_l_3.png", "images/climber_hero_l_4.png", "images/climber_hero_l_5.png", "images/climber_hero_r_0.png", "images/climber_hero_r_1.png", "images/climber_hero_r_2.png", "images/climber_hero_r_3.png", "images/climber_hero_r_4.png", "images/climber_hero_r_5.png", "images/climber_platform_0.png", "images/climber_platform_1.png", "images/climber_platform_2.png"); + }, + renderframe: function () { + // scroll background if the hero is high enough on the screen + if (this.heroY - this.screenYpos < 100) this.screenYpos -= (100 - (this.heroY - this.screenYpos)); + // set the positions for the background and the cliff appearing on the side + gete("cliff").style.backgroundPosition = "0px " + (((-this.screenYpos) % 1200) - 584) + "px"; + gete("content").style.backgroundPosition = "0px " + (-640 + ((-this.screenYpos) >> 3)) + "px"; + for (p in this.platforms) { + // only need to check for platform collision if hero is falling + if (this.heroVY > 0) if (this.platforms[p].yp > this.heroY + 75 && this.platforms[p].yp < this.heroY + 95) if (this.heroX > this.platforms[p].xp - 40 && this.heroX < this.platforms[p].xp + 85) this.heroVY = -20 - (this.platforms[p].ptype * 3); + // decide whether to draw this, display = none makes things a lot faster for things that dont need to be drawn + if (this.platforms[p].yp - this.screenYpos < 0 || this.platforms[p].yp - this.screenYpos > 640) { + this.platforms[p].style.display = "none"; + } else { + this.platforms[p].style.display = "inline"; + this.platforms[p].style.top = this.platforms[p].yp - this.screenYpos + "px"; + } + + } + // move clouds + for (p in this.clouds) { + this.clouds[p].xp += this.clouds[p].ptype + 1; + this.clouds[p].style.left = ((this.clouds[p].xp % 560) - 100) + "px"; + this.clouds[p].style.top = (((this.clouds[p].yp - (this.screenYpos >> (this.clouds[p].ptype))) % 740) - 50) + "px"; + } + + this.heroVY += 0.7; + this.heroVX = ((this.heroVX * 3) + (xAcc / -6)) / 4; + this.heroX += this.heroVX; + this.heroY += this.heroVY; + // figure out correct sprite to display for the hero + this.hero.style.backgroundImage = "url(http://code.qt.io/images/climber_hero_%22%20+%20(this.heroVX%20<%200%20?%20%22l%22%20:%20%22r") + "_" + (5 - Math.floor(Math.abs(this.heroVY) / 6)) + ".png)"; + // make sure the hero doesnt leave the screen + if (this.heroX < 0) this.heroX = 0; + if (this.heroX > 300) this.heroX = 300; + gete("hero").style.top = this.heroY - this.screenYpos + "px"; + gete("hero").style.left = this.heroX + "px"; + // if hero falls off screen, reinitialize + if (this.heroY - this.screenYpos > 600) this.init(); + if (this.timer) this.timer = setTimeout("climbergameEffect.renderframe()", 30); + } +} diff --git a/mobile-hybrid-demo/html/container.html b/mobile-hybrid-demo/html/container.html new file mode 100755 index 0000000..b875a7c --- /dev/null +++ b/mobile-hybrid-demo/html/container.html @@ -0,0 +1,46 @@ +<!-- This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>HTML5</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + + </head> + <body style="background:grey;"> +<a href="#" onclick="document.getElementById('frame').width=360;document.getElementById('frame').height=640;">360x640</A> +<a href="#" onclick="document.getElementById('frame').width=640;document.getElementById('frame').height=360;">640x360</A> +<a href="#" onclick="document.getElementById('frame').width=480;document.getElementById('frame').height=800;">480x800</A> +<a href="#" onclick="document.getElementById('frame').width=800;document.getElementById('frame').height=480;">800x480</A> +<P ALIGN=center><IFRAME id="frame" SRC="index.html" WIDTH=360 HEIGHT=640></IFRAME></P> + </body> +</html> diff --git a/mobile-hybrid-demo/html/csstransform.css b/mobile-hybrid-demo/html/csstransform.css new file mode 100755 index 0000000..8e6d512 --- /dev/null +++ b/mobile-hybrid-demo/html/csstransform.css @@ -0,0 +1,45 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +img.flikr { + position:absolute; + top:100px; + -webkit-user-select:none; + -webkit-transition-property: all; + -webkit-transition-duration: 1s; + -webkit-transform-origin: 0% 100%; + +} +div#images { + position:absolute; + overflow:hidden; + width:360px; + height:640px; +} diff --git a/mobile-hybrid-demo/html/csstransform.js b/mobile-hybrid-demo/html/csstransform.js new file mode 100755 index 0000000..f319558 --- /dev/null +++ b/mobile-hybrid-demo/html/csstransform.js @@ -0,0 +1,260 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// this effect demonstrates css transforms and animations +// also the background is generated by CSS gradient +// there are only three images on screen all the time, so we juggle them around. +// the two images that stay on the screen (the center image transitioning to the side and +// the side image transitioning to the center) are simple, but to achieve a new image +// appearing, we have to use multiple timers. first, the image gets transitioned out in 100ms, +// when the transition is over, the new image will be loaded and the transition will be set to 0, +// and the image is moved to where the new image will appear from. after this is done, the +// image will be transitioned to the screen in 900ms. + +var csstransformEffect = { + images: new Array(), + moving: false, + timer: false, + selected: 2, + padding: 10, + margin: 0, + click: function (x, y) { + // if clock is on the edge, scroll to that direction + if (x < 100) csstransformEffect.move(1); + if (x > window.innerWidth - 100) csstransformEffect.move(-1); + }, + swipe: function (dir) { + // also move when swiped + csstransformEffect.move(-dir); + }, + drag: function (amt) {}, + releaseDrag: function (amt) {}, + init: function () { + console.log("flikr init."); + gete("content").style.background = " -webkit-gradient( linear, left bottom, left top, color-stop(0.47, rgb(71,72,90)), color-stop(0.74, rgb(100,101,117)), color-stop(0.87, rgb(130,132,153)))"; + // generate the div to hold the images, and the three images visible on screen + di = document.createElement("div"); + di.setAttribute("id", "images"); + ip = document.createElement("img"); + ip.setAttribute("id", "previous"); + ip.setAttribute("class", "flikr"); + cp = document.createElement("img"); + cp.setAttribute("id", "current"); + cp.setAttribute("class", "flikr"); + np = document.createElement("img"); + np.setAttribute("id", "next"); + np.setAttribute("class", "flikr"); + di.appendChild(ip); + di.appendChild(cp); + di.appendChild(np); + gete("content").appendChild(di); + csstransformEffect.setpics(); + }, + start: function () {}, + deinit: function () { + gete("content").style.background = "white"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + }, + images: function () { + // images to preload + return new Array("images/flikr1.jpg", "images/flikr2.jpg", "images/flikr3.jpg", "images/flikr4.jpg", "images/flikr5.jpg", "images/flikr6.jpg"); + }, + resize: function () {}, + settransition: function () { + // sets all the transition durations to initial values, after trickery to move the pictures + gete("previous").style.webkitTransitionDuration = "1s"; + gete("current").style.webkitTransitionDuration = "1s"; + gete("next").style.webkitTransitionDuration = "1s"; + }, + setpics: function () { + // sets the images to their default positions and initial values + margin = 0; + csstransformEffect.padding = window.innerWidth / 46; + gete("images").style.width = window.innerWidth + "px"; + gete("images").style.height = window.innerHeight + "px"; + // set transition times to 0, to move the pictures instantly + gete("previous").style.webkitTransitionDuration = "0ms"; + gete("current").style.webkitTransitionDuration = "0ms"; + gete("next").style.webkitTransitionDuration = "0ms"; + // set positions and transform details + gete("previous").style.left = 2 * (margin + csstransformEffect.padding) + "px"; + gete("current").style.left = 3 * (margin + csstransformEffect.padding) + "px"; + gete("next").style.left = 4 * (margin + csstransformEffect.padding) + "px"; + gete("previous").style.webkitTransformOrigin = "0% 100%"; + gete("current").style.webkitTransformOrigin = "0% 100%"; + gete("next").style.webkitTransformOrigin = "100% 100%"; + gete("previous").style.webkitTransform = "rotate(-90deg)"; + gete("current").style.webkitTransform = "rotate(0deg)"; + gete("next").style.webkitTransform = "rotate(90deg)"; + // set the images to show the right picture + console.log("IMAGES ARE " + (((csstransformEffect.selected + 5) % 6) + 1) + " " + (((csstransformEffect.selected + 6) % 6) + 1) + " " + (((csstransformEffect.selected + 7) % 6) + 1)); + gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 5) % 6) + 1) + ".jpg"; + gete("current").src = "images/flikr" + (((csstransformEffect.selected + 6) % 6) + 1) + ".jpg"; + gete("next").src = "images/flikr" + (((csstransformEffect.selected + 7) % 6) + 1) + ".jpg"; + // in 10ms, after the images have moved, set the transitions to what they should be + timer = setTimeout("csstransformEffect.settransition()", 10); + gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false); + gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false); + ytop = (window.innerHeight - csstransformEffect.padding * 40) / 2; + gete("current").style.top = ytop + "px"; + gete("previous").style.top = ytop + "px"; + gete("next").style.top = ytop + "px"; + gete("current").style.width = csstransformEffect.padding * 40 + "px"; + gete("next").style.width = csstransformEffect.padding * 40 + "px"; + gete("previous").style.width = csstransformEffect.padding * 40 + "px"; + gete("current").style.height = csstransformEffect.padding * 40 + "px"; + gete("next").style.height = csstransformEffect.padding * 40 + "px"; + gete("previous").style.height = csstransformEffect.padding * 40 + "px"; + + }, + + + transitioncenter: function () { + // helper function, when we are transitioning to the right, we need to move the rotation origin of the center image + gete("current").style.webkitTransitionDuration = "1000ms"; + gete("current").style.left = 4 * (margin + csstransformEffect.padding) + "px"; + gete("current").style.webkitTransform = "rotate(90deg)"; + }, + + move: function (dir) { + // this function starts the transition + // after the transition is complete, loadleft or loadright will be called to load the next image + if (csstransformEffect.moving) return; + csstransformEffect.moving = true; + if (dir == 1) { + gete("previous").style.zIndex = "2"; + gete("previous").style.left = "1px"; + gete("previous").style.webkitTransitionDuration = "100ms"; + gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false); + gete("current").style.webkitTransformOrigin = "0% 100%"; + gete("current").style.webkitTransform = "rotate(-90deg)"; + gete("current").style.left = 2 * (csstransformEffect.padding) + "px"; + gete("next").style.webkitTransform = "rotate(0deg)"; + gete("next").style.left = 3 * (csstransformEffect.padding) + "px"; + } + if (dir == -1) { + gete("next").style.zIndex = "2"; + gete("previous").style.left = 3 * (csstransformEffect.padding) + "px"; + gete("previous").style.webkitTransform = "rotate(0deg)"; + // moving right, we need to move the origin first so that the transition is a mirror of the transition to the left + gete("current").style.webkitTransitionDuration = "0ms"; + gete("current").style.webkitTransformOrigin = "100% 100%"; + // and only then actually transition the center image + setTimeout("csstransformEffect.transitioncenter()", 10); + // this bugs if the user is clicking through the images too fast. + gete("next").style.webkitTransitionDuration = "100ms"; + gete("next").style.left = (6 * (csstransformEffect.padding)) - 1 + "px"; + gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.loadright, false); + } + }, + loadleft: function () { + // loadleft gets called after move() + // move the disappeared image to the other side to transition it in + gete("previous").style.left = (6 * (margin + csstransformEffect.padding)) - 1 + "px"; + gete("previous").style.webkitTransform = "rotate(90deg)"; + gete("previous").style.webkitTransformOrigin = "100% 100%"; + gete("previous").style.webkitTransitionDuration = "0ms"; + // load the next image to appear + console.log("loading " + (((csstransformEffect.selected + 2) % 6) + 1)); + gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 2) % 6) + 1) + ".jpg"; + setTimeout("csstransformEffect.moveleft();", 1); + gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false); + }, + loadright: function () { + // loadright gets called after move() + // move the disappeared image to the other side to transition it in + gete("next").style.left = "1px"; + gete("next").style.webkitTransform = "rotate(-90deg)"; + gete("next").style.webkitTransformOrigin = "0% 100%"; + gete("next").style.webkitTransitionDuration = "0ms"; + // load the next image to appear + console.log("!loading " + (((csstransformEffect.selected + 4) % 6) + 1)); + gete("next").src = "images/flikr" + (((csstransformEffect.selected + 4) % 6) + 1) + ".jpg"; + setTimeout("csstransformEffect.moveright();", 1); + gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.loadright, false); + }, + moveleft: function () { + // move the new image loaded to the screen, and after it is complete, call updateleft + // this gets called after loadleft + gete("previous").style.webkitTransitionDuration = "900ms"; + gete("previous").style.left = 4 * (margin + csstransformEffect.padding) + "px"; + gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false); + csstransformEffect.selected++; + }, + + moveright: function () { + // move the new image loaded to the screen, and after it is complete, call updateright + // this gets called after loadright + gete("next").style.webkitTransitionDuration = "900ms"; + gete("next").style.left = 2 * (margin + csstransformEffect.padding) + "px"; + gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.updateright, false); + // keep selected positive to make things easier + csstransformEffect.selected = (csstransformEffect.selected + 5) % 6; + }, + updateleft: function () { + // this function sets the images back to the default settings, ready to transition again + // the final function getting called in the transition + gete("previous").style.zIndex = "0"; + gete("current").style.zIndex = "0"; + gete("next").style.zIndex = "0"; + gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false); + gete("previous").setAttribute("id", "next2"); + gete("current").setAttribute("id", "previous"); + gete("next").setAttribute("id", "current"); + gete("next2").setAttribute("id", "next"); + gete("previous").style.webkitTransformOrigin = "0% 100%"; + gete("current").style.webkitTransformOrigin = "0% 100%"; + gete("next").style.webkitTransformOrigin = "100% 100%"; + csstransformEffect.moving = false; + // csstransformEffect.setpics(); + }, + + updateright: function () { + // this function sets the images back to the default settings, ready to transition again + // the final function getting called in the transition + gete("previous").style.zIndex = "0"; + gete("current").style.zIndex = "0"; + gete("next").style.zIndex = "0"; + gete("next").style.zIndex = "0"; + gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.updateright, false); + gete("next").setAttribute("id", "previous2"); + gete("current").setAttribute("id", "next"); + gete("previous").setAttribute("id", "current"); + gete("previous2").setAttribute("id", "previous"); + gete("previous").style.webkitTransformOrigin = "0% 100%"; + gete("current").style.webkitTransformOrigin = "0% 100%"; + gete("next").style.webkitTransformOrigin = "100% 100%"; + csstransformEffect.moving = false; + // csstransformEffect.setpics(); + } + + +} diff --git a/mobile-hybrid-demo/html/images/LICENSE.txt b/mobile-hybrid-demo/html/images/LICENSE.txt new file mode 100755 index 0000000..7dbfd7c --- /dev/null +++ b/mobile-hybrid-demo/html/images/LICENSE.txt @@ -0,0 +1,307 @@ +With the exception of the HTML5 logo, images included in this directory +are protected by copyright controlled by Nokia Corporation. All rights +reserved. Nokia Corporation hereby grants you a personal license to use +these images solely for the purposes of evaluating, testing and debugging +the HTML5 demonstration of which it is a part. Further distribution of +these images are expressly prohibited. + +W3C's HTML5 logo (http://www.w3.org/html/logo/, file name splash.png in this +directory and HTML5.svg in the parent directory) is licensed under +under the Creative Commons Attribution 3.0 license, available below and also at +http://creativecommons.org/licenses/by/3.0/legalcode + +Creative Commons Attribution 3.0 Unported + +CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE LEGAL +SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN ATTORNEY-CLIENT +RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS" +BASIS. CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE INFORMATION +PROVIDED, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM ITS USE. + +License +THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE +COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY +COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS +AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. +BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE +TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY +BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS +CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND +CONDITIONS. +1. Definitions + +1. "Adaptation" means a work based upon the Work, or upon the Work and +other pre-existing works, such as a translation, adaptation, derivative +work, arrangement of music or other alterations of a literary or artistic +work, or phonogram or performance and includes cinematographic adaptations +or any other form in which the Work may be recast, transformed, or adapted +including in any form recognizably derived from the original, except that +a work that constitutes a Collection will not be considered an Adaptation +for the purpose of this License. For the avoidance of doubt, where the +Work is a musical work, performance or phonogram, the synchronization of +the Work in timed-relation with a moving image ("synching") will be +considered an Adaptation for the purpose of this License. +2. "Collection" means a collection of literary or artistic works, such as +encyclopedias and anthologies, or performances, phonograms or broadcasts, +or other works or subject matter other than works listed in Section 1(f) +below, which, by reason of the selection and arrangement of their +contents, constitute intellectual creations, in which the Work is included +in its entirety in unmodified form along with one or more other +contributions, each constituting separate and independent works in +themselves, which together are assembled into a collective whole. A work +that constitutes a Collection will not be considered an Adaptation (as +defined above) for the purposes of this License. +3. "Distribute" means to make available to the public the original and +copies of the Work or Adaptation, as appropriate, through sale or other +transfer of ownership. +4. "Licensor" means the individual, individuals, entity or entities that +offer(s) the Work under the terms of this License. +5. "Original Author" means, in the case of a literary or artistic work, +the individual, individuals, entity or entities who created the Work or if +no individual or entity can be identified, the publisher; and in addition +(i) in the case of a performance the actors, singers, musicians, dancers, +and other persons who act, sing, deliver, declaim, play in, interpret or +otherwise perform literary or artistic works or expressions of folklore; +(ii) in the case of a phonogram the producer being the person or legal +entity who first fixes the sounds of a performance or other sounds; and, +(iii) in the case of broadcasts, the organization that transmits the +broadcast. +6. "Work" means the literary and/or artistic work offered under the terms +of this License including without limitation any production in the +literary, scientific and artistic domain, whatever may be the mode or form +of its expression including digital form, such as a book, pamphlet and +other writing; a lecture, address, sermon or other work of the same +nature; a dramatic or dramatico-musical work; a choreographic work or +entertainment in dumb show; a musical composition with or without words; a +cinematographic work to which are assimilated works expressed by a process +analogous to cinematography; a work of drawing, painting, architecture, +sculpture, engraving or lithography; a photographic work to which are +assimilated works expressed by a process analogous to photography; a work +of applied art; an illustration, map, plan, sketch or three-dimensional +work relative to geography, topography, architecture or science; a +performance; a broadcast; a phonogram; a compilation of data to the extent +it is protected as a copyrightable work; or a work performed by a variety +or circus performer to the extent it is not otherwise considered a +literary or artistic work. +7. "You" means an individual or entity exercising rights under this +License who has not previously violated the terms of this License with +respect to the Work, or who has received express permission from the +Licensor to exercise rights under this License despite a previous +violation. +8. "Publicly Perform" means to perform public recitations of the Work and +to communicate to the public those public recitations, by any means or +process, including by wire or wireless means or public digital +performances; to make available to the public Works in such a way that +members of the public may access these Works from a place and at a place +individually chosen by them; to perform the Work to the public by any +means or process and the communication to the public of the performances +of the Work, including by public digital performance; to broadcast and +rebroadcast the Work by any means including signs, sounds or images. +9. "Reproduce" means to make copies of the Work by any means including +without limitation by sound or visual recordings and the right of fixation +and reproducing fixations of the Work, including storage of a protected +performance or phonogram in digital form or other electronic medium. + +2. Fair Dealing Rights. Nothing in this License is intended to reduce, +limit, or restrict any uses free from copyright or rights arising from +limitations or exceptions that are provided for in connection with the +copyright protection under copyright law or other applicable laws. +3. License Grant. Subject to the terms and conditions of this License, +Licensor hereby grants You a worldwide, royalty-free, non-exclusive, +perpetual (for the duration of the applicable copyright) license to +exercise the rights in the Work as stated below: + +1. to Reproduce the Work, to incorporate the Work into one or more +Collections, and to Reproduce the Work as incorporated in the Collections; +2. to create and Reproduce Adaptations provided that any such Adaptation, +including any translation in any medium, takes reasonable steps to clearly +label, demarcate or otherwise identify that changes were made to the +original Work. For example, a translation could be marked "The original +work was translated from English to Spanish," or a modification could +indicate "The original work has been modified."; +3. to Distribute and Publicly Perform the Work including as incorporated +in Collections; and, +4. to Distribute and Publicly Perform Adaptations. +5. For the avoidance of doubt: + +1. Non-waivable Compulsory License Schemes. In those jurisdictions in +which the right to collect royalties through any statutory or compulsory +licensing scheme cannot be waived, the Licensor reserves the exclusive +right to collect such royalties for any exercise by You of the rights +granted under this License; +2. Waivable Compulsory License Schemes. In those jurisdictions in which +the right to collect royalties through any statutory or compulsory +licensing scheme can be waived, the Licensor waives the exclusive right to +collect such royalties for any exercise by You of the rights granted under +this License; and, +3. Voluntary License Schemes. The Licensor waives the right to collect +royalties, whether individually or, in the event that the Licensor is a +member of a collecting society that administers voluntary licensing +schemes, via that society, from any exercise by You of the rights granted +under this License. + + + +The above rights may be exercised in all media and formats whether now +known or hereafter devised. The above rights include the right to make +such modifications as are technically necessary to exercise the rights in +other media and formats. Subject to Section 8(f), all rights not expressly +granted by Licensor are hereby reserved. +4. Restrictions. The license granted in Section 3 above is expressly made +subject to and limited by the following restrictions: + +1. You may Distribute or Publicly Perform the Work only under the terms of +this License. You must include a copy of, or the Uniform Resource +Identifier (URI) for, this License with every copy of the Work You +Distribute or Publicly Perform. You may not offer or impose any terms on +the Work that restrict the terms of this License or the ability of the +recipient of the Work to exercise the rights granted to that recipient +under the terms of the License. You may not sublicense the Work. You must +keep intact all notices that refer to this License and to the disclaimer +of warranties with every copy of the Work You Distribute or Publicly +Perform. When You Distribute or Publicly Perform the Work, You may not +impose any effective technological measures on the Work that restrict the +ability of a recipient of the Work from You to exercise the rights granted +to that recipient under the terms of the License. This Section 4(a) +applies to the Work as incorporated in a Collection, but this does not +require the Collection apart from the Work itself to be made subject to +the terms of this License. If You create a Collection, upon notice from +any Licensor You must, to the extent practicable, remove from the +Collection any credit as required by Section 4(b), as requested. If You +create an Adaptation, upon notice from any Licensor You must, to the +extent practicable, remove from the Adaptation any credit as required by +Section 4(b), as requested. +2. If You Distribute, or Publicly Perform the Work or any Adaptations or +Collections, You must, unless a request has been made pursuant to Section +4(a), keep intact all copyright notices for the Work and provide, +reasonable to the medium or means You are utilizing: (i) the name of the +Original Author (or pseudonym, if applicable) if supplied, and/or if the +Original Author and/or Licensor designate another party or parties (e.g., +a sponsor institute, publishing entity, journal) for attribution +("Attribution Parties") in Licensor's copyright notice, terms of service +or by other reasonable means, the name of such party or parties; (ii) the +title of the Work if supplied; (iii) to the extent reasonably practicable, +the URI, if any, that Licensor specifies to be associated with the Work, +unless such URI does not refer to the copyright notice or licensing +information for the Work; and (iv) , consistent with Section 3(b), in the +case of an Adaptation, a credit identifying the use of the Work in the +Adaptation (e.g., "French translation of the Work by Original Author," or +"Screenplay based on original Work by Original Author"). The credit +required by this Section 4 (b) may be implemented in any reasonable +manner; provided, however, that in the case of a Adaptation or Collection, +at a minimum such credit will appear, if a credit for all contributing +authors of the Adaptation or Collection appears, then as part of these +credits and in a manner at least as prominent as the credits for the other +contributing authors. For the avoidance of doubt, You may only use the +credit required by this Section for the purpose of attribution in the +manner set out above and, by exercising Your rights under this License, +You may not implicitly or explicitly assert or imply any connection with, +sponsorship or endorsement by the Original Author, Licensor and/or +Attribution Parties, as appropriate, of You or Your use of the Work, +without the separate, express prior written permission of the Original +Author, Licensor and/or Attribution Parties. +3. Except as otherwise agreed in writing by the Licensor or as may be +otherwise permitted by applicable law, if You Reproduce, Distribute or +Publicly Perform the Work either by itself or as part of any Adaptations +or Collections, You must not distort, mutilate, modify or take other +derogatory action in relation to the Work which would be prejudicial to +the Original Author's honor or reputation. Licensor agrees that in those +jurisdictions (e.g. Japan), in which any exercise of the right granted in +Section 3(b) of this License (the right to make Adaptations) would be +deemed to be a distortion, mutilation, modification or other derogatory +action prejudicial to the Original Author's honor and reputation, the +Licensor will waive or not assert, as appropriate, this Section, to the +fullest extent permitted by the applicable national law, to enable You to +reasonably exercise Your right under Section 3(b) of this License (right +to make Adaptations) but not otherwise. + +5. Representations, Warranties and Disclaimer +UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR +OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY +KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, +INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, +FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF +LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, +WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION +OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. +6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE +LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR +ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES +ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS +BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. +7. Termination + +1. This License and the rights granted hereunder will terminate +automatically upon any breach by You of the terms of this License. +Individuals or entities who have received Adaptations or Collections from +You under this License, however, will not have their licenses terminated +provided such individuals or entities remain in full compliance with those +licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of +this License. +2. Subject to the above terms and conditions, the license granted here is +perpetual (for the duration of the applicable copyright in the Work). +Notwithstanding the above, Licensor reserves the right to release the Work +under different license terms or to stop distributing the Work at any +time; provided, however that any such election will not serve to withdraw +this License (or any other license that has been, or is required to be, +granted under the terms of this License), and this License will continue +in full force and effect unless terminated as stated above. + +8. Miscellaneous + +1. Each time You Distribute or Publicly Perform the Work or a Collection, +the Licensor offers to the recipient a license to the Work on the same +terms and conditions as the license granted to You under this License. +2. Each time You Distribute or Publicly Perform an Adaptation, Licensor +offers to the recipient a license to the original Work on the same terms +and conditions as the license granted to You under this License. +3. If any provision of this License is invalid or unenforceable under +applicable law, it shall not affect the validity or enforceability of the +remainder of the terms of this License, and without further action by the +parties to this agreement, such provision shall be reformed to the minimum +extent necessary to make such provision valid and enforceable. +4. No term or provision of this License shall be deemed waived and no +breach consented to unless such waiver or consent shall be in writing and +signed by the party to be charged with such waiver or consent. +5. This License constitutes the entire agreement between the parties with +respect to the Work licensed here. There are no understandings, agreements +or representations with respect to the Work not specified here. Licensor +shall not be bound by any additional provisions that may appear in any +communication from You. This License may not be modified without the +mutual written agreement of the Licensor and You. +6. The rights granted under, and the subject matter referenced, in this +License were drafted utilizing the terminology of the Berne Convention for +the Protection of Literary and Artistic Works (as amended on September 28, +1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the +WIPO Performances and Phonograms Treaty of 1996 and the Universal +Copyright Convention (as revised on July 24, 1971). These rights and +subject matter take effect in the relevant jurisdiction in which the +License terms are sought to be enforced according to the corresponding +provisions of the implementation of those treaty provisions in the +applicable national law. If the standard suite of rights granted under +applicable copyright law includes additional rights not granted under this +License, such additional rights are deemed to be included in the License; +this License is not intended to restrict the license of any rights under +applicable law. + +Creative Commons Notice + +Creative Commons is not a party to this License, and makes no warranty +whatsoever in connection with the Work. Creative Commons will not be +liable to You or any party on any legal theory for any damages whatsoever, +including without limitation any general, special, incidental or +consequential damages arising in connection to this license. +Notwithstanding the foregoing two (2) sentences, if Creative Commons has +expressly identified itself as the Licensor hereunder, it shall have all +rights and obligations of Licensor. +Except for the limited purpose of indicating to the public that the Work +is licensed under the CCPL, Creative Commons does not authorize the use by +either party of the trademark "Creative Commons" or any related trademark +or logo of Creative Commons without the prior written consent of Creative +Commons. Any permitted use will be in compliance with Creative Commons' +then-current trademark usage guidelines, as may be published on its +website or otherwise made available upon request from time to time. For +the avoidance of doubt, this trademark restriction does not form part of +this License. +Creative Commons may be contacted at http://creativecommons.org/. + diff --git a/mobile-hybrid-demo/html/images/bubble_0.png b/mobile-hybrid-demo/html/images/bubble_0.png Binary files differnew file mode 100755 index 0000000..d6f7fc3 --- /dev/null +++ b/mobile-hybrid-demo/html/images/bubble_0.png diff --git a/mobile-hybrid-demo/html/images/bubble_1.png b/mobile-hybrid-demo/html/images/bubble_1.png Binary files differnew file mode 100755 index 0000000..fe2acfd --- /dev/null +++ b/mobile-hybrid-demo/html/images/bubble_1.png diff --git a/mobile-hybrid-demo/html/images/bubble_2.png b/mobile-hybrid-demo/html/images/bubble_2.png Binary files differnew file mode 100755 index 0000000..183f494 --- /dev/null +++ b/mobile-hybrid-demo/html/images/bubble_2.png diff --git a/mobile-hybrid-demo/html/images/bubbles_bg.jpg b/mobile-hybrid-demo/html/images/bubbles_bg.jpg Binary files differnew file mode 100755 index 0000000..3998988 --- /dev/null +++ b/mobile-hybrid-demo/html/images/bubbles_bg.jpg diff --git a/mobile-hybrid-demo/html/images/button_close.png b/mobile-hybrid-demo/html/images/button_close.png Binary files differnew file mode 100755 index 0000000..033c2c2 --- /dev/null +++ b/mobile-hybrid-demo/html/images/button_close.png diff --git a/mobile-hybrid-demo/html/images/climber_bg.jpg b/mobile-hybrid-demo/html/images/climber_bg.jpg Binary files differnew file mode 100755 index 0000000..cace37d --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_bg.jpg diff --git a/mobile-hybrid-demo/html/images/climber_cliff_0.png b/mobile-hybrid-demo/html/images/climber_cliff_0.png Binary files differnew file mode 100755 index 0000000..6772d26 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_cliff_0.png diff --git a/mobile-hybrid-demo/html/images/climber_cloud_0.png b/mobile-hybrid-demo/html/images/climber_cloud_0.png Binary files differnew file mode 100755 index 0000000..f2797d7 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_cloud_0.png diff --git a/mobile-hybrid-demo/html/images/climber_cloud_1.png b/mobile-hybrid-demo/html/images/climber_cloud_1.png Binary files differnew file mode 100755 index 0000000..682dbcf --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_cloud_1.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_0.png b/mobile-hybrid-demo/html/images/climber_hero_l_0.png Binary files differnew file mode 100755 index 0000000..7f52295 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_0.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_1.png b/mobile-hybrid-demo/html/images/climber_hero_l_1.png Binary files differnew file mode 100755 index 0000000..d00a33a --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_1.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_2.png b/mobile-hybrid-demo/html/images/climber_hero_l_2.png Binary files differnew file mode 100755 index 0000000..1127017 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_2.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_3.png b/mobile-hybrid-demo/html/images/climber_hero_l_3.png Binary files differnew file mode 100755 index 0000000..4b5c5fd --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_3.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_4.png b/mobile-hybrid-demo/html/images/climber_hero_l_4.png Binary files differnew file mode 100755 index 0000000..847fe73 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_4.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_l_5.png b/mobile-hybrid-demo/html/images/climber_hero_l_5.png Binary files differnew file mode 100755 index 0000000..9203aac --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_l_5.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_0.png b/mobile-hybrid-demo/html/images/climber_hero_r_0.png Binary files differnew file mode 100755 index 0000000..5d65557 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_0.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_1.png b/mobile-hybrid-demo/html/images/climber_hero_r_1.png Binary files differnew file mode 100755 index 0000000..31bebb3 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_1.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_2.png b/mobile-hybrid-demo/html/images/climber_hero_r_2.png Binary files differnew file mode 100755 index 0000000..c760a3b --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_2.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_3.png b/mobile-hybrid-demo/html/images/climber_hero_r_3.png Binary files differnew file mode 100755 index 0000000..4cf829e --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_3.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_4.png b/mobile-hybrid-demo/html/images/climber_hero_r_4.png Binary files differnew file mode 100755 index 0000000..39e830f --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_4.png diff --git a/mobile-hybrid-demo/html/images/climber_hero_r_5.png b/mobile-hybrid-demo/html/images/climber_hero_r_5.png Binary files differnew file mode 100755 index 0000000..19728d9 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_hero_r_5.png diff --git a/mobile-hybrid-demo/html/images/climber_platform_0.png b/mobile-hybrid-demo/html/images/climber_platform_0.png Binary files differnew file mode 100755 index 0000000..d8e9264 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_platform_0.png diff --git a/mobile-hybrid-demo/html/images/climber_platform_1.png b/mobile-hybrid-demo/html/images/climber_platform_1.png Binary files differnew file mode 100755 index 0000000..6e7f379 --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_platform_1.png diff --git a/mobile-hybrid-demo/html/images/climber_platform_2.png b/mobile-hybrid-demo/html/images/climber_platform_2.png Binary files differnew file mode 100755 index 0000000..83a8a4f --- /dev/null +++ b/mobile-hybrid-demo/html/images/climber_platform_2.png diff --git a/mobile-hybrid-demo/html/images/flikr1.jpg b/mobile-hybrid-demo/html/images/flikr1.jpg Binary files differnew file mode 100755 index 0000000..51234f4 --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr1.jpg diff --git a/mobile-hybrid-demo/html/images/flikr2.jpg b/mobile-hybrid-demo/html/images/flikr2.jpg Binary files differnew file mode 100755 index 0000000..8988a89 --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr2.jpg diff --git a/mobile-hybrid-demo/html/images/flikr3.jpg b/mobile-hybrid-demo/html/images/flikr3.jpg Binary files differnew file mode 100755 index 0000000..c76f2d4 --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr3.jpg diff --git a/mobile-hybrid-demo/html/images/flikr4.jpg b/mobile-hybrid-demo/html/images/flikr4.jpg Binary files differnew file mode 100755 index 0000000..4711767 --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr4.jpg diff --git a/mobile-hybrid-demo/html/images/flikr5.jpg b/mobile-hybrid-demo/html/images/flikr5.jpg Binary files differnew file mode 100755 index 0000000..bdb4aac --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr5.jpg diff --git a/mobile-hybrid-demo/html/images/flikr6.jpg b/mobile-hybrid-demo/html/images/flikr6.jpg Binary files differnew file mode 100755 index 0000000..b7254f6 --- /dev/null +++ b/mobile-hybrid-demo/html/images/flikr6.jpg diff --git a/mobile-hybrid-demo/html/images/menu_bg.jpg b/mobile-hybrid-demo/html/images/menu_bg.jpg Binary files differnew file mode 100755 index 0000000..9aef8b4 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_bg.jpg diff --git a/mobile-hybrid-demo/html/images/menu_bg_mask.png b/mobile-hybrid-demo/html/images/menu_bg_mask.png Binary files differnew file mode 100755 index 0000000..9e4ff8a --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_bg_mask.png diff --git a/mobile-hybrid-demo/html/images/menu_bubbles_0.png b/mobile-hybrid-demo/html/images/menu_bubbles_0.png Binary files differnew file mode 100755 index 0000000..172bec8 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_bubbles_0.png diff --git a/mobile-hybrid-demo/html/images/menu_bubbles_1.png b/mobile-hybrid-demo/html/images/menu_bubbles_1.png Binary files differnew file mode 100755 index 0000000..f940c93 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_bubbles_1.png diff --git a/mobile-hybrid-demo/html/images/menu_bubbles_2.png b/mobile-hybrid-demo/html/images/menu_bubbles_2.png Binary files differnew file mode 100755 index 0000000..311974f --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_bubbles_2.png diff --git a/mobile-hybrid-demo/html/images/menu_climber_0.png b/mobile-hybrid-demo/html/images/menu_climber_0.png Binary files differnew file mode 100755 index 0000000..2f146b7 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_climber_0.png diff --git a/mobile-hybrid-demo/html/images/menu_climber_1.png b/mobile-hybrid-demo/html/images/menu_climber_1.png Binary files differnew file mode 100755 index 0000000..300a8a9 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_climber_1.png diff --git a/mobile-hybrid-demo/html/images/menu_climber_2.png b/mobile-hybrid-demo/html/images/menu_climber_2.png Binary files differnew file mode 100755 index 0000000..338c420 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_climber_2.png diff --git a/mobile-hybrid-demo/html/images/menu_flikr_0.png b/mobile-hybrid-demo/html/images/menu_flikr_0.png Binary files differnew file mode 100755 index 0000000..ca84013 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_flikr_0.png diff --git a/mobile-hybrid-demo/html/images/menu_flikr_1.png b/mobile-hybrid-demo/html/images/menu_flikr_1.png Binary files differnew file mode 100755 index 0000000..d12968f --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_flikr_1.png diff --git a/mobile-hybrid-demo/html/images/menu_flikr_2.png b/mobile-hybrid-demo/html/images/menu_flikr_2.png Binary files differnew file mode 100755 index 0000000..7fa5e2c --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_flikr_2.png diff --git a/mobile-hybrid-demo/html/images/menu_gravity_0.png b/mobile-hybrid-demo/html/images/menu_gravity_0.png Binary files differnew file mode 100755 index 0000000..0c3c2a9 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_gravity_0.png diff --git a/mobile-hybrid-demo/html/images/menu_gravity_1.png b/mobile-hybrid-demo/html/images/menu_gravity_1.png Binary files differnew file mode 100755 index 0000000..613c8a1 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_gravity_1.png diff --git a/mobile-hybrid-demo/html/images/menu_gravity_2.png b/mobile-hybrid-demo/html/images/menu_gravity_2.png Binary files differnew file mode 100755 index 0000000..7b04eb6 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_gravity_2.png diff --git a/mobile-hybrid-demo/html/images/menu_maps_0.png b/mobile-hybrid-demo/html/images/menu_maps_0.png Binary files differnew file mode 100755 index 0000000..6ae7e87 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_maps_0.png diff --git a/mobile-hybrid-demo/html/images/menu_maps_1.png b/mobile-hybrid-demo/html/images/menu_maps_1.png Binary files differnew file mode 100755 index 0000000..55676fe --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_maps_1.png diff --git a/mobile-hybrid-demo/html/images/menu_maps_2.png b/mobile-hybrid-demo/html/images/menu_maps_2.png Binary files differnew file mode 100755 index 0000000..64c2c48 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_maps_2.png diff --git a/mobile-hybrid-demo/html/images/menu_stocks_0.png b/mobile-hybrid-demo/html/images/menu_stocks_0.png Binary files differnew file mode 100755 index 0000000..02e2002 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_stocks_0.png diff --git a/mobile-hybrid-demo/html/images/menu_stocks_1.png b/mobile-hybrid-demo/html/images/menu_stocks_1.png Binary files differnew file mode 100755 index 0000000..aed3179 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_stocks_1.png diff --git a/mobile-hybrid-demo/html/images/menu_stocks_2.png b/mobile-hybrid-demo/html/images/menu_stocks_2.png Binary files differnew file mode 100755 index 0000000..73951f9 --- /dev/null +++ b/mobile-hybrid-demo/html/images/menu_stocks_2.png diff --git a/mobile-hybrid-demo/html/images/splash.png b/mobile-hybrid-demo/html/images/splash.png Binary files differnew file mode 100755 index 0000000..5f22feb --- /dev/null +++ b/mobile-hybrid-demo/html/images/splash.png diff --git a/mobile-hybrid-demo/html/images/stocks_background.png b/mobile-hybrid-demo/html/images/stocks_background.png Binary files differnew file mode 100755 index 0000000..b2cbc8b --- /dev/null +++ b/mobile-hybrid-demo/html/images/stocks_background.png diff --git a/mobile-hybrid-demo/html/images/stocks_buttons.png b/mobile-hybrid-demo/html/images/stocks_buttons.png Binary files differnew file mode 100755 index 0000000..b284f31 --- /dev/null +++ b/mobile-hybrid-demo/html/images/stocks_buttons.png diff --git a/mobile-hybrid-demo/html/images/stocks_fill_color.png b/mobile-hybrid-demo/html/images/stocks_fill_color.png Binary files differnew file mode 100755 index 0000000..db83dfe --- /dev/null +++ b/mobile-hybrid-demo/html/images/stocks_fill_color.png diff --git a/mobile-hybrid-demo/html/images/stocks_fill_color_big.png b/mobile-hybrid-demo/html/images/stocks_fill_color_big.png Binary files differnew file mode 100755 index 0000000..eb4c555 --- /dev/null +++ b/mobile-hybrid-demo/html/images/stocks_fill_color_big.png diff --git a/mobile-hybrid-demo/html/images/title.png b/mobile-hybrid-demo/html/images/title.png Binary files differnew file mode 100755 index 0000000..bc40d3c --- /dev/null +++ b/mobile-hybrid-demo/html/images/title.png diff --git a/mobile-hybrid-demo/html/index.html b/mobile-hybrid-demo/html/index.html new file mode 100755 index 0000000..1e7e6be --- /dev/null +++ b/mobile-hybrid-demo/html/index.html @@ -0,0 +1,57 @@ +<!-- This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +--> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head id="head"> + <title>HTML5</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta name="touchnavigation" content="off"> + <link rel="stylesheet" href="http://code.qt.io/base.css" type="text/css"> + <script language="javascript" type="text/javascript" src="http://code.qt.io/input.js"></script> + <script language="javascript" type="text/javascript" src="http://code.qt.io/main.js"></script> + <script language="javascript" type="text/javascript" src="http://code.qt.io/loader.js"></script> + <META NAME="Generator" CONTENT="Nokia WDE 3.0.0" /> + </head> + <body onLoad="javascript:initialize();" id="body"> + <img src="http://code.qt.io/images/button_close.png" id="close"> + <!--<img src="http://code.qt.io/images/button_play.png" id="play"> --> + <div id="content"></div> + <div id="mask"></div> + <div id="output"></div> + <div id="loadingScreen"> + <img src="http://code.qt.io/images/title.png" style="position:absolute; top:100px;" id="splashlogo"> + <div id="loadedBar"></div> + <div id="toLoadBar"></div> + <img src="http://code.qt.io/images/splash.png" style="position:absolute; bottom:100px; left:50%; margin:-52px;" id="splashlogo"> + </div> + </body> +</html> diff --git a/mobile-hybrid-demo/html/input.js b/mobile-hybrid-demo/html/input.js new file mode 100755 index 0000000..c7ecad8 --- /dev/null +++ b/mobile-hybrid-demo/html/input.js @@ -0,0 +1,75 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// this file has all the input related functions + +var dragging = false; +var dragStartX = 0; +var dragLastX = 0; +var dragStartTime = 0; + +function mousedown(e) { + dragging = true; + dragLastX = dragStartX = e.clientX; + var d = new Date(); + dragStartTime = d.getTime(); + e.stopPropagation(); + e.preventDefault(); +} + +function mousemove(e) { + if (dragging) activeEffect.drag(dragLastX - e.clientX, e.clientX, e.clientY); + dragLastX = e.clientX; + e.stopPropagation(); + e.preventDefault(); +} + +function mouseup(e) { + animating = false; + output("up " + e.clientX + "," + e.clientY); + dragging = false; + var d = new Date(); + var t = d.getTime(); + e.stopPropagation(); + e.preventDefault(); + if (e.clientY < 70) { + if (e.clientX > window.innerWidth - 70) // back button + goBack(); + } else if (activeEffect != null) { + activeEffect.releaseDrag(); + if (Math.abs(e.clientX - dragStartX) > 100 && (t - dragStartTime) < 400) { // detect swipes + if (e.clientX < dragStartX) activeEffect.swipe(-1); + else activeEffect.swipe(1); + } else // not a swipe + if ((t - dragStartTime) < 200) // detect click + activeEffect.click(e.clientX, e.clientY); + + } +} diff --git a/mobile-hybrid-demo/html/loader.js b/mobile-hybrid-demo/html/loader.js new file mode 100755 index 0000000..9c738ff --- /dev/null +++ b/mobile-hybrid-demo/html/loader.js @@ -0,0 +1,148 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// loader class to dynamically load the effects + +var loader = { + loadingBarWidth: 0, + fadeTimer: false, + setLoadingScreen: function () { + // sets the basic loading screen up + loader.loadingBarWidth = window.innerWidth - (window.innerWidth / 10); + gete("toLoadBar").style.width = loader.loadingBarWidth + "px"; + gete("toLoadBar").style.height = "10px"; + gete("toLoadBar").style.left = (window.innerWidth / 20) + "px"; + gete("toLoadBar").style.top = (window.innerHeight / 2) + "px"; + + gete("loadedBar").style.top = (window.innerHeight / 2) + "px"; + gete("loadedBar").style.left = (window.innerWidth / 20) + "px"; + gete("loadedBar").style.width = "0px"; + gete("loadedBar").style.height = "10px"; + + gete("splashlogo").style.top = (window.innerHeight / 2) - 20 - (gete("splashlogo").height) + "px"; + gete("splashlogo").style.left = (window.innerWidth / 2) - (gete("splashlogo").width / 2) + "px"; + }, + setLoadingProgress: function (val) { + gete("loadedBar").style.width = Math.floor(val * loader.loadingBarWidth) + "px"; + }, + fadeIn: function () { + // fade in loading screen + // this has to be done in two steps, otherwise the transition would never fire as visibility = hidden + gete("loadingScreen").style.visibility = "visible"; + loader.setLoadingScreen(); + fadeTimer = setTimeout("loader.realFadeIn()", 1); + }, + realFadeIn: function () { + gete("loadingScreen").style.opacity = 1; + fadeTimer = setTimeout("loader.fadedIn()", 500); + }, + fadedIn: function () {}, + fadeOut: function () { + gete("loadingScreen").style.opacity = 0; + fadeTimer = setTimeout("loader.fadedOut()", 1000); + }, + fadedOut: function () { + gete("loadingScreen").style.visibility = "hidden"; + }, + loadJS: function (title, hasimages) { + // load an effect + output("loading " + title); + var tempjs = document.createElement("script"); + tempjs.setAttribute("id", "js_" + title) + tempjs.setAttribute("type", "text/javascript") + // this parameter is to make sure this is not cached, for dev purposes + var d = new Date(); + var t = d.getTime(); + tempjs.setAttribute("src", title + ".js?t=" + t); + if (hasimages) + // if images need to be preloaded, do it here. + tempjs.onload = function () { + output("js loaded."); + eval("var imagesToLoad = " + title + "Effect.images();"); + loader.loadImages(imagesToLoad); + loader.JSLoaded(); + } + gete("head").appendChild(tempjs); + }, + + JSLoaded: function () {}, + + loadCSS: function (title) { + // load css + var d = new Date(); + var t = d.getTime(); + var tempcss = document.createElement("link"); + tempcss.setAttribute("id", "css_" + title) + tempcss.setAttribute("rel", "stylesheet") + tempcss.setAttribute("type", "text/css") + tempcss.setAttribute("href", title + ".css?t=" + t); + gete("head").appendChild(tempcss); + }, + loadTimer: false, + imageCache: null, + loadImages: function (imglist) { + output("loading images"); + loader.imageCache = new Array(); + for (n = 0; n < imglist.length; n++) { + var i = new Image(); + i.src = imglist[n]; + loader.imageCache.push(i); + } + loadTimer = setTimeout("loader.progressLoad()", 50); + loader.progressCount = 0; + }, + progressCount: 0, + progressLoad: function () { + // load next item on the preload list + if (loader.progressCount == 100) loader.loadComplete(); + if (loader.imageCache.length == 0) loader.loadComplete(); + var loaded = 0; + for (n = 0; n < loader.imageCache.length; n++) + if (loader.imageCache[n].complete) loaded++; + loader.setLoadingProgress(loaded / loader.imageCache.length); + if (loaded == loader.imageCache.length) loader.loadComplete(); + else loadTimer = setTimeout("loader.progressLoad()", 50); + }, + loadComplete: function () { + output("load complete!"); + activeEffect.start(); + loader.fadeOut(); + + }, + unload: function (title) { + console.log("unloading " + title); + try { + gete("head").removeChild(gete("css_" + title)); + gete("head").removeChild(gete("js_" + title)); + } catch (e) { + console.log("unload " + title + ":" + e.message); + } + } +} diff --git a/mobile-hybrid-demo/html/main.js b/mobile-hybrid-demo/html/main.js new file mode 100755 index 0000000..5611c69 --- /dev/null +++ b/mobile-hybrid-demo/html/main.js @@ -0,0 +1,148 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// this file contains global functions and variables + +// helper function to cut down on typing + +function gete(id) { + return document.getElementById(id); +} + +// the effect we are currently in +var activeEffect = null; +// the name of the effect we are loading +var targetEffect = ""; +var log = new Array(); +var animating = false; + +// Accelerometer variables +var xAcc = 0; +var yAcc = 0; +var zAcc = 0; + +function accelerometer(xx, yy, zz) { + // the qt app calls this to pass us the details + xAcc = xx; + yAcc = yy; + zAcc = zz; +} + +function output(s) { + // log function, uncomment return to enable it. + return; + log.unshift((new Date()).getTime() + ":" + s); + if (log.length > 3) log.pop(); + gete("output").innerHTML = log.join("<br>"); + console.log(s); +} + + +function resize() { + output("resize: " + window.innerWidth + "x" + window.innerHeight); + if (activeEffect) activeEffect.resize(); + gete("close").style.left = (window.innerWidth - 60) + "px"; + loader.setLoadingScreen(); +} + +function initialize() { + // first function that gets called + output("initializing.."); + loader.setLoadingScreen(); + loader.unload("loader"); + window.onresize = resize; + loader.JSLoaded = start; + loader.loadJS("menu", true); + loader.loadCSS("menu"); + resize(); +} + +function start() { + gete("loadingScreen").style.opacity = 0; + output("starting.."); + document.addEventListener('mousedown', mousedown, true); + document.addEventListener('mousemove', mousemove, true); + document.addEventListener('mouseup', mouseup, true); + menuEffect.init(); + menuEffect.start(); + activeEffect = menuEffect; + gete("close").style.opacity = 1; +} + +function startEffect(name) { + output("starting " + name); + targetEffect = name; + loader.fadedIn = loadEffect; + loader.fadeIn(); +} + +function loadEffect() { + output("loaded."); + menuEffect.deinit(); + loader.JSLoaded = effectLoaded; + loader.loadJS(targetEffect, true); + loader.loadCSS(targetEffect); +} + +function effectLoaded() { + eval("activeEffect = " + targetEffect + "Effect;"); + activeEffect.init(); +} + +function goBack() { + output("GO BACK"); + imageCache = new Array(); + loader.loadTimer = false; + + if (targetEffect == "") { + output("CLOSING"); + // this is bound to QT object + testObject.close(); + window.location = "index.html"; + } else { + loader.fadedIn = deinitEffect; + loader.fadeIn(); + } + //setTimeout("deiniteffect()",500); +} + +function deinitEffect() { + output("DEINIT"); + gete("mask").display = "inline"; + menuEffect.setBG(); + loader.setLoadingProgress(1.0); + activeEffect.deinit(); + eval("delete " + targetEffect + "Effect;"); //" = false;"); + loader.unload(targetEffect); + menuEffect.start(); + activeEffect = menuEffect; + targetEffect = ""; + setTimeout("loader.fadeOut()", 500); +} diff --git a/mobile-hybrid-demo/html/menu.css b/mobile-hybrid-demo/html/menu.css new file mode 100755 index 0000000..b7b4984 --- /dev/null +++ b/mobile-hybrid-demo/html/menu.css @@ -0,0 +1,39 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +div.menuItem { + position:fixed; + top:230px; +} + +img.menuLayer { + position:fixed; + +} diff --git a/mobile-hybrid-demo/html/menu.js b/mobile-hybrid-demo/html/menu.js new file mode 100755 index 0000000..c073c06 --- /dev/null +++ b/mobile-hybrid-demo/html/menu.js @@ -0,0 +1,196 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// the menu system + +function menuItem(name, imagename, layercount) { + this.destination = name; + this.div = document.createElement("div"); + this.div.setAttribute("id", name); + this.div.setAttribute("name", imagename); + this.div.setAttribute("class", "menuItem"); + this.layers = new Array(); + for (n = 0; n < layercount; n++) { + im = document.createElement("img"); + im.setAttribute("class", "menuLayer"); + im.src = ("images/menu_" + imagename + "_" + n + ".png"); + this.layers.push(im); + this.div.appendChild(im); + } + +} + +menuItem.prototype.moveLayers = function (pos, dif) { + for (m = 0; m < this.layers.length; m++) + this.layers[m].style.left = (pos + dif * m) + "px"; +} + +var menuEffect = { + itemWidth: 210, + drawOffset: 0, + centerOffset: 0, + menuWidth: 0, + selected: 4, + scrollTimer: false, + updateTimer: false, + inertia: 0, + diffOffset: 0, + menuY: 200, + menuHeight: 200, + items: Array( + new menuItem("multiplecanvas", "stocks", 3), new menuItem("csstransform", "flikr", 3), new menuItem("canvas", "gravity", 3), new menuItem("movingdivs", "bubbles", 3), new menuItem("climbergame", "climber", 3)), + click: function (x, y) { + // clicked on the sides means scroll + if (x > window.innerWidth - 70) { + this.selected++; + this.drawOffset += this.itemWidth; + scrollTimer = setTimeout("menuEffect.scroll(" + this.drawOffset + ")", 5); + } + if (x < 70) { + this.selected--; + this.drawOffset -= this.itemWidth; + scrollTimer = setTimeout("menuEffect.scroll(" + this.drawOffset + ")", 5); + } + // in the center, select the current effect and start it up + if (x >= 70 && x <= window.innerWidth - 70 && y >= this.menuY && y <= this.menuY + this.menuHeight) { + console.log("go to " + this.items[this.selected].destination); + startEffect(this.items[this.selected].destination); + } + this.selected = (this.selected + this.items.length) % this.items.length; + }, + swipe: function (dir) { + console.log("swipe" + this.drawOffset); + }, + drag: function (amt) { + this.drawOffset -= amt; + if (updateTimer == false) // only update if there is not an update queued up + updateTimer = setTimeout("menuEffect.updateLayout();", 8); + }, + scroll: function (amt) { + scrollTimer = false; + this.drawOffset -= Math.floor(amt / 4); + if (updateTimer == false) // only update if there is not an update queued up + updateTimer = setTimeout("menuEffect.updateLayout();", 8); + if (Math.abs(this.drawOffset) > 4) { + // we need to scroll more + scrollTimer = setTimeout("menuEffect.scroll(" + this.drawOffset + ")", 5); + } else { + this.drawOffset = 0; + scrollTimer = false; + } + + }, + releaseDrag: function (amt) { + if (this.drawOffset > 0) while (this.drawOffset > this.itemWidth / 2) { + this.drawOffset -= this.itemWidth; + this.selected--; + } + if (this.drawOffset < 0) while (this.drawOffset < -this.itemWidth / 2) { + this.drawOffset += this.itemWidth; + this.selected++; + } + this.selected = (this.selected + this.items.length) % this.items.length; + if (this.drawOffset != 0) scrollTimer = setTimeout("menuEffect.scroll(" + this.drawOffset + ")", 5); + if (updateTimer == false) updateTimer = setTimeout("menuEffect.updateLayout();", 5); + }, + init: function () { + console.log("menuEffect init."); + }, + + resize: function () { + this.setLayout(); + }, + setBG: function () { + gete("content").style.background = "url(http://code.qt.io/images/menu_bg.jpg)"; + gete("mask").style.background = "url(http://code.qt.io/images/menu_bg_mask.png)"; + + }, + setLayout: function () { + gete("mask").style.display = "inline"; + this.itemWidth = 280; + this.setBG(); + this.menuWidth = this.itemWidth * this.items.length; + this.drawOffset = 0; + this.centerOffset = (window.innerWidth / 2) - (this.itemWidth / 2); + this.diffOffset = this.centerOffset; + ypos = (window.innerHeight / 2) - 80; + this.menuY = ypos; + for (n = 0; n < this.items.length; n++) + for (m = 0; m < this.items[n].layers.length; m++) + this.items[n].layers[m].style.top = ypos + "px"; + this.updateLayout(); + }, + + updateLayout: function () { + // this function actually updates the items on the menu + updateTimer = false; + var xpos = (this.itemWidth * (-this.selected) + this.drawOffset + this.centerOffset); + for (n = 0; n < this.items.length; n++) { + // place each item to where it should be + if (xpos > window.innerWidth) xpos -= this.menuWidth; + if (xpos < 0 - this.itemWidth) xpos += this.menuWidth; + if (xpos < 0 - this.itemWidth || xpos > window.innerWidth) { + // this menuitem is not visible, but we have to leave them on the screen to avoid + // webkit thinking they are not needed and uncache them + for (m = 0; m < this.items[n].layers.length; m++) + this.items[n].layers[m].style.left = (window.innerWidth - 1) + "px"; + } else { + dif = (xpos - this.diffOffset) >> 2; + this.items[n].moveLayers(xpos, dif); + } + xpos += this.itemWidth; + } + }, + start: function () { + this.setLayout(); + for (n = 0; n < this.items.length; n++) { + gete("content").appendChild(this.items[n].div); + } + output("started menu."); + }, + hide: function () { + output("hiding menu"); + this.deinit(); + }, + deinit: function () { + // gete("content").style.background = "white"; + gete("mask").style.display = "none"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + + }, + images: function () { + var temp = new Array("images/menu_bg.jpg", "images/menu_bg_mask.png"); + for (n = 0; n < this.items.length; n++) + for (m = 0; m < this.items[n].layers.length; m++) + temp.push(this.items[n].layers[m].src); + return temp; + } +} diff --git a/mobile-hybrid-demo/html/movingdivs.css b/mobile-hybrid-demo/html/movingdivs.css new file mode 100755 index 0000000..92a1237 --- /dev/null +++ b/mobile-hybrid-demo/html/movingdivs.css @@ -0,0 +1,55 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +div.bubble{ + position: absolute; + width: 40px; + height: 40px; + background-image: url("http://code.qt.io/images/bubble_0.png"); + background-repeat: no-repeat; + z-index:10; +} + +div.bubbles { + position:absolute; + left:0px; + top:0px; + width:100%; + height:100%; + z-index:4; +} + +div#godray { + position:absolute; + left:0px; + top:0px; + z-index:5; + background-image: url("http://code.qt.io/images/bubbles_rays.png"); +} diff --git a/mobile-hybrid-demo/html/movingdivs.js b/mobile-hybrid-demo/html/movingdivs.js new file mode 100755 index 0000000..10e89f3 --- /dev/null +++ b/mobile-hybrid-demo/html/movingdivs.js @@ -0,0 +1,106 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// Effect demonstrating moving divs + +var movingdivsEffect = { + bubbles: Array(), + dimensions: Array(), + timer: false, + spawntime: 0, + click: function (x, y) {}, + swipe: function (dir) {}, + drag: function (amt, x, y) { + // limit spawning new bubbles if there are too many on screen already + if ((new Date()).getTime() - this.spawntime > this.bubbles.length) { + temp = document.createElement("div"); + temp.xp = x; + temp.yp = y; + temp.zp = Math.floor(Math.random() * 3) + 3; + // generate initial acceleration according to the current accelerometer data + temp.xa = temp.zp / 4 * xAcc / 6; + temp.ya = temp.zp / 4 * yAcc / -6; + temp.setAttribute("class", "bubble"); + temp.style.top = temp.yp + "px"; + temp.style.left = temp.xp + "px"; + temp.style.backgroundImage = "url(http://code.qt.io/images/bubble_%22%20+%20Math.floor(Math.random() * 3) + ".png)"; + gete("bubbles").appendChild(temp); + this.bubbles.push(temp); + this.spawntime = (new Date()).getTime(); + } + }, + releaseDrag: function (amt) {}, + init: function () { + console.log("bubbles init."); + bubs = document.createElement("div"); + bubs.setAttribute("id", "bubbles"); + gete("content").appendChild(bubs); + movingdivsEffect.resize(); + }, + start: function () { + this.timer = setTimeout("movingdivsEffect.renderframe()", 200); + }, + deinit: function () { + // remove all content + gete("content").style.background = "white"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + // stop timer + delete this.timer; + }, + resize: function () { + output("window:" + window.innerWidth + "," + window.innerHeight); + gete("content").style.background = "url(http://code.qt.io/images/bubbles_bg.jpg)"; + movingdivsEffect.dimensions = Array(0, 360, 0, 640); + }, + images: function () { + // returns images to preload + return new Array("images/bubbles_bg.jpg", "images/bubble_0.png", "images/bubble_1.png", "images/bubble_2.png"); + }, + renderframe: function () { + // get current accelerometer data and scale it + xaa = xAcc / 15; + yaa = yAcc / -15; + for (var b in this.bubbles) { + this.bubbles[b].xp += this.bubbles[b].xa + xaa; + this.bubbles[b].yp += this.bubbles[b].ya + yaa; + // check to see if this bubble needs to be removed. + if (this.bubbles[b].xp < movingdivsEffect.dimensions[0] || this.bubbles[b].xp > movingdivsEffect.dimensions[1] || this.bubbles[b].yp < movingdivsEffect.dimensions[2] || this.bubbles[b].yp > movingdivsEffect.dimensions[3]) { + gete("bubbles").removeChild(this.bubbles[b]); + this.bubbles.splice(b, 1); + } else { + this.bubbles[b].style.left = Math.round(this.bubbles[b].xp) + "px"; + this.bubbles[b].style.top = Math.round(this.bubbles[b].yp) + "px"; + } + } + // trigger repaint as soon as possible + if (this.timer) this.timer = setTimeout("movingdivsEffect.renderframe()", 1); + } +} diff --git a/mobile-hybrid-demo/html/multiplecanvas.css b/mobile-hybrid-demo/html/multiplecanvas.css new file mode 100755 index 0000000..ff4089a --- /dev/null +++ b/mobile-hybrid-demo/html/multiplecanvas.css @@ -0,0 +1,87 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + + div#title { + position:absolute; + top: 100px; + left: 10px; + font: normal 20px sans-serif; + color:white; + } + + a.button { + -webkit-user-select:none; + background: transparent url(http://code.qt.io/stocks_buttons.png) no-repeat scroll; + z-index: 2; + position:absolute; + font: normal 20px sans-serif; + height:39px; + color: white; + width:53px; + padding-top: 5px; + padding-left: 10px; + background-position: 0px 0px; + } + + +a.button:active { + background-position: -63px 0px; +} + +canvas#biggraph { + position: absolute; + width:305px; + height: 254px; + top: 142px; + left:2px; +} + +canvas#smallgraph { + position: absolute; + width:305px; + height: 128px; + top: 487px; + left:2px; +} + +canvas#volumegraph { + position: absolute; + width:305px; + height: 56px; + top: 427px; + left:2px; +} +canvas#volumegraph2 { + position: absolute; + width:305px; + height: 56px; + top: 457px; + left:2px; +} diff --git a/mobile-hybrid-demo/html/multiplecanvas.js b/mobile-hybrid-demo/html/multiplecanvas.js new file mode 100755 index 0000000..7b0f49f --- /dev/null +++ b/mobile-hybrid-demo/html/multiplecanvas.js @@ -0,0 +1,251 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// this demonstrates multiple canvases and simple drawing on them + +var multiplecanvasEffect = { + maxtick: 0, + gridSize: 18, + click: function (x, y) { + // redraw on click + multiplecanvasEffect.drawgraph("USD"); + }, + swipe: function (dir) {}, + drag: function (amt) {}, + releaseDrag: function (amt) {}, + updateLayout: function (redraw) { + multiplecanvasEffect.maxtick = 61; + multiplecanvasEffect.gridSize = 18; + multiplecanvasEffect.fillimage.src = "images/stocks_fill_color.png"; + gete("content").style.background = "url(http://code.qt.io/images/stocks_background.png)"; + gete("title").style.top = "70px"; + gete("title").style.left = "10px"; + gete("biggraph").style.width = "305px"; + gete("biggraph").style.height = "235px"; + gete("biggraph").style.top = "101px"; + gete("biggraph").style.left = "2px"; + gete("smallgraph").style.width = "305px"; + gete("smallgraph").style.height = "125px"; + gete("smallgraph").style.top = "427px"; + gete("smallgraph").style.left = "2px"; + gete("volumegraph").style.width = "305px"; + gete("volumegraph").style.height = "55px"; + gete("volumegraph").style.top = "367px"; + gete("volumegraph").style.left = "2px"; + gete("volumegraph2").style.width = "305px"; + gete("volumegraph2").style.height = "55px"; + gete("volumegraph2").style.top = "583px"; + gete("volumegraph2").style.left = "2px"; + multiplecanvasEffect.biggraph.width = 304; + multiplecanvasEffect.biggraph.height = 235; + multiplecanvasEffect.smallgraph.width = 304; + multiplecanvasEffect.smallgraph.height = 125; + multiplecanvasEffect.volumegraph.width = 304; + multiplecanvasEffect.volumegraph.height = 55; + multiplecanvasEffect.volumegraph2.width = 304; + multiplecanvasEffect.volumegraph2.height = 55; + multiplecanvasEffect.heights[0] = 235; + multiplecanvasEffect.heights[1] = 126; + multiplecanvasEffect.heights[2] = 54; + multiplecanvasEffect.heights[3] = 54; + // get canvas contexts + if (multiplecanvasEffect.biggraph && multiplecanvasEffect.biggraph.getContext) { + multiplecanvasEffect.context[0] = multiplecanvasEffect.biggraph.getContext("2d"); + } + if (multiplecanvasEffect.smallgraph && multiplecanvasEffect.smallgraph.getContext) { + multiplecanvasEffect.context[1] = multiplecanvasEffect.smallgraph.getContext("2d"); + } + if (multiplecanvasEffect.volumegraph && multiplecanvasEffect.volumegraph.getContext) { + multiplecanvasEffect.context[2] = multiplecanvasEffect.volumegraph.getContext("2d"); + } + if (multiplecanvasEffect.volumegraph2 && multiplecanvasEffect.volumegraph2.getContext) { + multiplecanvasEffect.context[3] = multiplecanvasEffect.volumegraph2.getContext("2d"); + } + if (redraw) multiplecanvasEffect.timer = setTimeout("multiplecanvasEffect.drawgraph('USD')", 1); + + }, + init: function () { + console.log("multiplecanvasEffect init."); + multiplecanvasEffect.fillimage = new Image(); + multiplecanvasEffect.fillimage.src = "images/stocks_fill_color.png"; + title = document.createElement("div"); + title.setAttribute("id", "title"); + gete("content").appendChild(title); + multiplecanvasEffect.biggraph = document.createElement("canvas"); + multiplecanvasEffect.biggraph.setAttribute("id", "biggraph"); + multiplecanvasEffect.smallgraph = document.createElement("canvas"); + multiplecanvasEffect.smallgraph.setAttribute("id", "smallgraph"); + multiplecanvasEffect.volumegraph = document.createElement("canvas"); + multiplecanvasEffect.volumegraph.setAttribute("id", "volumegraph"); + multiplecanvasEffect.volumegraph2 = document.createElement("canvas"); + multiplecanvasEffect.volumegraph2.setAttribute("id", "volumegraph2"); + gete("content").appendChild(multiplecanvasEffect.biggraph); + gete("content").appendChild(multiplecanvasEffect.smallgraph); + gete("content").appendChild(multiplecanvasEffect.volumegraph); + gete("content").appendChild(multiplecanvasEffect.volumegraph2); + multiplecanvasEffect.updateLayout(false); + + + }, + start: function () { + multiplecanvasEffect.timer = setTimeout("multiplecanvasEffect.drawgraph('USD')", 1); + }, + deinit: function () { + for (n = 0; n < 4; n++) + delete multiplecanvasEffect.context[n]; + gete("content").style.background = "white"; + if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1) + gete("content").removeChild(gete("content").firstChild); + + }, + resize: function () { + if (multiplecanvasEffect.timer) multiplecanvasEffect.timer = false; + multiplecanvasEffect.updateLayout(true); + //multiplecanvasEffect.drawGraph(); + }, + images: function () { + return new Array("images/stocks_fill_color.png", "images/stocks_fill_color_big.png", "images/stocks_background.png", "images/stocks_buttons.png"); + }, + data: function (x) { + return 60 + x / 4 + (Math.sin(x / 4)) + (Math.sin(x / 7)) * 2 + (Math.sin(x / 6)); + }, + drawphase: -1, + timer: null, + gdata: null, + filled: null, + gdatapertick: null, + context: Array(), + fillimage: null, + heights: Array(), + draw: function () { + // main drawing happens here in different phases + // phase 0 draws ticklines + // phase 1 draws the data + // phase 2 is the end phase + if (multiplecanvasEffect.timer == false) { + multiplecanvasEffect.drawphase = -1; + multiplecanvasEffect.drawgraph("USD"); + return; + } + multiplecanvasEffect.timer = false; + if (multiplecanvasEffect.drawphase == 2) { + multiplecanvasEffect.drawphase = -1; + return; + } + if (multiplecanvasEffect.drawphase == 1) { + // draw the charts + var val; + for (n = 0; n < 2; n++) { + multiplecanvasEffect.context[n].lineWidth = 1.0; + multiplecanvasEffect.context[n].strokeStyle = "#30FFFF"; + multiplecanvasEffect.context[n].beginPath(); + multiplecanvasEffect.context[n].moveTo(5 * multiplecanvasEffect.tick, multiplecanvasEffect.heights[n] - (multiplecanvasEffect.gdata[5 * multiplecanvasEffect.tick] / (n + 1))); + // charts get drawn in 5 pixel steps + for (m = 0; m < 6; m++) { + // get the data + val = multiplecanvasEffect.gdata[5 * multiplecanvasEffect.tick + m] / (n + 1); + if (m < 5) { + multiplecanvasEffect.context[n].globalAlpha = 0.4; + // check that val is a number, otherwise this crashes on the simulator + if (!isNaN(val)) multiplecanvasEffect.context[n].drawImage( + multiplecanvasEffect.fillimage, 5 * multiplecanvasEffect.tick + m, 0, 1, 1, 5 * multiplecanvasEffect.tick + m, multiplecanvasEffect.heights[n] - val, 1, val); + } + multiplecanvasEffect.context[n].globalAlpha = 1.0; + multiplecanvasEffect.context[n].lineTo(5 * multiplecanvasEffect.tick + m, multiplecanvasEffect.heights[n] - (multiplecanvasEffect.gdata[5 * multiplecanvasEffect.tick + m] / (n + 1))); + } + multiplecanvasEffect.context[n].stroke(); + } + // draw the volume graphs + multiplecanvasEffect.context[2].fillStyle = "#6090A0"; + multiplecanvasEffect.context[3].fillStyle = "#6090A0"; + for (n = 0; n < 5; n++) { + val = 10 + Math.floor((Math.random() * 20)); + multiplecanvasEffect.context[2].fillRect(5 * multiplecanvasEffect.tick + n, multiplecanvasEffect.volumegraph.height - val, 1, val); + multiplecanvasEffect.context[3].fillRect(5 * multiplecanvasEffect.tick + n, multiplecanvasEffect.volumegraph.height - val, 1, val); + } + multiplecanvasEffect.tick++; + // check if we have drawn enough + if (5 * multiplecanvasEffect.tick >= multiplecanvasEffect.biggraph.width) { + multiplecanvasEffect.drawphase = 2; + multiplecanvasEffect.tick = 0; + } + + } + // draw tick lines + if (multiplecanvasEffect.drawphase == 0) { + for (n = 0; n < 4; n++) { + multiplecanvasEffect.context[n].strokeStyle = "#9090D0"; + multiplecanvasEffect.context[n].lineWidth = 0.3; + if (multiplecanvasEffect.tick < 16) { + multiplecanvasEffect.context[n].beginPath(); + multiplecanvasEffect.context[n].moveTo(multiplecanvasEffect.gridSize + multiplecanvasEffect.tick * multiplecanvasEffect.gridSize, 1); + multiplecanvasEffect.context[n].lineTo(multiplecanvasEffect.gridSize + multiplecanvasEffect.tick * multiplecanvasEffect.gridSize, multiplecanvasEffect.heights[n]); + multiplecanvasEffect.context[n].stroke(); + } else { + multiplecanvasEffect.context[n].beginPath(); + multiplecanvasEffect.context[n].moveTo(1, multiplecanvasEffect.gridSize + (multiplecanvasEffect.tick - 16) * multiplecanvasEffect.gridSize); + multiplecanvasEffect.context[n].lineTo(multiplecanvasEffect.biggraph.width, multiplecanvasEffect.gridSize + (multiplecanvasEffect.tick - 16) * multiplecanvasEffect.gridSize); + multiplecanvasEffect.context[n].stroke(); + } + } + multiplecanvasEffect.tick++; + if (multiplecanvasEffect.tick == 33) { + multiplecanvasEffect.drawphase = 1; + multiplecanvasEffect.tick = 0; + } + } + multiplecanvasEffect.timer = setTimeout("multiplecanvasEffect.draw()", 30); + }, + + drawgraph: function (cur) { + output("draw graph." + multiplecanvasEffect.drawphase); + if (multiplecanvasEffect.drawphase != -1) return; + gete("title").innerHTML = cur + ":EUR 30-day +0.24"; + multiplecanvasEffect.gdata = new Array(); + multiplecanvasEffect.gdatapertick = new Array(); + multiplecanvasEffect.filled = new Array(); + // generate data for the graphs + for (n = 0; n < multiplecanvasEffect.biggraph.width; n++) { + multiplecanvasEffect.gdata[n] = multiplecanvasEffect.data(n); + multiplecanvasEffect.gdatapertick[n] = multiplecanvasEffect.data(n) / 60; + multiplecanvasEffect.filled[n] = 0; + } + multiplecanvasEffect.drawphase = 0; + multiplecanvasEffect.tick = 0; + // clear the canvases before drawing + multiplecanvasEffect.context[2].clearRect(0, 0, 305, multiplecanvasEffect.heights[2]); + multiplecanvasEffect.context[3].clearRect(0, 0, 305, multiplecanvasEffect.heights[2]); + multiplecanvasEffect.context[1].clearRect(0, 0, 305, multiplecanvasEffect.heights[1]); + multiplecanvasEffect.context[0].clearRect(0, 0, 305, multiplecanvasEffect.heights[0]); + multiplecanvasEffect.timer = setTimeout("multiplecanvasEffect.draw()", 1); + } + + +} diff --git a/mobile-hybrid-demo/main.cpp b/mobile-hybrid-demo/main.cpp new file mode 100755 index 0000000..6ab2cea --- /dev/null +++ b/mobile-hybrid-demo/main.cpp @@ -0,0 +1,51 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +#include "mainwindow.h" + +#include <QtGui/QApplication> +#include <QDir> +#include <QDebug> +#include <QFileInfo> + +int main(int argc, char *argv[]) +{ + QApplication app(argc, argv); + + MainWindow mainWindow; + mainWindow.setOrientation(MainWindow::ScreenOrientationLockPortrait); + mainWindow.showExpanded(); + + QString file(QString("file:///") + QDir::currentPath() + "/html/html/index.html"); + QUrl url(/service/qurl::fromUserInput(file)); + mainWindow.loadUrl(url); + + return app.exec(); +} diff --git a/mobile-hybrid-demo/mainwindow.cpp b/mobile-hybrid-demo/mainwindow.cpp new file mode 100755 index 0000000..7ec6ccf --- /dev/null +++ b/mobile-hybrid-demo/mainwindow.cpp @@ -0,0 +1,110 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// checksum 0xfd0b version 0x20001 + + +#include "mainwindow.h" + +#include <QtCore/QCoreApplication> + +#if defined(Q_OS_SYMBIAN) && defined(ORIENTATIONLOCK) +#include <eikenv.h> +#include <eikappui.h> +#include <aknenv.h> +#include <aknappui.h> +#endif // Q_OS_SYMBIAN && ORIENTATIONLOCK + +MainWindow::MainWindow(QWidget *parent) + : QMainWindow(parent) +{ + m_web = new WebWidget; + setCentralWidget(m_web); +} + +MainWindow::~MainWindow() +{ + delete m_web; +} + +void MainWindow::loadUrl(const QUrl &url) +{ + m_web->loadUrl(url); +} + + +void MainWindow::setOrientation(ScreenOrientation orientation) +{ +#ifdef Q_OS_SYMBIAN + if (orientation != ScreenOrientationAuto) { +#if defined(ORIENTATIONLOCK) + const CAknAppUiBase::TAppUiOrientation uiOrientation = + (orientation == ScreenOrientationLockPortrait) ? CAknAppUi::EAppUiOrientationPortrait + : CAknAppUi::EAppUiOrientationLandscape; + CAknAppUi* appUi = dynamic_cast<CAknAppUi*> (CEikonEnv::Static()->AppUi()); + TRAPD(error, + if (appUi) + appUi->SetOrientationL(uiOrientation); + ); + Q_UNUSED(error) +#else // ORIENTATIONLOCK + qWarning("'ORIENTATIONLOCK' needs to be defined on Symbian when locking the orientation."); +#endif // ORIENTATIONLOCK + } +#elif defined(Q_WS_MAEMO_5) + Qt::WidgetAttribute attribute; + switch (orientation) { + case ScreenOrientationLockPortrait: + attribute = Qt::WA_Maemo5PortraitOrientation; + break; + case ScreenOrientationLockLandscape: + attribute = Qt::WA_Maemo5LandscapeOrientation; + break; + case ScreenOrientationAuto: + default: + attribute = Qt::WA_Maemo5AutoOrientation; + break; + } + setAttribute(attribute, true); +#else // Q_OS_SYMBIAN + Q_UNUSED(orientation); +#endif // Q_OS_SYMBIAN +} + +void MainWindow::showExpanded() +{ +#ifdef Q_OS_SYMBIAN + showFullScreen(); +#elif defined(Q_WS_MAEMO_5) || defined(Q_WS_MAEMO_6) + showMaximized(); +#else + showFullScreen(); +#endif +} diff --git a/mobile-hybrid-demo/mainwindow.h b/mobile-hybrid-demo/mainwindow.h new file mode 100755 index 0000000..c3f43f0 --- /dev/null +++ b/mobile-hybrid-demo/mainwindow.h @@ -0,0 +1,72 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +// checksum 0x9a77 version 0x20001 +/* + This file was generated by the Mobile Qt Application wizard of Qt Creator. + MainWindow is a convenience class containing mobile device specific code + such as screen orientation handling. + It is recommended not to modify this file, since newer versions of Qt Creator + may offer an updated version of it. +*/ + +#ifndef MAINWINDOW_H +#define MAINWINDOW_H + +#include <QtGui/QMainWindow> +#include "webwidget.h" + +namespace Ui { + class MainWindow; +} + +class MainWindow : public QMainWindow +{ + Q_OBJECT +public: + enum ScreenOrientation { + ScreenOrientationLockPortrait, + ScreenOrientationLockLandscape, + ScreenOrientationAuto + }; + + explicit MainWindow(QWidget *parent = 0); + virtual ~MainWindow(); + + void loadUrl(const QUrl &url); + + void setOrientation(ScreenOrientation orientation); + void showExpanded(); + +private: + WebWidget *m_web; +}; + +#endif // MAINWINDOW_H diff --git a/mobile-hybrid-demo/mobile-hybrid-demo.pro b/mobile-hybrid-demo/mobile-hybrid-demo.pro new file mode 100755 index 0000000..d7e8201 --- /dev/null +++ b/mobile-hybrid-demo/mobile-hybrid-demo.pro @@ -0,0 +1,36 @@ +# Add files and directories to ship with the application +# by adapting the examples below. +# file1.source = myfile +dir1.source = html +dir1.target = html +DEPLOYMENTFOLDERS = dir1 + +# Avoid auto screen rotation +DEFINES += ORIENTATIONLOCK + +# Needs to be defined for Symbian +DEFINES += NETWORKACCESS + +symbian:TARGET.UID3 = 0xA002D387 + +TARGET=HTML5 +QT+=webkit +CONFIG += mobility +MOBILITY += sensors + +# opengl + +# If your application uses the Qt Mobility libraries, uncomment +# the following lines and add the respective components to the +# MOBILITY variable. +# CONFIG += mobility +# MOBILITY += + +SOURCES += main.cpp mainwindow.cpp webwidget.cpp + +HEADERS += mainwindow.h webwidget.h +FORMS += + +# Please do not modify the following two lines. Required for deployment. +include(deployment.pri) +qtcAddDeployment() diff --git a/mobile-hybrid-demo/webwidget.cpp b/mobile-hybrid-demo/webwidget.cpp new file mode 100755 index 0000000..4fc4a08 --- /dev/null +++ b/mobile-hybrid-demo/webwidget.cpp @@ -0,0 +1,108 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +#include "webwidget.h" +#include <QPainter> +#include <QWebSettings> +#include <QWebFrame> +#include <QAccelerometer> +#include <QDebug> + +// #include <QGLWidget> + +WebWidget::WebWidget() +{ + setFrameShape(NoFrame); + setScene(new QGraphicsScene(this)); + setContextMenuPolicy(Qt::NoContextMenu); + + m_webview.setResizesToContents(false); + QWebSettings::globalSettings()->setAttribute(QWebSettings::AcceleratedCompositingEnabled, false); + QWebSettings::globalSettings()->setAttribute(QWebSettings::TiledBackingStoreEnabled, false); + scene()->addItem(&m_webview); + m_webview.focusWidget(); + + accelerometerSensor = new QAccelerometer(this); + inactiveTimer.setSingleShot(true); + + if (!Timer.isActive()) + Timer.start(20, this); + + // start the sensor + if (!accelerometerSensor->isActive()) + accelerometerSensor->start(); + + if (!accelerometerSensor->isActive()) + { + //qDebug() << "accelerometer sensor didn't start!" << endl; + } +} + +void WebWidget::loadUrl(const QUrl &url) +{ + m_webview.load(url); + QWebFrame *frame = m_webview.page()->mainFrame(); + frame->addToJavaScriptWindowObject("testObject", this->parent()); +} + +void WebWidget::resizeEvent(QResizeEvent *event) +{ + m_webview.resize(event->size()); + scene()->setSceneRect(QRect(QPoint(), event->size())); + QGraphicsView::resizeEvent(event); +} + +bool WebWidget::event(QEvent *event) +{ + switch (event->type()) { + case QEvent::Timer: + if (static_cast<QTimerEvent*>(event)->timerId() == Timer.timerId()) + updateXYZPosition(); // update the xyz position + break; + default: + break; + } + return QGraphicsView::event(event); +} + +void WebWidget::updateXYZPosition() +{ + QAccelerometerReading *reading = accelerometerSensor->reading(); + qreal xacceleration = 0.0f; + qreal yacceleration = 0.0f; + qreal zacceleration = 0.0f; + if (reading) { + xacceleration = reading->x(); + yacceleration = reading->y(); + zacceleration = reading->z(); + m_webview.page()->mainFrame()->evaluateJavaScript("accelerometer("+QString::number(qRound(xacceleration*10))+","+QString::number(qRound(yacceleration*10))+","+QString::number(qRound(zacceleration*10))+")"); + + } +} diff --git a/mobile-hybrid-demo/webwidget.h b/mobile-hybrid-demo/webwidget.h new file mode 100755 index 0000000..3db334b --- /dev/null +++ b/mobile-hybrid-demo/webwidget.h @@ -0,0 +1,63 @@ +/* This file is part of mobile_hybrid_demo (HTML5 demonstration) + +Copyright � 2010 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +Contact: Nokia Corporation [email protected] + +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 Nokia Corporation 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." +*/ + +#ifndef WEBWIDGET_H +#define WEBWIDGET_H + +#include <QGraphicsView> +#include <QtWebKit/QWebView> +#include <QtWebKit/QGraphicsWebView> +#include <QTimer> +#include <QAccelerometer> +#include <QBasicTimer> + +QTM_USE_NAMESPACE + +class WebWidget : public QGraphicsView +{ + +public: + WebWidget(); + void loadUrl(const QUrl &url); + void resizeEvent(QResizeEvent *event); + +protected: + QGraphicsWebView m_webview; + bool event(QEvent *event); + +private: + void updateXYZPosition(); + QAccelerometer *accelerometerSensor; + QBasicTimer Timer; + QTimer inactiveTimer; + +}; + +#endif // WEBWIDGET_H |
