I am not able to display my glb for image tracking using ar.js
please check my web https://ignaciostellino.github.io./
I am able to recognize the image but not to display the 3D model. I guess should be related with the scale and position but not able to figure out.
This is my code:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<!-- url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex" -->
<a-nft
type="nft"
url="ignaciostellino.github.io/smoothie-peque/smoothie-peque"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<!-- gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf" -->
<a-entity gltf-model="Water/out.glb" scale="5 5 5"
position="50 150 0" crossorigin="anonymous">
<a-animation attribute="rotation" to = "360 0 0" dur="3000" easing="linear" repeat="indefinite"> </a-animation>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
I'm not sure what the problem is, perhaps your model is too small or too large. How can you be sure the marker is detected? Try using <a-gltf-model> instead of <a-entity>. You can also use our platform echoAR to upload your models and immediately get an AR.js experience link (learn how here). You can compare your code with the auto-generated one or just use the ARjs link that you get.
Related
When i load the screen on iOS scrolling in the X axis is not possible on iOS. No issues on android. When clicking a button which refreshes the data on the screen scrolling is possible again.
Anybody an idea what could cause this?
<div class="container">
<!-- CONTENT -->
<div class="scroll-container">
<!-- CONTENT-->
</div>
</div>
CSS
.container {
overflow-y: scroll;
width: 100%;
position: absolute;
overflow-x: scroll;
}
.scroll-container {
min-width: 100%;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
display: inline-block;
padding-bottom: 50px;
}
According to the docs you can add a scrolling section in your content using ion-scroll:
ion-scroll
Scroll is a non-flexboxed scroll area that can scroll horizontally or
vertically. ion-scroll Can be used in places where you may not need a
full page scroller, but a highly customized one, such as image scubber
or comment scroller.
<ion-scroll scrollX="true" scrollY="true">
<!-- ... -->
</ion-scroll>
Demo source:
<ion-header>
<ion-navbar>
<ion-title>Scroll</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
<div class="map-div"></div>
</ion-scroll>
</ion-content>
<style>
.map-div {
width: 2600px;
height: 1400px;
background: url('./assets/map.jpeg') no-repeat;
}
</style>
Take this markup, stick it in an html file, and view it in mobile Safari on an iPad. I'm using an iPad Mini 4 on iOS 9.3.2.
<html lang="en">
<head>
<title>long</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body style="background-color: #112FCB">
<div id="viewport" style="height: 928px; width: 768px; margin-top: 0px; display: block;">
<div style="width: 638.3376623376623px; height: 771.3246753246754px; transform: scale(1.203125, 1.203125); background-position-x: 0px;">
<div class="page-container" style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div class="page-scroll" style="height: 10202px; width: 640px; left: 0px; top: 0px;">
<div style="position: absolute; left: 254px; top: 259px; width: 88px; height: 89px; display: block; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">1</span>
</div>
<div style="position: absolute; left: 252px; top: 1098px; width: 113px; height: 60px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">`
<span style="top:-3px;left:0px;">2</span>
</div>
<div style="position: absolute; left: 229px; top: 1821px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">3</span>
</div>
<div style="position: absolute; left: 253px; top: 2503px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">4</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
So basically we have 4 absolutely positioned divs for showing where you are on the page, inside a very tall div (.page-scroll), which is inside a relatively positioned div with overflow-y: scroll and -webkit-overflow-scrolling: touch (.page-container). The other parent divs (page-viewport and viewport) are there to ensure a consistent look across devices.
On every other device we've tried, swiping to scroll scrolls the page-scroll div inside the page-container div as expected. However, on iPad, we are seeing non-deterministic behavior. If you swipe quickly, the page scrolls normally, but if you swipe slowly, the page will sometimes rubberband. It's as if the touchstart event is getting sent to one of the parent divs, and so the iPad thinks it is at the bottom or top of the page.
However! If -webkit-overflow-scrolling: touch is removed from the .page-container div, the problem disappears. But you lose momentum scrolling, which sucks. I should also note that if this markup is loaded onto a page via an iframe, the problem goes away, but that is not really an option for us (because reasons).
I have tried the suggestion in this similar question to put yet another div inside .page-scroll and set height: calc(100% + 1px), but that did not fix the bug.
I do see a lot of related questions that indicate -webkit-overflow-scrolling: touch has a myriad of problems, but none of those questions are quite exactly this bug, I think.
Has anyone encountered this before? Any suggestions for workarounds?
I have a Flowplayer flash issue. I'm using multiple video overlays and the player works perfectly on multiple desktop browsers but not on ios devices. I've tried the iPad js include and .ipad(). but nothing works. Can anyone point out the flaw here or a work around to get this to play on ios devices? Here's the full code... Thanks!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/example/flowplayer-3.2.6.min.js"></script>
<script src="http://www.angelmedflight.com/flowplayer/flowplayer.ipad-3.2.2.min.js"></script>
<style>
#overlay {
display: none;
padding: 0px;
width: 720px;
height: 466px;
background-image: url('http://www.angelmedflight.com/assets/images/BlackBox.png');
}
.close {
background: url('http://www.angelmedflight.com/assets/images/close.png') no-repeat;
position: absolute;
top: 2px;
right: 5px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
}
.close:hover {
background: url('http://www.angelmedflight.com/assets/images/closeHover.png') no-repeat;
}
#player {
display: block;
width: 640px;
height: 360px;
margin-top: 40px;
margin-left: 40px;
border-top: 1px solid #000;
border-left: 1px solid #111;
border-right: 1px solid #444;
border-bottom: 1px solid #666;
border: 1px solid #000;
}
#player *:focus {
outline-style: none;
}
</style>
<script>
$(function () {
var player = $f("player", "http://angelmedflight.com/flowplayer/flowplayer-3.2.15.swf").ipad();
$("a[rel]").overlay({
mask: {
color: '#000',
opacity: 0.8
},
onLoad: function () {
player.play(this.getTrigger().attr("href"));
},
onClose: function () {
player.unload();
}
});
});
</script>
</head>
<body>
<div class="ls-layer">
<img class="ls-bg" src="assets/images/carousel/video1.jpg" />
<a rel="#overlay" href="http://www.angelmedflight.com/video/Process_640x360_vegas_i.mp4"><img class="ls-s1" src="http://www.angelmedflight.com/assets/images/carousel/layer_play_button.png" /></a>
</div>
<div id="overlay">
<a class="close"></a>
<div id="player"> </div>
</div>
</body>
</html>
When you say "it doesn't work" what exactly is the experience?
Does it not load the video at all or just not load it in an overlay?
I believe the plugin opens the player in fullscreen mode and customizes the appearance of this mode.
When a player is loaded in full screen mode on iOS it is rendered in the system player, so the JS you are trying to use would have no effect.
If it is not playing at all, I cannot help you. Perhaps you could provide more information.
I am working on an app for a client and am trying to create a button with a completely custom icon. The icon is 30px x 30px and transparent in the middle.
I have almost achieved what I want using this css code:
/* info button override */
.ui-icon-info-page {
background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
background-size: 30px 30px;
background-color: black;
}
But there is a thin black circle that appears inside the icon, and also the icon image appears to be cut off:
I want to remove this circle and prevent the icon ? from being cut off. Also, I would like the question mark to be transparent instead of black, to show the image of the navigation bar beneath. If I try to set the background color to transparent though, the button appears entirely white:
How can I do this?
Update:
I tried applying this code:
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
And got this result:
I'm able to move the icon around by adjusting the top and left margins, but it's edges are cut off outside a frame centered on the black circle:
Update 2:
Here is the button I am using (Note that it is invisible here because it is a white button on a white background):
Here is the html code that I use to load the button:
<div data-role="header" data-position="fixed">
<div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>
</div>
This should fix the issue
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
Please ensure you are loading your application css file after jquery mobile css.
Edit:Here is a sample code based on the code you posted with the issue fixed
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
#rightBtn .ui-btn-inner {
width: 30px;
height: 30px;
margin: -3px;/*Modify to change icon position wrt the header*/
border: none !important;
}
.ui-icon-custom {
background: url(http://i.stack.imgur.com/AqicD.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
</style>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content"></div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/LCsmt/
Let me know if that helps.
I'm trying to write a progress bar or add a loading gif to my Smart Gwt application, which starts in onModuleLoad, and ends when the app is just about to display. Is there some type of event handler that can determine this? I've looked but i haven't found anything.
Noticed no one has answered this while searching for something else.
If you look at the SmartGWT showcase they have a popup that displays while the application is loading. In my application, I coopted the mechanism there and you simply have to add this to your webapp.html:
as part of the <head>
<!--CSS for loading message at application Startup-->
<style type="text/css">
body { overflow:hidden }
#loading {
border: 1px solid #ccc;
position: absolute;
left: 45%;
top: 40%;
padding: 2px;
z-index: 20001;
height: auto;
}
#loading a {
color: #225588;
}
#loading .loadingIndicator {
background: white;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
color: #444;
}
#loadingMsg {
font: normal 10px arial, tahoma, sans-serif;
}
</style>
as part of the <body> before the script tag loading your WebApp.nocache.js:
<!--add loading indicator while the app is being loaded-->
<div id="loadingWrapper">
<div id="loading">
<div class="loadingIndicator">
<!--<img src="images/pieces/48/cube_green.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>SmartGWT<br/>-->
<img src="WebApp/sc/skins/EnterpriseBlue/images/loading.gif" width="16" height="16" style="margin-right:8px;float:left;vertical-align:top;"/>WebApp<br/>
<span id="loadingMsg">Loading styles and images...</span></div>
</div>
</div>
<!--load skin-->
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>
<script type="text/javascript">
document.write("<"+"script src=WebApp/sc/skins/EnterpriseBlue/load_skin.js isc_version=7.1.js><"+"/script>");
</script>
<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Application<br>Please wait...';</script>
<!--include the application JS-->