receiver: remove benchmark and reduce animations by default

The benchmark is silly and doesn't prove anything. We assumed the benchmark was able to tell if a device was able to smoothly animate different stuff. This was not the case. We have now 3 grades: - slow (no animation at all) - medium (the default, animate spinners but not transitions) - fast (animate everything) Maybe the default could be chosen through the user agent or a command-line switch. This is not the case. To select a non-default value, the user has to choose another receiver: - /receiver-slow - /receiver-medium - /receiver-fast
vincentbernat · Nov 6, 2016 · fff581f · fff581f
1 parent f397a71
commit fff581f
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 187 deletions.
diff --git a/app/receiver.html b/app/receiver.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dk-{{ grade }}-browser">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -20,8 +20,7 @@
   <div class="osd text"></div>
   <div class="osd technical"></div>
   <div class="connecting"></div>
-  <div class="benchmark"></div>
-  <div class="show" id="loading">
+  <div class="show loading" id="loading">
     <div class="branding branding-{{ branding }}"></div>
   </div>
 

diff --git a/app/scripts/receiver.js b/app/scripts/receiver.js
@@ -9,20 +9,16 @@
       errors = require('./receiver/errors'),
       supervisor = require('./receiver/supervisor'),
       console = require('./receiver/console'),
-      benchmark = require('./receiver/benchmark'),
       document = window.document;
 
   window.console = console;
   errors.enable();
 
   document.addEventListener('DOMContentLoaded', function() {
-    benchmark.done(function() {
-      document.querySelector('.show').classList.add('loading');
-      supervisor.ready();
-      // OK, ready, connect to socket.io
-      console.log('[Dashkiosk] dashkiosk ready, connect to socket.io server');
-      socketio.connect();
-    });
+    supervisor.ready();
+    // OK, ready, connect to socket.io
+    console.log('[Dashkiosk] dashkiosk ready, connect to socket.io server');
+    socketio.connect();
   });
 
 })(window);
diff --git a/app/scripts/receiver/benchmark.js b/app/scripts/receiver/benchmark.js
diff --git a/app/styles/receiver.less b/app/styles/receiver.less
@@ -29,4 +29,3 @@ body {
 @import "receiver/iframe";
 @import "receiver/osd";
 @import "receiver/connecting";
-@import "receiver/benchmark";
diff --git a/app/styles/receiver/benchmark.less b/app/styles/receiver/benchmark.less
diff --git a/app/styles/receiver/connecting.less b/app/styles/receiver/connecting.less
@@ -37,11 +37,17 @@
     &:before {
         height: 19.2px;
         animation: timer-loader 1250ms infinite linear;
+        .dk-slow-browser & {
+            animation: initial;
+        }
     }
 
     &:after {
         height: 16px;
         animation: timer-loader 15000ms infinite linear;
+        .dk-slow-browser & {
+            animation: initial;
+        }
     }
 
     &.show {

diff --git a/app/styles/receiver/loading.less b/app/styles/receiver/loading.less
@@ -59,15 +59,20 @@
     &.show {
         transform: translateX(0);
         transform: translate3d(0, 0, 0);
-        .dk-fast-browser & .branding {
+        .branding {
             animation: spinning 10s infinite linear;
         }
-        .dk-fast-browser & .branding-default {
+        .branding-default {
             animation: scaleout 1.0s infinite ease-in-out;
         }
-        .dk-fast-browser & .branding-exoscale {
+        .branding-exoscale {
             animation: shaking 2s infinite linear;
         }
+        .dk-slow-browser & {
+            .branding, .branding-default, .branding-exoscale {
+                animation: initial;
+            }
+        }
     }
 }
 
@@ -100,7 +105,7 @@
 }
 
 @keyframes scaleout {
-    0% { 
+    0% {
         transform: scale(0);
     } 100% {
         transform: scale(1);

diff --git a/docs/android.rst b/docs/android.rst
@@ -1,3 +1,5 @@
+.. _android:
+
 Android application
 ===================
 

diff --git a/docs/usage.rst b/docs/usage.rst
@@ -223,6 +223,17 @@ timeout is not elapsed, no change will happen.
 
 .. _documentation of Later.js: http://bunkat.github.io/later/parsers.html#text
 
+Display configuration
+---------------------
+
+For Android displays, see :ref:`android`. For Chromecast devices, see
+:ref:`chromecast`. For all other displays, you need to point a web
+browser to the receiver URL (the one ending with ``/receiver``).
+
+If you want additional animations, you can use ``/receiver-fast``
+instead. However, if your device is quite slow (for example, a
+Raspberry Pi without hardware acceleration), you can disable most
+animations by using ``/receiver-slow``.
 
 About the dashboards
 --------------------

diff --git a/lib/express.js b/lib/express.js
@@ -49,6 +49,7 @@ var mustacheLocals = {
   branding: config.get('branding'),
   version: version,
   unassigned: fs.readdirSync(path.join(config.get('path:static'), 'images', 'unassigned')),
+  grade: 'medium',
   asset: function() {
     return function(f, render) {
       f = render(f);
@@ -65,6 +66,15 @@ mustacheUrls.forEach(function(url) {
     res.render(url, mustacheLocals);
   });
 });
+app.get('/receiver-:grade', function(req, res) {
+  var grades = [ 'slow', 'medium', 'fast' ];
+  if (grades.indexOf(req.params.grade) > -1) {
+    res.render('receiver',
+               Object.assign({}, mustacheLocals, { grade: req.params.grade }));
+  } else {
+    res.redirect('/receiver');
+  }
+});
 
 // Some special files
 [ 'favicon.ico', 'favicon.png' ].forEach(function(f) {