AFRAME and AR.JS osm-way samples - web

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

React app Using ARjs shwoing NFT marker Errors. How To Fix It?

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>

Why does the material-icons i element overlap the adjacent input element?

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 ?

Gridstack: Change space between items

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

Responsive layout code order

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).

jquery/javascript show or delay effect

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?

Resources