Giter VIP home page Giter VIP logo

concerto-frontend's Introduction

Concerto Frontend

This gem contains the client-side code that runs on Concerto display machines. The latest version of the gem can be found on RubyGems.

Installation

The concerto-frontend gem should be installed by default with the latest Concerto releases. If there seems to be anything wrong, follow these steps to install the gem.

  1. Concerto server administrators can visit the "Plugins" page in the "Admin" section of the navigation bar
  2. Click on the "New Plugin" button
  3. With "RubyGems" selected as the source, type "concerto_frontend" into the Gem Name text field.
  4. Click install plugin, then restart your web server as needed to install the new dependencies.
  5. You may need to recompile the assets by running RAILS_ENV=production bundle exec rake assets:precompile in your usr/share/concerto directory and then restart your webserver.

Development

The concerto-frontend uses web components and the latest Polymer 1.0 library. External javascripts should be placed in the vendor/assets/javascripts directory and required in the application.js.

Dependencies

  1. node js
  2. bower to install Polymer and web component libraries.
  3. grunt to run JavaScript tasks

Installation

  1. git clone https://github.com/concerto/concerto-frontend
  2. change the current directory to the concerto-frontend project
  3. run npm install and bower install to install the necessary tools and libraries

Standalone development

The quickest method of development is to run the frontend without core Concerto. The frontend uses data in the "test" directory as a substitute for any screen and content data. Follow these steps to begin developing:

  1. run npm install polyserve to install a simple web server to run our web component frontend
  2. start the web server by simply running polyserve while in the project's root directory
  3. polyserve will indicate which port and path the frontend can be reached at (this should be localhost:8080/components/concerto_frontend/demo.html)
  4. whatever html import changes you make to demo.html should also be included in the vulcanize_this.html

Development through Concerto

This method allows developers to run live changes through core Concerto. Follow these steps to begin developing:

  1. visit the "Plugins" page under your Concerto instance
  2. add or edit the frontend plugin for installation by local system path
  3. when specifying the path, the gem's root directory and gemspec are located in the concerto-frontend-gem folder within this project
  4. run the grunt watch (add --verbose for extra debugging details) task within this project's root directory. This will automatically run the vulcanize task whenever changes are made to the frontend HOWEVER you will need to change the vulcanized output see building, step 1 below.
  5. whatever html import changes you make to demo.html should also be included in the vulcanize_this.html

The grunt tasks will update the concatenated Polymer web components file and the changes should be reflected when previewing a screen under core Concerto.

Building the concerto_frontend gem

The following notes are kept for any developers on the Concerto team that need to push updates to RubyGems:

  1. Run grunt so it performs the default actions of vulcanizing the vulcanize_this.html file, strips the extra html from the vulcanized output file, and copies external js files to the vendor/assets/javascripts directory.
  2. change direcetories to the concerto-frontend-gem and then run gem build concerto_frontend.gemspec
  3. push the final gem to RubyGems using gem push concerto_frontend-X.X.X.gem and add to core Concerto as concerto_frontend with the latest version number

concerto-frontend's People

Contributors

augustf avatar bamnet avatar gbprz avatar kench avatar mfrederickson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

concerto-frontend's Issues

investigate possible memory leaks

When the frontend initially started on a RPi2 using iceweasel, it reported a memory usage of around 15%, after 5 days iceweasel showed a memory consumption of around 41%. Killing iceweasel and restarting it, it came back up at around 15%. The screen contained a single feed with a single piece of htmltext content.

HTML messed up?

While I was trying to figure out a problem with chromium I noticed that the markup is all out of whack. I went back at looked at our production site with Chrome and it is the same...

multiple html, head, title, body and closing tags...

image

image

Content refresh timing

I need the content to refresh more often. It seems like there is about a 2 minute delay on new content getting to the frontend. Is there a setting that can be changed? In my case its an updated RSS feed, so its not a "new" piece of content just and updated version of it...

If there is a simple delay value set in the code somewhere that I can modify on my setup can someone point me to it, I've been looking but cant find it.

Test documentation

How do I execute the concerto-frontend tests? There appears to be some test fixtures in this repository, but I haven't had the foggiest idea on how to run them.

Text field sizing/spacing

The canonical BBC RSS feed still looks a bit odd -- still like one big paragraph. This isn't particularly unique to the new frontend -- the sizing spacing of dynamic content here has long been an issue.

screen shot 2015-08-23 at 9 50 45 pm

Text fields blinking

At the current state of master, the time field blinks somewhat randomly in Firefox 52.2.1 ESR.

  • Expected behavior: Every 15 seconds, the current time is re-evaluated and the contents of the time field are seamlessly replaced.
  • Observed behavior: Every 15 seconds, the contents of the time field disappear entirely, only to reappear at a later time. Sometimes it reappears a mere fraction of a second later, but it usually takes several seconds, and sometimes does not reappear within any given 15-second period. The accuracy of the time, when it is displayed, does not appear to be affected.

Other text fields do not appear to exhibit the same blinking behavior, even when they only contain one item. Checking the console, there do not appear to be any content updates coming through for the time field.

In my testing, I have observed that this behavior does not occur in Firefox 45.3.0 ESR, Firefox 48.0, or Chrome 58.0.3029.110. This came up in testing a new upgrade from Concerto 2.3.1, so perhaps some settings have changed that I am missing?

FIFO vertical content

It would be useful to have a text content area, so that as new RSS items become available they are appended to the bottom. This would be helpful in situations where feeds report driving conditions or accidents are reported as they occur. As opposed to cycling through the RSS content you would simply see the most recent at the bottom. Maybe have a transition that highlights the new entry for a couple minutes.

Locales for time

Hi,
is it possible that you change the moment.min.js to moment-with-locals.min.js and add a new property to the screen settings like timezone (best) or the field_properties like time_format.
And pls dont use moment direct, make a instance an set the locale there, so it would be possible to have different screens with different locales.

At the moment we are not able to show german day or month names.

kind regards

Support Basic Offline Functionality (Concerto #92)

Ability to run screens using cached content, while internet connection is down. It also aides to minimize transfer if clients are using a transfer-capped internet connection like mobile internet connection (3G/UMTS etc)

Frontend breaks when Concerto is deployed to a sub-URI

The frontend does not appear to work when Concerto is deployed somewhere other than the root path of the domain.

Setup: concerto is deployed to a sub-URI, as https://example.com/concerto. I'm using concerto_frontend-0.2.0.

Symptoms:

The cause seems to be that URLs in the app are generated with a leading / and appended to a baseUrl variable. baseUrl is set to an empty string in concerto-screen.html, line 70. When I changed this to my sub-URL ("/concerto") by hacking the generated assets, setup.json was loaded successfully.

It would be ideal if the correct URL could be auto-detected in js (since the javascript should know the current URL) or included in the _frontend.html to be passed to the javascript. Alternately, it could go in a config somewhere. Unfortunately I don't think I have the polymer expertise to pull this off myself right now.

Screen reloading loop

@augustf noticed this one. The issue was narrowed down to the Rails 4.2 migration in core Concerto and appears to be caused by the screen's frontend cache key changing constantly (messages in the console). It might be worth looking into any changes that could have broken the screen's frontend caching method, since the issue no longer occurs when rolling back before the Rails 4.2 branch merge.

Support field configs

Field config support needs to be implemented for features like transitions, scrolling ticker text, and anything else that the original frontend used to allow.

Resizing of text and graphics

Content sizes for both images (scroll bar still appears) and text (font-size) are not adjusted to fit the screen's fields properly.

Frontend shows black screen

Concerto Version: 2.3.0.
ConcertoFrontend via rubygems Gem version: 0.0.8

http://mysite/frontend/1

Google Chrome 45.0.2454.85 m - OK

FireFox 40.0.3 (webobjects is enabled) - Black Screen
in console 1 warn and 1 error
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create 1:215:0
TypeError: this.$ is undefined 1:8948:8

IE11 - Black Screen

Ticker text marquee

Add support for scrolling ticker text animation via field configs. Like a CNN scrolling text marquee at the bottom. There are already animations for sliding content in and out, but this request is for a continually scrolling stream of content.

not detecting change in template/position/field/configs changes

The screen did not reload when a field config was changed, a field' style was changed, a new field was added, nor when the background image was changed. We generate a header which indicates when anything screen/template/field/position changes and send it with each piece of content:

https://github.com/concerto/concerto/blob/master/app/controllers/frontend/contents_controller.rb#L47

But the new frontend isn't looking at it. This same indicator is sent (I believe) as the etag when the setup.json is sent.

What do you think about changing the frontend from polling the setup.json every 8 seconds, to just checking that header each time it gets a piece of content?

Migrate functionality of Prelude into concerto-frontend

Concerto Prelude was an initial attempt a while back to build a HTML5 application that would serve as a container for the Concerto Frontend for any HTML5-based application platform with the initial intent of being used for Google Chrome/Chrome OS based-kiosks and expanded to Chromecast while the SDK was available.

Prelude's build toolchain predates the acceptance of Node.js, Grunt, Bower, and Polymer in this space. This issue tracks the progress in deprecating the Prelude repository in favor of building a single frontend that can be packaged for the following platforms:

  • Gem for Concerto Rails application
  • Chrome App
  • Google Cast - deploy to CDN for consumption by Chromecasts

Separately, Concerto Sonnet (a sender app framework for second screen devices - initially targeting Google Cast) will eventually exist to talk to Prelude.

time display off

Two people posted a similar problem on the forum:

I installed version 2.3.2 yesterday (completely fresh install, not an upgrade) and even with the timezone properly set the time is off by 5 hours (I need it to be eastern std time - and 5 hours is the difference - I think, so it seems to me that it is not taking into account the local time zone setting).

Change Template / Fields when updated

Currently the template is only loaded when the screen is first created. We should check periodically to see if it needs to be changed or the fields need to be adjusted.

Browser Caching

I created a new field and made it type "Text". I added content to it but the screen never updates it. I think the problem is related to the web browser caching the content for the feed. I went into another tab and went to the url http://server/frontend/[screen]/fields/[fieldid]/contents.json and it displayed outdated data... I performed a regular refresh (F5) and it remained the same. I performed a SHIFT+F5 and it refreshed the content and the tab running my screen eventually refreshed the field with the new content.

Just want to add - maybe this is the reason, not really sure on the logistics of browser caching -- my content is not changing much at the moment. The only thing that's actually changing is a timestamp within the content which just shows when the last time the RSS feed data was pulled. Could it be seeing the same exact number of bytes and thinking there was no change in content?

Registering Content Types

In #3, it was mentioned that RegisterContentTypes() uses the content element's name attribute instead of the constructor attribute to build keys for the Types object. A reference to the element is then saved as the value by using the constructor name and window object.

It was mentioned this needed to be improved. Maybe the element's constructor attribute should be used as the key instead?

Polymer is Chrome-only currently

Polymer and its supporting Web Components are esssentially Chrome-proprietary right now. As in #19, WC support can be turned on in Firefox, but is considered highly experimental. Since the Concerto Player uses Chromium, that won't be a problem for our builds, but current users on alternative platforms updating to a future 2.3 release will need to be mindful -- particularly Raspberry Pi users in Midori.

This was helpful to me in following support for Web Components: http://jonrimmer.github.io/are-we-componentized-yet/

While I don't believe there's anything for us to do on this currently (having two parallel frontends sounds a bit crazy), I'll leave this issue here to track the fact that we're effectively Chrome-only for the time being.

Content types fail to register after vulcanization

After concatenating all of the frontend files, content types are unable to register properly. Each content calls the inherited registerContentType() function, but querySelector('polymer-element') cannot find the correct element and causes the elem variable to be undefined.

content not cycling in Chrome

May be related to #68 and concerto/concerto#1361

Since that issue was fixed now the screen only shows the first piece of content for each field on the screen. The error seen in the developer console is: Uncaught TypeError: Failed to execute 'animate' on 'Element': 'function (a){return a}' is not a valid value for easing(โ€ฆ)

Create build process

We should have a build step which minifies / vulcanizes the frontend into one or two includes.

this.Ec is undefined

TypeError: this.Ec is undefined
frontend.js:64:298

Windows 7 Pro
24G ram
Xeon
Firefox 39.0
This happens on page load / reload randomly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.