Tutorial: Using Radio Buttons in the 3D PDF Documents



Radio buttons present a group of choices from which the user can select only one item.

Embed 3D object with HOMO and LUMO isosurfaces into PDF document and click Select Object tool in the toolbar of Acrobat.

Point mouse to the picture

and double left-mouse-button click to open Edit 3D dialog. Click 3D tab and then Browse button in the Script panel to load JavaScript jamberoo.js.

JavaScript jamberoo.js can be downloaded here.

Add two radio buttons to the document (see Adding Radio buttons tutorial).

We name both radio buttons switch_01 and their button values are 1 and 2, correspondingly.

Click Select Object tool in the toolbar of Acrobat.

Double click on the first radio button to open Radio Button Properties dialog. Select Options tab and tick Button is checked by default checkbox

Click Actions tab and select Run a JavaScript in the Select Action combobox

Press Add... button to open JavaScript Editor dialog

Select and copy JavaScript code below and paste it into the JavaScript Editor dialog

// Get index of page containing the Annot3D object (count starts at 0).

pageIndex = this.pageNum;

// Index of the Annot3D (count starts at 0).

annotIndex = 0;

if (getAnnots3D(pageIndex)[0].activated) {

c3d = getAnnots3D(pageIndex)[0].context3D;

var outcome = this.getField("switch_01").value;

console.println("RB: outcome: "+outcome);

if ( outcome == 1 ) c3d.setOnlySelectedISVisible("ISOSURFACE_003", true);

else c3d.setOnlySelectedISVisible("ISOSURFACE_003", false);

}

You can see here that getField("switch_01") function should use the name of radio button, switch_01, while the function setOnlySelectedISVisible("ISOSURFACE_003", true) uses prefix ISOSURFACE_003 to show/hide isosurface for HOMO. To determine what prefix to use for each isosurface toggle a Model Tree in Acrobat

Model Tree panel shows all available isosurfaces. Since we first created in Jamberoo the isosurfaces for the HOMO and then for the LUMO, the index for the former is smaller (003).

Now do the same procedure for the second radio button and paste in the JavaScript Editor dialog the text below

// Get index of page containing the Annot3D object (count starts at 0).

pageIndex = this.pageNum;

// Index of the Annot3D (count starts at 0).

annotIndex = 0;

if (getAnnots3D(pageIndex)[0].activated) {

c3d = getAnnots3D(pageIndex)[0].context3D;

var outcome = this.getField("switch_01").value;

console.println("RB: outcome: "+outcome);

if ( outcome == 2 ) c3d.setOnlySelectedISVisible("ISOSURFACE_004", true);

else c3d.setOnlySelectedISVisible("ISOSURFACE_004", false);

}

As you see, we use the same name for the radio button, switch_01, but other prefix for the isosurface to be shown/hidden, ISOSURFACE_004.

As a last touch we shall make isosurfaces with a prefix ISOSURFACE_004 invisible upon activation. To this end we shall use 3D Reviewer, a program which comes with the Adobe Acrobat distribution. Point a cursor to the 3D object and right-button-mouse click to open a popup menu. Select Edit in 3D Reviewer.

3D object will be opened in a separate window of the Adobe 3D Reviewer

Select nodes with a prefix ISOSURFACE_004 in the left panel, left-button mouse click to open a popup menu, and select Hide/Show to hide selected isosurfaces

Return back to Adobe Acrobat selecting Save back in PDF menu item in File menu of Adobe 3D Reviewer

Now after activation of the 3D object in Acrobat only HOMO is initially shown

The final 3D PDF document is here

[Tutorial Home]


Send all questions, suggestions and comments to Vlad (vvv900@gmail.com)

Dr. Vladislav Vasilyev

Supercomputer Facility,

The Australian National University,

Canberra, ACT, 0200, Australia