Ignition Perspective Style Classes not working

General Discussion
1

Hello there!
I am new to Ignition and struggling to get Style Classes to work.
Followed Animated Style Classes videos on Inductive University: Perspective Components And Bindings Animated Style Classes

StyleClassesAnim
StyleClassesAnim3419×1379 408 KB

but still cant get it to work.
Maybe someone could assist me or point in the right direction?

2

The way the class name is written in italic means that it wasn't saved. Try saving your work and see if it does anything.

Also, did you configure a style for 100% in the style class ? You're only showing the style for 0%. It needs at least 2 states.

1 Like
3

Your configuration worked for me in Designer. (I defined a background color for both 0% and 100%.) I didn't have to save the project first.

4

Project saved and both 0% and 100% background colors set. I even added extra stops just to test but it won`t work!

5

Maybe post the JSON (formatted with the </> button) for

  • the label
  • the Blink style definition
  • your Ignition version

and we can try to replicate.

6

Not sure how to even do it.

7
  • Right-click on label. Copy.
  • Paste into your reply. Select the code you've just pasted and click the </> button.
  • Right-click on the Blink style definition. Copy.
  • Paste into your reply. Select the code you've just pasted and click the </> button.

See Wiki - how to post code on this forum.

2 Likes
8

Try setting transform Output Type as Style Class.

9

Oooh! Cool. I hadn't replicated the Map Transform so wouldn't have picked up on it. I've never noticed it before.

@TheM, do it here:

Map transform style class

As a matter of interest, can anyone explain why a string value wouldn't work here?

10

Style:

@keyframes psc-Blink-anim {
  0% {
    background-color: #FF0000;
  }
  100% {
    background-color: #FFFF47;
  }
}
.psc-Blink {
  animation-name: psc-Blink-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Label:

[
  {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "text": "Label",
      "style": {}
    },
    "meta": {
      "name": "Label"
    },
    "position": {
      "x": 265,
      "y": 311,
      "width": 422,
      "height": 230
    },
    "custom": {},
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "tag",
          "config": {
            "fallbackDelay": 2.5,
            "mode": "direct",
            "tagPath": "[default]Test_Bit"
          },
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": false,
                  "output": ""
                },
                {
                  "input": true,
                  "output": "Blink"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ]
        }
      }
    }
  }
]

Ignition 8.1.39

11

Tried to change Output class to Style Class but same result. No animation.

12

I've tried and It is working as a value I was just throwing blind guesses....

1 Like
13

You get a :heart: for honesty.

1 Like
14

Can it be that your fancy ultrawide monitor can't handle a style class? :sweat_smile:
Also, is it working in the session?

1 Like
15

:rofl:

16

No! I doesn't work in session ether.

17

I'm not able to reproduce the problem. It just works for me - even with a map transform set to value.

18

Will it work if you disable animation and it's just colour change?

19

Looks like my Style Classes not working at all. Tried with background color change only without animation or just changing text size it won`t work :roll_eyes:

20

Create a new view, new label and new style. There's something goofed up somewhere. You're into "Did you try switching it off and on again?" territory.