I try this osm-way sample for a-frame and ar.js:
`
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>AR.js osm example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>
<script type='text/javascript' src='osm.js'></script>
<script type='text/javascript' src='osmway.js'></script>
<script type='text/javascript' src='gps-vector-ways.js'></script>
<style type='text/css'>
#status {
font-family: Roboto, sans-serif;
color: white;
position: absolute;
top:50%;
left:calc(50% - 100px);
font-size: 150%;
font-weight: bold;
}
</style>
</head>
<body style='margin: 0; overflow: hidden'>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
<div id='status'></div>
<a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
<a-entity id='osmElement' osm gps-vector-ways />
</a-scene>
</body>
</html>
`
This sample work fine even iof a change the properties simulateLatidude and simulateLongitude on gps-projected-camera.
How i can display the osm gps-vector-way based on the current user gps position without simulate it ? I search but i don't find results. Thanks in advances
Related
I am developing an AR app using Reactjs and 'AR.js'.I created this react app using the 'create-react-app' npm package. And I am hosting it on firebase. But the problem is that when I try to run the app it is showing the following error.
> [error] Error loading KPM data: error reading data. [error] Error
> reading KPM data from /markerNFT_0.fset3 [error] ARToolKitJS(): Unable
> to set up NFT marker.
The camera loads but the marker show the following error on console. The NFT markers are fine I check with another app it worked fine.
Below Is My Source Code
NB:- Both the marker and the GLTF file actually getting downloaded. I checked it with the chrome dev tools network tab. They are fine. This to Script on index.html is for the Home.js
<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>
DOWNLOAD GLTF
DOWNLOAD NFT MARKER
Home.js
import React, { Component } from 'react';
import fire from "./config/fire";
class Home extends Component{
constructor(props)
{
super(props)
this.state={
}
}
logout(){
fire.auth().signOut();
}
render()
{
return(
<div>
<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;"
>
<a-nft
type="nft"
url="https://reactlogin3.web.app/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://reactlogin3.web.app/scene.gltf"
scale="5 5 5"
position="0 0 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</div>
)
}
}
export default Home;
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<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>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?
Hopefully I'm just missing something simple, but there is a little too much space between the items ("grid-stack-item" divs). I would like a grid where the items are a little closer together. I was hoping maybe someone had a codepen or fiddle that showed how to decrease the space between the items (shrink the columns).
Relevant code:
<html>
<head>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Lodash-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<!--Gridstack-->
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
<style>
.grid-stack-item{background-color: #00CED1;}
.red {border: 1px solid red;}
.blue {border: 3px solid blue;}
.red-dash {border: 3px dashed red;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="grid-stack" style="margin-top: 20px;">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 1</div>
</div>
<div class="grid-stack-item"
data-gs-x="2" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 2</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var options = {
cellHeight: 80,
width: 4
};
$('.grid-stack').gridstack(options);
});
</script>
<!-- Scripts -->
</body>
</html>
You need to make the data-gs-x attribute of the second grid-stack-item 1 instead of 2 as the width of each grid-stack-item is only 1. At the moment you have a empty space there because you've told it to leave it empty.
Well this is a four years old quetions. But you can change that gap by adding the margin parameter to the grid options. Default margin value is 10.I can be an integer (px) or a string (ex: '2em', '20px', '2rem')
var options = {
cellHeight: 80,
width: 4,
margin: 5
};
source document
I'm trying to create a simple layout like so
http://www.ttmt.org.uk/forum/col-1.html
http://jsfiddle.net/Y3kvj/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
margin-left:320px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:20px 0 0 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div><!-- #leftCol -->
<div id="rightCol">
<h1>Right Col</h1>
</div><!-- #rightCol -->
</div><!-- #wrapper -->
<!--jQuery -->
</body>
</html>
It's fixed width left column and fluid right column
When the window is resized i would like the left col to drop below the right col - In this example it doesn't
I know this is because the code order.
If I put the left col below the right col when the window resizes it drops below as I would like.
http://www.ttmt.org.uk/forum/col-2.html
http://jsfiddle.net/x8bKD/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
float:right;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<h1>Right Col</h1>
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div><!-- #wrapper -->
</body>
</html>
My problem now Is how do I make the right col stretch so it fills the space.
Negative Margins
I know I can do this with negative margins like so
http://www.ttmt.org.uk/forum/col-3.html
http://jsfiddle.net/vkZPj/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
width:100%;
margin-left:-290px;
float:right;
}
#rightCol-inner{
margin-left:290px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
#rightCol-inner{
margin-left:0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<div id="rightCol-inner">
<h1>Right Col</h1>
</div><!-- #rightCol-inner -->
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div>
</body>
</html>
Is the negative margin the only way - it would add a ton of div's to my code
Having a hard time understanding it just what you want with all of the examples you listed, but....
Order your div's this way:
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div>
<div id="rightCol">
<h1>Right Col</h1>
</div>
</div>
Put an overflow:hidden in #wrapper:
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:hiddeen;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
Float both columns to the left, give the right column a max-width:
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
max-width:500px;
float:left;
}
If you want to see the right column stretch you need to put some content in it (e.g. - lorum ipsum).
I'm looking to make an image sprite fade in after a certain amount of time. (please see code below)
The image sprite has CSS attributes such as hover, active, href.
Then I added jquery src and code. The sprite hover, active, href work, but the jquery delay does not.
How do I make all of these work together?
Thanks for any help you can give!
K
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style type="text/css">
html, body {margin:0px;}
a.LaunchCourse {
background: url(images/LaunchCourse.png) no-repeat 0 0;
display: block;
margin-left: auto;
margin-right: auto;
width: 188px;
height: 60px;
}
a.LaunchCourse:hover{
background-position: 0px -60px;
}
a.LaunchCourse:active{
background-position: 0px -120px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.LaunchCourse').delay(1500).fadeIn(1500);
});
</script>
</head>
<body>
<a class="LaunchCourse" href="wbt.htm" ></a>
</body>
</html>
I think what you might want to try is putting this:
$('.LaunchCourse').hide();
setTimeout(showImage, 5000);
function showImage() {
$('.LaunchCourse').fadeIn(1000);
}
instead of this:
$('.LaunchCourse').delay(1500).fadeIn(1500);
That way, you start by hiding the image... and then you just fade in with however much delay you want in that fadeIn(number) part.
Why not use javascript's setTimeout function?