Hscript-JavaScript Cookbook

Setup

For instructions on how to get started, see the Setup Guide.

Loading a hip file

The mread -i hscript command will load a hip file. However, if no path is specified in the file name, mread will look in the directory where houdini was started. To read hip files from in a location relative to the current html document, the HBgetURLDirectory() function is needed.

The following code will create a link that loads a file named sample.hip.
<script language="JavaScript">
function loadSampleFile()
{
    RunHCommand("mread -i " + HBgetURLDirectory() + "sample.hip");
}
</script>
<a href="javascript:loadSampleFile()">Load sample file</a>

If you are curious how HBgetURLDirectory() works, see the HB.js file.

Here is the output of the above code:
Load sample file

A More Complex Example

This example retrieves a file name from an html form and loads that file.
<script language="JavaScript">
function loadFile(filename)
{
    RunHCommand("mread -i " + filename);
}
</script>

<form name=loadform>
<input type=input name=filename>
<input type=button value="Load"
    onClick="loadFile(loadform.filename.value)">
</form>

The output:

Retrieving the Output of a Command

RunHCommand() returns the output of the hscript command. This example uses the alert() function to pop up a window with the names of all the panes in the current desktop. alert() can be helpful when debugging.
<script language="JavaScript">
function listPanes()
{
    alert(RunHCommand("pane"));
}
</script>
<a href="javascript:listPanes()">List Panes</a>

The output:
List Panes

Running Multiple Commands at Once

Multiple hscript commands can be executed at once by adding them to the same string, separated with commas. The example creates three objects: a sphere, a box, and a tube. It also finds the viewer pane and adjusts the viewport to ensure the objects are visible.
<script language="JavaScript">
function addObjects()
{
    var command = "\
		    oprm -f /obj/sphere /obj/box /obj/tube; \
		    opcf /obj; \
		    opadd geo sphere; \
		    opadd geo box; \
		    opadd geo tube; \
		    opcf /obj/sphere; \
		    opadd sphere sphere1; \
		    opparm sphere1 t ( -3 0 0 ); \
		    opset -d on -r on sphere1; \
		    opcf /obj/box; \
		    opadd box box1; \
		    opparm box1 size ( 2 2 2 ); \
		    opset -d on -r on box1; \
		    opcf /obj/tube; \
		    opadd tube tube1; \
		    opparm tube1 t ( 3 0 0 ) height ( 2.5 ); \
		    opset -d on -r on tube1; \
		    ";

    // None of these commands should return a result.  If they did, an
    // error occurred.
    var hscript_errors = RunHCommand(command);
    if (hscript_errors.length)
	alert(hscript_errors);

    // Now adjust the viewer.
    var viewer_pane_name = HBFindPaneName("Viewer");
    if (viewer_pane_name)
    {
	// Change the viewer pane to objects.
	RunHCommand("pane -h /obj " + viewer_pane_name);

	// Zoom out so that all the objects fit in the viewport.
	var viewport_name = RunHCommand("viewls -n -v -T perspective");
	RunHCommand("viewtransform " + viewport_name +
		    " txyz ( 0 0 12 ) pxyz ( 0 0 0 )" +
		    " rotation ( 1 0 0 0 1 0 0 0 1 )");
    }
    else
	alert("could not find viewer");
}
</script>
<a href="javascript:addObjects()">Add Objects</a>

The output:
Add Objects

Setting Operator Display Flags

This example uses a client side image map to select and display the sphere, box, and tube objects created in the earlier example. Be sure to click Add Objects above so the objects are created.
<script language="JavaScript">
function toggleOpFlag(op_path, flag_switch_name)
{
    // Find out the current flag setting and invert it.

    var opset_command = RunHCommand("opset " + op_path);
    var cur_setting = HBcommandLineSwitchValue(opset_command, flag_switch_name);
    var new_setting = HBbool2onoff(!HBonoff2bool(cur_setting));

    RunHCommand("opset " + flag_switch_name + " " + new_setting + " " +
		op_path);
}

function toggleDisplay(object_name)
{
    toggleOpFlag("/obj/" + object_name, "-d");
}

function toggleSelection(object_name)
{
    toggleOpFlag("/obj/" + object_name, "-p");
}
</script>

<map name="object_type_map">
<area shape="rect" coords="30,77,69,89"
      href="javascript:toggleDisplay("sphere")">
<area shape="rect" coords="129,77,169,89"
      href="javascript:toggleDisplay("box")">
<area shape="rect" coords="227,77,265,89"
      href="javascript:toggleDisplay("tube")">
<area shape="rect" coords="0,0,99,99"
      href="javascript:toggleSelection("sphere")">
<area shape="rect" coords="100,0,199,99"
      href="javascript:toggleSelection("box")">
<area shape="rect" coords="200,0,299,99"
      href="javascript:toggleSelection("tube")">
</map>

<img border="0" src="images/object_type.png" usemap="#object_type_map">

The output: