Object2VR 4 Docs / Code Element

Code Element

The code element is used to apply Javascript to the skin.

The code element is used to add custom Javascript and CSS. When the script is added with custom properties, they are added to the interface as parameters. The code element itself can then be saved as a component.



Give the element a unique ID or name. An ID is given automatically and will be numerically ordered when more than one are added. If an ID is already used by another element, a warning symbol will appear next to the input field.

★ Click the warning symbol to have Pano2VR create a unique ID for you.


The X and Y coordinates for the element.

Logic Block available.

An element’s position is relative to its parent (the Canvas is the parent to top level elements) and to its anchored position.

A container is usually a parent element, so its anchor will be relative to the Canvas.

For example, to set the container in the center of the canvas, anchor it to the center and enter 0 for both X and Y values. Tip: Double-click the arrows to set X and Y to 0.

This makes it easier to precisely position elements, especially on the edges of the player. For example, if the container holds buttons that should stick the bottom center of the screen, set the anchor to center bottom and set the Y value to 20 pixels and X to 0.

X and Y:

  • Percentage – Unit to set the position of the element based on the player’s size/window.

  • Pixels – Unit to set the actual location of the element within the skin.

  • CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

    • Example: Set the x position unit to CSS. Enter, 100px in the edit field. Add a logic block, choose a trigger and add 20% for the size, effectively switching units.

Logic Block available.


Use this grid to “stick” the element to a section of the player window. See above, to learn how the Anchor influences Position.


Adjust the element’s size (width and height) in pixels. Width and Height:

  • Percentage – Unit to set the size of the element based on the player’s size/window.

  • Pixels – Unit to sets the actual size of the element.

  • Lock Aspect Ratio – Click the link icon to lock the element’s size aspect ratio when resizing in the Canvas or changing size values in the properties panel.

  • CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

    • Example: Position an element 50 pixels from the top and then set the height to calc(100% - 50px). The element will then always have the same distance of 50px from the top and will extend straight down to the bottom.

Logic Block available.



Scales the element along the x and y axes. Doubling the value on either axis, for instance, will double the size of the element. If a scaling modifier is enabled, this scaling setting is ignored.


Use this grid to determine how the element scales. The default is set to the center so the element will scale in or out from its center. If you anchor the scaling to the upper left corner, for example, the scaling will center from this point.

Logic Block available.


Use this parameter to adjust the angle of the element. It will use the Center grid (above) as its axis. For example, if the center is chosen, it will rotate around its center. If the bottom left corner is selected, the button will rotate around that corner.

Logic Block available.


Select or deselect to keep the button visible or invisible. Visibility or invisibility can be changed and toggled with actions.

Logic Block available.


The transparency of the element. A setting of 1.000 is opaque. Lowering this number will increase the button’s transparency.

Logic Block available.

Hand Cursor

Select to have the hand cursor show when the mouse rolls over the element. This makes it more obvious to the user that the area is interactive.

Code Element Custom Properties

User-definable parameters added to the Javascript will show here as interactive settings.

Code Element


Use the text field to add Javascript. If you need more space, use the Open Editor button to open a larger editor.

The code can be saved and made to be used as an external file. Once the code is saved, From file will be selected and the path of the file will be added. To locate the file or change the path, right-click on the path to open the context menu.

Once code is added as an external file, the editor becomes read-only.

The code can contain a special comment block, that has to be at the very beginning of the code, and start with /*! and end with */. Inside that comment, you can put css styles, enclosed in a <style> tag.

Further you can specify custom properties for the code element (mentioned above). Those custom properties are defined in a JSON object, called ‘ggproperties’. See the example below, to see how to define custom properties, what types of properties we support, and how to then use the values from those properties in your Javascript code.

And finally, a code element might be using skin variables, and when you copy a code element (to paste it into another skin), or create a component from a code element, you probably want these skin variables to come along with the code element. To do this, you specify those variables in a JSON object, called ‘ggvariables’, in that same comment block. In the example below, we define that skin variables var1 and var2 have to also be copied, if the code element is copied or put into a component.

Here is an example of such a comment block (plus some Javascript code at the end), containing all the things mentioned above. In practice, not everything has to be present. Or if none of that is needed, you can of course omit the comment block all together:

/*! <style>  .hepta_slab {  font-family: "Hepta Slab", serif;  }   .karla {  font-family: "Karla", sans-serif;  line-height: 1.3;  }   .glow {  -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));  }   .shadow {  -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));  }   .shadow_title {  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));  }   .ggskin_text > div::-webkit-scrollbar {  width: 5px;  }  .ggskin_text > div {  scrollbar-width: thin;  } </style> { "ggproperties": [ { "id": "transparency", "type": "checkbox", "label": "Transparent", "default": true }, { "id": "text", "type": "text", "label": "Text field", "default": "Add your text here." }, { "id": "int_var", "type": "spinbox", "label": "Integer Number", "default": 42 }, { "id": "float_var", "type": "doublespinbox", "label": "Float Number", "default": 3.141 }, { "id": "color", "type": "color", "label": "Color", "default": "blue" }, { "id": "color2", "type": "combobox", "label": "Color Selection", "default": "red", "values": [ { "label": "Black", "value": "black"}, { "label": "Red", "value": "red"}, { "label": "Blue", "value": "blue"} ] } ], "ggvariables" : [ "var1", "var2" ] } */ console.log('test: ' + el.ggproperties.text); el.style.background = el.ggproperties.color2; 

External Files

External files are used for sharing Javascript Code elements as Components. Any files that the element is dependent on will be made part of the component and then included when the component is added to a skin.

To add a file, click the plus button at the right of the row or double-click within the table. Pick if it should be a CSS or JavaScript file, then enter the URL.

Local Files

In the local files table, you can add files from your hard drive, that will be included in the skin file, and will be copied to the output folder on output. An example would be adding font files, that you want to use in the CSS styles, defined in the code element.

To add a file, click the plus button at the right of the row or double-click within the table. Navigate to the file. The file will appear in the table, with the name it has on your file system. But you can now edit the file name in the table, by clicking the file. This will then be the file name used, when it is copied to the output folder. And you can even prepend a subfolder, so then the file will be copied to a subfolder in the output.

So for instance you could add a font file from your hard drive, ‘myFont.ttf’. Then you can edit that name in the table, to ‘fonts/myFont.ttf’. When you later create an ouptut, this file will be copied to the output folder, in a subfolder called ‘fonts’.


Tab Index

To make skin elements controllable via keyboard, they have to be added to the tab order of the web page. A tab index of -1 (the default) excludes the element from the tab order. A tab index of 0 includes the element in the tab order. Browsers will highlight the active element by putting a rectangle around them. Once a skin element is the active element, indicated by the highlight, hit the Enter/Return key to trigger its click action.

ARIA Label, Description, Details

These are attributes or propterties that are used to define the element and support the Role.

Label – Defines or names the element. Description – Provide a brief description of the element. Details – Provide an extended, detailed description of the element.

ARIA Roles

ARIA Roles are used to define UI elements (button, loading bar, etc.). Choose from the list which best defines the element.


Select to hide all ARIA attributes.



Set the CSS z-index property. Use numbers to set the stacking order or leave the setting at Default. Default will use the stacking order set in the Tree.

This is used to ensure that hotspot images and their text fields or pop-up images are displayed in the correct stacking order especially when close or overlapping.


Select to make sure the element does not accept mouse clicks. This is useful for when you want to include an element in the skin but don’t want it to hinder the ability to interact with the panorama. For example, you could add a vignette or logo or border that when clicked on, will allow interaction with the panoramas.

Hotspot Proxy ID

Enter the corresponding Skin ID. The ID should come from the hotspot’s Skin-ID field in the hotspot properties. Hotspot proxies give you the ability to link skin elements to specific hotspots. This means that the element will receive the same mouse and touch events as the hotspot. You can also add {} to use node ID as hotspot proxies.

CSS Classes

Enter the CSS class names for the selected element. You can enter more than one class separated by spaces. If you need more space, click the Edit button to the right of the field for a larger text field. No dot . needed.

CSS Styles

Enter the CSS style attributes for the selected element. You can enter more than one style separated by semi-colons. If you need more space, click the Edit button to the right of the field for a larger text field.

Keyboard Shortcut

Enter the preferred key to control the action defined to the element. For example, select the text field, hit the up key on the keyboard. Then add a Mouse Click action. The element, when clicked or when the up key is pressed, will perform the assigned action.

Exclude from Translation

Select this option to exclude this element from the translation files.


Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Double-click in the Actions area or click the plus sign to the right to open the Action Settings.

See Skin Actions, for details on all actions.


Adding modifiers allows you to make elements move, scale or rotate when the panorama is being panned, tilted, zoomed or loaded. A good example of a use of a modifier is for a loading bar that scales in relation to how much of the panorama has been loaded. You can see how this is done by opening one of our default skins.

Double-click in the Modifiers area or hit the plus sign to the right to open the Modifier Settings.

See Skin Modifiers, for more details on all modifiers.


Use this section to add information about the element. This is especially useful if you have a component and want to explain the elements inside that component.

Notes will show up as tooltips in the Tree.

See also…

Last modified: Mar 2, 2022