Configure an animation using a State Table

Configure an animation to change the properties of a graphic element, Add-On Graphic, or screen based on the value of an associated tag or expression.
IMPORTANT:
    • Do not use a
      State Table
       or
      Color Table
       to modify a property that is already bound to a tag or expression. This can cause undesired results. Property values change based on which input modifies the property first. There is no way to determine the order of inputs.
    • Modifying a property across multiple
      State Tables
       or
      Color Tables
      can cause undesired results. Property values change based on which input modifies the property first. There is no way to determine the order of inputs.
    Do not use any of the following words as a state name:
    • state
    • states
    • properties
    • readonly
    • parent
    • type
    • name
    • id
    • persisted
    • objectname
When renaming a graphic element that is referenced by a
State Table
 or a
Color Table
, change the reference to reflect the new graphic element name.
View Designer
 does not automatically update the references with the new name.
  • Do not configure a
    State Table
     that causes its states to act on each other in an infinite loop. Doing so may cause slow performance.
  • Continual tag writes using State Enter or State Exit events may cause slow performance. It is recommended to not continually write more than 10 tags per second.
To configure an animation using a State Table
  1. Select the graphic element, Add-On Graphic, or screen to animate.
    1. On the
      Properties
      window, click the
      Animations
      tab.
    2. Click
      Add Animation > State Table.
    3. In the
      Name
      box of the
      State Table Definition
       dialog box, enter a name for the
      State Table
      .
    In the Number of states field, enter or select the desired number of states. For example, to animate three states (such as idle, running, and stopped) type or select the number 3.
    TIP:
    The maximum number of states for one element on a screen is 2500.
    If any screen in the project exceeds 42000 states across all its elements, it is not possible to later convert the project to a newer version.
  3. Select the properties to affect and select
    OK
    . The
    State Table
     card appears in the
    Animations
    tab of the
    Properties
    window.
    1. In the
      Expression
      box on the card, select
      Select tag
       ST5K_Project_Properties_Browse_button.jpg
      to select a tag, or type a tag name, to base an expression on.
  5. Edit the expression, if necessary, to define the condition to drive the animation. On the HMI device, the result of this expression is compared to the values of the expression and changes the properties.
  6. For each state, complete the following:
    • Expression Value
      . Type the value, range of values, or string value (in surrounding quotation marks) to trigger the property changes for the state.
      TIP:
      Tips:
      • An Expression Value can be:
        • An integer number.
          Any positive or negative number up to 15 digits.
        • A floating point number.
           Any positive or negative number up to 15 significant digits in the range of ±1.7 x 10
          ±308
          .
        • A string.
           Any sequence of alpha-numeric characters enclosed in quotation marks.
      • Expressions can contain Unicode characters.
        View Designer
         supports Unicode characters that appear in the Arial Unicode MS font.
      • When inserting text that contains Unicode characters in a graphic element, select
        Arial Unicode MS
        in the
        FontName
        property of the graphic element. Supported Unicode characters appear on the HMI device.
        • State Name.
           Enter the name of the state (for example, Idle, Running, Stopped).
        • Property values.
          For color-related properties, type the Hex value in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow. Alternatively, select the down arrow or color swatch to open the
          Color Picker
          , and select or create a color.
          TIP:
          Tips:
          • Property values do not support bindings or expressions.
          • To display and edit the entire
            State Table
            , select
            Open table editor
            Icon: View Designer Open Editor Icon.
          • Changes are saved automatically.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal