i am having trouble animating in AFRAME element/entities. In the following demo i have set up a box and on top of the box a text entity that needs to animate in (scale up) when i hover the mouse over the box the text element does not animate in or show up. Can anyone help?
https://jsfiddle.net/0d6ymk21/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="camera" camera mouse-cursor look-controls>
<a-cursor fuse="true" color="blue"></a-cursor>
</a-entity>
<a-entity
id="#fernando"
text="color: black;value: Fernando;"
scale=".1 .1 .1"
position="2 1 -2"
></a-entity>
<a-box box position="1 0 -2" color="red" activate-name=""></a-box>
</a-scene>
</body>
</html>
-- JS:
AFRAME.registerComponent("activate-name", {
schema: {
default: ""
},
init: function() {
var data = this.data;
var el = this.el;
var fernando = document.querySelector("#fernando");
el.addEventListener("mouseenter", function() {
fernando.setAttribute("scale", "2 2 2");
});
}
});
Two issues here:
1) If you want to grab fernando using document.querySelector('#fernando') - the id needs to be fernando instead of #fernando.
2) The component declaration - activate-name in this case - needs to be done before the component is attached in html. You can simply throw it it a <script> tag before the scene
<script>
AFRAME.registerComponent('foo', ...
</script>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
even better - keep it in a separate .js file and include it in the <head>.
Fiddle here.
This is necessary because jsfiddle executes the code part when the window is loaded.
Related
I have an image at the URL http://192.168.1.53/html/cam.jpg (from a Raspberry Pi) and this image is changing very fast (it is from a camera).
So I want to have some JavaScript on a website that will reload this image every second for example.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<style>
img,body {
padding: 0px;
margin: 0px;
}
</style>
<img id="img" src="http://192.168.1.53/html/cam.jpg">
<img id="img1" src="http://192.168.1.53/html/cam.jpg">
<script src="script.js"></script>
</body>
</html>
And my script:
function update() {
window.alert("aa");
document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
setTimeout(update, 1000);
}
setTimeout(update, 1000);
alert is working, but the image is not changing :/ (I have 2 images (they are the same))
The problem is that the image src is not altered so the image is not reloaded.
You need to convince the browser that the image is new. A good trick is to append a timestamp to the url so that it is always considered new.
function update() {
var source = 'http://192.168.1.53/html/cam.jpg',
timestamp = (new Date()).getTime(),
newUrl = source + '?_=' + timestamp;
document.getElementById("img").src = newUrl;
document.getElementById("img1").src = newUrl;
setTimeout(update, 1000);
}
If I use the A-Frame Asset Management System I'm having problem getting the img assets to render. Example Glitch and code below. I previously had success with the A-Frame Asset Management System, and my old projects are still working, but for some reason, new projects using the exact same format don't. If I put the URL inline, it works fine, so the assets themselves are fine, but when piped through the asset management system, not so much.
https://asset-problem.glitch.me/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
<a-scene>
<!--Assets-->
<assets>
<img id="sky" src="https://cdn.glitch.com/c96b441a-61dd-427b-86b9-ab2241e3eb22%2Ftwo_tone_sky.jpg?1538274492274">
<img id="bust" src="https://cdn.glitch.com/c96b441a-61dd-427b-86b9-ab2241e3eb22%2Fbust.jpg?1538276649814">
</assets>
<!--Sky-->
<a-sky src="#sky"></a-sky>
<!--Box-->
<a-box class="clickable" position="-2 0.5 -3" rotation="0 45 0" material="#ffccff" shadow></a-box>
<!--bust-->
<a-image src="bust" position=".5 2 -1.5" rotation="0 -25 0"></a-image>
<!--Plane-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#9999ff" shadow></a-plane>
</a-scene>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</html>
I Am unable to retrieve the text from the textarea as I just want to scale a box by typing the x-factor as the input. But the input is not being retrieved for some reason. Please help!...here is the code:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-textarea-component/dist/aframe-textarea-component.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-box id="redbox" position="3 2.5 -2" color="red"></a-box>
<a-entity position="0 1 -2" id="inputText" textarea="backgroundColor:white; color:black; cols:5; rows:1;value:2;"></a-entity>
<a-input postion="0 2 -2"></a-input>
<a-text id="outputText" position="0 2 -2" value="Hello"></a-text>
<a-camera position="0 1 1">
<a-cursor color="yellow"></a-cursor>
</a-camera>
<a-entity id="select-button" geometry="primitive: box" material="color:red" position="0 0 -2"></a>
</a-scene>
<script>
var box = document.querySelector('#redbox')
var printText = document.querySelector('#inputText');
document.querySelector('#select-button').addEventListener('click',function(){
box.setAttribute("scale",
{
x : parseInt(printText.getAttribute('textarea').value),
y : 1.5,
z : 1.5
}
);
});
</script>
</body>
</html>
Edit: I tried changing the code in javascript as follows:
parseInt(printText.getAttribute('textarea').text
It still does not work!!
The textarea component does not expose the value directly but you can do:
document.querySelector('#inputText').components.textarea.textarea.value
The latest version (0.3.0) of aframe-textarea-component now includes a getText() method which you can use to get the current text.
document.querySelector('#inputText').components.textarea.getText();
I want to add a button to allow sound on iphone to my A-Frame app, but I'm new to HTML and can't figure out how to do it. Has anyone successfully done this and if so can you share some example source code?
How do you get the button on the beginning screen, ideally next to where the google cardboard/headset icon appears?
I figured out a way to do it so wanted to share. I added a click event for the scene itself, then when you press the vr-enter button (the headset icon) it triggers the audio to play. Inside the scene I added a speaker icon with a mouseenter event to also control the audio via gazing. I switch out the img for sound on/sound off. I did NOT add a button on the canvas next to the headset icon, but I think this works better anyway. If you have a better way, I'd love to see it!
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<title>Sound Demo</title>
<meta name="description" content="Audio Button Demo">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene background="blue">
<a-assets>
<img id="soundButton" src="sourceimages/sound.png" >
<img id="soundOffButton" src="sourceimages/soundOff.png" >
<audio id="soundtrack" src="assets/Narration.mp3" preload="auto"></audio>
</a-assets>
<a-sky color="#00AEEF"></a-sky>
<a-plane class="link" id="sButton" src="#soundOffButton" height="40" width="40" rotation="0 0 0" position="0 0 -300" material="transparent:true"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1">
</a-plane>
<a-entity camera look-controls>
<a-cursor id="cursor"
color="white"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: cyan"
event-set__2="_event: mouseleave; color: white"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
<script>
var sbutt = document.querySelector('#sButton');
var strack = document.querySelector('#soundtrack');
sbutt.addEventListener('mouseenter', playButtonAudio);
var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
playButtonAudio();
} else {
scene.addEventListener('click', playButtonAudio);
}
function playButtonAudio () {
if (strack.paused) {
strack.play();
sbutt.setAttribute('material', "src: #soundButton");
} else {
strack.pause();
sbutt.setAttribute('material', "src: #soundOffButton");
}
}
</script>
<!doctype html>
<html>
<head>
<script src="https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default: ''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute('src', this.data);
});
}
});
</script>
<a-scene>
<a-camera position="0 2 4">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="1" position="-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere>
<a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-sky="32252838043_e8f2be6783_k.jpeg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
</html>
I'm new to a-frame, have not worked much in java script either. The code above works fine for the referenced image, but does not work for the local image. What is actually i'm doing wrong ? I found this example here.
Ensure you are using a local server (e.g., Mongoose, python -m SimpleHTTPServer, or npm install live-server) and that the image is on the same path as your index.html given where you're referencing it form.
Use https://www.cesanta.com/products/binary, it's easy to use. No configuring of server structure in any way needed.