The Web Page Widget is used to display other web pages inside of a Presentation.
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.
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.
- 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.
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.
To preview Widgets locally, you'll need to use the Widget Preview app available here.
Execute the following command in Terminal to run both end-to-end and unit tests:
gulp test
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:
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
- did this
- then that
- 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)
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.
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.
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