streamhub-ticker

streamhub-ticker is a StreamHub App that that visualizes two streams as a ticker in X axis (Ticker), and feed views in the Y axis (Feed). Display social content for various topics relevant to your website or app.

Getting Started

The quickest way to use streamhub-ticker is to use the built version hosted on Livefyre's CDN.

Dependencies

streamhub-ticker depends on streamhub-sdk. Ensure it's been included in your page.

<script src="http://cdn.livefyre.com/libs/sdk/v1.0.1-build.147/streamhub-sdk.min.gz.js"></script>

Include streamhub-ticker too.

<script src="http://cdn.livefyre.com/libs/apps/genehallman/streamhub-ticker/v2.0.1.build.4/streamhub-ticker.min.js"></script>

Optionally, include some reasonable default CSS rules for StreamHub Content. This stylesheet is provided by the StreamHub SDK.

<link rel="stylesheet" href="http://cdn.livefyre.com/libs/sdk/v1.0.1-build.147/streamhub-sdk.gz.css" />

Usage

Require streamhub-sdk and streamhub-ticker

 var Hub = Livefyre.require('streamhub-sdk'),
     TickerView = Livefyre.require('streamhub-ticker');

An empty ticker is no fun, define the Ticker (x-axis) and Feed (y-axis) collections to be displayed.

   var tickerOpts = {
       network: "labs-t402.fyre.co",
       siteId: "303827",
       articleId: "labs_tumblr_demo",
       environment: "t402.livefyre.com"
   };
   var feedOpts = {
       network: "labs-t402.fyre.co",
       siteId: "303827",
       articleId: "labs_demo_fire",
       environment: "t402.livefyre.com"
   };

Then create a stream manager for each collection.

  var tickerStreams = Hub.StreamManager.create.livefyreStreams(tickerOpts);
  var feedStreams = Hub.StreamManager.create.livefyreStreams(feedOpts);

Create a TickerView, passing the DOMElement to render it in (el option).

 var tickerView = new TickerView({
     el: document.getElementById('ticker')
 });

Finally, bind both ticker and feed streamManagers to the Ticker View and start it up.

 tickerStreams.bind(tickerView.main).start();
 feedStreams.bind(tickerView.feed).start();

You now have a Deck! See this all in action on this jsfiddle.

Local Development

Instead of using a built version of streamhub-ticker from Livefyre's CDN, you may wish to fork, develop on the repo locally, or include it in your existing JavaScript application.

Clone this repo

git clone https://github.com/genehallman/streamhub-ticker

Development dependencies are managed by npm, which you should install first.

With npm installed, install streamhub-ticker's dependencies. This will also download Bower and use it to install browser dependencies.

cd streamhub-ticker
npm install

This repository's package.json includes a helpful script to launch a web server for development

npm start

You can now visit http://localhost:8080/ to see an example feed loaded via RequireJS.

StreamHub