Closing Ceremonies uses the Events website to display winners at Closing Ceremonies.

This feature uses a Javascript package call reveal.js to display slides in a browser.  That browser is then one of the feeds in the control room at closing ceremonies that is directed to displays in the closing ceremonies venue.

Setting this up for Global Finals needs work to be done at the website file level for each year.  This setup is described below.  After performing the setup below, check out Testing this Year's Closing Ceremonies to see if it all works.

Slide Background

The slide show consists of a background slide that has text displayed on the background.  The backgrounds can be found in the website assets/backgrounds directory.  There is a directory per year this feature has been used.  Checkout the jpg files to see the resolution and dimensions of the background jpegs that have been used in the past.

Pete Sanford's company NXLevel has provided the jpegs in the past.  As they typical run Closing Ceremonies from a control room perspective, they are the best contact for:

  • changes in resolution that might be expected for the year
  • getting a copy of the background image
  • interacting with their team for
    • any practicing prior to Closing Ceremonies
    • being in the correct place to display the winners during Closing Ceremonies 

CSS Changes

reveal.js uses CSS to control aspects of the slides it displays.  assets/js/reveal/css/theme contains the most of the controllable css definitions.  You will find for each Global Finals a closing_{year}.css file for a given year.  When setting up a new Global Finals, create a new version for the current Global Finals from a prior year.  Likely the only change for the current year will be the font color.  Light colors are needed for dark background and vice-versa.  Font sizes are dictated largely by the text that will be displayed.

There is also a bit of CSS to check in the library awards/libraries/ClosingLib.php.  There are a few defines at the top of this file that can be used to adjust the 10-4 finish slides:

  • kSlidePlaceLimit: the number of teams to place on a slide before splitting over 2 slides
  • kTenFourTeamColor: color of 10-4 text
  • kTenFourFontSize: font size for 10-4 text

Flags for New Affiliates

For special awards and 1-3 place finishes, a slide is generated for a specific team that includes:

  • team number, membership name and team name
  • logo for the challenge
  • affiliate flag

The affiliate flags are stored in assets/flags.  By convention the name of these .png files is the affiliate name with any spaces removed.  For example, the Cayman Islands flag image is CaymanIslands.png.  You can check for missing flags by clicking the Test Awards Flag button in Officials=>awards; Misc Actions page.  Flag images can be found on the internet on sites like Wikipedia, converted to .png images and placed in assets/flags directory.  The file name for the flag is stored in the flag field of the table di_affiliates.

Testing this Year's Closing Ceremonies

At the point you want to test this year's Closing Ceremonies you have no winners to display as the tournament has not occurred yet.  Officials=>awards, Misc Actions red tab has a feature to create test place finishes. Clicking the Export Test Data button on this page will generate a .CSV file from the teams listed as attending this year's Global Finals.  This file can then be imported using Import on the same page to provide the data for testing you changes above.  This is typically done on a test system.