HTML5 GUI --> Interface


#1

Wanted to share a pattern that I’ve used to hook up HTML5 Web Overlay Windows (which can be interacted with in the HMD), to Interface.

main.js – interface client script, loads the weboverlay and points it at the html5 page
main.html – loads the eventbridgeloader and a qrcwebchannel to talk across. contains the actual GUI
eventbridgeloader.js – so the page can talk to interface
jquery – convenience methods

so you build some GUI in html5 and then on its event handlers, send some web events across the EventBridge. Vice versa for data flow in the opposite direction.

in this example you have to have ‘stats’ enabled in developer options.

p.s. one caveat is that i dont think you can host this over https because of qrcwebchannel issues… this is known but not yet resolved.

you should be able to use a pattern like this to make all sorts of fun things that interact with the world, using familiar tools (HTML5, CSS, DOM, etc).

http://hifi-content.s3.amazonaws.com/james/debug/HTML_Interface_example.zip


Webentity as hud object?
#2

cool use of JavaScript hybridization!

from your zipfile, by chance are you exploring ways to re-imagine the Stats overlay?

because i hope so… and if so, here’s some discovered black magic that might help prototype and experiment with potential replacements:

// detect whether Stats are currently enabled
var statsEnabled = Menu.isOptionChecked("Stats");

// set whether Stats are enabled
Menu.setIsOptionChecked("Stats", true|false);

// toggle Stats detail mode (the mode normally toggled by clicking the overlay)
Stats.expanded = true|false;

// one way to have Stats both enabled (so properties keep getting updated) and invisible (to the naked eye)
Menu.setIsOptionChecked("Stats", true);
Stats.scale = 0;
// to revert, Stats.scale = 1;

#3

yes – i put this together when our QA team was looking to do some automated testing. not as a replacement for the current stats view, per se, but that was a place for them to start hooking buttons into interface functions :slight_smile: