JSignage:RSSTutorial3

Description

Custom news bar with vignette

• It is possible to build advanced custom news bar with the slideshow layer type.
• A slideshow is just a playlist where we provide a jSignage object for each slide instead of a media URI.
• In this example, each slide is a group layer with an image and a scrolling text area for the headline.

Source code

var uri = 'media/science.rss';

$.get( uri, function( rssFeed ) {
   var rss = $.parseRSS( rssFeed );
   $.slideshow({
       top: '80%',
       height: '15%',
       frame: { backColor: 'white' },
       data: rss,
       defaultTransition: $.push({ direction: 'bottomToTop' }),
       renderToSVG: function() {
            var image = $.image({ top: 10, left: 10, bottom: 10, width: 150, href: this.enclosure });
            var textArea = $.scrollingTextArea({ left: 170, lines: 2, fill: '#606060', fontWeight: 'bold', textAlign: 'start' });
            textArea.setFillFreeze();       // Make sure the textArea stays visible during the transition
            textArea.text( this.title );
            return $.g().add([ image, textArea ]).endsWith( textArea ); // Set the group to finish when the scrolling text ends.
       },
       repeatCount: 'indefinite'
   }).addTo('svg');
}, 'text' );