Add green screen support

Change to OpenFest2021
Merge pull request #2 from tochev/master
2021-08-11 16:57:10 +03:00 · 2021-08-08 14:13:13 +03:00 · 2020-11-14 19:52:22 +02:00 · 2020-11-06 16:47:52 +02:00 · 2016-11-14 23:33:51 +02:00 · 2016-11-04 16:51:20 +02:00
9 changed files with 113 additions and 46 deletions
--- a/background.mp4
+++ b/background.mp4
--- a/cropped-background.mp4
+++ b/cropped-background.mp4
--- a/index.html
+++ b/index.html
@ -1,6 +1,6 @@
 <html>
  <head>
-    <title>OpenFest 2014 Interlude</title>
+    <title>OpenFest 2021</title>

    <meta charset="utf-8">

@ -13,9 +13,9 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/lib/js/head.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.6.2/js/reveal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/lang/bg.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.7/ractive.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/lang/bg.min.js"></script>
    <script src="schedule.js"></script>
  </head>
  <body>
@ -24,8 +24,12 @@
      </div>
    </div>

+    <!-- <video id="background_video" src="background.mp4" loop autoplay /> -->
+    <!-- TODO: fix display of speakers -->
+
    <script id="agenda_template" type="text/ractive">
      <section id="agenda">
+        <h3>{{room}}</h3>
        <table class="reveal">
          <tbody>
            {{#pastEvents}}
@ -70,41 +74,32 @@

    <script id="current_talk_template" type="text/ractive">
      <section id="current_talk">
-        <h3>В момента</h3>
-        <h1>{{currentEvent.title}}</h1>
-        <p>{{currentEvent.description}}</p>
+        <h4>В момента</h4>
+        <h2>{{currentEvent.title}}</h2>
+        <p>{{currentEvent.abstract}}</p>
      </section>
    </script>

-    <script id="current_speaker_template" type="text/ractive">
+    <script id="speaker_template" type="text/ractive">
      <section>
-        <h3>Лектор</h3>
-        <h1>{{name}}</h1>
-        <p>{{description}}</p>
-      </section>
-    </script>
-
-    <script id="next_speaker_template" type="text/ractive">
-      <section>
-        <h3>Следващ лектор</h3>
-        <h1>{{name}}</h1>
+        <h4>Лектор</h4>
+        <h2>{{name}}</h2>
        <p>{{description}}</p>
      </section>
    </script>

    <script id="next_talk_template" type="text/ractive">
      <section id="next_talk">
-        <h3>Следва</h3>
-        <h1>{{nextEvent.title}}</h1>
-        <p>{{nextEvent.description}}</p>
-        <h4>({{nextEvent.startTime.fromNow()}})</h4>
+        <h4>Следва</h4>
+        <h2>{{nextEvent.title}}</h2>
+        <p>{{nextEvent.abstract}}</p>
+        <h5><i>({{nextEvent.startTime.from(now)}})</i></h5>
      </section>
    </script>

    <script id="slides_template" type="text/ractive">
      <section data-state="update-safe">
-        <h1>OpenFest</h1>
-        <h2>2014</h2>
+        <img src="logo.png">
      </section>

      {{#eventCount}}
@ -116,7 +111,7 @@
          {{/currentEvent}}

          {{#currentEvent.speakers}}
-            {{> current_speaker_template}}
+            {{> speaker_template}}
          {{/currentEvent.speakers}}

          {{#nextEvent}}
@ -124,18 +119,24 @@
          {{/nextEvent}}

          {{#nextEvent.speakers}}
-            {{> next_speaker_template}}
+            {{> speaker_template}}
          {{/nextEvent.speakers}}
        </section>
      {{/eventCount}}

      <section>
-        <h2>Tweet</h2>
-        <h1>#OpenFest</h1>
+        <h1>#OpenFest2021</h1>
+        <h2>в Twitter</h2>
      </section>
    </script>

    <script type="text/javascript" src="ractive-init.js"></script>
    <script type="text/javascript" src="reveal-init.js"></script>
+    <script type="text/javascript">
+      //  use for green screen background
+      if ($.urlParam('background')) {
+          $('body').css('background-color', $.urlParam('background'));
+      }
+    </script>
  </body>
 </html>
--- a/logo.png
+++ b/logo.png
--- a/openfest.png
+++ b/openfest.png
--- a/ractive-init.js
+++ b/ractive-init.js
@ -20,5 +20,7 @@ function refreshEvent() {
                  currentEvent: schedule.currentEvent(),
                  nextEvent: schedule.nextEvent(),
                  futureEvents: schedule.futureEvents(),
-                  eventCount: schedule.allEvents().length});
+                  eventCount: schedule.allEvents().length,
+                  now: schedule.now(),
+                  room: schedule.room()});
 }
--- a/reveal-init.js
+++ b/reveal-init.js
@ -42,7 +42,7 @@ Reveal.initialize({
    autoSlide: 10000,

    // Stop auto-sliding after user input
-    autoSlideStoppable: false,
+    autoSlideStoppable: true,

    // Enable slide navigation via mouse wheel
    mouseWheel: false,
@ -72,10 +72,7 @@ Reveal.initialize({

    // Bounds for smallest/largest possible scale to apply to content
    minScale: 0.2,
-    maxScale: 8.0,
-
-    parallaxBackgroundImage: 'openfest.png',
-    parallaxBackgroundSize: '1920px 1080px'
+    maxScale: 8.0
 });

 Reveal.addEventListener('update-safe', function() {
--- a/schedule.js
+++ b/schedule.js
@ -1,20 +1,53 @@
-function Schedule(hallId) {
+function Schedule(hallId, date, setPageTitle) {
    var events = [];

+    var apiEndpointPrefix = 'https://cfp.openfest.org/api/conferences/8';
+
+    var pageTitle = 'OpenFest';
+    var room = '';
+
+    var nextLectureDelayMinutes = 4;  // show the current lecture as next for the first N minutes
+
+    $.getJSON(apiEndpointPrefix + '/halls.json', function(data) {
+        room = data[hallId]['name']['bg'];
+        if (room === undefined) {
+            room = '';
+        }
+    });
+
    this.update = function() {
-        $.getJSON("https://cfp.openfest.org/schedule.json", function(data) {
-            var scheduleEvents = $.map(data[hallId], function(event) {
-                event['startTime'] = moment(event['startTime']).subtract(2, 'hours');
-                event['endTime'] = moment(event['endTime']).subtract(2, 'hours');
-                return event;
+        $.getJSON(apiEndpointPrefix + '/events.json', function(eventsData) {
+            $.getJSON(apiEndpointPrefix + '/slots.json', function(slotsData) {
+                $.each(slotsData, function(slotId, slot) {
+                    $.extend(eventsData[slot['event_id'].toString()], slot);
+                    $.extend(eventsData[slot['event_id'].toString()], {"slotId": slotId});
+                });
+                var scheduleEvents = $.map(eventsData, function(event, eventId) {
+                    event['id'] = eventId;
+                    event['startTime'] = moment(event['starts_at']);
+                    event['endTime'] = moment(event['ends_at']);
+                    event['hallId'] = event['hall_id'];
+
+                    if (event['startTime'].date() !== date) {
+                        return null;
+                    }
+                    if (event['hallId'] !== hallId) {
+                        return null;
+                    }
+
+                    return event;
+                });
+
+                events = scheduleEvents.sort(function (a,b) {return a['startTime'].isBefore(b['startTime']) ? -1 : 1});
            });
-            events = scheduleEvents;
        });
+        this.setPageTitle();
    }

    this.upcomingEvents = function() {
+        var now = this.referenceTime();
        return _.select(events, function(event) {
-            return event.startTime.isAfter(moment());
+            return event.startTime.isAfter(now);
        });
    }

@ -24,7 +57,7 @@ function Schedule(hallId) {

    this.currentEvent = function() {
        var latestEvent = _.last(this.pastEvents());
-        if (typeof(latestEvent) != 'undefined' && latestEvent.endTime.isAfter(moment())) {
+        if (typeof(latestEvent) != 'undefined' && latestEvent.endTime.isAfter(this.now())) {
            return latestEvent;
        } else {
            return undefined;
@ -36,14 +69,38 @@ function Schedule(hallId) {
    }

    this.pastEvents = function() {
+        var now = this.referenceTime();
        return _.select(events, function(event) {
-            return event.startTime.isBefore(moment());
+            return event.startTime.isBefore(now);
        });
    }

    this.allEvents = function() {
        return events;
    }
+
+    this.now = function() {
+        now = $.urlParam("now");
+        if (now) {
+            return moment(now);
+        } else {
+            return moment();
+        }
+    }
+
+    this.referenceTime = function() {
+        return this.now().subtract(nextLectureDelayMinutes, 'minutes');
+    }
+
+    this.room = function() {
+        return room;
+    }
+
+    this.setPageTitle = function() {
+        if (setPageTitle) {
+            $('title').text(pageTitle + " room=" + room + " date=" + date);
+        }
+    }
 }

 $.urlParam = function(name){
@ -56,4 +113,4 @@ $.urlParam = function(name){
    }
 }

-var schedule = new Schedule(parseInt($.urlParam('roomId')));
+var schedule = new Schedule(parseInt($.urlParam('roomId')), parseInt($.urlParam('date')), true);
--- a/styles.css
+++ b/styles.css
@ -2,6 +2,7 @@ body {
    width: 100%;
    height: 100%;
    overflow: hidden;
+    /* background-color: #06172A; */ /* BigBlueButton background */
 }

 body,
@ -13,7 +14,16 @@ body,
 .reveal h5,
 .reveal h6 {
    font-family: "Roboto Condensed", tahoma, verdana, arial, sans-serif;
-    text-rendering: optimizeLegibility;
+    font-weight: bold;
+    -webkit-text-stroke: 0.01em black;
+}
+
+#background_video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -10000;
+    opacity: 0.4;
 }

 .reveal section img {
@ -27,7 +37,7 @@ tr.past_event {
 }

 tr.next_event {
-    color: #EEEEEE;
+    color: #FFFF00;
 }

 tr.future_event {
@ -36,4 +46,4 @@ tr.future_event {

 tr td:last-child, tr th:last-child {
    text-align: right;
-}
+}
Author	SHA1	Message	Date
Tocho Tochev	1cf6847d18	Add green screen support	2021-08-11 16:57:10 +03:00
Tocho Tochev	aea60ac5a7	Change to OpenFest2021	2021-08-08 14:13:13 +03:00
Petko Bordjukov	5801f6581b	Merge pull request #2 from tochev/master Modify interlude for OpenFest2020 and clarion	2020-11-14 19:52:22 +02:00
Tocho Tochev	e411b8d037	Modify interlude for OpenFest2020 and clarion	2020-11-06 16:47:52 +02:00
Petko Bordjukov	b6ae81d2e9	Merge pull request #1 from user890104/openfest-2016 Modify interlude for OpenFest 2016	2016-11-14 23:33:51 +02:00
Vencislav Atanasov	c355c4c655	Modify interlude for OpenFest 2016	2016-11-04 16:51:20 +02:00
Petko Bordjukov	e8f8632530	Remove debugging artifact	2015-08-12 21:23:52 +03:00
Petko Bordjukov	0dcfa7efa0	Merge branch 'ittour-json-export'	2015-08-12 21:18:35 +03:00
Petko Bordjukov	dc11a85f41	Calculate end time from next event's start time	2015-08-12 21:17:46 +03:00
Petko Bordjukov	baa7ec4b66	Update for VarnaConf	2015-08-12 21:17:43 +03:00
Petko Bordjukov	d67539e16a	Update the schedule	2015-08-12 21:03:48 +03:00
Petko Bordjukov	cd3f9b93a7	Update for BurgasConf 2015	2015-07-04 19:19:52 +03:00
Petko Bordjukov	8e6238c014	Add missing check	2015-07-04 19:19:35 +03:00