Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@first-lego-league/display

Package Overview
Dependencies
Maintainers
2
Versions
92
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@first-lego-league/display - npm Package Compare versions

Comparing version 0.0.5 to 1.0.0

modules/emojione.js
modules/sprite.js
modules/table.js
themes/fll/fll_list_bkg.png
themes/fll/fll_lowThird_bkg.png
themes/fll/fll-rtl.css
themes/fll/fll.css
themes/rednblue-plus/fonts/benchnine/benchnine-bold-webfont.woff
themes/rednblue-plus/fonts/benchnine/benchnine-bold-webfont.woff2
themes/rednblue-plus/fonts/benchnine/benchnine-light-webfont.woff
themes/rednblue-plus/fonts/benchnine/benchnine-light-webfont.woff2
themes/rednblue-plus/fonts/benchnine/benchnine-regular-webfont.woff
themes/rednblue-plus/fonts/benchnine/benchnine-regular-webfont.woff2
themes/rednblue-plus/fonts/benchnine/benchnine.css
themes/rednblue-plus/readme.md
themes/rednblue-plus/rednblue-plus-mod-opaque.css
themes/rednblue-plus/rednblue-plus-mod-rtl.css
themes/rednblue-plus/rednblue-plus.css
themes/rednblue-plus/rednblue-plus.png
themes/rednblue/readme.md
themes/rednblue/rednblue-mod-rtl.css
themes/rednblue/rednblue.css
themes/rednblue/rednblue.png

80

config.js

@@ -17,7 +17,7 @@ displaySystem.config({

'camera': {
visible: true,
// visible: true,
// audio: true,
},
'gallery': {
// visible: true,
visible: true,
transition: 'fade',

@@ -37,7 +37,7 @@ size: 'cover',

'clock': {
// visible: true,
visible: true,
// countdown: 20,
},
'time': {
// visible: true,
visible: true,
// format: "MM:ss",

@@ -51,3 +51,3 @@ },

visible: true,
line1: 'press \'C\'',
line1: '❤️ press \'C\'',
line2: 'to show the control window',

@@ -59,13 +59,13 @@ },

data: [
['just try',1],
['to copy',2],
['and paste',3],
['some cells',4],
['from excel',5],
['into the control',6],
['window! You\'ll be',7],
['amazed!',8],
['It even has',8],
['automatic',8],
['paging',8],
['🇳🇱 just try',1],
['🇳🇱 to copy',2],
['🇪🇬 and paste',3],
['🇪🇬 some cells',4],
['🇪🇬 from excel',5],
['🇺🇸 into the control',6],
['🇺🇸 window! You\'ll be',7],
['🇺🇸 amazed!',8],
['🇳🇱 It even has',8],
['🇳🇱 automatic',8],
['🇳🇱 paging',8],
],

@@ -75,5 +75,43 @@ timer: 5000,

},
'sprite': {
// visible: true,
sprites: [{
width: '100%',
top: '3.5vh',
fontSize: '8vh',
textAlign: 'center',
color: 'rgba(255,255,255,0.5)',
html: 'FIRST LEGO League'
}]
},
'table': {
// visible: true,
header: ['team name', 'number', 'score 1', 'score 2'],
data: [
['yuby',1, 100, 167],
['ahgf',2, 120, 198],
['butny',3, 10, 387],
['batey',4, 140, 243],
['meroy',5, 101, 543],
['marnc',6, 123, 198],
['arben',7, 189, 123],
['opic',8, 203, 431],
['poner',9, 403, 142],
['notar',10, 257, 289],
['serminc',11, 143, 365],
],
timer: 10000,
lines: 8
},
'css': {
href: 'themes/rednblue.css',
// href: 'themes/default.css',
href: [
'themes/rednblue-plus/rednblue-plus.css',
// 'themes/rednblue-plus/rednblue-plus-mod-rtl.css',
// 'themes/rednblue-plus/rednblue-plus-mod-opaque.css'
],
// href: [
// 'themes/rednblue/rednblue.css',
// // 'themes/rednblue/rednblue-mod-rtl.css'
// ],
// href: 'themes/default/default.css',
// gist: '9c7e4efaba9dbbc4831b'

@@ -98,2 +136,4 @@ },

'g': 'list.hide()',
'y': 'table.show()',
'h': 'table.hide()',
'c': 'controls.open()',

@@ -106,2 +146,6 @@ // 'c': function() {

//url: <your own control window>
},
'emojione': {
// displays emoji characters
selector: '.line1, .list-cell, .tweet'
}

@@ -108,0 +152,0 @@ },

53

js/main.js

@@ -1,22 +0,1 @@

//adapted from https://github.com/sindresorhus/multiline
var multiline = (function() {
// start matching after: comment start block => ! or @preserve => optional whitespace => newline
// stop matching before: last newline => optional whitespace => comment end block
var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;
return function (fn) {
if (typeof fn !== 'function') {
throw new TypeError('Expected a function');
}
var match = reCommentContents.exec(fn.toString());
if (!match) {
throw new TypeError('Multiline comment missing.');
}
return match[1];
};
}());
// display system main

@@ -33,3 +12,2 @@ var displaySystem = (function() {

config = _config;
closeCurtain();
setTimeout(init,0);

@@ -43,2 +21,7 @@ }

function appendToHead(el) {
var h = document.getElementsByTagName('head')[0];
h.appendChild(el);
}
function loadScript(src,onload) {

@@ -48,5 +31,12 @@ var el = document.createElement('script');

el.onload = onload;
prependToHead(el);
appendToHead(el);
}
function loadCss(src,onLoad) {
var el = document.createElement('link');
el.rel = 'stylesheet';
el.href = src;
appendToHead(el);
}
var connected = false;

@@ -190,3 +180,2 @@ var backoff = 100;

});
openCurtain();
}

@@ -199,10 +188,2 @@ }

function closeCurtain(){
document.body.classList.add('curtain');
}
function openCurtain(){
document.body.classList.remove('curtain');
}
function initializeModule(def) {

@@ -245,5 +226,7 @@ // add html

config: setConfig,
registerModule: registerModule,
modules: modules,
definitions: moduleDefs
registerModule,
modules,
definitions: moduleDefs,
loadScript,
loadCss
};

@@ -250,0 +233,0 @@

12

modules/background.js
displaySystem.registerModule({
name: 'background',
template: '<div id="background"></div>',
style: multiline(function() {/*
style: `
#background {

@@ -15,3 +15,3 @@ position: absolute;

}
*/}),
`,
factory: function(config) {

@@ -33,7 +33,9 @@ var el;

function show() {
getElement().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
}
function hide() {
getElement().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -55,2 +57,2 @@

}
});
});

17

modules/camera.js
displaySystem.registerModule({
name: 'camera',
template: multiline(function() {/*
template: `
<div id="camera" class="hidden">

@@ -8,4 +8,4 @@ <video id="camera" autoplay></video>

</div>
*/}),
style: multiline(function() {/*
`,
style: `
#camera {

@@ -17,2 +17,3 @@ position: absolute;

height: 100%;
object-fit: cover;
}

@@ -43,3 +44,3 @@

}
*/}),
`,
factory: function(config) {

@@ -107,7 +108,9 @@ var el;

function show() {
getElement().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
}
function hide() {
getElement().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -129,2 +132,2 @@

}
});
});

12

modules/clock.js
displaySystem.registerModule({
name: 'clock',
template: multiline(function() {/*
template: `
<div id="clock" class="hidden">02:30</div>
*/}),
style: multiline(function() {/*
`,
style: `
@import url('fonts/lcd-bold.css');

@@ -16,3 +16,3 @@

}
*/}),
`,
factory: function(config) {

@@ -135,2 +135,3 @@ var div;

getElement().classList.remove('hidden');
getElement().classList.add('visible');
}

@@ -140,2 +141,3 @@

getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -160,2 +162,2 @@

}
});
});

61

modules/controls.js

@@ -39,13 +39,20 @@ displaySystem.registerModule({

function renderModuleControls(name, document) {
var module = system.modules[name];
if (module.hidden) {
return;
function handleButton(module, f, inputs) {
return function() {
var data = inputs.map(getValue);
if (system.ws) {
//handle via websocket
sendMessage(name,fn,args,data);
} else {
//handle directly
f.apply(module,data);
}
}
var p = document.createElement('p');
p.innerHTML = '<label>'+name+'</label>';
Object.keys(module).forEach(function(fn) {
}
function renderModule(module, name, container) {
return function(fn) {
var f = module[fn];
if (typeof f === 'function' && !f.hidden) {
var s = p.appendChild(document.createElement('span'));
var s = container.appendChild(document.createElement('span'));
var args = getArguments(f);

@@ -55,20 +62,21 @@ var inps = args.map(createInput);

btn.innerHTML = fn;
btn.addEventListener('click',function() {
var data = inps.map(getValue);
if (system.ws) {
//handle via websocket
sendMessage(name,fn,args,data);
} else {
//handle directly
f.apply(module,data);
}
});
btn.addEventListener('click', handleButton(module, f, inps));
inps.forEach(appendTo(s));
s.appendChild(btn);
}
});
}
}
function renderModuleControls(name, document) {
var module = system.modules[name];
if (module.hidden) {
return;
}
var p = document.createElement('p');
p.innerHTML = '<label>'+name+'</label>';
Object.keys(module).forEach(renderModule(module, name, p));
document.body.appendChild(p);
}
var html = multiline(function() {/*
var html = `
<!DOCTYPE html>

@@ -87,9 +95,16 @@ <html lang="en">

</html>
*/})
`
function open() {
if (config.url) {
var win = window.open(config.url,'fllDisplayControlWindow','resize=yes,width=800,height=350');
//we have a completely custom control window supplied by the user, do not bother rendering
var win = window.open(config.url,'fllDisplayControlWindow','resize=yes,width=800,height=550');
} else {
var win = window.open('','fllDisplayControlWindow','resize=yes,width=800,height=350');
var win = window.open('','fllDisplayControlWindow','resize=yes,width=800,height=550');
if (win.document.body.innerHTML) {
// do not render, as the window has already been filled with html.
// Just rendering would add more html to the existing screen
// Rerendering would lose page state
return;
}
win.document.write(html);

@@ -96,0 +111,0 @@ init(win.document);

20

modules/css.js
displaySystem.registerModule({
name: 'css',
factory: function(config) {
var el, gistEl;
var els = [], gistEl;
function createElements() {
function appendSheet(href) {
el = document.createElement('link');
el.rel = 'stylesheet';
el.href = href;
document.head.appendChild(el);
return el;
}
function removeSheet(el) {
document.head.removeChild(el);
}
function createElements() {
gistEl = document.createElement('link');

@@ -16,5 +25,4 @@ gistEl.rel = 'stylesheet';

function setCss(href) {
if (href) {
el.href = href;
}
els.forEach(removeSheet);
els = [].concat(href).map(appendSheet);
}

@@ -64,2 +72,2 @@

}
});
});

6

modules/gallery.js

@@ -90,3 +90,4 @@ displaySystem.registerModule({

function show() {
getElement().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
if (config.timeout && !timer) {

@@ -98,3 +99,4 @@ timer = window.setInterval(next,config.timeout * 1000);

function hide() {
getElement().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
if (timer) {

@@ -101,0 +103,0 @@ window.clearInterval(timer);

57

modules/list.js
displaySystem.registerModule({
name: 'list',
template: multiline(function() {/*
template: `
<div id="list" class="hidden"></div>
*/}),
style: multiline(function() {/*
`,
style: `
#list {
position: absolute;
left: 25vw;
top: 10vh;
width: 50vw;
font-size: 6vh;
box-sizing: border-box;
width: calc(100% - 1em);
color: white;
display: grid;
grid-auto-columns: auto;
grid-auto-rows: auto;
}
#list .cell {
display: inline-block;
box-sizing: border-box;
}
*/}),
`,
factory: function(config,onMessage) {

@@ -37,8 +32,12 @@ var numberOfLines = 8;

}
function show() {
getElement().classList.remove('hidden');
getElement().classList.add('visible');
start();
}
function hide() {
getElement().classList.add('hidden');
getElement().classList.remove('visible');
stop();

@@ -57,5 +56,10 @@ }

var pageData = data.slice(page*numberOfLines,(page+1)*numberOfLines);
var colTypes = (pageData[0]||[]).map(cell => {
return typeof cell;
});
var head = '';
if (header) {
head = '<div class="header"><span>'+header+'</span></div>';
head = `<div class="list-head list-row list-row-odd" style="grid-column: 1 / span ${colTypes.length}; grid-row: 1"></div>`;
let style = `grid-column: 1 / span ${colTypes.length}; grid-row: 1;`;
head += `<div class="list-row-odd list-head list-cell" style="${style}">${header}</div>`;
}

@@ -72,17 +76,12 @@

var html = pageData.slice(0,numberOfLines).map(function(row) {
var html = pageData.slice(0,numberOfLines).map((cells, row) => {
let rowClass = (row%2)?'list-row-odd':'list-row-even';
let r = header? row+2: row+1;
return [
'<div class="row">',
row.map(function(cell,i,a) {
return [
'<div class="cell" style="width:',
(100*(widths[i])/totalWidth)+'%',
'">',
'<span>',
cell,
'</span>',
'</div>'
].join('');
`<div class="list-row ${rowClass}" style="grid-column: 1 / span ${cells.length}; grid-row: ${r + 1}"></div>`,
cells.map((cell,column) => {
let style = `grid-column: ${column + 1}; grid-row: ${r + 1};`;
let cellClass = colTypes[column];
return `<div class="list-cell ${rowClass} ${cellClass}" style="${style}">${cell}</div>`;
}).join(''),
'</div>'
].join('');

@@ -162,2 +161,2 @@ }).join('');

}
});
});

15

modules/lowThird.js
displaySystem.registerModule({
name: 'lowThird',
template: multiline(function() {/*
template: `
<div id="lowThird" class="hidden"></div>
*/}),
style: multiline(function() {/*
`,
style: `
#lowThird {

@@ -14,3 +14,3 @@ position: absolute;

}
*/}),
`,
factory: function(config, onMessage) {

@@ -26,3 +26,4 @@ var visible = false;

function persist() {
getElement().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
visible = true;

@@ -34,2 +35,3 @@ if (timer) {

}
function show() {

@@ -41,3 +43,4 @@ persist();

visible = false;
getElement().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -44,0 +47,0 @@ function setText(line1,line2) {

16

modules/time.js
displaySystem.registerModule({
name: 'time',
template: multiline(function() {/*
template: `
<div id="time" class="hidden">12:00</div>
*/}),
style: multiline(function() {/*
`,
style: `
@import url('fonts/lcd-bold.css');

@@ -16,3 +16,3 @@

}
*/}),
`,
factory: function(config) {

@@ -45,7 +45,9 @@

function show() {
getElement().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
}
function hide() {
getElement().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -190,2 +192,2 @@

]
};
};

20

modules/twitter.js
displaySystem.registerModule({
name: 'twitter',
template: multiline(function() {/*
template: `
<div id="twitter" class="hidden"><span class="container"></span></div>
*/}),
style: multiline(function() {/*
`,
style: `
#twitter {

@@ -25,3 +25,3 @@ position: absolute;

}
*/}),
`,
factory: function(config,onMessage) {

@@ -43,3 +43,3 @@

function getTwitterDiv() {
function getElement() {
return div?div:(div=document.getElementById('twitter'));

@@ -49,11 +49,13 @@ }

function getContainer() {
return container?container:(container = getTwitterDiv().firstChild);
return container?container:(container = getElement().firstChild);
}
function show() {
getTwitterDiv().className = '';
getElement().classList.remove('hidden');
getElement().classList.add('visible');
}
function hide() {
getTwitterDiv().className = 'hidden';
getElement().classList.add('hidden');
getElement().classList.remove('visible');
}

@@ -223,2 +225,2 @@

}
});
});

2

package.json
{
"name": "@first-lego-league/display",
"version": "0.0.5",
"version": "1.0.0",
"description": "Display Systems",

@@ -5,0 +5,0 @@ "main": "config.js",

84

readme.md

@@ -1,6 +0,16 @@

Display Systems
Display System, a FirstLegoLeague Module
================
![rednblue theme](themes/rednblue.png)
## FLL Modules
![](https://github.com/FirstLegoLeague/Coordination/wiki/National-setup.png)
Display System can be a block in a larger framework of cooperating modules. Read more about it [here](https://github.com/FirstLegoLeague/Coordination/wiki)
However, it can also be used standalone.
## Display System
![rednblue-plus theme](themes/rednblue-plus/rednblue-plus.png)
This is a general purpose, configurable system for data display. It currently contains 8 modules, which are explained further on.

@@ -33,5 +43,7 @@

- [gallery](#gallery)
- [sprite](#sprite)
- [clock](#clock)
- [time](#time)
- [list](#list)
- [table](#table)
- [lowThird](#lowthird)

@@ -201,5 +213,5 @@ - [twitter](#twitter)

//*nix
mhub-client -n twitter -t twitter:addMessage -d '{"id":123,"user":{"screen_name":"FLL"},"text":"FLL is great"}'
mhub-client -n default -t twitter:addMessage -d '{"id":123,"user":{"screen_name":"FLL"},"text":"FLL is great"}'
//windows
mhub-client -n twitter -t twitter:addMessage -d "{""id"":123,""user"":{""screen_name"":""FLL""},""text"":""FLL is great""}"
mhub-client -n default -t twitter:addMessage -d "{""id"":123,""user"":{""screen_name"":""FLL""},""text"":""FLL is great""}"

@@ -264,3 +276,3 @@ In your `config.js`, make sure you have the following options:

tweet stream lego --json | mhub-client -n twitter -t twitter:addMessage -i json
tweet stream lego --json | mhub-client -n default -t twitter:addMessage -i json

@@ -289,3 +301,3 @@ This command uses [pipes](http://en.wikipedia.org/wiki/Pipeline_(Unix)) to take the output of the `tweet` utility and *pipe* it into `mhub-client`.

cli-time -m json -i | mhub-client -n time -t time:set -i json
cli-time -m json -i | mhub-client -n default -t time:set -i json

@@ -295,5 +307,5 @@ To set the time to 0 and start counting:

//*nix
mhub-client -n time -t time:set -d '{"timestamp":"0"}'
mhub-client -n default -t time:set -d '{"timestamp":"0"}'
//windows
mhub-client -n time -t time:set -d "{""timestamp"":""0""}"
mhub-client -n default -t time:set -d "{""timestamp"":""0""}"

@@ -397,2 +409,29 @@ Note that the `"0"` is quoted and it actually means setting the time to Jan 1 2000 at 00:00 in your local timezone.

### sprite
Simple individual images or bits of text that can be placed anywhere on the screen. This is useful for displaying watermarks or logos.
To store images online, use any image hosting service, like [imgur](http://imgur.com/), [postimage](https://postimage.io) or [tinypic](http://tinypic.com/)
Configuration options:
- `visible`: initial visibility, defaults to false,
- `sprites`: an array of objects, containing
- `html` (optional): html content of the sprite. This can be text or more elaborate content
- `<cssProps>`: any css property to set. For example `left` or `top`. Note that the property names should be camelCased, like `marginLeft`
Exposed api:
- `show()`: show all sprites
- `hide()`: hide all sprites
- `showSprite(index)`: show a particular sprite
- `hideSprite(index)`: hide a particular sprite
mhub topics:
- `gallery:show`
- `gallery:hide`
- `gallery:showSprite` data: `{"index":<number>}`
- `gallery:hideSprite` data: `{"index":<number>}`
### clock

@@ -482,2 +521,25 @@

### table
Shows a table of data, similar to list, but more generic in its data format
Configuration options:
- `visible`: initial visibility, defaults to false
- `header`: array of titles for the columns
- `data`: data of the list, an array of arrays of strings
Exposed api:
- `show()`: show the list
- `hide()`: hide the list
- `set(pasteFromExcel)`: set the table, paste data from excel. The program assumes the headers are in the first row of the excel.
mhub topics:
- `table:show`
- `table:hide`
- `table:set` data: `{pasteFromExcel:<csvData>}`
- `table:setData` data: `{data:[[<string>]],header:[<string>]}`
### lowThird

@@ -543,3 +605,3 @@

- `href`: url to a stylesheet, can be local, or hosted somewhere
- `href`: url to a stylesheet, can be local, or hosted somewhere. It can also be an array of stylesheets, which is used for theme modifiers.
- `gist`: gist id to load alongside the stylesheet, can be used to customize themes

@@ -624,4 +686,4 @@

- `themes/default.css`: a colorful default theme that can be used to create your own
- `themes/rednblue.css`: a simple red and blue theme with slanted edges
- `themes/rednblue/rednblue.css`: a simple red and blue theme with slanted edges
- `themes/rednblue-plus/rednblue-plus.css`: an extra fancy red and blue theme

@@ -628,0 +690,0 @@ For screenshots, see the `themes` [folder](themes)

8

themes/readme.md
Themes
======
default
rednblue
-----
![default theme screenshot](default.png)
![rednblue theme screenshot](rednblue/rednblue.png)
rednblue
rednblue-plus
-----
![rednblue theme screenshot](rednblue.png)
![rednblue-plus theme screenshot](rednblue-plus/rednblue-plus.png)
themes/default-rtl.css
themes/default.css
themes/default.png
themes/fll_list_bkg-rtl.png
themes/fll_list_bkg.png
themes/fll_lowThird_bkg-rtl.png
themes/fll_lowThird_bkg.png
themes/fll-rtl.css
themes/fll.css
themes/rednblue-rtl.css
themes/rednblue.css
themes/rednblue.png
yarn-error.log
css/style.css

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc