Skip to main content

Logic Blocks

When building a skin, sometimes you need a little more control over how elements react to user input or other events.

Logic Blocks will, for example, allow you to target a specific element to scale to a specific size depending on the player’s width, creating a responsive skin.

Logic Block

What is a Logic Block

Logic blocks are a way of automatically altering values of skin elements, making it possible to react to certain circumstances – using logic. These value changes can be activated by a wide range of triggers, from window size to user interactions, events from the panorama player, and much more.

Logic blocks can be applied to any skin element. Element properties that can have logic blocks will have an arrow button next to their name in the properties panel. If the element has a logic block applied the arrow will be orange, otherwise it is gray. To add a logic block, just click the gray arrow.

Orange arrows of logic blocks

A logic block consists of expressions. Each expression consists of conditions. You can have multiple expressions in a logic block and you can have multiple conditions in an expression.

Logic Block with a single expression containing a single condition

The Default Value is whatever was set in the properties pane of that property. In the above image, the logic block was applied to the Visible property and Visible was set to false. So, that element is initially not visible. It will only become visible when the panorama is loading.

The lower section is for Transitions and is made available for expressions that will change their size, appearance, location, etc. Just select Enabled to enable a smooth change and set the amount of time it should take to make that change.

Use the Delete button to remove the logic block.

Click Cancel to close the logic block without saving changes.

Click OK to save and apply the logic block.

To add a new expression, click the Add Expression button in the upper right corner. To delete an expression, click the red “x”.

Hide elements when player is active

A simple example of using a logic block is to hide elements when the player is active (when interacting with the panorama or skin). You use a timer that has a logic block by default.

  1. Open the Skin Editor.

  2. Add an element. A Text Box, for example.

  3. Select the Timer element in the Toolbar.

  4. In the Canvas, drag around the Text Box. The Text Box will become a child of the Timer.

    Text as a child of a Timer

  5. In the Timer properties, open the Timer panel and select Player inactive for Type.

  6. In the Appearance panel, notice that the arrows next to Visible are orange. This means there is already a Logic Block applied. Click on the orange arrows.

    The Logic Block Settings opens and describes that if the player is not (Value is false) active (Trigger is Active), the element (child element of Timer) then timer will won’t start. This is an expression with one condition.

    We just need to make one adjustment to the expression. Change the value from false to True. Now it expresses, if the player is active, the timer will not start.

    Timer hides elements

    Click OK to close the settings.

  7. Use Live View to see it in action. When you spin or interact within the player, the text box should hide and when you stop interacting, the text box will appear again.

  8. Save the skin.

Scale an element based on player width

You can use logic blocks to create a responsive skin (where the skin elements scale to the player’s width). This will require a logic block with multiple expressions.

Let’s scale a text box to twice its size when the player is wider than 1000 pixels and to 1.5 times its size when the player is wider than 600 pixels.

  1. Open the Skin Editor.

  2. Add a Text Box.

  3. Go to the Appearance panel for the Text Box.

  4. Click on the arrows next to Scaling. This will open the Logic Block Settings dialog.

  5. Double-click in the table to add the first condition to the first expression (for when the player width is greater than 1000 pixels). The default Trigger will show up, which is exactly what we need, Player Width.

    Set the Comparison to Greater Than (>). And set the Value to 1000.

    Set the target value to 2 for X and Y.

    Condition one added

    So far, this explains if the player width is wider than 1000 pixels, then scale up the text box twice its size.

  6. Add a second expression (for when the player width is greater than 600 pixels).

    Click the green plus sign to add another table (expression). Add Player Width for the Target and set the Comparison to Greater Than (>). The value is 600.

    Set the target value to 1.5 for X and Y.

    Condition two added

    This expression explains that if the width is greater than 600 pixels, then the text should be scaled up 1.5 times its size.

  7. Select Enabled under Transition so it’s a smooth scale.

  8. Save the skin.

✭ Note: The expressions are read top down. This means that once the first expression found true will be used. In this example, if the screen width is greater than 1000 pixels, then the first expression will be used and the rest below will be ignored.

Create a Multi-lingual Skin

Logic blocks can react to changes in skin variables. Here’s an example of how you would use variables with logic blocks.

  1. Click in the Canvas to open the Skin Properties.

  2. Double-click in the Variables table.

  3. Add a variable:
    Give the variable a Name. We used, language.
    Select text for Type and give it an Init Value of English. This will be the default language.

  4. Draw a text box and add some text to it in the default language (our example uses English). In our example, this is the only element that will change languages.

  5. Create some buttons to toggle different languages. For example, one for English, one for German and another for Spanish.

  6. Give each button an action to change the value of the skin variable (change the language) when they are clicked:
    Button Actions
    This is the button to change the language to German. Add the same actions for each button, but change Value to the corresponding language.

  7. Select the text box that was created earlier. Go to the Text pane. Add a logic block to the Text property by clicking the gray arrows.

  8. Add the following expressions:
    Multi-lang Logic Block
    This will set the correct text when the corresponding button is clicked. In has two expressions, each with one condition. The first expression says, if the variable, language, is used and the value is German, then use the text provided here in this text box.

  9. Open the Live View and test your skin!


See also:

2017-01-16 14:32:01