Marquee View

Primary aim#

With this page, you will know what is a Marquee and how to use it.

Introduction#

Historically a marquee was an old HTML component used to scroll an image or a text horizontally or vertically. This marquee tag was first introduced in early versions of Microsoft’s Internet Explorer®.

Nowadays, it is still used in some UI like on ROKU™ devices with the ScrollingLabel widget used underneath their UI rails to make long titles scrollable.

Globally a marquee’s element contains several attributes (known as Property fields in Dana) that are used to control and adjust the appearance of the marquee.

MarqueeView widget#

Under Dana, a MarqueeView is a scrollable MarqueBlock item displayed and animated either horizontally or vertically across a Marquee’s view known as a parent’s container. You can define your marqueeBlock to display a text or anything else (i.e. a primitive)

For more information on how to define your own MarqueeView, see the code example below.

There are four phases in this marquee’s animation:

• 1st phase: the marqueeBlock moves from x=0 to the left side. This left position is computed at each animation’s step and is depending on how much empty space we want to see at the end of this phase. The property endRightPadding is the percentage of the marquee’s available width that we want to empty before going into phase 2.

• 2nd phase: the marqueeBlock stops moving which is allowing the user to see the end of this block for a certain amount of time, by filling the property fixedAtEndOfAnimationDelay with a given value. Before the end of phase 2, we start hiding the block and then doing an animation of the opacity for the given duration inside fadeOutDuration property.

• 3rd phase: the marqueeBlock can be further animated by being moved back to a certain position (at the right of x=0). The given restartLeftPadding property is the percentage of the marquee’s available width that we want to be left empty on the left side of the marqueeBlock. Then this widget will be animated from such computed position back to its position x=0. At the start of phase 3, it will also have an animation of the opacity from 0 to 1 for the duration of the property defined by fadeInDuration.

• 4th phase: Finally, the displayed block stays fixed for a certain amount of time (see property: restartDelay) before the whole animation is starting again.

An initial delay firstInitialDelay can be applied only once and before the very first animation. The whole animation moves at the same speed which is defined by the property speed.

MarqueeView example#

Here is a typical MarqueeView implementation code:

import $AbstractMarqueeView from "@AbstractMarqueeView";
import $TextPrimitive from "@TextPrimitive";

/**
 * My own marquee view.
 * @name MyMarqueeView
 * @class
 * @extends AbstractMarqueeView
 * @implementation
 *
 * @property {String} data Various data for this marquee
 * @property {string} text Text of marquee's label
 */
export default $AbstractMarqueeView.declare("MyMarqueeView", {
    properties: {
        data: ({text}) => text && text.length > 0 ? text : "",
        text: ""
    },

    children: /** @lends MyMarqueeView.prototype */ {
        marqueeBlock: {
            class: $TextPrimitive,
            text: ({parent}) => parent.data
        }
    },

    style: {
        height: () => 50,
        marqueeBlock: {
            isAuto_width: true, // eslint-disable-line @dana/no-use-width-height-auto
            color: "#00ff00",
            size: 24
        }
    }
});

API Reference#

This UI component is part of Dana’s vendor named wtv-vendor-components which includes a JSdoc description.

See the component AbstractMarqueeView under views category of this components API.