template

Screens and Divisions

INTRO TO SCREENS

Screens are at the core of the SignageStudio. The SignageStudio uses Screens to define and represent the width, height and resolution of each of the type of screens used in your physical digital signage network.

Each screen can be thought of as a Template since it can be used throughout all campaigns within a single login account.

Each screen will also be setup with one or more screen divisions (also known as zones). Inside these screen divisions, channels will later be assigned. Channels represent a sequential list of content like videos, scenes and animation.

CREATING A NEW SCREEN

When you open the SignageStudio Screens and Divisions, you will see on the left side a Navigation Menu with several buttons. The first one is named Screens. If you click on it, the application will open the settings for the Screens module.

To create a Screen you use the Screen Wizard, click on the plus (+) sign on the left side of the application, a new window will open and you may begin creating your Screen configuration.

Next we will define the Screen Resolution. The Screen Resolution needs to match the same resolution of your final output device. If you want the presentation to be viewed on a screen with a resolution of 1280 x 720 for example, you'll need to set your screen resolution at 1280 x 720. This case applies to all sizes; SignageStudio supports full HD of 1920 x 1080 resolution and higher.

You may set the Screen Resolution in this window either by using the dropdown menu, which contains preconfigured standard sizes, or you can manually set the width and height. To set the size manually, enter the data in the Width and Height fields respectively.

After you set the resolution of your screen, you can name it. The Screen Resolution and the name of your screen can be changed at any point. You may also choose to assign a folder for your Screen by entering a name in the Folder field. After you set the Screen Resolution and the name, you can set the Orientation of your Screen and the Access Key.

Continue by clicking Next and you'll be presented with a dialog of "Generate Screen Divisions (recommended)"?and a check box next to it. The checkbox is checked by default and will instruct the wizard to automatically create a basic set of Screen Divisions.

After you click the Finish button, a new Screen is created below the Navigation menu, along with the name of your Screen.

SCREEN RESOLUTION

When creating a new screen configuration, remember to set the correct resolution of your screen templates so it's the same resolution as your physical output device.

Let's say for example, that you create two Screens inside the SignageStudio. One has a 1280 x 720 resolution and the other is full HD 1920 x 1080.

You can create two different presentations on two separate screens. The resolution of your screens playing these presentations should be equal to the resolution of your Screens configuration.

- If you have a screen with a resolution of 1280 x 720, and the presentation was built using on a Screen configuration that is smaller or larger than what was specified, you may experience skewed content, unless the ratio of width x height is the same, in which case skewing may not be evident but the content may shrink or stretch.
- If you modify the resolution of the Screen configuration after you've completed building your content, your media files may not maintain their original position.

After you've created the Screen and before you start building the Screen Divisions, you can perform the additional tasks of:

- Resize the Screen by clicking the resize button from the left side of the application
- Drag the handles or margins of the Screen with your mouse
- Modify the Width and Height fields
- Change the name of the Screen
- Assign a new folder to the Screen
- Adjust the orientation
- Adjust the Access Keys

SCREENS AND CAMPAIGNS

Screens are used within one or many Campaigns. We'll discuss the Campaigns in another chapter, but essentially, a Campaign is a place where all your presentation components and everything you have built, will come together.

After you create a Screen, it can be used by any number of. And so if you want the same settings in different campaigns, you don't need to rebuild it from the scratch. We will talk more about the correlation between Screens and Campaigns in another chapter.

In the left side of the application, just below the Navigation menu, you will find additional settings for Screens. These include:

- Add
- Duplicate
- Resize
- Delete

DUPLICATING A SCREEN

On the left side of the SignageStudio (just below the Navigation menu), you will find the duplicate icon. Select your screen and click the Duplicate icon, a dialog message will appear asking you if you are sure you want to duplicate the Screen. If you click YES, a new Screen will be created with the same properties as the original screen.

DELETING A SCREEN

On the left side of the SignageStudio, just below the Navigation menu, if you select the Screen using your mouse (left click), you can click on the DELETE icon to remove the screen. A screen can only be removed if it is not associated with an existing campaign.

SCREEN DIVISIONS

Screens are constructed of individual Screen Divisions. A Screen Division as the name suggests; is a division, or a part of the Screen. To build a presentation, you'll use one or several Screen Divisions.

CREATING A SCREEN DIVISION

After you've created your Screen, the wizard automatically created Screen Divisions for you if the check box "Generate Screen Divisions" was marked.

You create a Screen Division by left clicking the plus (+) sign located in the Screen Divisions panel. You can also add a new Screen Division by clicking inside the screen editor, holding the mouse button down and dragging the mouse in positive coordinates.

ARRANGING AND RESIZING

Each rectangular shape you create with your mouse is a part of the Screen Division. You must pay attention to the shape of your Screen Divisions, because it must match the dimensions of your resources and scenes used in the presentation. For example, if you have an image with the width of 300 and the height of 150, you'll need to create a Screen Division of the same width x height.

When you draw multiple screen division on your Screen, you'll find a useful small icon located on the upper left side which is called the Magnetic Alignment. If you click on the icon, every shape you draw inside your Screen will intersect with other divisions while showing you colored guides. The guides, which are horizontal and vertical lines, will help you be more precise in creating your Screen Divisions and prevent you from accidentally overlapping one division with another.

After you draw a division with your mouse, you can edit precise values. You do this by entering the values in the designated fields located on the right side of the Screens module.

RENAMING SCREEN DIVISIONS

You can rename the Screen Divisions at any time under screen divisions. To rename a Screen Division you first select it and next edit the name under the properties panel.

POSITIONING SCREEN DIVISIONS

Placing screen divisions on your Screen is a key step in building your Signage presentation. The Position of divisions inside the SignageStudio Screen will determine the position of your resources (media, text, RSS news). Choosing the right size and position is vital in order to prevent skewing, stretching and shrinking of resources thus maximizing the definition of the content.

Remember that each screen division is a place holder for the presentation's content.

THE ORDER OF DIVISIONS

Screen divisions can be placed at different levels of the display list. This will determine each division's height in relation to other divisions. If you look at the Screen Divisions panel located at the left side you'll see each division with a tree widget, stacked one on top of the other. The first division on the list is always going to be the lowest on the screen. This means that any other screen division will hide it if the two were to intersect.

You can keep track of the order of your divisions by looking at the right side of the SignageStudio at the Division properties panel. Each number in the Order field represents the stacking position of that particular Region in relation to others. Number 0 is normally the background; or the lowest division that all other screen divisions lay on top of.

You may change the layering order of each division using your mouse. Drag a division and drop it above or below other layered screen divisions to change the order of the display list.

If you draw two divisions on your Screen, and you want one of the divisions to be the Background and the second one a video, the Screen Division for the Background needs to have number 0 in the stacking order list and the Screen Division for the video region would need to set as 1; therefore 1 will be seen on top of 0. Change the order of the two, and the Background will be on top of the video thus hiding it.

BACKGROUNDS AND MASKS

A Background is usually the lowest division of a Screen. It will be viewed when the presentation plays on your output device, behind all the other components of your presentation. But sometimes, a background can be used as a Mask making the other divisions layered below it.

To create a mask follows these steps:

- 1. Create the Background outside the SignageStudio (using Photoshop for example). You'll need to draw some cavities (holes) in your image. These empty spaces will be filled with components and resources that are going to be position in layers (divisions) below the mask. Use transparent png files or Adobe Flash swf files to create transparent cavities
- 2. Save your file/background with transparency enabled. You'll take for example, a simple PNG image and turn it into a mask.
- 3. Upload the file using the Resources > file upload.

The mask will be on top of all the other screen divisions, so other components will show through the cavities. Masks can be used to enhance the appearance of the presentation. Remember, the layering / stacking of divisions you created is important, if you have a certain division and create another on top of it, the one beneath will not be visible unless transparent content is used on the above layer.

MULTI SCREEN

A multiscreen is configuration where a single screen is actually made up of multiple physical displays which are arranged one next to the other, or one on top of the other. Together they form one large display area.

The monitors are daisy changed to one another or to a single PC with multiple video cards. When the presentation is played back, the content will span all monitors. When you setup a multiscreen at your location, you need to pay attention to the resolution in the corresponding setting.

Each Screen Division can have a maximum of 4096 x 4096 pixels using the default canvas system. If a combined multiscreen width or height has a total resolution greater than 4096 x 4096 pixels, the application will use the windowing system.

If you know your multiscreen setup has a higher resolution that is greater than 4096 x 4096 pixels, you should design the presentation without transparency and layering as they are not supported in such high resolutions.

SETTING UP A MULTI MONITOR CONFIGURATION

The SignageStudio will work with as many screens as your video card supports. The only requirement is that the size of a single Screen Division does not exceed 4096 x 4096 pixels. You can however connect as many displays as you like.

Right click a Windows desktop and choose to open display properties to view the number of displays connected and current resolution.

In the above example we connected one screen to a computer with a resolution of 1680 x 1050 pixels and a second screen with a resolution of 1280 x 800 pixels. First, create a large Screen Division. We'll resize the screen division according to the total size of our screens combined.

As we demonstrated earlier, the total width of the output of our screens is 1680 pixels (for the first display) plus 1280 pixels (for the second display), which means a total width of 2960 pixels. Thus, we enter 2960 in the Width property field of the first Screen Division we created.

For the Height, one screen has 1050 pixels and the other 800 pixels. We need to select the larger value of the two: 1050.

Ideally you'll want to use screens that have the same resolution. We used screens with different sizes to demonstrate that the system can also support this type of configuration. The disadvantage is that you'll lose some of the media on the bottom of smaller 1280 x 800 screens (however this can also be accommodated for, by using multiple screen division instead of just using one large screen division).

Next we are going to set the height of the first display to 1050 pixels. We created a single screen division occupying the space of our two displays. This means any media played in this Screen Division will bleed onto the second display.

IMPORTANT: When working with a multiscreen configuration, you should always have the Windows taskbar set as the primary display at 0 coordinates on the x / y axes. This means that all the other screens used in a multiscreen configuration must be on the right side to your primary display (the one with your taskbar). If you set two screen divisions, one with the Width of 1680 pixels for the first screen and one with a width of 1280 pixels, you need to have your taskbar on the first screen (the one that corresponds to the left Screen).

Having the taskbar on the screen located on the right side will return negative values which is an invalid configuration.

The prior section covered using a single screen division that span multiple screens; next, let's add additional screen divisions. We will add one Screen division to the right screen and an additional screen division that will span both screens. The A Screen Division from the image below will play on both screens while the B division will only span the smaller screen.

SCREEN ORIENTATION

Screen Orientation is the vertical or horizontal positioning of a screen. By default, the screen orientation is set to horizontal but you may change it under the orientation settings.

You must also change the settings related to orientation on the physical SignagePlayer PC. In the control panel > display properties there should be an option called Rotate Display located under the Display category. Set the orientation of the display to Portrait or Landscape.

Once changed, set the corresponding width and height values in the Screen Properties panel to match.

ACCESS KEYS

Access keys will determine what a user can and can't do within the SignageStudio. Access Keys are defined by values from 0 to 9 and are assigned by an Enterprise level admin. Review Access Keys chapter for more information.