I am using a component that I can code in HTML. For example with the text geometry component, I created text:
<a-entity text="text: 0"></a-entity>
How do I update the text component's text property?
Entity.setAttribute
Just like updating normal DOM elements, we can use setAttribute.
el.setAttribute('visible', false);
If a component has multiple properties, we have three arguments. Component name, property name, value:
el.setAttribute('material', 'color', 'black');
el.setAttribute('text', 'text', '1');
Where to put this code? Within a component would be good:
AFRAME.registerComponent('update-text-every-second', {
init: function () {
var el = this.el;
var i = 0;
setInterval(function () {
el.setAttribute('text', 'text', i.toString());
}, 1000);
}
});
And use:
<a-entity text="text: 0" update-text-every-second></a-entity>
Related
What's the right way to get all objects in a scene, while in a component?
If I need to raycast everything, for example.
AFRAME.registerComponent('foo', {
init: function () {
var el = this.el;
// Get all objects in scene?
}
});
You can grab the scene, and then from there all the children. https://aframe.io/docs/0.3.0/core/entity.html#sceneel
AFRAME.registerComponent('foo', {
init: function () {
var allObjects = this.el.sceneEl.object3D.children;
}
});
this: component instance
el: <a-entity> element that component is attached to
sceneEl: <a-scene> element
object3D: three.js scene object
children: three.js all objects of scene
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>
I have a dojo Enhanced Grid and I'm using formatter to display a button in one of the columns
{field: '_item', name: 'Update Data', formatter: dojo.hitch(context, this.getUpdateData), width: '165px' },
getUpdateData: function(rowItem) {
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
return button;
}
This works well. The button is correctly rendered and when I click on it, it correctly shows the alert dialog. What I'd like to do is show some text/label and then the button in the grid cell. I've tried creating a div in the formatter and tried adding the button to the div:
getUpdateData: function(rowItem) {
var divNode = dojo.create("div", { innerHTML: rowItem.someText });
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt(divNode);
return divNode.innerHTML;
}
Even though it renders it correctly (where the text is shown before the button in the table) , when I click on the button nothing happens. The onClick event handler is not called.
My question is: how can show the some text+ a button in a grid cell.
This worked for me:
getUpdateData: function(rowItem) {
var cpane = new dojox.layout.ContentPane (
content: rowItem.someText;
});
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt (cpane);
return cpane;
}
i have a magnific popup being displayed dynamically but the image is rendered after the load event so i cannot get the value of the image in the open event. is there any onload event in magnific popup?
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
onload: 'myevent()',
},
type: 'iframe',
closeOnBgClick: false,
markup: '<div class="mfp-iframe-scaler">' +
'<div class="mfp-close"></div>' +
'<iframe class="mfp-iframe" frameborder="0" onload="myevent()"></iframe>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-title"></div>' +
'</div>' +
'</div>',
callbacks: {
beforeOpen: function () {
console.log('Start of popup initialization');
},
elementParse: function (item) {
// Function will fire for each target element
// "item.el" is a target DOM element (if present)
// "item.src" is a source that you may modify
debugger;
console.log('Parsing content. Item object that is being parsed:', item);
},
change: function () {
console.log('Content changed');
console.log(this.content); // Direct reference to your popup element
},
resize: function () {
console.log('Popup resized');
// resize event triggers only when height is changed or layout forced
},
open: function () {
console.log('Popup is opened');
debugger;
var iframe = $.magnificPopup.instance,
t = $(iframe.currItem.el[0]);
var contents = iframe.contents();
$(contents).css('max-width', '100%');
$(contents).css('max-height', '100%');
}
}
});
Not a proper solution put i added a timed event which resizes the image once it is loaded. Had to play a lot to get the perfect time so that there is no glitch.
Here is the code:
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
},
delegate: 'a',
type: 'iframe',
closeOnBgClick: false,
});
setTimeout(setImage, 500);
};
function setImage() {
var iframe = $('.mfp-iframe');
var contents = iframe.contents();
$(contents).find('img').attr('width', '100%');
$(contents).find('img').attr('height', '100%');
}
I'm beginning to use canvas and kineticjs. I tried to draw a rect when clicking the button "add text", in the function I declare a var Text, add the var Text in the layer and then add the layer to the stage, can anybody help me?
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var shapesLayer = new Kinetic.Layer();
document.getElementById("Draw_text").addEventListener("click", function () {
var Text = new Kinetic.Text({
x: 100,
y: 100,
text: "hi",
draggable: "true"
});
shapesLayer.add(Text);
stage.add(shapesLayer);
}, false);
<body onmousedown="return false;">
<div id="container"></div>
<div id="buttons">
<button id="Draw_text">
add text
</button>
</div>
You have to change your strategy.
In order to do this you can use a very simple trick. First draw any shape that you need and then use hide() and show() function. By using this method u can get what you are looking for.
* Do Not declare your text inside the onclick function.
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var shapesLayer = new Kinetic.Layer();
var Text = new Kinetic.Text({
x: 100,
y: 100,
text: "hi",
draggable: "true"
});
document.getElementById("Draw_text").addEventListener("click", function () {
Text.show();
shapesLayer.draw();
}, false);
document.getElementById("Delete_text").addEventListener("click", function () {
Text.hide();
shapesLayer.draw();
}, false);
shapesLayer.add(Text);
stage.add(shapesLayer);
};