Wikitude
How can we help you today?
How to add an eventlistener on a certain part of a screen using javascript
1 Comment
I was wondering if you can assign an event listener on a certain part of a mobile phone screen? For example just 90% of the screen only. I have an bottle that will spin regarding of the direction of the swipe. I have a button on the bottom of the screen that when is clicked, will go back two pages. However, when I click the button, the "click" is not triggered, instead the eventlistener is always triggered. Here is my code.Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->
<title>Hello Wikitude</title>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="ade.js"></script>
<link rel="stylesheet" href="default.css">
</head>
<body>
<!-- <div id="loadingMessage" class="info">Loading ...</div>-->
<!-- <div id="squareBracket" class="middle" ><img width='100%' src='squarebracket.png'></div> -->
<!-- onclick="document.location = 'architectsdk://actionButton?action=SpinTheBottleToMenu';" -->
<div id="backButton" class="bottom" onclick="document.location = 'architectsdk://actionButton?action=SpinTheBottleToMenu';"><img width='25%'src='backbutton.png'></div>
<script src="js/spinThebottle.js"></script>
</body>
</html>
spinThebottle.js
var startX,startY,endX,endY;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var firstSwipe = false;
var alreadyswiped = false;
var isSeen = false;
var World = {
loaded: false,
init: function initFn() {
/* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/
AR.context.services.sensors = false;
this.createOverlays();
},
createOverlays: function createOverlaysFn() {
// Initialize Tracker
// Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
// e.g. replace "pageOne" used for creating the AR.Trackeable2DOBject below, with the name of one of your new target images.
this.tracker = new AR.Tracker("SpinTheBottleTarget.wtc", {
//onLoaded: this.worldLoaded
});
// Create overlay for page one
var imgOne = new AR.ImageResource("fruitsarrow.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
zOrder: 0,
scale: 1.55,
offsetY: -0.03,
});
var imgTwo = new AR.ImageResource("sanmigbottle.png");
var overlayTwo = new AR.ImageDrawable(imgTwo, 1, {
zOrder: 1
});
var pageOne = new AR.Trackable2DObject(this.tracker, "spinthebottle", {
drawables: {
cam:
},
onEnterFieldOfVision: function onEnterFieldOfViewFn () {
swipeFunc.init(true);
},
onExitFieldOfVision : function onExitFieldofViewFn (){
swipeFunc.init(false);
}
});
this.rotationAnimationstartRight = function rotation(){
var rotate;
if(swipeFunc.touches.touchmove.y < h / 2){
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
} else if(swipeFunc.touches.touchmove.y > h / 2)
{
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
}
}
this.rotationAnimationstartLeft = function rotation(){
var rotate;
if(swipeFunc.touches.touchmove.y < h / 2){
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
} else if(swipeFunc.touches.touchmove.y > h / 2)
{
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
}
}
this.rotationAnimationRightOne = function rotation(){
var rotate;
if(swipeFunc.touches.touchmove.y < h / 2){
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1591, 3500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
} else if(swipeFunc.touches.touchmove.y > h / 2)
{
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1839, 4500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
}
}
this.rotationAnimationLeftOne = function rotation (){
var rotate;
if(swipeFunc.touches.touchmove.y < h / 2){
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1501, 4500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
} else if(swipeFunc.touches.touchmove.y > h / 2)
{
rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1350, 3500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});
rotate.start(1);
}
}
}
};
var swipeFunc = {
touches : {
"touchstart": {"x":-1, "y":-1},
"touchmove" : {"x":-1, "y":-1},
"touchend" : false,
"direction" : "undetermined"
},
touchHandler: function(event) {
var touch;
if (typeof event !== 'undefined'){
event.preventDefault();
if (typeof event.touches !== 'undefined') {
touch = event.touches;
switch (event.type) {
case 'touchstart':
case 'touchmove':
swipeFunc.touches.x = touch.pageX;
swipeFunc.touches.y = touch.pageY;
break;
case 'touchend':
swipeFunc.touches = true;
if (swipeFunc.touches.touchstart.x > -1 && swipeFunc.touches.touchmove.x > -1) {
swipeFunc.touches.direction = swipeFunc.touches.touchstart.x < swipeFunc.touches.touchmove.x ? "right" : "left";
// DO STUFF HERE
if(swipeFunc.touches.direction == "right" && isSeen === false){
World.rotationAnimationstartRight();
isSeen = true;
swipeFunc.touches.direction = "undetermined";
}
if(swipeFunc.touches.direction == "left" && isSeen === false){
World.rotationAnimationstartLeft();
isSeen = true;
swipeFunc.touches.direction = "undetermined";
}
if(swipeFunc.touches.direction == "right" && isSeen === true){
World.rotationAnimationRightOne();
swipeFunc.touches.direction = "undetermined";
}
if(swipeFunc.touches.direction == "left" && isSeen === true){
World.rotationAnimationLeftOne();
swipeFunc.touches.direction = "undetermined";
}
}
default:
break;
}
}
}
},
init: function(willAppear) {
if(willAppear === true){
document.addEventListener('touchstart', swipeFunc.touchHandler, false);
document.addEventListener('touchmove', swipeFunc.touchHandler, false);
document.addEventListener('touchend', swipeFunc.touchHandler, false);
}else if( willAppear === false){
document.removeEventListener('touchstart', swipeFunc.touchHandler, false);
document.removeEventListener('touchmove', swipeFunc.touchHandler, false);
document.removeEventListener('touchend', swipeFunc.touchHandler, false);
}
}
};
World.init();
© 2023 Wikitude, a Qualcomm company
Rivera.migueld