Local infodisplay runner

2017-11-28 22:21:35 +01:00 · 2017-11-28 22:21:35 +01:00 · 03aed11262
commit 03aed11262
parent 86d1dedcba
5 changed files with 157 additions and 3 deletions
--- a/infodisplay/index.html
+++ b/infodisplay/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>c-flo info display</title>
+    <script src="/dist/infodisplay.js" type="text/javascript"></script>
+    <script src="infodisplay.js" type="text/javascript"></script>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+        background-color: #000000;
+        overflow: hidden;
+      }
+      iframe {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100vw;
+        height: 100vh;
+        margin: 0px;
+        padding: 0px;
+        border: 0px;
+        background-color: #000000;
+        transition: opacity 0.3s ease-in-out;
+        overflow: hidden;
+        opacity: 1;
+      }
+      iframe#next {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe id="current"></iframe>
+    <iframe id="next"></iframe>
+  </body>
+</html>
--- a/infodisplay/infodisplay.js
+++ b/infodisplay/infodisplay.js
@ -0,0 +1,94 @@
+var msgflo = window.infodisplay.msgflo;
+var timeout = null;
+
+var getRotationUrl = function (urls, current) {
+  var newUrl = urls[Math.floor(Math.random() * urls.length)];
+  if (newUrl === current && urls.length > 1) {
+    // Flip the coin again
+    return getRotationUrl(urls, current);
+  }
+  return newUrl;
+};
+
+var DisplayParticipant = function (broker, role, defaultUrls, timer) {
+  var urls = defaultUrls;
+  var def = {
+    component: 'msgflo-browser/infodisplay',
+    label: 'Browser-based information display',
+    icon: 'television',
+    inports: [
+      {
+        id: 'open',
+        type: 'string'
+      },
+      {
+        id: 'urls',
+        type: 'array'
+      }
+    ],
+    outports: [
+      {
+        id: 'opened',
+        type: 'string'
+      },
+      {
+        id: 'urls',
+        type: 'array',
+        hidden: true
+      }
+    ]
+  };
+  var process = function (inport, indata, callback) {
+    var current = document.getElementById('current');
+    var next = document.getElementById('next');
+    if (inport === 'urls') {
+      // Update URL listing
+      urls = indata;
+      return callback('urls', null, urls);
+    }
+    next.onerror = function (err) {
+      next.onload = null;
+      next.onerror = null;
+      participant.send('open', getRotationUrl(urls, indata));
+    }
+    next.onload = function () {
+      next.onload = null;
+      next.onerror = null;
+      // Cross-fade
+      next.id = 'current';
+      current.id = 'next';
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(function () {
+        participant.send('open', getRotationUrl(urls, indata));
+      }, timer);
+      return callback('opened', null, next.getAttribute('src'));
+    };
+    next.setAttribute('src', indata);
+    // Rotate internal URLs list
+  };
+  var client = new msgflo.mqtt.Client(broker, {});
+  var participant = new msgflo.participant.Participant(client, def, process, role);
+  return participant;
+}
+
+window.addEventListener('load', function () {
+  var params = msgflo.options({
+    broker: 'mqtt://c-beam.cbrp3.c-base.org:1882',
+    role: 'infodisplay',
+    urls: [
+      'http://c-beam.cbrp3.c-base.org/he1display',
+      'https://c-base.org'
+    ],
+    timer: 120000,
+  });
+  var p = DisplayParticipant(params.broker, params.role, params.urls, params.timer);
+  p.start(function (err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    p.send('open', getRotationUrl(params.urls));
+  });
+}, false);