Introduction

This article explains how the Word Clock sample was built and how you can learn from digging into it. To access this sample, use the Marketplace tab of the Experiences panel in Composer or Player. You can also download it from this Marketplace page.

The Word Clock sample was designed to display time in a pleasant and unusual way, providing several design options in terms of font, videos and colors. Don't be surprised: minutes are rounded up to the nearest multiple of five.

How it works

The main principles are the following:

• The experience contains a clock from Time Interface Asset
• The hours and minute values from the clock determine which words to show
• The seconds value from the clock is translated into a progress bar displayed at the top of scene
• Several design options are provided through a menu, enabling users to change the background video, font and opacity overlay
• An Excel Interface Asset is used to store design settings so they can be "remembered" and reloaded when the experience starts

Establishing the layout

The most important design trick is to set up the layout properly.

We are using layers as follows:

• a background layer containing
  • A looping video. Ideally, a video that can restart without any visual cues.
  • An overlay element above the video in order to tweak opacity and provide video contrast management for the user
  • A global "all words" list displaying all the words we are going to use. The trick is to use a proportional font so every letter and space is the same size.
• a scene layer containing each individual word that can be displayed based on the time

Highlighting the correct words according to the time

To show or hide the proper words, we use Global Variables:

• a first variable "Hour to display" that is bound to the "Short time" value of the Clock Interface Asset. A custom script converter is used to ensure the proper hour is selected based on the minute status (i.e. 4h50 must return 5 in order to show ten-to-five)
  NOTE: Minutes are rounded up to the nearest multiple of five.
• a second variable "Minutes to display" with the same requirements

Now that we have these two crucial variables, the point is to bind "Visibility" property for each word group to the proper variable, and use a Math & Logic Converter in order to display (or not) a particular group if it's equal to the correct numeric value.

This approach is establish for each individual word in the scene.

Changing background video, opacity, and font

Placed above and outside the scene are several elements:

• 3 colored squares
• a Text Asset using a specific font

All the words (both individual and global lines) have their font color and family bound to these "out of view" elements. By doing this, we can now set up several Toggle Buttons that will enable the user to change color and font for the entire scene by just modifying these elements.

We added a "handmade" gauge with a Linear Converter that will transform the position of the slider to an Opacity value for the overlay square placed above the video.

Finally, an Excel Interface Asset stores user choices and reloads them when the experience starts.