Updates Wikitude Architect examples to SDK 9.6.0

Wikitude · Mar 19, 2021 · 8ca6e96 · 8ca6e96
1 parent d4f0cc4
commit 8ca6e96
Show file tree

Hide file tree

Showing 457 changed files with 4,002 additions and 3,572 deletions.
diff --git a/01_ImageTracking_1_ImageOnTarget/assets/magazine.wtc b/01_ImageTracking_1_ImageOnTarget/assets/magazine.wtc
diff --git a/01_ImageTracking_1_ImageOnTarget/css/default.css b/01_ImageTracking_1_ImageOnTarget/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/01_ImageTracking_1_ImageOnTarget/index.html b/01_ImageTracking_1_ImageOnTarget/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/01_ImageTracking_2_DifferentTargets/assets/magazine.wtc b/01_ImageTracking_2_DifferentTargets/assets/magazine.wtc
diff --git a/01_ImageTracking_2_DifferentTargets/css/default.css b/01_ImageTracking_2_DifferentTargets/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/01_ImageTracking_2_DifferentTargets/index.html b/01_ImageTracking_2_DifferentTargets/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/01_ImageTracking_3_Interactivity/assets/magazine.wtc b/01_ImageTracking_3_Interactivity/assets/magazine.wtc
diff --git a/01_ImageTracking_3_Interactivity/css/default.css b/01_ImageTracking_3_Interactivity/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/01_ImageTracking_3_Interactivity/index.html b/01_ImageTracking_3_Interactivity/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/01_ImageTracking_4_HtmlDrawable/assets/magazine.wtc b/01_ImageTracking_4_HtmlDrawable/assets/magazine.wtc
diff --git a/01_ImageTracking_4_HtmlDrawable/css/default.css b/01_ImageTracking_4_HtmlDrawable/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/01_ImageTracking_4_HtmlDrawable/index.html b/01_ImageTracking_4_HtmlDrawable/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/01_ImageTracking_5_Bonus-Sparkles/assets/magazine.wtc b/01_ImageTracking_5_Bonus-Sparkles/assets/magazine.wtc
diff --git a/01_ImageTracking_5_Bonus-Sparkles/css/default.css b/01_ImageTracking_5_Bonus-Sparkles/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/01_ImageTracking_5_Bonus-Sparkles/index.html b/01_ImageTracking_5_Bonus-Sparkles/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/02_AdvancedImageTracking_1_Gestures/assets/beard_01.png b/02_AdvancedImageTracking_1_Gestures/assets/beard_01.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/beard_02.png b/02_AdvancedImageTracking_1_Gestures/assets/beard_02.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/beard_03.png b/02_AdvancedImageTracking_1_Gestures/assets/beard_03.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/christmas_hat.png b/02_AdvancedImageTracking_1_Gestures/assets/christmas_hat.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/delete.png b/02_AdvancedImageTracking_1_Gestures/assets/delete.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/face.wtc b/02_AdvancedImageTracking_1_Gestures/assets/face.wtc
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/glasses.png b/02_AdvancedImageTracking_1_Gestures/assets/glasses.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/mirror_sunglasses.png b/02_AdvancedImageTracking_1_Gestures/assets/mirror_sunglasses.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/police_hat.png b/02_AdvancedImageTracking_1_Gestures/assets/police_hat.png
diff --git a/02_AdvancedImageTracking_1_Gestures/assets/snapshot.png b/02_AdvancedImageTracking_1_Gestures/assets/snapshot.png
diff --git a/02_AdvancedImageTracking_1_Gestures/css/default.css b/02_AdvancedImageTracking_1_Gestures/css/default.css
@@ -1,14 +1,14 @@
-#page1 {
-    overflow: hidden;
-    background: none;
+html, body {
+    margin: 0;
     height: 100%;
+    overflow: hidden
 }
 
 .info {
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;
@@ -58,40 +58,71 @@
     text-shadow: none;
 }
 
-@media screen and (orientation: portrait) {
+.overlayButton:active {
+    opacity: 0.5;
+}
 
-    #overlayPicker {
-        overflow: auto;
+.overlayButton img {
+    height: 100%;
+}
+
+@media screen and (orientation: portrait) {
+    #overlayContainer {
+        background: none;
+        position: absolute;
+        right: 0;
         height: 100%;
-        width: 22%;
-        float: right;
+        padding-top: env(safe-area-inset-top);
+        padding-bottom: env(safe-area-inset-bottom);
+        padding-right: calc(1vw + env(safe-area-inset-right));
     }
 
-    #overlayPicker a {
-        width: 95%;
-        right: 0.5%;
+    #overlayPicker {
+        display: none;
+        overflow: hidden;
+        height: 100%;
+        text-align:right;
     }
 
-    #overlayPicker a img {
-        width: 100%;
+    .overlayButton {
+        text-align: center;
+        vertical-align: middle;
+        width: 10vh;
+        height: 10vh;
+        margin-top: 0.5vh;
+        margin-bottom: 0.5vh;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 1px 1px #000;
     }
 }
 
 @media screen and (orientation: landscape) {
-
-    #overlayPicker {
-        width: 60%;
-        text-align: right;
+    #overlayContainer {
+        background: none;
         position: absolute;
-        right: 0.5%;
-        bottom: 0.5%;
+        bottom: 0;
+        width: 100%;
+        padding-bottom: calc(1vh + env(safe-area-inset-bottom));
     }
 
-    #overlayPicker a {
-        width: 20%;
+    #overlayPicker {
+        display:none;
+        text-align: center;
+        width: 100%;
     }
 
-    #overlayPicker a img {
-        width: 100%;
+    .overlayButton {
+        padding: 0;
+        display: inline-block;
+        text-align: center;
+        vertical-align: middle;
+        width: 10vw;
+        height: 10vw;
+        margin-left: 0.5vw;
+        margin-right: 0.5vw;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 1px 1px #000;
     }
 }
diff --git a/02_AdvancedImageTracking_1_Gestures/index.html b/02_AdvancedImageTracking_1_Gestures/index.html
@@ -5,23 +5,14 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
     <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 
     <script src="https://www.wikitude.com/libs/architect.js"></script>
     <script type="text/javascript" src="../ade.js"></script>
 
-    <!-- jquery mobile CSS -->
-    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css"/>
-    <!-- required to set background transparent & enable "click through" -->
-    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css"/>
-
     <link rel="stylesheet" href="css/default.css"/>
-
-    <!-- jquery JS files -->
-    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
-    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
 </head>
 
 <body>
@@ -33,32 +24,32 @@
 </div>
 <div id="loadingMessage" class="info">Loading ...</div>
 
-<div data-role="page" id="page1">
-    <div data-role="header-status" id="overlayPicker" class="overlayPickerInactive">
-        <a href="javascript: World.showOverlay(0);" data-role="button" data-inline="true">
+<div id="overlayContainer">
+    <div id="overlayPicker" class="overlayPickerInactive">
+        <div class="overlayButton" onclick="World.showOverlay(0);">
             <img src="assets/christmas_hat.png">
-        </a>
-        <a href="javascript: World.showOverlay(1);" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.showOverlay(1);">
             <img src="assets/police_hat.png">
-        </a>
-        <a href="javascript: World.showOverlay(2);" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.showOverlay(2);">
             <img src="assets/glasses.png">
-        </a>
-        <a href="javascript: World.showOverlay(3);" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.showOverlay(3);">
             <img src="assets/mirror_sunglasses.png">
-        </a>
-        <a href="javascript: World.showOverlay(5);" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.showOverlay(5);">
             <img src="assets/beard_02.png">
-        </a>
-        <a href="javascript: World.showOverlay(6);" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.showOverlay(6);">
             <img src="assets/beard_03.png">
-        </a>
-        <a href="javascript: World.clearOverlays();" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.clearOverlays();">
             <img src="assets/delete.png">
-        </a>
-        <a href="javascript: World.captureScreen();" data-role="button" data-inline="true">
+        </div>
+        <div class="overlayButton" onclick="World.captureScreen();">
             <img src="assets/snapshot.png">
-        </a>
+        </div>
     </div>
 </div>
 

diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/images/ajax-loader.gif b/02_AdvancedImageTracking_1_Gestures/jquery/images/ajax-loader.gif
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-18-black.png b/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-18-black.png
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-18-white.png b/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-18-white.png
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-36-black.png b/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-36-black.png
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-36-white.png b/02_AdvancedImageTracking_1_Gestures/jquery/images/icons-36-white.png
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/jquery-1.9.1.min.js b/02_AdvancedImageTracking_1_Gestures/jquery/jquery-1.9.1.min.js
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/jquery-mobile-transparent-ui-overlay.css b/02_AdvancedImageTracking_1_Gestures/jquery/jquery-mobile-transparent-ui-overlay.css
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/jquery.mobile-1.3.2.min.css b/02_AdvancedImageTracking_1_Gestures/jquery/jquery.mobile-1.3.2.min.css
diff --git a/02_AdvancedImageTracking_1_Gestures/jquery/jquery.mobile-1.3.2.min.js b/02_AdvancedImageTracking_1_Gestures/jquery/jquery.mobile-1.3.2.min.js
diff --git a/02_AdvancedImageTracking_1_Gestures/js/gestures.js b/02_AdvancedImageTracking_1_Gestures/js/gestures.js
@@ -163,6 +163,7 @@ var World = {
             document.getElementById("overlayPicker").className = "overlayPicker";
 
             World.hideInfoBar();
+            World.showPicker();
         }
     },
 
@@ -254,7 +255,11 @@ var World = {
     showInfoBar: function worldLoadedFn() {
         document.getElementById("infoBox").style.display = "table";
         document.getElementById("loadingMessage").style.display = "none";
+    },
+
+    showPicker: function showPickerFn() {
+        document.getElementById("overlayPicker").style.display = "block";
     }
 };
 
-World.init();
+World.init();
diff --git a/02_AdvancedImageTracking_2_DistanceToTarget/assets/magazine.wtc b/02_AdvancedImageTracking_2_DistanceToTarget/assets/magazine.wtc
diff --git a/02_AdvancedImageTracking_2_DistanceToTarget/css/default.css b/02_AdvancedImageTracking_2_DistanceToTarget/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/02_AdvancedImageTracking_2_DistanceToTarget/index.html b/02_AdvancedImageTracking_2_DistanceToTarget/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title></title>
 

diff --git a/02_AdvancedImageTracking_3_ExtendedTracking/assets/iot_tracker.wtc b/02_AdvancedImageTracking_3_ExtendedTracking/assets/iot_tracker.wtc
diff --git a/02_AdvancedImageTracking_3_ExtendedTracking/css/default.css b/02_AdvancedImageTracking_3_ExtendedTracking/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;

diff --git a/02_AdvancedImageTracking_3_ExtendedTracking/index.html b/02_AdvancedImageTracking_3_ExtendedTracking/index.html
@@ -2,7 +2,8 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
+    <!-- disables pinch-scaling of the webview, so that gestures only do what they're supposed to -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
 
     <title>Extended Tracking Sample</title>
 

diff --git a/03_MultipleTargets_1_MultipleTargets/assets/dinosaurs.wtc b/03_MultipleTargets_1_MultipleTargets/assets/dinosaurs.wtc
diff --git a/03_MultipleTargets_1_MultipleTargets/css/default.css b/03_MultipleTargets_1_MultipleTargets/css/default.css
@@ -2,7 +2,7 @@
     font-size: large;
     position: absolute;
     width: 100%;
-    padding-top: 12px;
+    padding-top: calc(12px + env(safe-area-inset-top));
     padding-bottom: 12px;
     background-color: #BBBBBB;
     text-align: center;