JSignage:RSSTutorial3

From SpinetiX Support Wiki

Jump to: navigation, search

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' );

Preview

This page was last modified on 9 August 2017, at 16:21.