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": {
|
"dependencies": {
|
||||||
"@webcomponents/webcomponentsjs": "^1.0.19",
|
"@webcomponents/webcomponentsjs": "^1.0.19",
|
||||||
"d3": "^4.12.0",
|
"d3": "^4.12.0",
|
||||||
|
"msgflo-browser": "^0.2.0",
|
||||||
"plotly.js": "^1.31.2",
|
"plotly.js": "^1.31.2",
|
||||||
"skatejs": "^5.0.0-beta.4"
|
"skatejs": "^5.0.0-beta.4"
|
||||||
},
|
},
|
||||||
|
|
@ -27,6 +28,7 @@
|
||||||
"eslint-config-airbnb-base": "^12.1.0",
|
"eslint-config-airbnb-base": "^12.1.0",
|
||||||
"eslint-plugin-import": "^2.8.0",
|
"eslint-plugin-import": "^2.8.0",
|
||||||
"http-server": "^0.10.0",
|
"http-server": "^0.10.0",
|
||||||
|
"msgflo-nodejs": "^0.11.1",
|
||||||
"webpack": "^3.8.1"
|
"webpack": "^3.8.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,19 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: './index.js',
|
entry: {
|
||||||
|
infoscreens: './index.js',
|
||||||
|
infodisplay: './msgflo.js',
|
||||||
|
},
|
||||||
output: {
|
output: {
|
||||||
path: __dirname,
|
path: __dirname,
|
||||||
filename: 'dist/infoscreens.js'
|
filename: 'dist/[name].js',
|
||||||
|
library: '[name]',
|
||||||
|
libraryTarget: 'umd',
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
|
exclude: /paho.mqtt.js/,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
options: {
|
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