JSignage:MediaCrawler

Description

The media crawler is a specializer crawler which displays media layers.

If a renderToURI callback is provided, it must return a string which is used for the URI to each media. If no callback is provided it expects data to be an array of URI strings.

A new media crawler is constructed with $.mediaCrawler( { ... } ).

The media crawler is part of the advanced layer type.

Specific attributes

All layers share a common set of attributes to define their screen layout and active time interval. Frame decoration may be used to add background to this layer.

Required:

• data

  Array of URIs or array of items if renderToURI is provided.

Optional:

• renderToURI

  Callback to extract the URI string for each item. Default: function() { return this; }. The default renderer allows you to pass uri in the data array and have them shown into the ticker.

• mediaWidth

  Width of each media. This is used to derive the aspect ratio for the media layer as the size is actually scaled so that it fits exactly on one line. Default: 160.

• mediaHeight

  Height of each media. This is used to derive the aspect ratio for the media layer as the size is actually scaled so that it fits exactly on one line. Default: 90.

• direction

  One of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'. Default: 'rightToLeft'

• speed

  Crawling speed in percentage with 100% being one time the height of the layer per second (or one time half of the width for vertical crawlers). Default: 100.

• smooth

  Round up the speed to the closest value guaranteed to produce a smooth crawl. Default: true.

• spacing

  Spacing between two items in percentage of the line size. Default: 20.

Use repeatCount to control how many times to show all the items. Can be set to 'indefinite' to make the crawler loop forever.

Specific functions

In addition to the list of functions common to all layers, the mediaCrawler also supports the .pushData() function.

• .pushData( value1, value2, ..., valueN )

Examples

Media RSS ticker

Get some sample picture from the Flickr service and display them at the bottom of the screen.

$.get(
  'http://api.flickr.com/services/feeds/photos_public.gne?format=rss2',
  function( feed ) {
    $.mediaCrawler({
          top: '70%', height : '25%', speed: 50, spacing: 5,
          data: $.parseRSS(feed),
          mediaWidth: 240, mediaHeight: 160,
          repeatCount: 'indefinite',
          renderToURI: function() { return this.enclosure.substr(0,this.enclosure.length-5)+ "m.jpg"; }
    }).addTo( 'svg' );
  },
  'text'
);

Note:

• The $.get() is used to retrieve data from the 'uri'.
• The $.parseRSS() is used to parse the input data, and map it into a JavaScript array.
• The values returned by the RSS feed is modified in order to get an image of lower resolution than the default one returned in the RSS.