Developing Applications With Mozilla and CMGUI
Making your Physiome Interface with CMGUI and Mozilla
PDF version: Cmgui-interfaces_v0.2.pdf
To view the demos you will need to install the mozCmgui Mozilla extension. Download and follow the Installation Instructions
Shane Blackett
Bioengineering Institute
University of Auckland
10 November 2006
Updated
27 March 2007
Features
- 3D Interface
- Controllable with Javascript and "gfx" commands
- Streams across the internet
- Works with Linux and Windows
ProjectTextureApp_0.01
Run: ProjectTextureApp_0.01.xul
Javascript:
function set_up_cmgui_and_create_window() { ................................................... // Initialise cmgui, loading files from memory. window.commandData.executeCommand("gfx read elements memory:/cube.exelem;"); .................................................... } function download_files() { // Download files from internet .................................................. var files = [ "cube.exelem" ]; ................................................... }
ProjectTextureApp_0.02
- Show steps and loaded files down left hand side
- Load background
- Load model
- Define texture coordinates
- Calculate texturea
ProjectTextureApp_0.02
Layout that doesn't do anything
Run: ProjectTextureApp_0.02.xul
XUL:
<vbox align="centre"> <spacer flex="1"/> <label value="Step 1: Select background image."/> <hbox> <checkbox id="selectbackground" checked="false" disabled="true" /> <textbox id="backgroundfilenametextbox"/> <button id="backgroundfilenamebutton" label="Browse"/> </hbox> <spacer flex="1"/> <label value="Step 2: Select model."/> <hbox> <checkbox id="selectmodel" checked="false" disabled="true" /> <textbox id="modelfilenametextbox"/> <button id="modelfilenamebutton" label="Browse"/> </hbox> <spacer flex="1"/> </vbox>
ProjectTextureApp_0.04: Actions
Run: ProjectTextureApp_0.04.xul
XUL:
<textbox id="backgroundfilenametextbox" oncommand="load_background()"/> <button id="backgroundfilenamebutton" label="Browse" oncommand="browse_background()"/>
ProjectTextureApp_0.04: Actions
Javascript:
function load_background() { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); try { var background_filename = document.getElementById( "backgroundfilenametextbox"); mozCmguiRunSafe(function(){window.commandData.executeCommand( "gfx modify texture background image " + background_filename.value )}); } catch (e) { alert ("Unable to load file " + background_filename.value); } }
Wrinkles
- OSX
- Unsigned applets
Help
- Firebug for javascript
Summary
- Build graphical applications
- Same files for local and web server
- Record your methods in a user interface
- Testing write a test function or make an example
Source files
To see the XUL files use "View source" in your browser.