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? 

[Gondwana]

index.view:

<svg>
  <use id="marquee" href="#marquee-text" font-size="32" y="50%-40" width="100%"
    height="80" fill="white" mode="1" class='value50'>
    <rect width="100%" height="100%" fill="black" opacity="0.2" />
    <set href="group/text" attributeName="text-buffer"
         to="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
    <set href="group/separator" attributeName="width" to="150" />
  </use>
</svg>

styles.css:

.value50 {
  value: 50;
}

.value250 {
  value: 250;
}

index.js:

import document from 'document'

const marqueeEl = document.getElementById('marquee')
marqueeEl.class = 'value250'

setTimeout(() => {
  marqueeEl.state = "enabled";
}, 2000);

[RisoSystems]

Thanks, Peter - thought I'd tried that, must have had a typo in the code somewhere.

J.

[Gondwana]

.class vs. .className? It's a bit... non-standard.

[Gondwana]

As an aside, I thought this was interesting:

<symbol id="marquee-text" class="marquee-text" type="marquee-text-widget"
        overflow='hidden' focusable='false' pointer-events='none'
        system-events='all' data-size='16'>

 <g transform='scale(0.1)'>
    <g id="group" transform='translate(0) scale(10)'>
      <text id="text" height='100%' fill='inherit' fill-opacity='inherit'
            font-size='inherit' font-weight='inherit' text-decoration='inherit'
            text-length='64'/>

      <rect id="separator" x='$' width='87' height='0' fill='none'/>

      <text id="copy" x='$' height='100%' fill='inherit' fill-opacity='inherit'
            font-size='inherit' font-weight='inherit' text-decoration='inherit'
            text-length='64'/>
    </g>
  </g>
</symbol>

Source: C:\Users\Peter\AppData\Local\Programs\@fitbitsimulator\resources\static\devicesim\win\atlas\Resources\widgets\marquee_text_widget.gui

I would have expected an <animateTransform> in there. I wonder if the movement is being done step-by-step in JS.

The scale() shenanigans are also interesting. Perhaps they allow smoother (less discrete) movement.

[RisoSystems]

Peter,

The same things puzzle me. I also wonder if any events are emitted. I notice the system-events="all" on the symbol element. I was hoping the marquee would emit something each time the buffer repeated. It would be nice to show n runs of the text then stop it programmatically.

Thanks very much for your help on this.

J.

[Gondwana]

I suspect the system-events thing is to allow the marquee to start when touched, if configured to do so.

For extra capabilities, I think Barb's suggestion (recreating the component as a widget) would be the way to go. It's tempting...

[SunsetRunner]

If anybody is ever going to write a marquee-widget, please add an unrotated text to being able to rotate  (getBBox()) 😉

[Gondwana]

@RisoSystems: here's a crude and negligibly-tested alternative to marquee-test. Relevant features:

• speed can be changed in JS
• animation events can be obtained
• repeatCount can be set
• (various other bloatware)

Sorry BarbWire, it isn't <g>-proof.

[SunsetRunner]

@Gondwana  "..it isn't <g>-proof."

What a shame 😉

Nice! 👏