I found this source code in medium and tried using it by using localhost as my server.
This is the original code from medium:
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.4/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs ='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf"></a-asset-item>
</a-assets>
<!-- <a-marker type='barcode' value='7'>
<a-box position='0 0.5 0' color="yellow"></a-box>
</a-marker> -->
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
gltf-model="#animated-asset"
scale="2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
But when I try to use a gltf model that I downloaded, it doesn't show.
This is what my code looks like using the downloaded gltf:
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.4/aframe/build/aframe- ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs ='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-asset-item id="animated-asset" src="scene.gltf"></a-asset-item>
</a-assets>
<!-- <a-marker type='barcode' value='7'>
<a-box position='0 0.5 0' color="yellow"></a-box>
</a-marker> -->
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
gltf-model="#animated-asset"
scale="2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Related
I have a simple code where there is a plane over barcode marker, when I click on this plane this action toggle visibility to another entity.
<!doctype HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://unpkg.com/aframe-curve-component/dist/aframe-curve-component.min.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script>
AFRAME.registerComponent("markerhandler", {
init: function () {
const animatedMarker = document.querySelector("#animated-marker");
var toggle= false;
animatedMarker.addEventListener('click', function (ev, target) {
console.log('click event on #animated-marker fired')
toggle=-toggle;
const element = document.querySelector("#show-hide-entity");
element.setAttribute('visible',toggle);
})
}
})
</script>
<a-scene embedded
arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 4x4_BCH_13_9_3;'>
<a-marker type='barcode' value='1' emitevents="true" markerhandler>
<a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity>
<a-entity geometry="primitive: plane; width: 1; height: 1"
material="color: red; opacity:0.7; side: double"
text="value: click me; align: center; wrapCount: 15"
position="0 0 0"
rotation="-90 0 0" class="clickable"
id="animated-marker"></a-entity>
<a-entity geometry="primitive: plane; width: 1; height: 1"
material="color: blue; opacity:0.7; side: double"
text="value: All it's ok; align: center; wrapCount: 15"
position="1 0 0"
rotation="-90 0 0"
id="show-hide-entity" visible="false"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body
</html>
But click event isn't fired.
Used references and documentation:
How to handle click events on AR.js
Event listeners in ar.js
OnClick on model in AFrame-AR.js scene
I am stuck again with bar-code type markers, this time.
Here is what I wrote and preset and pattern type markers are working.
However, the bar-code type did not work.
I viewed the 5 marker on this site with webcam.
https://aframe.io/blog/arjs/#different-type-of-markers-pattern-and-barcode
Please someone tell me what am I doing wrong...
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Marker Test</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="./lib/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style="padding-top:40px;">
<a-scene embedded artoolkit="sourceType: webcam; detectionMode: mono_and_matrix; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180;">
<a-marker preset="hiro">
<a-entity>
<a-box color="tomato" depth="0.5" height="0.5" width="0.5"></a-box>
</a-entity>
</a-marker>
<a-marker type="pattern" url="./pat/to.patt">
<a-entity>
<a-box color="tomato" depth="0.5" height="0.5" width="0.5"></a-box>
</a-entity>
</a-marker>
<a-marker type="barcode" value="5">
<a-entity>
<a-box color="tomato" depth="0.5" height="0.5" width="0.5"></a-box>
</a-entity>
</a-marker>
<a-entity camera>
<a-entity id="myCursor"
cursor="fuse:true; maxDistance:30; timeout:500;"
scale="0.03 0.03 0.03"
position="0 0 -2"
geometry="primitive: ring"
material="color: red; shader: flat; opacity:0.5">
</a-entity>
</a-entity>
I have problems to set elements draggable using jQueryUI 1.12.1.
There is no problem, when draggable element is <div>, but when I switched it to the <input ... >, it does not move from place. I tried to disable element too in order to make it more "stiff", but it makes no difference.
The similarly pitiful outcomes I had with resizing <label> for <input>. I could move it on the screen, but I was unable to resize it.
Here is code I just copied from the page and made minor changes:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>resizable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#brick {
width: 100px;
height: 100px;
background: #ccc;
} </style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label id="brickLabel" for="brick">Brick is stiff</label>
<input type='text' id="brick" disabled/>
<div id="goodBrick" style="width: 100px; height: 70px; background-color: #EF45fE"></div>
<script>
$( "#goodBrick" ).draggable();
$( "#goodBrick" ).resizable();
$( "#brick" ).draggable();
$( "#brick" ).resizable();
$( "#brickLabel" ).draggable();
$( "#brickLabel" ).resizable();
</script>
</body>
</html>
So where I do mistake?
How can I avoid embedding css files to output html files during pub build (generate js)? Is it possible?
note: polymer version is 0.10.0-pre.11
Before pub build:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<link rel="stylesheet" href="cc.css">
<link rel="import" href="packages/polymer/polymer.html">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
After pub build:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- import the click-counter -->
</head>
<body><style>body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
</style>
<!--
These two files are from the Polymer project:
https://github.com/Polymer/platform/ and https://github.com/Polymer/polymer/.
You can replace platform.js and polymer.html with different versions if desired.
-->
<!-- minified for deployment: -->
<!-- unminfied for debugging:
<script src="../../packages/web_components/platform.concat.js"></script>
<script src="src/js/polymer/polymer.concat.js"></script>
<link rel="import" href="src/js/polymer/polymer-body.html">
-->
<!-- Teach dart2js about Shadow DOM polyfill objects. -->
<!-- Bootstrap the user application in a new isolate. -->
<!-- TODO(sigmund): replace boot.js by boot.dart (dartbug.com/18007)
<script type="application/dart">export "package:polymer/boot.dart";</script>
-->
<script src="packages/polymer/src/js/use_native_dartium_shadowdom.js"></script>
<!--<script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<!-- <link rel="import" href="../polymer-dev/polymer.html"> -->
<script src="packages/polymer/src/js/polymer/polymer.js"></script><polymer-element name="polymer-body" extends="body">
<script>
// upgrade polymer-body last so that it can contain other imported elements
document.addEventListener('polymer-ready', function() {
Polymer('polymer-body', Platform.mixin({
created: function() {
this.template = document.createElement('template');
var body = wrap(document).body;
var c$ = body.childNodes.array();
for (var i=0, c; (c=c$[i]); i++) {
if (c.localName !== 'script') {
this.template.content.appendChild(c);
}
}
// snarf up user defined model
window.model = this;
},
parseDeclaration: function(elementElement) {
this.lightFromTemplate(this.template);
}
}, window.model));
});
</script>
</polymer-element><script src="packages/web_components/dart_support.js"></script><script src="packages/polymer/boot.js"></script><polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
<script type="application/dart" src="cc.html.0.dart"></script><script src="packages/browser/dart.js"></script>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body></html>
As you can see the css file is embedded to html..
Work around for this issue is to add to every element #import ('mystle.css')
eg.
<my-element name="my-element">
<template>
<style>#import ('mystyle.css')</style>
...
</template>
<my-element>
credits go to John Messerly who invented the solution - see the thread here:
https://groups.google.com/a/dartlang.org/forum/?hl=en&fromgroups#!topic/web/8bjmkiRFhDk
Update
In Polymer.dart 0.12.1 an option was added to disable style inlining per file - see https://github.com/dart-lang/polymer-dart/blob/master/CHANGELOG.md#0121
transformers:
- polymer:
...
inline_stylesheets:
default: false
web/foo.css: true
packages/foo/bar.css: true
Original
There was an issue filed recently by a member of the Google PolymerDart team but it is not yet supported
https://code.google.com/p/dart/issues/detail?id=18597
I'm trying to style distributed nodes in Dart Polymer with no luck. I'm using the example at:
http://www.polymer-project.org/articles/styling-elements.html#style-distributed
as a starting point. However, I can't even get that working once ported to Dart. Here is my code:
<polymer-element name="test-element">
<template>
<style>
content[select="p"]::content * { /* anything distributed here */
font-weight: bold;
}
/* #polyfill p:first-child */
::content p:first-child {
color: red;
}
/* #polyfill footer > p */
::content footer > p {
color: green;
}
/* #polyfill :host > p */
::content > p { /* scope relative selector */
color: blue;
}
</style>
<content select="p"></content>
<content></content>
</template>
<script type="application/dart" src="testelement.dart"></script>
</polymer-element>
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="testpolymer.css">
<!-- import the test-element -->
<link rel="import" href="testelement.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>TestPolymer</h1>
<p>Hello world from Dart!</p>
<test-element>
<p>I'm red and bold</p>
<p>I'm blue and bold</p>
<footer>
<p>I'm also red</p>
<p>I'm green</p>
<span>I'm black</span>
</footer>
</test-element>
</body>
</html>
The output has no styling applied and is just black text for everything. Any ideas what I'm doing wrong?
polymer-elements polymer-flex-layout / polymer-flex-layout.css still use
::-webkit-distributed(p) {
color: red;
}
which also works in my recent version of Dartium.
I have no idea when the new selectors take effect.
Other polymer-elements that make use of this selector but have recently switched to ::content
polymer-ui-field
polymer-ui-menu-item
polymer-ui-nav-arrow
polymer-ui-pages
polymer-ui-sidebar
polymer-ui-toolbar
You can browse the history to find the previous webkit-distributed selector examples.
I guess they use Chromium which may be a little ahead of Dartium.