I'm trying to follow the AR example in https://ar-js-org.github.io/AR.js-Docs/image-tracking/ but I keep getting the following console error which prevents the aframe scene from loading.
Uncaught TypeError: can't access property "style", this.domElement is null
Aframe 52
aframe-ar-nft.js:1:1636905
My Code:
<!doctype html>
<html lang="en">
<head>
<!-- style for the loader -->
<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>
<!-- import aframe and then ar.js with image tracking / location based features -->
<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>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- a-nft is the anchor that defines an Image Tracking entity -->
<!-- on 'url' use the path to the Image Descriptors created before. -->
<!-- the path should end with the name without the extension e.g. if file is 'pinball.fset' the path should end with 'pinball' -->
<a-nft
type="nft"
url="assets/marker/marker"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
<a-entity
gltf-model="models/xmas-tree/scene.gltf"
scale="5 5 5"
position="50 150 0"
>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
I have the following assets/
assets/
marker/
marker.fset
marker.fset3
marker.iset
These were generated using the node.js application as mentioned in the example link above.
Can anyone please advise where I am going wrong? And How I can get the AR to work in aframe?
Many thanks
Related
Problem:
Need to execute an action when an element enters the middle third area of the viewport:
Constraints:
I am using Alpine JS.
According to the Alpine intersect docs, I can control the rootMargin property of the underlying IntersectionObserver using .margin, in order to change the limit where the observer will trigger. I'm doing it as follows:
h1 {
margin-top: 95vh;
position: relative;
background-color: blue;
color: white;
z-index: 2;
}
body {
height: 200vh;
}
body::before,
body::after {
content: '';
position: fixed;
left: 0;
right: 0;
height: 33%;
background-color: grey;
z-index: 1;
}
body::before{
top: 0;
}
body::after{
bottom: 0;
}
<html>
<head>
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/#alpinejs/intersect#3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ message: 'Alpine Is Working' }"
x-intersect:enter.margin.-33%.0.-33%.0="message = 'ENTERED'"
x-intersect:leave.margin.-33%.0.-33%.0="message = 'LEFT'"
x-text="message"></h1>
</body>
</html>
In the above example, you can see it's not respecting the 33% top/bottom margin with the viewport. I marked those in grey using pseudoelements.
What should happen:
In the example above, it should say "Entered" or "Left" when the element scrolls into and out of the white area.
Any idea on what I may be doing wrong?
Thanks!
Your code wouldn't work for me in the code snippet, but did as soon as I copied it out to a local html file and ran it there.
The iframe is messing with the intersection observer's root.
Your code is useful to me, I hadn't been able to find an example combining the :enter and :leave modifiers.
I am creating a website about UFC and need help with my image positioning I have 3 images and want to place them in a horizontal arrangement across the screen but am having trouble doing this.I have created a div around each of the images to try and position them but cannot seem to get the result that I want, any help would be great.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">
<h1><u>Top Fighters</u></h1>
</head>
<body>
<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson"> <p> Demetrious Johnson is the
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1
draw and is the curent<br> flyweight champion. </p>
</div>
<div id="connor">
<img scr="connor.png" alt="Connor Mcgegor">
</div>
<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">
</div>
</body>
</html>
CSS
html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: aqua;
text-align: center;
font-size:24pt;
}
.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}
p {
color: aliceblue;
}
.connor {
position: center;
top: 8px;
right:12px;
}
.daniel {
position: relative;
}
You can set up a container div with class .container with a fixed width of x pixels, x = 3 * image width, because you have three images. Only use this if you want the images to stay horizontally aligned when the browser window is smaller than the width of 3x
.container{
width: x px;
}
Then give a shared class to your image divs, let's call it .imgClass. Now turn them to float;
.imgClass{
float:left;
}
EDIT: This means your topfightercss.css css file should include something like this:
.container{
width: 300 px; //Three times 100px = 300px
}
.imgClass{
float:left;
width: 100px; //All pictures are 100px wide. Not required.
}
And your html file:
<div class="container">
<div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
<div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
<div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
I am modifying the HTML5 port of the game Jump'n'Bump to run on Apple and Android-based mobile devices. I use a cheap 1 GHz Cortex-A8 Android 4.0.3 tablet for testing. I have encountered strange behaviour in the system's Browser. I normally get a very low frame-rate of about 1 FPS (entire screen is re-drawn every frame, setTimeout is used...). However, when I add a <div> which has a position:fixed CSS attribute before the <canvas> tag, the frame-rate skyrockets and the game becomes playable.
Could someone please explain this odd phenomenon? Are there some rendering modes in the Android Browser which influence canvas performance? Is this a cross-platform issue? How do I make sure the page works efficiently in the user's browser?
An outline of the code I'm working on:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>
This issue is so curious.
Try using Request Animation Frame instead of setInterval (without the magic div, =])
function getRequestAnimFrame() {
var game = this;
// requestAnim shim layer by Paul Irish
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / fps);
};
}
Maybe this help to increase the perform.
This doesn't seem like a complicated plugin at all but I can't get this to work - it's driving me crazy. Any help would be appreciated. I'm sure i'm missing some Monday detail.
Here's the url: http://damon9.com/dev/DC/
Clicking the Resume button should slide the page right
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide.js"></script>
<script type ="text/javascript"> <!--- I've tried both of these below and some others -->
$("a#resume_btn").pageslide({ direction: "right", modal: true });
$("#resume_btn").pageslide();
</script>
</head>
<body>
<div id="modal" style="display:none">
<p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
<p>Close</p>
</div>
</body
css
#pageslide {
/* These styles MUST be included. Do not change. */
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/* Specify the width of your pageslide here */
width: 400px;
padding: 20px;
/* These styles are optional, and describe how the pageslide will look */
background-color: red;
color: #FFF;
-webkit-box-shadow: inset 0 0 5px 5px #222;
-moz-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}
Try to put
<script type="text/javascript" src="js/jquery.pageslide.js"></script>
before the tag
</body>
Try this,
<script type ="text/javascript">
$(function(){
$("a#resume_btn").pageslide({ direction: "right", modal: true });
$("#resume_btn").pageslide();
});
</script>