UI Using QML in High Fidelity


I use the <“enter”> key a lot to navigate here but one thing that is missing I’ve thought is connection to one’s bookmarks.

What I would like to see here is after hitting <“enter”> key… or equivalent with controller is same type widget with forward and back arrows comes up, but under it Icons of two groups.

First down would be icons of history of this session and below that would be icons of your bookmarks. You could either activate a change in space by either typing in a new domain/path etc. or you could click/activate or down arrow to one of the icons in the recent group or the bookmarks group.

Anyway… just something I was thinking about and … was not sure which UI .js to look at to see if it could be done easily. Oh… and thinks Icons with maybe small text below would be best.


I’ve actually been thinking that an address bar that does auto-completion against your history, bookmarks and friends would be an effective mechanism for easy access to those features, emulating some of the best functionality of the Chrome address bar.


Actually, the ideal would be for us to expose the history, bookmarks and friends information to QML, users could develop their own custom UI.

I kind of view this as similar to the approach taken by World of Warcraft. The built-in user interface is certainly sufficient for casual play, but most players of the game end up customizing the UI by installing add-ons that create new UI.

The same thing should be possible with Interface. Just as you can write scripts that interact with the core services of the application, you should be able to write QML that does so as well. Parts of that are already there, but other parts are missing right now.




Just kidding. And yes I should probably just wait for all of this to be exposed, I just worry that someone will think it can be monetized and nerfed in the official fork.

I only tried WOW for short time years ago, I got bored with the grind long before that. But all the people I know that play it a lot used a custom UI or one made by someone else. Sort of the way the SL viewer is not used by the majority of users, if you believe the stats.

Along with history, bookmarks and friends would probably be “recomended”, “trending” or “suggested”. But for me, 99.something% of the time the links from those are either irrelevant (as in the HiFi alpha forums or SL destination guide) or paid “click bait” leading to places of no interest to me.

I’ve seen some QML stuff in .js files here but is there any documentation on what parts of using QML in the Interface UI are supported now (without digging through the latest build’s c++ files)?


Oh… and I still think icons are better. In the mass market real world, text is something some can’t do, or is in wrong language or too lazy to read etc.


Well, creating QML UIs should work very similarly to the web windows. If you look at marketplace.js you’ll see that the JS does very little other than create an OverlayWebWindow and a toolbar to manage the window’s visibility.

I can create another script flockOfFish.js that does almost the exact same thing, but using an OverlayWindow instead of an OverlayWebWindow. The source URL that I pass to the window points to QML content, rather than HTML content. Specifically it points at this QML document I’ve created.

Inside that QML I create a layout of controls… a background rectangle, a small red rectangle in the upper left corner, a label with some text and a button. The button itself is wired up to add a new short-lived box entity near the origin when clicked. Note that the Entitity interface is being called almost in exactly the same way it would be in a script. The important difference here is that I’m calling addEntity2, not addEntity. This addEntity2 function doesn’t exist in the public client, so the button won’t work for you if you attempt this (in fact in writing up this demo I’ve discovered and fixed several bugs related to loading QML over the network and into an OverlayWindow, so much of this might not work).

Eventually, all the script interfaces that are available in pure JS scripts should be available in QML interfaces as well. QML itself is perfect for creating rich responsive user interfaces, containing lots of basic control types and has lots of functionality for devising new types as well as customizing the look and feel of the UI.

Here’s a short video on creating QML UI…


I have a very suitable use-case for this approach. To those of us that don’t follow PR and Git, would you mind announcing when this feature is available in source? Specifically, I am looking to recreate your process above:

I watched the video you provided and believe I can really add value to our client when this functionality is put into source.



Only icons would be a really bad way. Just because with only icons it’s hard to find the right shorcut / bookmark etc. because things can look pretty the same Always combine icons with text.


Hey thanks, your reply is a very good intro to what will be possible when this gets finalized. I guess now we’ll have to wait until we get a list of QML supported functions as in the addEntity2 in your example.


Unfortunately, I wasn’t able to get MyAvatar.goToLocation(vec3) to perform to specifications. Consider the following:

text: "WARP TO -100x"
... ... ...
onClicked: MyAvatar.goToLocation(-100,0,0);


text: "WARP TO Origin"
... ... ...
onClicked: MyAvatar.goToLocation(0,0,0);
text: "WARP TO +100x"
... ... ...
onClicked: MyAvatar.goToLocation(100,0,0);

Pretty obvious what I’m cooking up here. Each click is registered as 0,0,0 (see log highlight)

Do you have time to fix this functionality this week? Without a means of using UI-based warp, my Physics QA (March) is going to take FOREVER! o.O Using the built-in teleport warp using hifi address is unacceptable for this use case.

cc: @chris, @Jherico


I think the reason is because you have some odd definition for vector:

It takes

 MyAvatar.goToLocation (Vec3 position, bool orientation, 
           Quat orientation, bool facelocation)

// like
 MyAvatar.goToLocation ( {x:100,y:0,z:0}, true, 

Quicker definition is simply, Use the above only if you want the user to look into a certain position after going in

MyAvatar.position = {x:100,y:0,z:0}


Thanks for this. I’ll test it now and let you know, by the way, extra parenthesis to anyone out there copy pasting.


Nope. It is definitely broken. I used the orientation version you provided, and when clicked, you can see that it is printed to the log… along with the “move to 0,0,0”

Hence, this is a bug and needs attention… sooner rather than later. :smiley:

cc: @chris @Jherico


Wonder why, the cellscience script worked yesterday which works similarly. I’ll check it as well when I get home from work


Okay, i tested it directly from my console and it worked fine without that issue. What values are you giving it? it is from a defined thing?


Testing it in console is not an accurate replication of the defect. Use QML.


@AlphaVersionD As I explained earlier, most of hte scripting APIs won’t work from QML until we make some modifications to the way the functions are exposed to JS.

However I should be able to produce a small change that will allow this particular method to work. Allow me to see.


Everyone plays favorites, and you’re definitely one of mine. :smiley: I appreciate it greatly. Thanks!


I’ve opened a PR here that should allow you to set the Avatar position from QML.

Note that the signature is a little different than you would use in pure JS.

        position: { x: 0, y: 1, z: 0 },

You can also specify an orientation in as either a quaterion:

orientation: { x: 0, y: 0, z: 0, w: 1 }

or Euler angles (although it expects the angles in radians)

orientation: { x: 0, y: Math.PI / 2, z: 0 }


@AlphaVersionD can you test the PR that @Jhericoput together https://github.com/highfidelity/hifi/pull/7171 ?