CSS FOR MARQUEE TEXT

[svisveswaraiya]

Hi,

I wanted to make a label inside a panel to be marquee and moving to left. I wrote a simple css using keyframe rule but it doesn't work.

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

.testLabel .widget-Label {
animation: marquee 5s linear infinite;
}

testLabel is my Label name.

How can I proceed? 

Thanks,

Shalini V.

[mneumann]

You were definitely on the right track here! ;)

Hmmm... I've played around quite a while to get something going.

Maybe it's too complicated already :)

I created a new Thing with a property with HTML Base Type.

The Marquee tag is not working there, but bold and italic etc. works nice.

This is probably forbidden due to XSS security reasons - good for the website, but makes it more complex for the designer.

In a Mashup I added a ValueDisplay Widget and bound the HTML property to it.

Then set the Renderer & State to "HTML" - "With Formatting"

Your .css is working - BUT it's not applied as the Value Display will have several inner containers and divs, so the custom css class will probably not affect anything.

In the F12 Tools, I've found I can use the css class from the Value Display.

Set the "Custom Class" to empty (reset if needed) and use the following Custom CSS for your keyframe animation:

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

.valuedisplay-container {
    animation: marquee 5s linear infinite;
    background-color: #eee;
    color: red;
}

Sorry for the weird colors, but that was for testing - nice to see this scrolls as well.

I hope this helps...

Cheers,

Michael

[mneumann]

Downside of this: it will affect all the ValueDisplays - so probably it should be used in Contained Mashup where the Custom CSS is not affecting outside containers.

[svisveswaraiya]

Hi  mneumann,

I followed your steps. I created a thing with property html and kept its default value as html script as u mentioned.

I had bound the getpropertyvalues service to the value display but it doesnt work in runtime.

Please tell me where I have missed.

DesignPropertyRuntime

[mneumann]

The value of the property should not include any css.

At the moment you will just see the property value which is your CSS definition.

The CSS needs to be defined in the "Custom CSS" section of the Mashup and the Property only holds the value to be displayed.

• The Thing's Property (myHTML)
  • Property value = "afsdsadfsd asdfsdf"
  • or if you switch to HTML notation = "<p><strong>afsdsadfsd&nbsp;</strong><em>asdfsdf</em></p>"
• In the Mashup
  • ValueDisplay with the myHTML Property mapped
    • "Render and State"
      • Renderer = HTML
      • Format = With Formatting
  • Custom CSS

@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

.valuedisplay-container {
	animation: marquee 5s linear infinite;
    background-color: #eee;
    color: red;
}

[svisveswaraiya]

Hi,

I followed your steps exactly. But the runtime text does not move. Is it because of  version compatibility? I am trying this on 8.0

[mneumann]

In the screenshot the CSS is in the "Custom Class"

It must be in the "Custom CSS" fields - for this you need the New Composer.

It's not accessible in the legacy Composer.

[svisveswaraiya]

I followed these steps. The background color and text color is applied but the text doesnt move. The custom class of mashup is also empty. But it doesnt work. 

Please help me on how to proceed.

[mneumann · Accepted solution]

Hmm...

I just tested this with ThingWorx 8.2 and 8.3 and it's indeed not working.

I was testing my initial solution on ThingWorx 8.4 which will be released ~end of January 2019 - it was working fine there, including the keyframe animations.

In ThingWorx 8.4 it's also working e.g. with a Label

The css would be in addition to the keyframes:

#root_ptcslabel-13 {
    animation: marquee 5s linear infinite;
    background-color: #eee;
    color: red;
}

Here I'm using the format "#root_<Id>" to apply it to the ID Property of the Widget

But it seems like you'd have to wait for the ThingWorx 8.4 release for using this functionality.

~1.5 months to go

Cheers,

Michael

[svisveswaraiya]

Thanks a lot mneumann.

Regards,

Shalini V.