cwtv
/
rc3-html-infobeamer
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Fahrplan + other fixes

This commit is contained in:
octycs 2020-12-22 21:03:54 +01:00
parent 5f1b207d6a
commit a6d0ea52f4
3 changed files with 267 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
index.css
View File

@ -1,40 +1,106 @@
@font-face {
font-family: orbitron-bold;
src: url(assets/Orbitron-Bold.ttf);
}
@font-face {
font-family: montserrat;
src: url(assets/Montserrat-Regular.ttf);
}
* { box-sizing: border-box; }
body { body {
background: #000; background: #000;
color: #FFF; color: #FFF;
font-family: sans-serif; font-family: sans-serif;
} }
/* === FAHRPLAN === */
#schedule {
position: fixed;
left: 5%;
right: 5%;
top: 10%;
bottom: 10%;
font-family: orbitron-bold;
font-size: 30px;
}
#schedule .header {
margin-bottom: 40px;
}
#schedule .list .item {
margin-bottom: 10px;
}
#schedule .list .item .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#schedule .list .item .sub {
color: #7b7b7b;
font-size: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#schedule-here-container {
position: absolute;
right: 52%;
left: 0;
}
#schedule-main-container {
position: absolute;
right: 52%;
left: 0;
top: 50%;
}
#schedule-other-container {
position: absolute;
left: 52%;
right: 0;
}
#schedule-here-container .header {
color: #b145fb;
}
#schedule-main-container .header {
color: #6820e4;
}
#schedule-other-container .header {
color: #45b5e3;
}
/* === TICKER === */
#bottom-bar { #bottom-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
/*left: 0;*/
margin-bottom: 20px; margin-bottom: 20px;
font-size: 14px; font-size: 14px;
overflow: hidden;
/*padding-left: 100%;
box-sizing: content-box;*/
}
* { box-sizing: border-box; }
/* OUTER CONTAINER */
#bottom-bar {
width: 100%; width: 100%;
overflow: hidden; /* Hide scroll bar */ overflow: hidden;
} }
/* MIDDLE CONTAINER */
#ticker-wrap { #ticker-wrap {
width: 100%; width: 100%;
padding-left: 100%; /* Push contents to right side of screen */ padding-left: 100%; /* Push contents to right side of screen */
} }
/* INNER CONTAINER */
@keyframes ticker { @keyframes ticker {
0% { transform: translate3d(-20%, 0, 0); } 0% { transform: translate3d(-20%, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); }
} }
#ticker { #ticker {
/* Basically move items from right side of screen to left in infinite loop */ /* Basically move items from right side of screen to left in infinite loop */
display: inline-block; display: inline-block;
@ -46,26 +112,25 @@ body {
animation-duration: 120s; animation-duration: 120s;
} }
/* ITEMS */ #ticker > .item{
.item{
display: inline-block; /* Lay items in a horizontal line */ display: inline-block; /* Lay items in a horizontal line */
padding: 10px 36px; padding: 10px 36px;
font-size: 22px; font-size: 22px;
} }
.item > img { #ticker > .item > img {
height: 32px; height: 32px;
vertical-align: middle; vertical-align: middle;
} }
.item > span.user { #ticker > .item > span.user {
color: #fff; color: #fff;
margin: 0 20px; margin: 0 20px;
vertical-align: middle; vertical-align: middle;
} }
.item > span.content { #ticker > .item > span.content {
color: #fff; color: #fff;
vertical-align: middle; vertical-align: middle;
} }

77
index.html
View File

@ -10,6 +10,29 @@
</head> </head>
<body style="background:#000"> <body style="background:#000">
<main> <main>
<div id="schedule">
<div id="schedule-here-container">
<div class="header">
Next up here:
</div>
<div class="list" id="schedule-here">
</div>
</div>
<div id="schedule-main-container">
<div class="header">
Next up on Main:
</div>
<div class="list" id="schedule-main">
</div>
</div>
<div id="schedule-other-container">
<div class="header">
Next up on other channels:
</div>
<div class="list" id="schedule-other">
</div>
</div>
</div>
<div id="bottom-bar" class="visible"> <div id="bottom-bar" class="visible">
<div id="ticker-wrap"> <div id="ticker-wrap">
<div id="ticker"> <div id="ticker">
@ -18,58 +41,6 @@
</div> </div>
</main> </main>
<script> <script src="index.js"></script>
var tweets = {};
function update_tweets() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.oct.re/tweets-rc3.json', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
tweets = JSON.parse(this.response);
update_tweet_ticker();
} else {
// We reached our target server, but it returned an error
console.log(this);
}
};
request.onerror = function(e) {
console.log(e);
};
request.send();
}
function update_tweet_ticker() {
var ticker = document.getElementById("ticker");
ticker.innerHTML = "";
for (var i in tweets.data) {
//console.log(tweets.data[i].text);
var item = document.createElement("div");
item.className = "item";
var img = document.createElement("img");
img.src = tweets.includes.users[i].profile_image_url;
item.appendChild(img);
var user = document.createElement("span");
user.className = "user";
var uname = tweets.includes.users[i].username;
user.innerText = "@" + uname;
item.appendChild(user);
var content = document.createElement("span");
content.className = "content";
var text = tweets.data[i].text;
text = text.replace(/\n/g, "↲");
content.innerText = text;
item.appendChild(content);
ticker.appendChild(item);
}
}
update_tweets();
</script>
</body> </body>
</html> </html>

144
index.js Normal file
View File

@ -0,0 +1,144 @@
var channel_here = "60dd7f55-9f88-4de6-ad98-b9c4e2810300";
var channel_main_1 = "rc1";
var channel_main_2 = "rc2";
var fahrplan = {};
var tweets = {};
/* === EXTERNAL DATA === */
function update_tweets() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.oct.re/tweets-rc3.json', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
tweets = JSON.parse(this.response);
update_tweet_ticker();
} else { console.log(this); }
};
request.onerror = function(e) { console.log(e); };
request.send();
}
function update_fahrplan() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.oct.re/fahrplan.json', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
fahrplan = JSON.parse(this.response);
update_fahrplan_html();
} else { console.log(this); }
};
request.onerror = function(e) { console.log(e); };
request.send();
}
/* === FAHRPLAN === */
var n_here = 3;
var n_main = 3;
var n_other = 7;
function parse_schedule() {
var fahrplan_parsed = {
"here": [],
"main": [],
"other": [],
}
for (var i in fahrplan) {
if (fahrplan_parsed.here.length < n_here
&& (fahrplan[i].roomguid == channel_here || fahrplan[i].room == channel_here)) {
fahrplan_parsed.here.push({
title: fahrplan[i].title,
sub: fahrplan[i].start + " D" + fahrplan[i].day + ", " + fahrplan[i].personnames,
});
} else if (fahrplan_parsed.main.length < n_main
&& (fahrplan[i].roomguid == channel_main_1 || fahrplan[i].room == channel_main_1
|| fahrplan[i].roomguid == channel_main_2 || fahrplan[i].room == channel_main_2)) {
fahrplan_parsed.main.push({
title: fahrplan[i].title,
sub: fahrplan[i].start + " D" + fahrplan[i].day + " @ " + fahrplan[i].room + ", " + fahrplan[i].personnames,
});
} else if (fahrplan_parsed.other.length < n_other) {
fahrplan_parsed.other.push({
title: fahrplan[i].title,
sub: fahrplan[i].start + " D" + fahrplan[i].day + " @ " + fahrplan[i].room,
});
}
}
return fahrplan_parsed;
}
function update_fahrplan_html() {
fahrplan_parsed = parse_schedule();
var els = {
here: document.getElementById("schedule-here"),
main: document.getElementById("schedule-main"),
other: document.getElementById("schedule-other"),
}
els.here.innerHTML = "";
els.main.innerHTML = "";
els.other.innerHTML = "";
for (var group in els) {
for (var i in fahrplan_parsed[group]) {
var el = document.createElement("div");
el.className = "item";
var title = document.createElement("div");
title.className = "title";
title.innerText = fahrplan_parsed[group][i].title;
el.appendChild(title);
var sub = document.createElement("div");
sub.className = "sub";
sub.innerText = fahrplan_parsed[group][i].sub;
el.appendChild(sub);
els[group].appendChild(el);
}
}
}
update_fahrplan();
/* === TWEETS === */
function update_tweet_ticker() {
var ticker = document.getElementById("ticker");
ticker.innerHTML = "";
for (var i in tweets.data) {
//console.log(tweets.data[i].text);
var item = document.createElement("div");
item.className = "item";
// Look up user
var user;
for (var useri in tweets.includes.users) {
if (tweets.includes.users[useri].id == tweets.data[i].author_id)
user = tweets.includes.users[useri];
}
var img = document.createElement("img");
img.src = user.profile_image_url;
item.appendChild(img);
var user_el = document.createElement("span");
user_el.className = "user";
var uname = user.username;
user_el.innerText = "@" + uname;
item.appendChild(user_el);
var content = document.createElement("span");
content.className = "content";
var text = tweets.data[i].text;
text = text.replace(/\n/g, "↲");
content.innerText = text;
item.appendChild(content);
ticker.appendChild(item);
}
}
update_tweets();