c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show opening/closing animation for three minutes, fixes #10

Browse source
This commit is contained in:
Henri Bergius 2018-03-11 21:15:04 +01:00
parent 979a981bfb
commit 4ea76dfcfc
17 changed files with 59 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bar-status/index.html
View file

@ -77,7 +77,7 @@
<body class="station"> <body class="station">
<main> <main>
<section> <section>
<cbase-currentstate timeseries="bar.open" interval="10">bar status</cbase-currentstate> <cbase-currentstate timeseries="bar.open" interval="10" showrecent="3">bar status</cbase-currentstate>
</section> </section>
<section> <section>
<cbase-currentstate timeseries="bar.replicator.1" interval="120">club mate</cbase-currentstate> <cbase-currentstate timeseries="bar.replicator.1" interval="120">club mate</cbase-currentstate>

2
c_lab-music/index.html
View file

@ -104,7 +104,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
c_lab/index.html
View file

@ -93,7 +93,7 @@
<cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart> <cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

45
elements/currentstate.js
View file

@ -9,6 +9,8 @@ class CurrentState extends Component {
unknownword: props.string, unknownword: props.string,
status: props.boolean, status: props.boolean,
statusknown: props.boolean, statusknown: props.boolean,
recent: props.boolean,
showrecent: props.number,
interval: props.number, interval: props.number,
}; };
@ -33,17 +35,25 @@ class CurrentState extends Component {
} }
fetchData() { fetchData() {
const url = `http://openmct.cbrp3.c-base.org/telemetry/latest/${this.timeseries}`; const url = `http://openmct.cbrp3.c-base.org/telemetry/latest/${this.timeseries}?timestamp=true`;
fetch(url) fetch(url)
.then(data => data.json()) .then(data => data.json())
.then((data) => { .then((data) => {
if (data === null) { if (data === null) {
this.statusknown = false; this.statusknown = false;
this.status = false; this.status = false;
this.recent = false;
return; return;
} }
this.status = data; this.status = data.value;
this.statusknown = true; this.statusknown = true;
const now = new Date();
const changed = new Date(data.timestamp);
if (((now - changed) / 60000) < this.showrecent) {
this.recent = true;
} else {
this.recent = false;
}
}); });
} }
@ -53,9 +63,34 @@ class CurrentState extends Component {
root.removeChild(root.firstChild); root.removeChild(root.firstChild);
} }
root.appendChild(render()); root.appendChild(render());
const styles = document.createElement('style');
styles.appendChild(document.createTextNode(`
@-webkit-keyframes animaterecenton {
from { background-color: #73d216; }
to { background-color: #3465a4; }
}
.animaterecenton {
-webkit-animation-name: animaterecenton;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes animaterecentoff {
from { background-color: #cc0000; }
to { background-color: #edd400; }
}
.animaterecentoff {
-webkit-animation-name: animaterecentoff;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction: alternate;
}
`));
root.appendChild(styles);
} }
render({ status, statusknown, trueword, falseword, unknownword }) { render({ status, statusknown, trueword, falseword, unknownword }) {
console.log(this.showrecent, this.recent);
const el = document.createElement('div'); const el = document.createElement('div');
el.style.width = '100%'; el.style.width = '100%';
el.style.height = '100%'; el.style.height = '100%';
@ -73,11 +108,17 @@ class CurrentState extends Component {
if (trueword) { if (trueword) {
content = `${content} ${trueword}`; content = `${content} ${trueword}`;
} }
if (this.recent) {
el.className = 'animaterecenton';
}
} else { } else {
el.style.backgroundColor = '#cc0000'; el.style.backgroundColor = '#cc0000';
if (falseword) { if (falseword) {
content = `${content} ${falseword}`; content = `${content} ${falseword}`;
} }
if (this.recent) {
el.className = 'animaterecentoff';
}
} }
el.innerHTML = content; el.innerHTML = content;
return el; return el;

2
he2/index.html
View file

@ -101,7 +101,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
life-support/index.html
View file

@ -101,7 +101,7 @@
<cbase-linechart timeseries="clima.pm25.mainhall clima.pm25.arboretum" width="34" height="40" references="25 35"></cbase-linechart> <cbase-linechart timeseries="clima.pm25.mainhall clima.pm25.arboretum" width="34" height="40" references="25 35"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
mainhall-music/index.html
View file

@ -104,7 +104,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
mainhall/index.html
View file

@ -92,7 +92,7 @@
<cbase-linechart timeseries="crew.online" width="69" height="40"></cbase-linechart> <cbase-linechart timeseries="crew.online" width="69" height="40"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
nerdarea-music/index.html
View file

@ -110,7 +110,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
nerdarea/index.html
View file

@ -92,7 +92,7 @@
<cbase-linechart timeseries="crew.online" width="69" height="40"></cbase-linechart> <cbase-linechart timeseries="crew.online" width="69" height="40"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
robolab-music/index.html
View file

@ -110,7 +110,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
robolab/index.html
View file

@ -85,7 +85,7 @@
<cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart> <cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
soundlab/index.html
View file

@ -96,7 +96,7 @@
<cbase-heatmap timeseries="clima.sound.soundlab" accumulate days="5" width="69" height="40"></cbase-heatmap> <cbase-heatmap timeseries="clima.sound.soundlab" accumulate days="5" width="69" height="40"></cbase-heatmap>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
weltenbaulab-music/index.html
View file

@ -104,7 +104,7 @@
<cbase-userlist interval="10"></cbase-userlist> <cbase-userlist interval="10"></cbase-userlist>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
weltenbaulab/index.html
View file

@ -96,7 +96,7 @@
<cbase-heatmap timeseries="motion.weltenbaulab" accumulate days="5" width="69" height="40"></cbase-heatmap> <cbase-heatmap timeseries="motion.weltenbaulab" accumulate days="5" width="69" height="40"></cbase-heatmap>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
workshop-music/index.html
View file

@ -126,7 +126,7 @@
<cbase-mpd mpd="mechblast" interval="2"></cbase-mpd> <cbase-mpd mpd="mechblast" interval="2"></cbase-mpd>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>

2
workshop/index.html
View file

@ -103,7 +103,7 @@
<cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart> <cbase-linechart timeseries="powermon.load" width="69" height="40"></cbase-linechart>
</section> </section>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10" showrecent="3">bar</cbase-currentstate>
<cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate> <cbase-currentstate id="replicator-beer-1" timeseries="bar.replicator.2" interval="120">berliner 1</cbase-currentstate>
<cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate> <cbase-currentstate id="replicator-beer-2" timeseries="bar.replicator.3" interval="120">berliner 2</cbase-currentstate>
</section> </section>