How do I change text in a-frame using a-animations? - aframe

For example, I have some text "Hello" floating about in the scene, on mousing over it I want the text to change to "Hi"
Right now, when I try to use an animation, the text just disappears off, instead of changing.
Any help?
Thanks.

Here is an example using JavaScript to change text on mouseover.
Ignoring the boilerplate used to wait for the scene to load, the code is:
var someText = document.querySelector('#someText');
someText.addEventListener('mouseenter', mouseenter);
function mouseenter () {
someText.setAttribute('bmfont-text', 'text: Hi');
}
Where "someText" points to an entity with the bmfont-text component (though it would work for geometric text as well). This example uses Mayognaise's mouse cursor component but could easily be changed to a gaze-cursor.
-
Additionally, here is a CodePen demonstrating ngokevin's answer. I was going to post this as a comment to his answer, but I don't have enough reputation points...

I would use the event-set component (download the dist and drop into your project), not the animation tag:
<a-entity text="text: Hello" event-set="_event: mouseenter; text: Hi"></a-entity>
0.2.0 build: https://github.com/ngokevin/aframe-event-set-component/tree/v0.2.0/dist
0.3.0 build https://github.com/ngokevin/aframe-event-set-component/tree/master/dist

Related

Are there buttons in a-frame and how to create them?

A question about a-frame? Does aframe offer button objects (like a-button)? If yes, why are there no information about them in the documentation?
Are they planned to be added?
And if it isnt, is there a way to create objects in a-frame that behave like button that can be used on a touchscreen?
You can turn pretty much any a-frame object into a button.
make your cursors rayOrigin to your mouse. (You can add the cursor attribute to your camera)
<a-camera cursor="rayOrigin: mouse"></a-camera>
For example lets take an a-box primitive and turn it into a button by adding the standard onclick event to the element
<a-box onclick="doSomething"></a-box>
And initiate the function you want.
This should work for touch too.
If you want an overlay UI, I'd always go with HTML elements. They're easier to manage, as you can position them on the screen easily.
If you want the UI to track an object (like a marker in arjs), you can use my tracked-ui component as follows:
<!-- The HTML UI -->
<div id="ui"></div>
<a-scene arjs>
<a-marker tracked-ui="element: #ui; offset: 0 200">
<a-box></a-box>
</a-marker>
</a-scene>

Is it possible to catch the click event for a particular word click from a Text in QML?

I have a Text component in QML which contain seemore along with some text. Ex. This is the details...seemore. Now if only I clicked on seemore I want to perform some operation not any other places of the Text. I tried something with html tags but it not worked. Thanks!!!
As you do not provide an MCVE it is impossible to point out why your code does not work, so I will limit myself to providing the code that implements what you want:
Text {
textFormat: Text.RichText
text: "This is the details...seemore."
onLinkActivated: console.log(link + " link activated")
}

AFrame Text component does not render with 'logarithmicDepthBuffer=true'

When I set logarithmicDepthBuffer: true; in the AFrame renderer component, all instances of the text component no longer render at all.
To troubleshoot this, I removed all other entities from the scene, the text still did not render. I also tried using the wrapped <a-text> component, I tried alphaTest: 0.5 , setting depthTest: true and setting sortObjects: false just to see if I could get any kind of result, but found nothing that would produce any results.
<a-scene renderer="logarithmicDepthBuffer: true;">
<a-text value="The quick Brown Fox Jumps over the Lazy Dog"></a-text>
</a-scene>
The text does not appear at all. There are no rendering artifacts, or errors in the console.
You should make an issue for this on AFrame github. I saw this problem come up for someone else before..
As a workaround, I don't know the specifics of aframe, but can you use the .polygonOffset on the material for the text to avoid the zfighting you were trying to counteract with logarithmicDepthBuffer?
logarithmicDepthBuffer is a cool technique, but when enabled, all shaders that interact with depth have to be aware of it, and some of them aren't written with it in mind.
But if you're trying to fix z-fighting, polygonOffset is one of the more classical solutions.
Try using [] around renderer
<a-scene [renderer]="logarithmicDepthBuffer: true;">
<a-text value="The quick Brown Fox Jumps over the Lazy Dog"></a-text>
</a-scene>

How do I make the JQuery UI dialog "close" button look like an 'X' icon?

The "close" button is appearing as the text "close," with no styling to make it look like what a user would expect to see for closing a dialog.
Isn't a graphical 'X' icon the default close button?
How do I style it to look right?
Here's my dialog initialization (if I leave out the "closeText" option then it defaults to "close" in the upper-left-hand corner of the dialog box):
$("#signInDialog").dialog({ dialogClass: "login",
zIndex: 20,
modal: true,
closeText: 'X'
});
There is a default close icon in jQuery UI framework:
.ui-icon-close{background-position:-80px -128px}
or
.ui-icon-circle-close{background-position:-32px -192px}
Just take a look into generated CSS and make sure you downloaded the framework correctly (with all images).
Try using this value instead of 'X'.... the value is ×
use it similar to this... wherever you need...
<a id="some_id">×</a>
might work...
HTML provides a close icon,
an Unicode character for close is ×.
you can use it similar to this...
<a href='javascript:void(0)'>×</a>

Twitter notification ajax bar, how did they do it?

I'm trying to get that cool, ajax sliding bar that twitter has (its slightly transparent, white).
I tried looking at the html/css, but it seems that they dynamically inject the various DOM layers.
Does someone know how they implemented it?
I really want to learn how to do this.
run this code in firebug or on document.ready()
$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
opacity:"0.5"
})
.appendTo("body");
and you should have an instant notification bar...
If you are familiar with jQuery (which I assume you are, because the question is tagged with jquery), you can tweak the CSS and HTML values to suit your needs...
To have it slide Down you would do this:
$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
display:"none", //<-- notice this new value
opacity:"0.5"
})
.appendTo("body");
$("#notification").slideDown("slow"); //<-- this is the animation code
Disclaimer: just a quick thing I whipped up, won't be surprised if it didn't work in IE

Resources