JSignage:MediaCrawler

From SpinetiX Support Wiki

Jump to: navigation, search

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.
This page was last modified on 29 August 2014, at 18:50.