flukeout luke pacholski's design & illustration

On-screen is one of the components of the Catapult platform I’ve been working on at Vibes. It’s a little difficult to explain exactly what it does, but think of it as a Keynote-like presentation builder for interactive content for a Jumbotron!

It lets you design content in the form of decks and hook them up to Twitter or Text content to display messages, photos or run votes. Decks can have multiple slides that contain animated interactive content. Decks are rendered in a browser using HTM, CSS & Javascript, and can be displayed pretty much on any screen at any resolution.

I designed the entire front-end, wrote most of the HTML & CSS and helped with a lot of the front end Javascript too (especially for the widgets that you can use to display content in the decks).

The Dashboard

This is the overview that shows you current campaigns, and which feeds are currently live. From this view you can launch a feed to start showing content, or get access to the remote controller for live feeds.

Campaign Overview

This is the overview page for a campaign that ran during the Sugar Bowl in 2012. It included two decks: a deck where the audience voted on which team they thought would win and a text-to-screen deck that displayed text messages and tweets sent in by the crowd.

The Twitter and Text settings for messaging and the vote are configured on this page. Once they’re set up, they’re made available to the deck editor.

The Deck Editor

This is probably the coolest part of On-Screen. It’s like a web-based keynote (or Powerpoint) editor that lets you create the visuals. This is the Sugar Bowl vote race. Each component of the deck is individually configurable.

Each of the two football players is linked to a vote option and moves across the screen depending on how many votes that option has received. The second slide in the deck shows the team with the most votes when the vote ends.

The Remote Controller

The Remote Controller lets you control what’s displayed on a screen. You can change decks, slides, and control voting. Once a feed is running somewhere, you can control it from any browser.

Here’s how a vote looks

Here’s a quick and dirty preview of how a live vote might look in progress. Players move left and right depending on the vote counts. Each player is a GIF sprite. The field background is a looping CSS animation. At any time, you can use the Remote Controller to switch to the Winner slide to display the results.

Filed under JavaScript, Web.