Difference between revisions of "EZUI"

From Sirikata Wiki
Jump to navigation Jump to search
(redirected to Flatland page)
 
(19 intermediate revisions by the same user not shown)
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 [[presence|presences]].
+
#REDIRECT [[Flatland]]
−
 
 
−
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 ==
 
−
 
 
−
===Setting up EZUI===
 
−
 
 
−
To use EZUI, you'll need the following files in your Sirikata directory:
 
−
 
 
−
 
 
−
*share/ogre/data/ezui/[http://dl.dropbox.com/u/549683/Sirikata-EZUI/ogre_data_ezui/ezui.js ezui.js]
 
−
*share/js/scripts/std/[http://dl.dropbox.com/u/549683/Sirikata-EZUI/default.em default.em]
 
−
*share/js/scripts/std/graphics/[http://dl.dropbox.com/u/549683/Sirikata-EZUI/graphics/ezui.em ezui.em]
 
−
*share/js/scripts/std/graphics/[http://dl.dropbox.com/u/549683/Sirikata-EZUI/graphics/ezuiViewer.em ezuiViewer.em]
 
−
*share/js/scripts/std/graphics/[http://dl.dropbox.com/u/549683/Sirikata-EZUI/graphics/default.em default.em]
 
−
 
 
−
 
 
−
 
 
−
If you've edited your own std/default.em and std/graphics/default.em (for example, if you've added scripts to the default presence or created your own UIs or keybindings) you'll want to patch those files manually.  The section below describes how to do that.
 
−
 
 
−
====Manually Patching std/default.em and std/graphics/default.em====
 
−
 
 
−
Lines preceded with <code>/*add*/</code> are to be added.  Other lines are shown for context.  Line numbers may differ if you've edited these files yourself.
 
−
 
 
−
=====In std/default.em=====
 
−
 
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
system.require('std/core/repeatingTimer.em');
 
−
/*add*/ system.require('std/graphics/ezui.em');
 
−
</source>
 
−
</div>
 
−
 
 
−
=====In std/graphics/default.em=====
 
−
 
 
−
(line 48)
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
system.require('std/graphics/axes.em');
 
−
/*add*/ system.require('std/graphics/ezuiViewer.em');
 
−
</source>
 
−
</div>
 
−
 
 
−
...
 
−
 
 
−
(line 79)
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
this._loadingUIs++; this._setMesh = new std.graphics.SetMesh(this._simulator, ui_finish_cb);
 
−
/*add*/ this._loadingUIs++; this._ezui = new std.ezui.EZUI(this, ui_finish_cb);
 
−
</source>
 
−
</div>
 
−
 
 
−
...
 
−
 
 
−
(line 91)
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
this._loadingUIs++; this._setMesh.onReset(ui_finish_cb);
 
−
/*add*/ this._loadingUIs++; this._ezui.onReset(ui_finish_cb);
 
−
</source>
 
−
</div>
 
−
 
 
−
...
 
−
 
 
−
(line 157)
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
this._binding.addAction('stopDrag', std.core.bind(this.stopDrag, this));
 
−
/*add*/ this._binding.addFloat2Action('showEZUI', std.core.bind(this.showEZUI, this));
 
−
/*add*/ this._binding.addAction('hideEZUI', std.core.bind(this.hideEZUI, this));
 
−
</source>
 
−
</div>
 
−
 
 
−
...
 
−
 
 
−
(line 230)
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
{ key: ['mouse-release', 1, '*'], action: 'stopDrag' },
 
−
/*add*/ { key: ['mouse-press', 3, 'none'], action: 'showEZUI' },
 
−
</source>
 
−
</div>
 
−
 
 
−
...
 
−
 
 
−
(end of the file)
 
−
 
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
 
 
−
            redo: function(action) {
 
−
                movable.setOrientation(new util.Quaternion());
 
−
            }
 
−
        });
 
−
    }
 
−
   
 
−
/*add*/    std.graphics.DefaultGraphics.prototype.showEZUI = function (x, y) {
 
−
/*add*/        var ignore_self = this._camera.mode() == 'first';
 
−
/*add*/      var clicked = this._simulator.pick(x, y, ignore_self);
 
−
/*add*/        this._ezui.show(clicked, x, y);
 
−
/*add*/    };
 
−
   
 
−
/*add*/    std.graphics.DefaultGraphics.prototype.hideEZUI = function () {
 
−
/*add*/        this._ezui.hide();
 
−
/*add*/    };
 
−
   
 
−
})();
 
−
</source>
 
−
</div>
 
−
 
 
−
===Hello, World!===
 
−
 
 
−
====The Code====
 
−
 
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
system.require('std/graphics/ezui.em');
 
−
ezui.script(@
 
−
write('Hello, World!');
 
−
@);
 
−
</source>
 
−
</div>
 
−
 
 
−
====Notes====
 
−
 
 
−
* The line <code>system.require('std/graphics/ezui.em')</code> ensures that the required files are included.
 
−
* The Emerson function <code>ezui.script()</code> takes a string containing JavaScript to be executed when the GUI loads.  The code passed to <code>ezui.script()</code> is executed every time a user opens the GUI.  In between invocations of the GUI, its contents are cleared.  The result is that the GUI always starts in the same state.
 
−
* The <code>write()</code> 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.
 
−
 
 
−
====Testing 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===
 
−
 
 
−
====The Code====
 
−
 
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
system.require('std/graphics/ezui.em');
 
−
ezui.script(@
 
−
write(sections('buttons', 'output'));
 
−
var b1 = button('English', buttonCB);
 
−
var b2 = button('Spanish', buttonCB);
 
−
append('buttons', b1+'<br />'+b2);
 
−
function buttonCB (buttonText) {
 
−
                if (buttonText == 'Spanish') {
 
−
        setInnerHTML('output', 'Hola!');
 
−
                } else {
 
−
        setInnerHTML('output', 'Hello!');
 
−
                }
 
−
}
 
−
@);
 
−
</source>
 
−
</div>
 
−
 
 
−
====Notes====
 
−
 
 
−
* Buttons are represented as JavaScript objects, and can be stored in <code>var</code>s.  When you want them to appear on the screen, just pass the button object to a function like write().  Buttons can also be concatenated with strings using the + operator.
 
−
* The <code>button()</code> 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.  This callback can take the button text as a parameter, so if two buttons share the same callback, you can figure out which one was clicked.
 
−
* The <code>sections()</code> function is used to divide the UI into sections.  <code>sections()</code> takes any number of strings as parameters; these strings are used as section IDs.  Note that the strings passed to <code>sections()</code> must be valid HTML ID attribute values (i.e. they must begin with a letter and contain only letters, numbers, and underscores).  <code>sections()</code> returns a string that can be passed to <code>write()</code> or <code>append()</code>.
 
−
* The <code>append()</code> 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 <code>setInnerHTML()</code> function sets the contents of the section with the specified ID to the specified text or HTML.  It has the same syntax as <code>append</code>.
 
−
 
 
−
===Sending Messages to the Controlling Presence===
 
−
* The '''controlling presence''' (or simply ''controller'') is the presence that you script with the <code>ezui.script()</code> call.
 
−
* You can notify the controller that a button on your UI was pressed by setting <code>notifyController</code> as the button's callback function.
 
−
* The <code>ezui.onButtonPressed()</code> function lets you specify a function to execute when your controller gets notified of a button event.  Note that <code>ezui.onButtonPressed()</code> 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====
 
−
 
 
−
<div style="font-size:120%">
 
−
<source lang="javascript">
 
−
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>);
 
−
}
 
−
}
 
−
</source>
 
−
</div>
 

Latest revision as of 17:24, 26 August 2011

Redirect to:

Retrieved from "http://www.sirikata.com/wiki/index.php?title=EZUI&oldid=1057"