Personal tools
You are here: Home / cmgui / Zinc / Developing Applications With Mozilla and CMGUI

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>

Run: ProjectTextureApp_0.03.xul

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);
}
}

Run: ProjectTextureApp_0.05.xul

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