JSignage:RSSTutorial4

Description

Fullscreen news slideshow

• Finally we can build a full screen slideshow for both the headline and the content.
• We'll make use of the scrollingTextArea for the title just in case it is too large to fit on two lines, while
• we use the fitTextArea for the content so that it is visible all at once.

Source code

var uri = 'media/science.rss';

$.get( uri, function( rssFeed ) {
   var rss = $.parseRSS( rssFeed );

   $.slideshow({
       data: rss,
       defaultSlideDur: 10,
       defaultTransition: $.wipe({ type: 'iris' }),
       renderToSVG: function() {
            return $.g({ frame: { backColor: 'white', padding: 20 } }).add([
              $.image({
                top: 0,
                left: 0,
                width: 200,
                height: 150,
                layerFit: 'horizontal',
                mediaFit: 'slice',
                href: this.enclosure
              }),
              $.scrollingTextArea({
                left: 220,
                top: 0,
                height: 130,
                lines: 2,
                fill: 'black',
                fontWeight: 'bold',
                textAlign: 'start'
              }).setFillFreeze().text( this.title ),
              $.fitTextArea({
                left:0,
                top: 170,
                fill: '#606060',
                fontSize:48,
                textAlign: 'start',
                displayAlign: 'before',
                fontFamily: 'Georgia',
                lineIncrement: 60
           }).text( this.description )
         ]);
       },
       repeatCount: 'indefinite'
   }).addTo('svg');
}, 'text' );