Skip to main content

Using Node Markers

Node markers are found in the skin editor and are used to do a number of useful things. In Pano2VR pro, you can change a node marker to a marker template for easy node placement on a map image and in both Pano2VR versions, you can use the node marker in conjunction with tags to activate or deactivate actions and media.

Download project files.

Adding Node Markers

Follow these steps to use node markers to show a panorama’s location on a map image. This is helpful when the map is a floor plan or any other type of map that is not a street map. If you just want to use a map for showing image locations, simply add a map with the map button.

  1. Create a tour.

  2. Open the Skin Editor.

  3. Add a markertemplate with custom images. The easiest way to do this is to open the simplex skin and find the hide_template container. Select it, right click on it and save it as a component.

    ✭ If you have already added the simplex skin (or any other skin that already includes a marker template) you can skip this step.

  4. Add an image map to the skin. This is where the node markers will be placed.

  5. Drag nodes from the Tour Browser to their location on the map in the skin editor. A node marker will be added. (The marker image and text comes from the markertemplate.)

  6. Save the skin.

  7. Output the project.

Have multiple locations and maps? Move on to, Using multiple node images.

Universally change all marker images

The template’s images can be changed at anytime. If the node markers from the marker template have already been added, this will universally change all marker images.

  1. In the Skin Editor, select either one of the template marker images (marker_active or marker_normal).

  2. Expand the SVG Image panel and select Change next to the image, and navigate to the new image file. Choose, Open.

Now, all the node marker images will have changed.

Using multiple node images

It is sometimes necessary to use different marker images for a different set of panoramas. For this example, we will use different images for different locations/maps.

These steps are a continuation of Adding Node Markers.

  1. Add a another map/image to the skin.

  2. Drag the images that will be used for the marker on to the canvas; one for the active state and one for the normal state.

  3. Give the images meaningful IDs in the Position panel.

  4. Make the images children of the container called, hide_template, by dragging them onto the container.

  5. Expand the Node Marker panel for the marker_template and select the new images for the following:

    • Clone as Normal

    • Close as Active

  6. Now drag in the new panoramas/nodes for which these image will be used.

The new panoramas should now be using the new marker images.

Activating elements

The node markers can be used to activate elements within the skin based on triggers. This example will illustrate how to show and hide buttons based on tags. This way, you can use the power of node markers for non-pro projects, too.

  1. For each panorama that will trigger a change, add a tag in the user data pane. Our example adds the tag, sound to every panorama that has sound added to it.

  2. In the Skin Editor, add an element that will be triggered by the tags added in the previous step. We added play and pause buttons to our controller.

  3. In the element’s Appearance panel, deselect Visible, to keep it hidden until it is triggered. (Otherwise, it will show on start up.)

  4. Add a new node marker.

  5. Expand the Node Marker panel, and in the Tour Node/Tag section, add the tag (type in or drag tag from User Data pane) that was added to the panorama. In our example, we added our sound tag.

    Node Marker Tags

  6. In the Actions/Modifiers tab, add the following actions:

    • Source: Activate; Action: appropriate action; Target: the element that was added.

    • Source: Deactivate; Action: appropriate action; Target: the element that was added.

    Node Marker Actions

  7. Save the skin and output the project.

See also…

2017-01-16 14:32:01