marquee example usage missing in docs

[nsmet93]

Hi guys,

I've been searching the docs and the channels but I can't seem to find an example of the marquee component. 

Could someone share how they've been using it? 

[SunsetRunner · Accepted solution]

We are working on updating the documentation and the UI Component marquee is part of it.

In the meantime, this is how you can use it. First add the import statement in your widgets.gui file

<link rel="import" href="/mnt/sysassets/widgets/marquee_text_widget.gui" />

And in the gui file you want to display the marquee, you can use it like this

<svg>
  <use href='#marquee-text' font-size='32' width='100%' height='100%' fill='white'>
    <set href='group/text' attributeName='text-buffer' to='Bacon ipsum dolor amet sausage prosciutto tongue turducken tail.' />
    </use>
  </use>
</svg>

[nsmet93]

Sure no problem, writing docs is always a pain in the #ss .

hanks!!!

[nsmet93]

is there maybe an option to control the speed? It is moving kinda fast by default, not sure it would fit my style

[JonFitbit]

Try adding the `value` attribute to the `<use>`.

<use value="500" ....

[nsmet93]

ok, that's much better. Thanks!!

[Cmspooner]

How do you change the text inside the Marquee programmatically? Where does the 'id' go and what attribute do you change in the javascript?

[nsmet93]

 <use href='#marquee-text' id="address_address" class="h1 address_address" font-size="70" x="0" fill="mediumpurple" value="40">
 ....
 </use>
 title.text = 'someText';

If you just select the marquee like any other element by id you can set the text val

[Cmspooner]

Wow... was overthinking it! Also I put the id in the wrong spot.

[Cmspooner]

Is there any way to make it pause the marquee after it finishes a scroll for a few seconds? I tried disabling; but that leaves it where ever it stops, and then resets it on enable.

[nsmet93]

Not really sure but maybe you can set the value to 0 ? 

[Cmspooner]

It looks like it would be a pain. Clearing and resetting the text puts it back at the beginning; but there doesn't seem be a way to see where along the scroll it is; su you have to time it and then on an interval disable and re-set the text and then re-enable it.

[RisoSystems]

Setting the speed in the SVG is fine, it can also be done in a linked stylesheet. But what I can't seem to do is change the speed programmatically. I've tried element.style.value="120", element.value="120", element.setAttribute("value","120") -- and tried both numbers and strings. element.value generates an error if I don't provide a number - but it doesn't seem to take effect.

[SunsetRunner]

It is very well possible, that this value is hardcoded in the underlying symbol, so every change you make would be overwritten by that one. Just a guess. (To be sure you could check the symbol in the simulator-files.)

[Gondwana]

I suspect that .value isn't implemented in the JS bindings.

As a kludge, you can change .class at runtime. You'll need a separate CSS rule for each .class, and just put the value in each one.

I don't know how 'dynamic' this will be; eg, if you change the class, the new value may not take effect without some messing around (or ever). I know it works at least the first time!

Obviously this will be a bit limiting if you want heaps of different values.

[RisoSystems]

Peter,

Thanks. But I'm curious about your statement that "...it works at least the first time" - I've been unable to make it change at all. 

I've attempted to change the class using e.className = "newClass", e.className.basVal = "newClass", and e.setAttributes("class","newClass"). None of these work at all. What method did you use?

Joey

[SunsetRunner]

If value isn't exposed  and class doesn't work for switching, you could perhaps try a workaround by grouping the marquee and animate additionally or alternatively.

[RisoSystems]

Barbara,

I tried those approaches, but none worked dynamically. The only solution I found (and chose not to implement) was to have 3 or 4 speeds defines on duplicate marquees which were selectively hidden. Not so much fun, that. For the time being I'm just going to pick a good rate and hard-code it.

J.

[SunsetRunner]

Hmm... normally all props of the animation should be available to change
dynamically. But I agree, that it would be semi-fun to fiddle out all
necessary settings.
Last - but very ugly - idea:
Having multiple copies of the use with differnt speed and then switch
display inline/none

[SunsetRunner]

Although... then it might be eaier to write your own marquee from scratch 😅