tosunkaya / widget-rss

Rise Vision RSS Widget

RSS Widget

Introduction

The RSS Widget allows you to add an RSS feed directly into your Presentation. You can configure how it will look and also use a custom layout.

RSS Widget works in conjunction with Rise Vision, the digital signage management application that runs on Google Cloud.

At this time Chrome is the only browser that this project and Rise Vision supports.

Built With

• AngularJS
• jQuery
• Bootstrap
• npm
• Bower
• Gulp
• Protractor, CasperJS, Karma, Mocha, Chai and Chai as Promised for testing

Usage

Custom Layout

For using custom layout you will need to have a template, like the one shown below, hosted somewhere accessible through the internet. The RSS content placement on the template is based on the element classes. Thus, you can change the elements as you wish as long as the classes are maintained. Moreover, you can also add your own styling through inline css. Once you have your template ready you can set its url on the widget settings under Custom Layout URL.

<!-- 4x1 Layout -->
<template id="layout">
  <div id="layout-4x1">
    <article class="item hide">
      <img class="image" />
      <div class="textWrapper">
        <h1 class="headline headline_font-style">
          <a class="headline_font-style" target="_blank"></a>
        </h1>
        <div class="meta">
          <span class="timestamp timestamp_font-style"></span>
          <span class="separator">-</span>
          <span class="author author_font-style"></span>
        </div>
        <p class="story story_font-style"></p>
      </div>
    </article>
  </div>
</template>

Development

Dependencies

• Git - Git is a free and open source distributed version control system that is used to manage our source code on Github.
• npm & Node.js - npm is the default package manager for Node.js. npm runs through the command line and manages dependencies for an application. These dependencies are listed in the package.json file.
• Bower - Bower is a package manager for Javascript libraries and frameworks. All third-party Javascript dependencies are listed in the bower.json file.
• Gulp - Gulp is a Javascript task runner. It lints, runs unit and E2E (end-to-end) tests, minimizes files, etc. Gulp tasks are defined in gulpfile.js.

Local Development Environment Setup and Installation

To make changes to the Widget, you'll first need to install Git.

The Widget can now be installed by executing the following command at the command line:

git clone https://github.com/Rise-Vision/widget-rss.git

If you want to get up and running quickly without having to install npm, Bower and Gulp, then you can make your code changes directly to the files in the dist folder. Please keep in mind that by doing so, you won't be able to take advantage of the many benefits that these tools provide, such as managing dependencies and running automated tests & builds. Should you decide that you would like to use these tools, you will first need to install them:

• Node.js and npm
• Bower - To install Bower, run the following command in Terminal: npm install -g bower. Should you encounter any errors, try running the following command instead: sudo npm install -g bower.
• Gulp - To install Gulp, run the following command in Terminal: npm install -g gulp. Should you encounter any errors, try running the following command instead: sudo npm install -g gulp.

Next, perform these additional steps at the command line:

cd widget-rss
npm install
bower install
npm run build

The source code for the Widget can be found in the src folder, and this is where you can make any necessary code changes.

Run Locally

To preview Widgets locally, you'll need to use the Widget Preview app.

Testing

Execute the following command in Terminal to run both end-to-end and unit tests:

gulp test

Deployment

Once you are satisfied with your changes, run gulp build again, which will regenerate the dist folder. The dist folder contains all of the files that need to be deployed to your server. In the Rise Vision Platform, you can then add your custom Widget via the Gadgets tab. Give your Widget a name, select a Type of Widget, paste the link to the widget.html file in the URL field, and the link to the settings.html file in the Custom UI URL field:

Submitting Issues

If you encounter problems or find defects we really want to hear about them. If you could take the time to add them as issues to this Repository it would be most appreciated. When reporting issues, please use the following format where applicable:

Reproduction Steps

1. did this
2. then that
3. followed by this (screenshots / video captures always help)

Expected Results

What you expected to happen.

Actual Results

What actually happened. (screenshots / video captures always help)

Contributing

All contributions are greatly appreciated and welcome! If you would first like to sound out your contribution ideas, please post your thoughts to our community, otherwise submit a pull request and we will do our best to incorporate it. Please be sure to submit corresponding E2E and unit tests where appropriate.

Languages

If you would like to translate the user interface for this product to another language, please refer to the common-i18n repository.

Resources

If you have any questions or problems, please don't hesitate to join our lively and responsive community at http://community.risevision.com.

If you are looking for user documentation on Rise Vision, please see http://www.risevision.com/help/users/

If you would like more information on developing applications for Rise Vision, please visit http://www.risevision.com/help/developers/.

Facilitator

Stuart Lees