EZUI

EZUI is a user interface creation tool developed by Ben Christel. It is designed to allow an application developer to add code to an entity's script that specifies the UI's appearance and logic. The UI will then appear on a user's screen when the user interacts with one of the entity's presences.

EZUI was designed with the following goals in mind:

• Facilitating rapid development of dialog-like UIs associated with a particular presence in the world
• Enabling multiple users to interact with a presence simultaneously using the UI
• Allowing application developers to easily collect and store data input by the user
• Facilitating communication between the presence controlling the UI and the avatar interacting with it
• Automating the synchronization of data between the UI and the controlling presence

Tutorial

Hello World

• You should use system.require('std/graphics/ezui.em') to ensure that the required files are included.
• The Emerson function ezui.script() takes a string containing JavaScript to be executed when the GUI loads. The code passed to ezui.script() is executed every time a user opens the GUI. In between invocations of the GUI, its contents are cleared.
• The write() function takes a string as a parameter. This string is appended to the GUI's HTML, similar to the way document.write() works in a plain HTML document.

The Code

system.require('std/graphics/ezui.em');
ezui.script(@
	write('Hello, World!');
@);

Test the UI

You can test the code above by opening a scripting window on any presence in the world and running the code. Then right-click on the presence you just scripted and the UI should appear.

Creating Buttons And Sections

• Buttons are represented as JavaScript objects. However, when you want to make a button appear on the screen, you can treat it as if it's a string of HTML code. Button objects can be passed to write() or concatenated with strings.
• The button() function is used to create a button. This function takes the following parameters:
  • the text on the button
  • a callback function that is called when the user clicks the button
• The sections() function is used to divide the UI into sections. sections takes any number of strings as parameters; these strings are used as section IDs. Note that the strings passed to sections() must be valid HTML ID attribute values (i.e. they must begin with a letter and contain only letters, numbers, and underscores). sections() returns a string that can be passed to write() or append().
• The append() function is used to append text or HTML to a specific section of the UI. The function takes the following parameters:
  • The ID of the section
  • The text to append to the section
• The button callback is called with the button's text as a parameter. This allows the UI to determine which button was clicked if multiple buttons use the same callback.

The Code

system.require('std/graphics/ezui.em');
ezui.script(@
	write(sections('buttons', 'output'));
	var b1 = button('button 1', buttonCB);
	var b2 = button('button 2', buttonCB);
	append('buttons', b1+'<br />'+b2);
	function buttonCB (text) {
		append('output', 'You clicked '+text+'!<br />');
	}
@);

Sending Messages to the Controlling Presence

• The controlling presence (or simply controller) is the presence that you script with the ezui.script() call.
• You can notify the controller that a button on your UI was pressed by setting notifyController as the button's callback function.
• The ezui.onButtonPressed() function lets you specify a function to execute when your controller gets notified of a button event. Note that ezui.onButtonPressed() is called in the controller's main script, not the UI script inside ezui.script. The callback function must also be defined in the controller's main script. The callback can take the button's text as a parameter.

The Code

system.require('std/graphics/ezui.em');
ezui.script(@
	var upButton = button('up', notifyController);
	var downButton = button('down', notifyController);
	var stopButton = button('stop', notifyController);
	write(upButton+'<br />');
	write(stopButton+'<br />');
	write(downButton+'<br />');
@);

ezui.onButtonPressed(move);
function move (buttonText) {
	if (buttonText == "up") {
		system.self.setVelocity(<0, 1, 0>);
	}
	else if (buttonText == "down") {
		system.self.setVelocity(<0, -1, 0>);
	}
	else if (buttonText == "stop") {
		system.self.setVelocity(<0, 0, 0>);
	}
}