Skip to main content

HTML Template

Pano2VR (and Object2VR) use .ggt (Garden Gnome Template) files as a basis for the HTML output.

The templates use ECMAScript scripting language (JavaScript is also based on ECMAScript so they use the same syntax), as defined in standard ECMA-262.

You can find a list of predefined objects in Qt’s ECMAScript Reference. The processing is similar to PHP where you embed scripting code into HTML. The major advantage of this approach is that many text editors are able to use syntax highlighting for HTML to make the code more readable.

Default Directory

on Windows:

C:\Users\<user name>\AppData\Roaming\GardenGnomeSoftware\Pano2VR\HtmlTemplates

and on Mac it is:

/Users/<user name>/Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates

You can always look up and change the path in Settings/Preferences.

File Structure

There are two processing tags:

<?ggf
   // your code
?>

for forms and

<?ggs
   // your code
?>

for the main script. Everything outside of those tags is added to the final HTML page.

All Script Sections

All script sections contain two predefined objects. The output object contains the configuration for the current output format and config gives access to the whole configuration file. The structure is similar to the structure in the .p2vr project files.

For example, the project file looks like:

<panorama>
    <input>
        <type>auto</type>
        <filename>park.mov</filename>
    </input>
    <viewingparameter>
        <pan>
            <start>66.5</start>
            <min>0</min>
            <max>360</max>
            ...
        </pan>
    </viewingparameter>
</panorama>

so the corresponding method call for the pan minimum value is
config.viewingparameter.pan.value("min")

where the last part is the method to get the actual value.

The values for the input file can be retrieved with
config.input.value("filename").

The same method works with the output object for the current output format.

Functions and Variables

void alert(string s)
Show s in a message box. This function is good for debugging the code.

<?ggf ?> - section

The <?ggf ?> section contains a predefined form object.

Methods for the form object

All input fields have an id parameter that is used to identify the value. Those values can be accessed as formvalue["<id>"] in the <?ggs ?> section.

Simple line of text with a label:
void addLineEdit(string id, string label,int len=0,string default="")

Checkbox with a label:
void addCheckBox(string id, string label, bool default=false)

Number field with a label. The number can be between minRange and maxRange:
void addSpinBox(string id, string label, int def=0, int min=0,int max=100)

Dropdown list of different values:
void addComboBox(string id, string label, array items, string default)

The items array is an associative JavaScript array. The return value is the key field.

Sample code:

var colors=new Array();
colors["#ff0000"] = "red";
colors["#00ff00"] = "green";
colors["#0000ff"] = "blue";
form.addComboBox("bgcolor", "Background Color", colors);

Button for a color picker dialog:
void addColorButton(string id, string label, string default="")

Input field for file names with a button to select the filename:
void addFileNameInput(string id, string label, string text, string filter, string default="")

Horizontal separation line:
void addLine()

Text label:
void addText(QString label)

Add a output format with a file extension. These values are shown in the Format combobox directly next to the output:
void addOutputFormat(string text, string ext)

<?ggs ?> - section

The <?ggs ?> section contains a predefined document object. The methods document.write and document.writeln add text to the HTML document.

For example the code:

<html>
    <body>
        <?ggs document.writeln("<h1>Hello World!</h1>"); ?>
    </body>
</html>

would produce the following output:

<html>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Methods for the Document Object

Encode the string s into html entities:
string encode(string s)

Encode the string s as URL:
string encodeUrl(string s)

Add the string s to the output file:
void write(string s)

Add the string s + new line to the output file:
void writeln(string s)

Same as write and writeln but encodes the string into html entities:
void writeEncoded(string s)
void writelnEncoded(string s)

Add the src file to the output dst file. For relative paths of the src the root is the template directory. For dst it is the output path. Subdirectories in dst are created automatically:
void addfile(string src,string dst)

Create a new text file dst with the content from content:
void createfile(string dst, string content)

Create a new UTF-8 encoded text file dst with the content from content.
void createutf8file(string dst, string content)

Expand the filename fn with the project base path as root:
string expandFilename(string fn)

Compress the whole output with all the files into a ZIP archive and name the html document documentName. The ZIP file name is the output file name selected in the GUI:
void zipoutput(string documentName)

Functions and Variables

Filename + relative path to the output file produced:
(string) outputfile

Filenames + relative path to the output files produced. This is used if more then one output file has been generated like for the cube faces export:
(array of strings) outputfiles

Values of the form input fields. You can access those values with formvalue[““]:
(map of strings) formvalue

Example

This example shows a basic template for a QuickTime HTML page.

<?ggf
    // Create the form in the HTML dialog box
    form.addColorButton("textcolor","Text Color","#000000");
    form.addColorButton("bgcolor","Background Color","#ffffff");
    form.addCheckBox("showcontroller","Show QuickTime Controller",true);
    // define possible output formats
    form.addOutputFormat("HTML (.html)","html");
    form.addOutputFormat("HTML (.htm)","htm");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?ggs document.writeEncoded(config.userdata.title()); ?></title>
<?ggs document.addfile("../common/p2q_embed_object.js","p2q_embed_object.js"); ?>
<script type="text/javascript" src="p2q_embed_object.js">
</script>
<style type="text/css" title="Default">
    body, div, h1, h2, h3, span, p {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        color: <?ggs document.write(formvalue["textcolor"]); ?>;
    }
    body {
        font-size: 10pt;
        background : <?ggs document.write(formvalue["bgcolor"]); ?>;
    }
    h1 {
        font-size: 18pt;
    }
    h2 {
        font-size: 14pt;
    }
</style>
</head>
<body>
<h1><?ggs document.writeEncoded(config.userdata.title()); ?></h1>
<script type="text/javascript">
<!--
if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
<?ggs
    wh=output.windowHeight();
    if (formvalue["showuserdata"]==true) {
        wh+=16;
    }
    document.write("\t\t\tp2q_EmbedQuicktime('" + outputfile + "','" + output.windowWidth() + "','" + wh + "'");
    document.write(",'bgcolor','" + formvalue["bgcolor"] + "'");
    document.write(",'scale','tofit'");
    document.write(",'controller','" + formvalue["showcontroller"] + "'");
    document.writeln(");");
?>
} else {
    document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old! Please copy this file into your html directory.<\/p>');
}
//-->
</script>
<noscript>
    <p class="warning">Please enable Javascript!</p>
</noscript>
</body>
</html>

See also…

2017-04-11 09:07:55