03-20-2018 08:19
03-20-2018 08:19
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?
Answered! Go to the Best Answer.
03-21-2018 11:45
03-21-2018 11:45
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>
03-21-2018 11:45
03-21-2018 11:45
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>
03-22-2018 05:31
03-22-2018 05:31
Sure no problem, writing docs is always a pain in the #ss .
hanks!!!
03-23-2018 07:11
03-23-2018 07:11
is there maybe an option to control the speed? It is moving kinda fast by default, not sure it would fit my style
03-27-2018 17:06
03-27-2018 17:06
Try adding the `value` attribute to the `<use>`.
<use value="500" ....
03-28-2018 06:19
03-28-2018 06:19
ok, that's much better. Thanks!!
05-10-2018 03:31
05-10-2018 03:31
How do you change the text inside the Marquee programmatically? Where does the 'id' go and what attribute do you change in the javascript?
05-10-2018 04:50
05-10-2018 04:50
<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
05-10-2018 05:02
05-10-2018 05:02
Wow... was overthinking it! Also I put the id in the wrong spot.
05-10-2018 05:19
05-10-2018 05:19
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.
05-10-2018 05:30
05-10-2018 05:30
Not really sure but maybe you can set the value to 0 ?
05-11-2018 05:11
05-11-2018 05:11
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.
09-15-2022 21:52
09-15-2022 21:52
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.
09-15-2022 22:37
09-15-2022 22:37
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.)
09-15-2022 23:28
09-15-2022 23:28
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.
09-16-2022 05:11
09-16-2022 05:11
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
09-16-2022 09:45 - edited 09-16-2022 09:46
09-16-2022 09:45 - edited 09-16-2022 09:46
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.
09-16-2022 10:47
09-16-2022 10:47
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.
09-16-2022 10:58
09-16-2022 10:58
09-16-2022 11:01
09-16-2022 11:01
Although... then it might be eaier to write your own marquee from scratch 😅