I try to use three.js library in a-frame.
For example,
var helper = new THREE.MMDHelper(renderer);
I don't know how to get a renderer in a-frame.
a-scene has a renderer property.
=> https://aframe.io/docs/0.3.0/core/scene.html
but, it's undefined.
document.querySelector('a-scene').renderer; <= undefined
Please tell me how to get the rendere
You'll need to wait for the scene to initialize before a renderer is available:
sceneEl.addEventListener('render-target-loaded', function () {
// sceneEl.renderer is now set.
});
If you write your code within a component, you can be guaranteed everything is loaded:
AFRAME.registerComponent('do-something', {
init: function () {
console.log(this.el.renderer);
}
});
<script src="do-something-component.js"></script>
<a-scene do-something></a-scene>
thanks, Don McCurdy and ngokevin.
Incidentally, I looked for the camera property.
I can get the camera property by use 'camera-set-active'.
For your reference.
<html>
<head>
<title>a-frame sample</title>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene do-something>
</a-scene>
</body>
<script>
var sceneEl = document.querySelector('a-scene');
window.onload = function() {
console.log('window.onload');
console.log(document.querySelector('a-scene').renderer); // undefined
console.log(document.querySelector('a-scene').camera); // undefined
}
AFRAME.registerComponent('do-something', {
init: function() {
console.log('do-something init');
console.log(this.el.renderer); // OK
console.log(this.el.camera); // undefined
this.el.addEventListener('camera-set-active', this.cameraSetActive.bind(this));
},
cameraSetActive: function() {
console.log('do-something cameraSetActive');
console.log(this.el.renderer); // OK
console.log(this.el.camera); // OK
}
});
sceneEl.addEventListener('render-target-loaded', function() {
console.log('render-target-loaded');
console.log(document.querySelector('a-scene').renderer); // OK
console.log(document.querySelector('a-scene').camera); // undefined
});
sceneEl.addEventListener('camera-ready', function() {
console.log('camera-ready');
console.log(document.querySelector('a-scene').renderer); // OK
console.log(document.querySelector('a-scene').camera); // undefined
});
sceneEl.addEventListener('camera-set-active', function() {
console.log('camera-set-active');
console.log(document.querySelector('a-scene').renderer); // OK
console.log(document.querySelector('a-scene').camera); // OK
});
</script>
</html>
Related
I am trying to fetch the schedule data in JSON format, from the server and use that to render the schdule using a dom-repeat.
The code works fine if I hard-code the JSON, but if I set it using fetch, it does not work.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="xl-schedule">
<template>
<h1> Excel Schedule </h1>
<template is="dom-repeat" items="{{schedule}}">
<div># <span>{{index}}</span></div>
<div>Event name: <span>{{item.name}}</span></div>
<div>Date: <span>{{item.date}}</span></div>
</template>
<script>
Polymer({
is: 'xl-schedule',
ready: function() {
// this.schedule =
// [
// {
// "name": "Event1",
// "date": "5/10/2016"
// },
// {
// "name": "Event2",
// "date": "5/10/2016"
// },
// {
// "name": "Event3",
// "date": "5/10/2016"
// }
// ];
fetch('resources/schedule.json').
then(function (response) {
return response.json();
}).
then(function (response) {
this.schedule = response;
console.log("response",JSON.stringify(response));
})
.catch(function(err) {
console.log("err",err);
});
}
});
As #Alan pointed out, in your second then callback:
then(function(response) {
this.schedule = response; // this === window
})
this does not refer to your Polymer object. The callback is invoked outside your Polymer object's context, where this is not defined. In non-strict mode, that results in this defaulting to the global object, which is the window, so you're actually setting window.schedule. You can verify that with console.log(this) in the callback. MDN provides a good reference on this in regards to function context.
Arrow functions (in ES6) don't have that problem, and this would be bound to the enclosing context's this (the Polymer object):
then(response => this.schedule = response) // this === Polymer obj
Assuming you're using ES5 (or prefer not to use an ES6-to-ES5 transpiler), you can set the schedule property of your Polymer object by passing to your callback a reference to your Polymer object instead of using this there:
Polymer({
...
ready: function() {
var self = this; // this === Polymer obj
fetch(...)
.then(function(response) {
self.schedule = response;
});
}
});
Note you could prevent this from defaulting to the global object by declaring "use strict". This would cause this to stay undefined, which would cause a helpful (fail-fast) error when you accidentally assign to this.schedule with an unintentional this:
"use strict";
Polymer({
...
ready: function() {
fetch(...)
.then(function(response) {
this.schedule = response; // TypeError: Cannot set property 'schedule' of undefined
});
}
});
Here's an ES5 demo: plunker
I am trying to write the tests for a Backbone app which uses twig and symphony to render the underscore templates, using mocha, chai and sinon, with blanket for code-coverage and phantomjs for browser simulation. I have managed to load the template markup into test.html by doing the following in the body tag:
<!-- fixtures -->
<script>
$(function(){
$("#fixtures").load("fixtures/comment-fixture.html");
});
</script>
I have created a html fixture, or at least that is what I was aiming for, however I still get the following error when running my tests:
TypeError: 'undefined' is not an object (evaluating 'text.replace')
I understand that it refers to basically underscore evaluating _template(undefined), but I don't understand why it is doing that. Has anyone come across the a similar issue before or know why it is triggering this error?
This is my set-up:
Backbone view I want to test:
var CommentView = Backbone.View.extend({
//... is a list tag.
tagName: "li",
model: null,
// Cache the template function for a single item.
template: _.template($('#comment-template').html()),
// This is the timeout used to re-render the times
refreshTimer: null,
initialize: function(options) {
this.model = options.model;
this.listenTo(this.model, 'change', this.render);
this.listenTo(Backbone, 'stopCommentRefresh', this.stopRefreshTimer);
},
render: function() {
this.$el.html(this.template(this.model.renderAttributes()));
this.refreshTimer = setTimeout(_.bind(this.render, this), 60000);
return this;
},
// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},
stopRefreshTimer: function () {
clearTimeout(this.refreshTimer);
this.remove();
}
});
My fixture file for it :
<script type="text/template" id="comment-template">
<article class="comment">
<h4><%- user.username %></h4>
<p><%- comment %></p>
<time><%- time %></time>
</article>
</script>
My test file for it (so far nothing special):
describe("Comment View", function () {
before(function () {
// create test fixture
this.$fixture = $('<li id="comment-view-fixture"></li>');
});
beforeEach(function () {
// empty out and rebind the fixture for each run
this.$fixture.empty().appendTo($("#fixtures"));
// new default model and view for each test
this.view = new CommentView ({
el: this.$fixture,
model: new Comment({
comment: "Hello world!",
created: new Date(),
modified: new Date(),
user: {
username: "Mario"
}
})
});
});
afterEach(function () {
this.view.model.destroy();
});
after(function () {
$("#fixtures").empty();
});
});
And my test.html file:
<html>
<head>
<title>Backbone.js Tests</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="js/lib/mocha.css" />
</head>
<body>
<div id="blanket-main" class="hidden" style="display: none;"></div>
<div id="mocha"></div>
<!-- Utility libraries -->
<script src="js/lib/mocha.js"></script>
<script src="js/lib/chai.js"></script >
<script src="js/lib/sinon-chai.js"></script >
<script src="js/lib/sinon.js"></script >
<script src="js/lib/chai-datetime.js"></script>
<!-- JavaScript Coverage Libraries. -->
<script src="js/lib/blanket.js"></script>
<!-- jquery library -->
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/jquery-1.11.js"></script>
<!-- fixtures -->
<script>
$(function(){
$("#fixtures").load("fixtures/comment-fixture.html");
});
</script>
<!-- JavaScript Core Libraries -->
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/underscore.js"></script>
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/jquery.dataTables.js"></script>
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/backbone.js"></script>
<!-- Javascript Application Libraries - Views -->
<script src="../../../../ApiBundle/Resources/public/js/comment.js" data-cover></script>
<script>
var expect = chai.expect;
mocha.setup({
ui: "bdd",
globals: ['stats', 'failures', 'runner'], // Blanket leaks.
bail: false
});
// Set up Mocha with custom Blanket.js reporter.
mocha.reporter(function (_reporter) {
// Updated for Mocha 1.15.1 integration.
// See: https://github.com/alex-seville/blanket/pull/356
var blanketReporter = function (runner) {
// Listeners.
runner.on("start", function () { blanket.setupCoverage(); });
runner.on("suite", function () { blanket.onModuleStart(); });
runner.on("test", function () { blanket.onTestStart(); });
runner.on("test end", function (test) {
blanket.onTestDone(test.parent.tests.length,
test.state === 'passed');
});
runner.on("end", function () {
blanket.onTestsDone();
$("#blanket-main").removeClass("hidden").show("fast");
$("html, body").animate({ scrollTop: 0 });
});
_reporter.call(this, runner);
};
blanketReporter.prototype = _reporter.prototype;
return blanketReporter;
}(mocha._reporter));
blanket.beforeStartTestRunner({
callback: function () {
(window.mochaPhantomJS || mocha).run();
}
});
</script>
<script src="js/spec/views/view_CommentView.spec.js"></script>
<!-- Coverage style helpers -->
<style type="text/css">
#blanket-main {
margin-top: 65px;
margin-right: 20px;
margin-left: 20px;
border-radius: 5px;
border: 1px solid #666;
}
</style>
<!-- Test Fixtures. -->
<div id="fixtures" style="display: none; visibility: hidden;"></div>
</body>
</html>
It turns out its because $("#fixtures").load("fixtures/comment-fixture.html") is asynchronous and isn't actually loaded when I run the tests. By simply copying the contents of fixture.html into test.html body tag, the error stops happening!
I'm playing around with Meteor and react-meteor. However, I can't seem to grok how the template event-handling works when using react (if it even does).
index.html:
<head>
<title>reactjs</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> FormTest}}
</body>
lib/components/testform.jsx:
var FormTest = ReactMeteor.createClass({
templateName: "FormTest",
render: function() {
return (
<div>
<button className="my-button">My byutton</button>
</div>
);
}
});
index.js:
if (Meteor.isClient) {
Template.FormTest.events({
"click .my-button": function (event, template) {
alert("My button was clicked!");
}
});
}
I get nothing.
Is there something wrong with my code or my approach? If approach, what would be the proper way to handle events?
If you add an event handler here:
<button className="my-button" onClick={this.handleClick}>My button</button>
You can then do this in your testform.jsx file:
handleClick: function(e) {
if (Meteor.isClient) {
e.preventDefault();
console.log("My button was clicked");
}
}
I'm also testing React with Meteor, but this seems to work.
bonsai docs “Communication” section (http://docs.bonsaijs.org/overview/Communication.html) has the following example which runs everywhere, except IE9:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
<div id="movie"></div>
<script>
var movie = bonsai.run(
document.getElementById('movie'),
{
code: function() {
// receive data from the other side
var text = new Text().addTo(stage);
stage.on('message:externalData', function(data) {
text.attr('text', data.nodeData);
});
stage.on('message', function(data) {
if (data.bonsai === 'tree') {
text.attr('textFillColor', 'red');
}
});
stage.sendMessage('ready', {});
}
}
);
// emitted before code gets executed
movie.on('load', function() {
// receive event from the runner context
movie.on('message:ready', function() {
// send a categorized message to the runner context
movie.sendMessage('externalData', {
nodeData: document.getElementById('movie').innerHTML
});
// send just a message to the runner context
movie.sendMessage({
bonsai: 'tree'
});
});
});
</script>
The fist question is: why the following code modification:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
<div id="movie"></div>
<script>
var movie = bonsai.run(document.getElementById('movie'), 'movie.js');
// emitted before code gets executed
movie.on('load', function() {
// receive event from the runner context
movie.on('message:ready', function() {
// send a categorized message to the runner context
movie.sendMessage('externalData', {
nodeData: document.getElementById('movie').innerHTML
});
// send just a message to the runner context
movie.sendMessage({
bonsai: 'tree'
});
});
});
</script>
where movie.js is:
document.getElementById('movie'),
{
code: function() {
// receive data from the other side
var text = new Text().addTo(stage);
stage.on('message:externalData', function(data) {
text.attr('text', data.nodeData);
});
stage.on('message', function(data) {
if (data.bonsai === 'tree') {
text.attr('textFillColor', 'red');
}
});
stage.sendMessage('ready', {});
}
}
throws “WORKER undefined”
Why original code does not work in IE9?
I'm making a mobile web app.
Part of the app drops several markers, which can be clicked to open info windows. It irritates me that these do not go away if you continue using the map without acknowledging them, as in the iOS maps app.
Is there a way to set it so that if the user clicks the underlying map, all open info windows are closed?
Try this:
google.maps.event.addListener(map, "click", function(event) {
infowindow.close();
});
It is quite simple an should work as well.
add listener to map's click event and close infoboxes in its handler
google.maps.event.addListener(map, "click", function(event) {
for (var i = 0; i < ibArray.length; i++ ) { //I assume you have your infoboxes in some array
ibArray[i].close();
}
});
I do that on typical websites, but don't see any reason it wouldn't work on mobile
google.maps.event.addListener(marker, 'click', function() {
if(!marker.open){
infoWindow.open(map,marker);
marker.open = true;
}
else{
infoWindow.close();
marker.open = false;
}
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
marker.open = false;
});
});
Works perfectly
I noticed some problems with the other answers.
Answer of Marcus Rommel and slawekwin:
When a marker is clicked, the map click event is fired afterwards. So when marker click opens the window, the propagation of the click event to map will close the window again immediately.
Answer of user1724001:
Creating a listener everytime a marker is clicked is also not a good idea. This pollutes the memory.
Therefore i just want to add some additional information to the first answers, to stop event propagation to the map. The Windows will then only be closed, if no marker is clicked.
marker.addListener("click", function(event) {
// open your window here
event.stopPropagation(); // this prevents propagation of marker click to map click
});
map.addListener("click", function() {
// close your window
});
I have better solution for all senario.
Try this: JSFiddle
const infoWindow = new google.maps.InfoWindow();
function init() {
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(39.9646, 30.8259),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
map.addListener('click', () => {
if (infoWindow) {
infoWindow.close();
}
});
const istanbulMark = new google.maps.Marker({
position: new google.maps.LatLng(41.0876, 28.9288),
map: map,
label: 'I'
});
istanbulMark.addListener('click', () => {
infoWindow.setContent(`
<h1>Hi mate</h1>
<hr>
<p>Welcome to İstanbul!</p>
`)
infoWindow.open(map, istanbulMark);
});
const ankaraMark = new google.maps.Marker({
position: new google.maps.LatLng(39.9162, 32.8437),
map: map,
label: 'A'
});
ankaraMark.addListener('click', () => {
infoWindow.setContent(`
<h1>Hi mate</h1>
<hr>
<p>Welcome to Ankara!</p>
`)
infoWindow.open(map, ankaraMark);
});
}
google.maps.event.addDomListener(window, 'load', init);
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>