Go to Index
Pano2VR 7.1 Docs / Using Action Filters

Using Action Filters

Action filters let you define conditions for the execution of actions assigned to an element.

In this tutorial, Hopki shows us a few examples on how to action filters.

https://www.youtube.com/watch?v=D_2_u7WaVSY

Hide a Menu in a Specific Browser


  1. In the Skin Editor, add a menu from the
    Components Toolbox
    or create your own.

  2. Select the menu’s
    container.

  3. Add a hide-on-start action.

    • Source = Start
    • Action = Visibility
    • Type = Hide Element
    • Target = $self

  4. Open the Action Filter.

  5. Add the following filter:

    • Trigger = Browser (Advanced > Browser)
    • Comparison = =
    • Value = browser of choice (Chrome, Firefox, Safari, Edge, Internet
      Explorer, Unknown)

This will hide the menu in the chosen browser.

Using Variables to Trigger Filtered Actions


In this example, 2 buttons will change a variable’s value. Then, based on the
variable’s current value, a third button will open the selected panorama. In
Hopki’s example above, he is using a TV channel changer to change nodes. There
are buttons for tuning up and down and a button to change to selected node.

Here’s the basic workflow:

  1. Add a
    number variable
    to the skin.

  2. Add three text boxes (or rectangles) to represent buttons. One will move up
    the channel numbers (1, 2, 3) and a second button will move the channels
    down (3, 2, 1). These two buttons will flip through a gallery of thumbnail
    images. The third button will open the selected panorama.

  3. Add an action to the buttons that will change the variable’s value. In
    Hopki’s example, these are the channel up and down buttons.

    • Source = Mouse Click
    • Action = Set Variable Value
    • Variable Name = var1 (or whatever you named your variable)
    • Operation = Add(+)
    • Value = 1 (for the up)
    • Value = 2 (for the down)

  4. Add a second action to the buttons to keep the variable moving in a loop. So
    that the up button counts, 0, 1, 2, 0, 1, 2, etc. and the down button counts
    2, 1, 0, 2, 1, 0, etc.

    • Source = Mouse Click
    • Action = Set Variable Value
    • Variable Name = var1
    • Operation = Mod(%)
    • Value = 3 (for both up and down)

  5. Add actions to the third textbox (button) that will select the node. Add an
    action for each node in the tour.

    • Mouse Click > Open Next Panorama > node01
    • Mouse Click > Open Next Panorama > node02
    • Mouse Click > Open Next Panorama > node03

  6. For each action, add a filter so that the action is only executed when the
    variable’s value is changed to a specified value. For example, the first
    action’s filter would be:

    • Trigger = var1; Comparison = =; Value = 0 This means that node 1
      would only be opened if the variable’s value is 0. Add filters to the other
      actions, but change the variable value.

  7. To change the text in the third textbox, to show which node is selected,
    expand the Text pane.

  8. Add a
    logic block
    with the following expressions:

    Logic Block to change text.
    Logic Block to change text.

  9. Add an
    External Image
    to the skin. This will hold the thumbnail image gallery.

  10. Open the External Image pane and add a logic block. This will change the
    image in depending on the variable’s value.

    Logic Block to change the external image.
    Logic Block to change the external image.

    ✭ You can
    use the
    Assets feature in
    the web output to have Pano2VR consolidate the images in to the output
    folder. Your file path in the conditions would be assets/img.jpg or
    assets/myfolder/img.jpg, depdending on if you add a folder or a file to
    the assets.

  11. Check your positioning and anchoring of the elements with the help of Live
    Preview.

  12. Save the skin.

  13. If you haven’t already done so, add a web output.

  14. Add the skin you’ve just built.

  15. Save and output the project.

See also…


Last modified: May 25, 2021