I am getting inconsistent results from barcode markers in AR.JS, no matter which collection I choose from https://github.com/nicolocarpignoli/artoolkit-barcode-markers-collection (which seems to be the canonical collection of markers). From the same collection, some markers work and some don't, even when the matrixCodeType is the same for all. I would expect that either all work or all don't work within a collection. Any ideas why there would be inconsistent result?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin:0px; overflow:hidden;">
<a-scene embedded arjs="debugUIEnabled:false; detectionMode:mono_and_matrix; matrixCodeType:4x4_BCH_13_9_3;" vr-mode-ui="enabled:false">
<a-assets>
<img id="station_01" src="assets/images/station_01.jpg">
<img id="station_02" src="assets/images/station_02.jpg">
<img id="station_03" src="assets/images/station_03.jpg">
</a-assets>
<a-marker-camera type="barcode" value="1">
<a-image src="#station_01" scale="2 3 1" rotation="-90 0 0"></a-image>
</a-marker-camera>
<a-marker-camera type="barcode" value="2">
<a-image src="#station_02" scale="2 3 1" rotation="-90 0 0"></a-image>
</a-marker-camera>
<a-marker-camera type="barcode" value="3">
<a-image src="#station_03" scale="2 3 1" rotation="-90 0 0"></a-image>
</a-marker-camera>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
I was struggling with the same issue recently and in my case it turned out it was due to lighting conditions. Uneven or poor lighting sometimes created shadows and contrast differences that seemed irrelevant to the naked eye but interfered with pattern recognition and tracking.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GeoAR.js demo</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component#0.8.0/dist/aframe-look-at-component.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: 0; overflow: hidden;">
<a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;">
<a-text value="This content will always face you." look-at="[gps-camera]" scale="120 120 120" gps-entity-place="latitude: 42.123456; longitude: 13.230240;"></a-text>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>
Checked out the example on both my devices. Everything works fine, except few things. One of them, the most annoying for user, is the alert. It looks like in 1 of 10 or even less ticks(or whatever you call it) the device cannot get my location. Even if it's so, I think it’s ok for an entertainment app.
How to disable the alert?
The simple way i can think of is to completely disable all alert by altering alert functionality when the document is "ready."
<script>
document.addEventListener('DOMContentLoaded', function(){ //equivalent to jQuery $('document').ready(function(){})
/* alert("this will show"); */
alert = function(){};
/* alert("ALL alert after this won't show"); */
}, false);
</script>
I would like to put a warning message using Foundation6.
If it's possible, something like Bootstrap Message :
In the Foundation Docs, we have this : http://foundation.zurb.com/sites/docs/v/5.5.3/components/alert_boxes.html .
But it's not working with me, it's like I missed an import (classes doesn't work).
Any idea ?
EDIT
My code is simple :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/my-css.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/icons/foundation-icons.css">
</head>
<body ng-app="app">
<div class="row">
<div class="columns">
<div class="text-center">
<div data-alert class="alert-box warning round">
This is a warning alert that is rounded.
×
</div>
app.css is Foundation stylesheet minified.
Have you looked at the Foundation 6 docs? Warning messages are called callouts in Foundation 6 and you add the class callout to the div, together with another class depending on the kind of alert you are going for. For a warning, you'd use:
<div class="callout warning">
<h5>This is a warning callout</h5>
</div>
Check out the docs.
I am using Yeti Launch and I want to use expressions to display page information on each page.
For example, I want to display the page title and some other content specific to that page.
So the homepage would be {title: "homepage"} but I can't figure out how to have the foundation project print/display this.
Here is how I have my homepage file
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<script>
var context = {title:"Homepage | Hey this is working"};
</script>
<body>
<div id="siteContainer" class="cover">
<div class="row">
<header>
<h1>Example</h1>
</header>
</div>
<div id="navigation">
<!-- eo // navigation -->
<section id="contentWrapper">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}}
</section>
<!-- eo // section -->
</div>
<!-- eo // siteContainer -->
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
How foundation sets up the project folders
src
assets - /img/ - /js/ - /scss/
data
layouts
pages
partials
styleguide
Where should my data be stored? and How do I display or make the call to pull the data to that particular page?
Thanks!
Found the answer.
I have to define my variables at the top of the page template.
I was doing it wrong. I was adding my variables to the partial file instead of the the page template.
Reference:
http://foundation.zurb.com/sites/docs/panini.html#custom-data
http://jekyllrb.com/docs/frontmatter/
My topbar in foundation 6 is somehow not working (Not somehow, the foundation.topbar.js isn't there). So, please help me get it added.
I'm new to foundation — like a total noob. I'm 13. So, please consider that. :)
And here's the WHOLE code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><i>Title</i></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>HEADER</h1>
</div>
</div>
</div>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is what happens:
This is my JS folder:
just you're coding in Foundation 5.x style. Look at this : http://foundation.zurb.com/sites/docs/top-bar.html
thank you. and also download and import the .js folder from the foundation on git.
the the topbar will "work".
It looks like you're just running this as a static page (html)
Yet in the path for your javascript includes you're including
<? bloginfo('template_url'); ?>
Which looks to be a php function
Might I suggest you run the likes of WAMPserver ( given you're running windows it's a simple way of getting Apache Mysql and PHP up and running on your local machine.
Additional note: As was said however it looks like you're including foundation 5.x code
"<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"
I am using Zurb Foundation 5.5.2 and trying to get the range slider to work like on the Foundation web site documentation page for range sliders. The desired functionality is that you click on any location on the bar, and the handle advances to that location. On the Foundation web site kitchen sink page, clicking on the range slider bar does nothing. On this codepen that I use the most basic range slider code, you also cannot click on the bar and get the handle to advance. How do I get this to work?
Here is the Codepen code:
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
Foundation v5.x serie seems not trigger mousemove event when using slider.
Digging into foudantion issues on github I found this:
slider: add support for changing by clicking on the slider without having started to drag from the handle
It strikes me that this feature is only available for future versions of Foundation library such as v5.5.3 or v5.6 (see milestones).
But you can use that rigth now, just copy and past o raw code from github:
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.js
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.slider.js
Just click on "raw" button and save to the local storage.
So it should be work like this:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="small-10 medium-11 columns">
<!-- SLIDER START -->
<div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;trigger_input_change: true">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- SLIDER END -->
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Foundation updated -->
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>
<script>$(document).foundation();</script>
</body>
</html>