Skip to content

Latest commit

 

History

History
108 lines (74 loc) · 7.09 KB

README.md

File metadata and controls

108 lines (74 loc) · 7.09 KB

Web Page Widget Circle CI

Introduction

The Web Page Widget is used to display other web pages inside of a Presentation.

How It Works

The Web Page Widget displays the web page inside of an iframe. The page can be shifted by setting the Horizontal Scroll and Vertical Scroll values. This functions in the same way as a scrollbar does on a regular web page, allowing the Widget to display only a specific region.

The Widget also provides an option to scale (zoom) the content of the iframe within a range of 50-200%, and it can enable or disable user interactivity with the content.

Web Page Widget refreshes the page as per the Data Refresh Interval. To prevent it from displaying a cached copy, a dummy variable is appended to the URL with every update, forcing the Widget to show the most recent version of the page.

Known Issues

Certain URLs contain scripts which redirect the parent page of the browser to their site. This is a security measure against those pages being included in an iframe. When a page such as this is loaded into the Web Page Widget, the Viewer will be redirected to that site, rendering the Display inoperable.

Other particular URLs might configure their server to make use of the X-Frame-Options response header which can be used to indicate whether or not a browser should be allowed to render a page in an iframe. Sites use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. When a page such as this is loaded in the Web Page Widget, the site will not be displayed.

Web Page 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

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 the dependencies:

  • Git
  • 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.

The Widget can now be installed by executing the following commands in Terminal:

git clone https://github.com/Rise-Vision/widget-web-page.git
cd widget-web-page
npm install
bower install
gulp build

The source code for the Widget can be found in the src folder. This is where you will want to make your custom changes.

Run Locally

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

Testing

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

gulp test

Deployment

Once you are satisifed 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:

Add a Widget

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.

Languages

If you would like to translate the user interface for this product to another language please complete the following:

  • Download the English translation file from this repository.
  • Download and install POEdit. This is software that you can use to write translations into another language.
  • Open the translation file in the POEdit program and set the language for which you are writing a translation.
  • In the Source text window, you will see the English word or phrase to be translated. You can provide a translation for it in the Translation window.
  • When the translation is complete, save it with a .po extension and email the file to [email protected]. Please be sure to indicate the Widget or app the translation file is for, as well as the language that it has been translated into, and we will integrate it after the translation has been verified.

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