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>AppDataRoamingGardenGnomeSoftwarePano2VRHtmlTemplates
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