HTML Template
Use the Garden Gnome Template files as a basis for the HTML output.
The templates use the ECMAScript scripting language (JavaScript is also based on ECMAScript, so they use the same syntax) as defined in the standard ECMA-262.
You can find a list of the predefined objects and functions in Qt’s
List of JavaScript Objects and Functions.
console.log() is available as well. 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
The web output templates are in the html5 subfolder of the HTML templates
folder. On Windows, that is:
C:\Users\<user name>\AppData\Roaming\GardenGnomeSoftware\Pano2VR8\HtmlTemplates\html5
and on Mac it is:
/Users/<user name>/Library/Application Support/GardenGnomeSoftware/Pano2VR8/HtmlTemplates/html5
You can always look up and change the path of the HTML templates folder in the
Files settings. A template placed in
the project folder is also listed, with $d in front of its name.
The built-in templates in this folder are read-only, and Pano2VR puts back any that are missing when it starts. Copy a template under a new name, and make the copy writable, before you change it. See HTML Templates.
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 settings of the current output, and config contains the project’s settings and User Data. Both are plain JavaScript objects, so you read a value with the usual property syntax. For example:
output.filename; // the output file set in the Advanced pane
output.quality; // the image quality of the web output
config.userdata.title; // the Title of the project's User Data
document.alert(JSON.stringify(output, null, 2)).Functions and Variables
void document.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="")
Text Area with a label:
void addTextArea(string id, string label,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 = {};
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. Without dst, the file keeps its name:
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)
Encode the string s as a UTF-8 URL, keeping / as it is:
string encodeUrlUtf8(string s)
Remove all HTML tags from the string s: string removeTags(string s)
Replace the placeholders in s, for example
$(upt) for the project title: string expandVariables(string s)
Expand the filename fn with the folder of the output file as root:
string expandOutputFilename(string fn)
Return the path of fn relative to the project folder, or relative to the
folder of the output file: string relativeFilename(string fn),
string relativeOutputFilename(string fn)
Remove the file fn that the template added to the output before:
void removefile(string fn)
Add the project’s preview image, scaled to w x h pixels, to the output file
dst. It is the project’s Custom Preview, or the start node’s default view.
Returns the size of the image:
size addPreviewImage(string dst, int w, int h, int quality=90)
Same as addPreviewImage, but the image is scaled to fill w x h pixels and
center-cropped to exactly that size, as social media platforms expect:
size addCroppedPreviewImage(string dst, int w, int h, int quality=90)
Render a preview image of the node nodeId, center-cropped to w x h pixels,
to the output file dst. Returns true on success:
bool addNodePreviewImage(string nodeId, string dst, int w, int h, int quality=90)
Return the complete web address of a file in the output folder, built from the
Publish URL in the Project Properties. Without a filename, it returns the
address of the HTML page. Without a Publish URL, it returns the filename
unchanged: string publishedUrl(string filename="")
Report a problem to the user without stopping the export. In the app, the
message is shown in a message box; in a command line export, it is written to
the log output: void reportError(string text)
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
File name of the main HTML output file: (string) htmlfile
Folder of the output file, relative to the HTML file: (string) outputbase
File name of the skin, or false when the output has no skin:
(string) outputskinfile. The same for the VR skin: (string) outputvrskinfile
(array of objects) nodes. Each
entry contains id, startnode, hideinlist, hasgps, latitude and
longitude (if GPS data is present), and userdata (with title,
description, tags, customNodeId, and the other user data
fields).