Florian Wesch

The 33C3 info beamer setup

Posted Jan 09 2017 by Florian Wesch

<p>At the recent 33C3 conference in Hamburg I was running the information screens in all halls as well as on all venue TV screens again. Similar to the last 3 years I have been using info-beamer hosted for that. Here is a small summary and links to the source code.</p><p><strong><nobr>TL;DR</nobr></strong>: 33C3 was fun and you can find all the source code for the base info-beamer package <a href="#allrelevantlinks">at the end of this post</a>.</p><h2 class="doc-header" id="whatisthisallabout">What is this all about?</h2> <p>The 33rd annual <a href="https://en.wikipedia.org/wiki/Chaos_Communication_Congress" rel="external,noopener">Chaos Communication Congress</a> aka 33C3 was held between Christmas and New Year's Eve in Hamburg. More than 12000 participants come together for 4 days. I've been running the information screens for the fifth time now. Here is what this looks like (photo by <a href="https://twitter.com/snoato/status/813677091719938048" rel="external,noopener">@snoato</a>):</p><p><img class="framed-image" loading="lazy" src="https://cdn.infobeamer.com/s/5c843e/img/33c3-hall.jpg" title="The setup at 33c3" /></p><p>In the picture you see one of the four big halls where talks were held. If you're interested, you can also <a href="https://media.ccc.de/c/33c3" rel="external,noopener">watch</a> all of them online. In addition to the installation in the halls, there where dozens of TV screens installed all over the place as well as two additonal screens installed in the <a href="https://das-sendezentrum.de/" rel="external,noopener">Sendezentrum</a>. They too were controlled by info-beamer hosted.</p><h2 class="doc-header" id="thesetup">The setup</h2> <p>Each hall had its own Raspberry Pi 3 connected to the AV system. A single Pi provided the feed for all TV screens. All Pis were running <a href="/product/info-beamer-hosted">info-beamer hosted</a> and connected to the internet through an ethernet connection.</p><p>There were three different types of content on the screens: The halls had information about the next talk in the hall as well as information about other talks starting in the other halls (that's what you can see in the picture above). The TV screens showed information about all upcoming talks. Meanwhile the screens in the Sendezentrum displayed information about the next podcast and the current show.</p><p>Some of the screens were displaying twitter activity for the #33c3 hashtag as well as images and videos advertising various projects and events (see below). Additionally all screens had a scroller that showed tweets and other useful information. </p><h2 class="doc-header" id="the33c3package">The 33C3 package</h2> <p>All of that was powered mainly by a single info-beamer hosted package. Like last year, the <a href="https://github.com/info-beamer/package-33c3" rel="external,noopener">complete source code is available on github</a>.</p><p>For 33C3 I've developed a new approach to scheduling and layout. <a href="https://github.com/info-beamer/package-32c3-screens" rel="external,noopener">Last year's version</a> uses a mostly fixed layout of scroller, main content and an optional sidebar. This version is more flexible: Basically you can define tiles with changing sizes that show the various content modules available. Hiding a scroller can for example easily be done by moving the scroller tile out of the screen and resizing the main content tile. All content is scheduled with a fixed duration. Multiple devices using the same schedule will show the same tiles at the same time. But this also means that it is not possible to have content of variable duration. So the schedule is pretty rigid.</p><p>Each tile can show various content and additonal content can easily be added to a running presentation. The source code offers tiles for twitter, <a href="https://github.com/frab/frab" rel="external,noopener">frab</a>, a scroller and of course a way to show images and videos. Unlike last year's installation it was possible to freely show multiple tiles on the screen at the same time.</p><h2 class="doc-header" id="thecustom33c3cms">The custom 33C3 CMS</h2> <p>For this year's installation I created a custom content management system (CMS). Visitors could log into the system using their github account and upload images and short videos that would be shown on all screens. The goal was to provide an easy way to advertise various interesting projects or events happening during the conference. Here is what the dashboard looked like once a user logs in:</p><p><img class="framed-image" loading="lazy" src="https://cdn.infobeamer.com/s/5c843e/img/33c3-cms-dashboard.png" title="Custom 33c3 CMS dashboard" /></p><p>The CMS was a big success. A total of 131 different images and videos were uploaded by over 100 different users. Every five minutes an automated process imported new images and videos into info-beamer hosted which then distributed them to all connected devices. </p><p>You can see the <a href="https://github.com/info-beamer/33c3-cms" rel="external,noopener">complete source code on github</a>.</p><p>A new <a href="/doc/building-packages#packageinpackagelinkformat">package importer</a> type was used for that. You can see the code that generates this format <a href="https://github.com/info-beamer/33c3-cms/blob/4fcbe14772643ac83e6d11fc6e2269912b8aff40/main.py#L476" rel="external,noopener">here</a>. This is a complete info-beamer package that can be imported into any info-beamer.com account. For the 33C3 conference it was imported into the 33C3 account and added as a subpackage to the <tt>package-33c3</tt> package mentioned above. As a result each time it changes, all devices get automatically synced and received new videos/images.</p><h2 class="doc-header" id="massivemultiplayerpong">Massive multiplayer pong</h2> <p>Since everything was running smoothly from the very start of the conference I had some time to work on new ideas. So why not create a realtime massive multiplayer <a href="https://en.wikipedia.org/wiki/Pong" rel="external,noopener">pong game</a> that visitors of the conference can play together on the giant screen in the halls while waiting for the next talk?</p><p><img class="framed-image" loading="lazy" src="https://cdn.infobeamer.com/s/5c843e/img/33c3-pong.jpg" title="33C3 pong on the big screen" /></p><p>I quickly put everything together in a few hours. This included writing a small <a href="https://github.com/info-beamer/33c3-pong/blob/master/main.py" rel="external,noopener">websocket backend</a>, a mobile and desktop compatible webpage through which you <a href="https://github.com/info-beamer/33c3-pong/blob/master/templates/pong_game.jinja" rel="external,noopener">control the game</a> as well as the <a href="https://github.com/info-beamer/33c3-pong/blob/master/static/tile.lua" rel="external,noopener">code</a> needed to show it inside the 33C3 info-beamer package running on the Pis. You can see the (somewhat cleaned up) result in the <a href="https://github.com/info-beamer/33c3-pong" rel="external,noopener">source repository</a>. To help you understand how everything plays together, here is a totally professional architecture diagram:</p><p><img class="framed-image" loading="lazy" src="https://cdn.infobeamer.com/s/5c843e/img/33c3-pong-architecture.jpg" title="How pong works. Kind of." /></p><p>The game went live (<tt>git push info-beamer master</tt>, yeah!) on the third day of the conference (of course without having to restart anything, thanks to how info-beamer works) and at peak time more than 100 players tried to keep the ball on the screen together.</p><h2 class="doc-header" id="summary">Summary</h2> <p>All in all 33C3 was fun and it was great running the info-beamer screens again. All of them run through for the complete duration of the conference without any problem whatsoever. I'm looking forward to 34c3. See you there in december 2017!</p><h2 class="doc-header" id="allrelevantlinks">All relevant links:</h2> <ul class="circle"> <li>Source code for the 33C3 package running on all screens: <a href="https://github.com/info-beamer/package-33c3" rel="external,noopener">https://github.com/info-beamer/package-33c3</a></li> <li>Source code for the 33C3 custom CMS: <a href="https://github.com/info-beamer/33c3-cms" rel="external,noopener">https://github.com/info-beamer/33c3-cms</a></li> <li>Source code for the 33C3 pong game: <a href="https://github.com/info-beamer/33c3-pong" rel="external,noopener">https://github.com/info-beamer/33c3-pong</a></li> </ul> <ul class="circle"> <li>Twitter account for info-beamer, so you can keep up to date (and maybe know early what might happen on 34c3): <a href="https://twitter.com/infobeamer" rel="external,noopener">https://twitter.com/infobeamer</a></li> <li>info-beamer hosted. If you are a programmer you'll love some of the features that make it incredibly easy to work with: <a href="/product/info-beamer-hosted">info-beamer hosted page</a>.</li> </ul>

Read more...


info-beamer.com offers the most advanced digital signage platform for the Raspberry Pi. Fully hosted, programmable and easy to use. Learn more...


Get started for free!

Trying out the best digital signage solution for the Raspberry Pi is totally free: Use one device and 1GB of storage completely free of charge. No credit card required.


Follow @infobeamer on twitter to get notified of new blog posts and other related info-beamer news. It's very low traffic so just give it a try.

You can also subscribe to the RSS Feed RSS feed.


Share this post:

Share using Twitter


Questions or comments?
Get in contact!