Difference between revisions of "EZUI"
Jump to navigation
Jump to search
Ben.christel (talk | contribs) |
Ben.christel (talk | contribs) |
||
Line 1: | Line 1: | ||
− | 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 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 [[presence|presences]]. |
EZUI was designed with the following goals in mind: | EZUI was designed with the following goals in mind: |
Revision as of 05:14, 10 August 2011
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 toezui.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 tosections()
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 towrite()
orappend()
. - 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 thatezui.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>);
}
}