Local infodisplay runner
This commit is contained in:
Henri Bergius
parent
86d1dedcba
commit
03aed11262
5 changed files with 157 additions and 3 deletions
38
infodisplay/index.html
Normal file
38
infodisplay/index.html
Normal file
|
|
@ -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>
|
||||
94
infodisplay/infodisplay.js
Normal file
94
infodisplay/infodisplay.js
Normal file
|
|
@ -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);
|
||||
5
msgflo.js
Normal file
5
msgflo.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import msgflo from 'msgflo-browser';
|
||||
|
||||
export {
|
||||
msgflo,
|
||||
};
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
"dependencies": {
|
||||
"@webcomponents/webcomponentsjs": "^1.0.19",
|
||||
"d3": "^4.12.0",
|
||||
"msgflo-browser": "^0.2.0",
|
||||
"plotly.js": "^1.31.2",
|
||||
"skatejs": "^5.0.0-beta.4"
|
||||
},
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
"eslint-config-airbnb-base": "^12.1.0",
|
||||
"eslint-plugin-import": "^2.8.0",
|
||||
"http-server": "^0.10.0",
|
||||
"msgflo-nodejs": "^0.11.1",
|
||||
"webpack": "^3.8.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
module.exports = {
|
||||
entry: './index.js',
|
||||
entry: {
|
||||
infoscreens: './index.js',
|
||||
infodisplay: './msgflo.js',
|
||||
},
|
||||
output: {
|
||||
path: __dirname,
|
||||
filename: 'dist/infoscreens.js'
|
||||
filename: 'dist/[name].js',
|
||||
library: '[name]',
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /paho.mqtt.js/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
|
|
@ -17,5 +23,14 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
externals: {
|
||||
newrelic: 'commonjs newrelic',
|
||||
tv4: 'commonjs tv4',
|
||||
'ampqlib/callback_api': 'commonjs ampqlib/callback_api',
|
||||
mqtt: 'commonjs mqtt',
|
||||
},
|
||||
node: {
|
||||
fs: 'empty',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue