Skip to content

Display

The display module is one of the coolest features of the danceit. It allows to show competition data live on big and small screens during the event.

How does it work

As all other panels in the app, the only requirement for the display panel is a device with a web browser. It can be a computer, a tablet, a smartphone or a TV.

After logging into the display panel you can create as many profiles as you need and use them to display different data on different screens. For example, you can have one profile for the main stage, another for the warm-up area and another for the results area. You can also use the same profile on multiple screens.

The diplay profile can be configured to show:

  • on stage data - the currently dancing and upcoming performances info, awards ceremonies data with rates, results and podium, logos and sponsors
  • schedule - the live schedule that updates automatically as the competition progresses
  • elimination rounds results - qualified performances info visible just after the round is summarized
  • award ceremony results - restults table with rates and the animated podium with the top 3 performances
  • logos - logos of the competition and sponsors
  • text - custom text (or HTML code) that can be used to display any information you want

No special staff needed

The display panel is designed to be independent and smart enough to work without any special staff. It updates automatically as the competition progresses and is ready to use right after logging in and selecting the profile. The moderator and scrutineer are automatically triggering the special events that are displayed on the screen while controlling their modules.

Style

Style of the data presented on the screens can be adjusted as needed. Each profile can have its own style which can be changed at any time without a need to directly access the device that is displaying the data - once some profile is updated, the changes are visible on all devices that are using it.

CSS styling

The core of the style customization is the CSS language. It allows to change literally everything - from the font size and color, through the visibility and position of the elements, to adding animations, videos and visuals.

The guide on how to use basic CSS selectors and properties in the danceit is avaliable here.

Available selectors

The most convenient way of finding out which selectors are available and what on which part they are pointing is to use the Inspect tool in your browser. Here is a short video tutorial on how to do it.

However if you would like to use some copy-paste ready ones, here is a list for you:

Selector Description
.mode-wrapper The highest level componet that includes tha whole visible area during the presentation
.just-category-wrapper Category name container
.full-screen-logo-wrapper A container keeping the competition and partners logos visible when no category or announcement is active
.category-wrapper The container for the category name and the performances
.one-performance-wrapper The container holding the data of the single performance that is currently active
.many-performances-wrapper The container holding the performances starting numbers, when there are more than one performances active
.performance-startnumber A starting number of the performance.
.performance-name The name of the performance.
.performance-team The dance school name, city and country of the performance.
.next-performance-info Information about the current progress, upcoming performances and categories visible at the bottom of the one performance wrapper
.announcement-rates-table The container for the results table visible during the award ceremony
.announcement-podium The container for the podium visible when activated during the award ceremony
.judges-rates-under-podium The container for the judges rates visible under the podium