Elecard ViCont — User Guide

    | |revisiondate|: 2025-12-23 09:43:39 UTC
    | |revisionid|: 131990b

Note

Due to the constant development of the software and enhancing its capabilities, the web server interface may differ from the interface described in the current document.

1. Entering the System

To log into the system, you should have credentials provided by the administrator. The role assigned to the user defines how this user can interact with the system. You can check your role on the panel in the upper right part of the screen. A corresponding role icon will be displayed next to the username.

2. Administering the Server

Managing Users

There are four types of roles in the ViCont system: Guest, Operator, Administrator, Owner. Below is a comparison table describing each role.

Icon	Role type	Access type	Role description
	Guest	Limited	The user can view all pages and windows with settings, but cannot make any changes.
	Operator	Partially limited	The user can fully manage the system and players, but the role does not imply managing the users.
	Administrator	Unlimited	The user has a full-featured access to the system, including adding new users, assigning user roles, or deleting existing users.
	Owner	Unlimited	There can be only one user with this role in the system. It is created with the admin name by default when a ViCont server is installed for the first time. Such a user cannot be deleted and has the same rights as an administrator.

To view the list of users added to the system and their roles, click the gear icon in the upper right corner of the screen and select the Accounts item. You will see a page with all the users and their roles listed in a table. If you have administrator rights, you can add a new user by clicking the Add button above the table. In the opened window, specify the name of the user and their role in the system. Set a password and confirm it. Click Add.

The administrator can also edit the data of the users, except the Owner. To do that, click on a user’s name to open the configuration window. Specify a new name and/or user role in the opened window. To change the password, click the Change password toggle, specify and confirm a new password value. Click the Apply button.

Note

On the Accounts page, you can edit the settings of other users only. To edit the settings of your own profile, e.g. the password, click the name of the role in the upper right corner and select Edit Profile. Set and confirm a new password. Click Apply.

To remove users, tick their checkboxes and click the Delete button that will appear above the table.

History of Actions

The administrator can access data about the actions of the users in the system. To view this data, click the gear icon in the upper right corner and select the History of Actions item. On the page that opens, set a period for which you want to view the history. Then select a filter from the drop-down list and specify a value for this filter in the field next to it. The following filters are available:

• User — filtering by the user name.

• Method — filtering by the functional part of the system, within which the action was performed.

• Action — filtering by a certain action.

• Status — filtering by the action status: Fail or Success.

You can set multiple filters simultaneously by clicking . To delete one of the filters, click to the right of the field for selecting the filter value. After you are done with settings, click Apply. To remove all filters, click Clear All.

You can download the created report by clicking the Export to CSV button that will appear above the panel of filters after you generate the report.

Statistics

The Statistics page displays statistical information about the playback of files or streams by players. To open the page, click the gear icon in the upper right corner and select the Statistics item.

To display the information, set a period and apply filters. You can filter by the names of players, streams, videos or pictures. To set multiple filters simultaneously, click . To delete a filter, click to the right of the field for selecting the filter value. After you are done with settings, click Apply. To remove filters, click Clear All.

Note

If you don’t set up filters, but click Apply straight away, the page will display information about all streams/files and for all players/groups for the entire period.

The information is output as a table below the panel of filters.

There are two display modes: Summary and Details. You can switch between the modes by clicking the corresponding tabs above the panel of filters.

In case of filtering by files, the Summary section will display the number of successful playbacks and failures for the selected players or groups during the specified period. A playback failure is a situation when the file was not played to the end or was not played at all. For streams, the playback time and URI will be specified for each stream.

In the Details section, you can view the end and start time of playing a certain file or stream, as well as its success status.

The generated report can be saved to your computer by clicking the Export to CSV button that appears next to the page name above after you generate the report.

Player Packages

To manage player packages, click the gear icon in the upper right corner of the page and select Player Packages. You will see a list of uploaded packages on the page that opens.

To upload a new player package to the system, click the Import button above the list and select a player archive in the tar.gz format. Confirm adding the package and click the Upload button. The uploaded package will be displayed in the system and will become available for player installation.

Note

When adding a player package, the system will need some time to upload it into the web interface.

To download a player package, go to the Control column and click the button in the row of the required player. The button appears when you hover over the row.

To delete an uploaded package, tick its checkbox and click the Delete button that will appear above the package list.

Server Settings

To manage server settings, click the gear icon in the upper right corner of the interface and select Server Settings. A window with several tabs will appear.

The Main tab is used to set the following:

• Network interface — the address the player will use to access the web server.

• Port — the port number the player will use to access the web server.

Both values are required to install the player via the web interface.

The Rotation tab is used to set periods for storing player statistics, history of actions, and thumbnails.

In the License tab, you can upload a new license or view the status of the current one.

A license is required to use all the player features. Without it, the player will remain locked, i.e. all parameter changes will not be applied.

To obtain a license, you need to create a certificate request by clicking the Download CSR file button. The downloaded file must be sent to the Elecard Technical Support Team.

Get a certificate from the support team and upload it to the server using the Upload license file button.

After adding the license, the information window will display the following details:

• Maximum number of players — the number of players that can be added to the system.

• Limit of running players — the maximum allowable number of players working simultaneously.

• Demo version/Full version — type of applied license.

• Expiration date — the last day of the applied license validity.

The Versions tab contains information about the versions of the product, server, and UI.

3. Project Structure

Project structure lets you assign a player to a specific zone for content playback. It is a tree-like structure with elements inside of it, where each new level is nested into the preceeding one. Upon being added, a player will be linked to a specific element, meaning it’s crucial to create a structure for your project first.

Let’s assume you need to showcase directions for a subway system. In this case, you can create a catalog that looks like this: subway → subway lines → stations that are part of a subway line → zones that are part of a station, which can include platforms, hallways, lobbies, etc. Next, each zone can have its own set of devices that content will be broadcast to; once you add a player, you can then link it to a certain device.

Let’s recreate the structure from above step by step.

1. Click on the gear icon in the top right corner, then on Project Structure.

2. You will be redirected to a new page: once there, click on Create Catalog.

   

3. This will cause a pop-up window to show up. In the Name field write the name for the first-level element. This could be Subway, for example. In the field Title for sub-elements, outline the header for the next-level elements. Since in the example above next go the subway lines, we could call the next level as Select line. If needed, upload an image for the element you’re about to add: drag and drop it to the upload field or click on . To replace it, click on ; to delete—click on . You can also hide/show the name of the to-be-added element by toggling the Show name switch. Once done with these settings, click on Add.

   

4. To add a next-level element such as a subway line, click on the element you just added and click on Add Element. Repeat the actions from step 3, but make them relevant for this element. If you need a copy of an existing element, tick its checkbox in the table and click on Clone. To edit the cloned element, click on in the column Control. To delete the ticked element, click Delete.

   

5. Create as many levels and elements as you need by repeating step 4.

You can move between structure levels by clicking on elements’ names in the tree to the left. To edit or delete an element, click or respectively.

Once you’re done creating the structure, you can go back home by clicking on the Elecard ViCont logo to the right.

4. Web Interface Sections

ViCont pages are grouped in four sections: Devices, Content, Sources, Emergency. Each section consists of one or several pages. You can move between sections and separate pages using the navigation panel to the left. The content of the current page is displayed to the right of the panel. Below you can find a detailed description of the sections and pages.

5. Devices

The Devices section contains Players and Device Types pages. Access the first page to manage players that ensure content playback transmitted from the web server. Content is received from schedules, which in turn are formed from files (video/audio, images), streams, playlists, web pages, and layouts.

The Device Types page shows the types of device that a player can transmit content to. You can choose one of the pre-configured types or create a new one.

Players

The Players page consists of five elements:

1 — Navigation tree

2 — Sub-elements area

3 — Player management panel

4 — Player information table

5 — Page numbering area

The navigation tree lets you move around the project structure. To access one of the top levels, click on the respective element’s name. You can additionally collapse the tree and leave the project structure fully by clicking on . This way, the page will display the general list of players that were added to the system.

---

The sub-elements area shows elements located in lower levels. Here, by clicking on an element’s name you can go lower down the project structure. In case you have too many elements, use the search field to look up a certain element.

---

In the player management panel you can add a player to the system. To do that, click Add. See the Quick Start Guide for an in-depth explanation on how to install and add a player.

Note

A player is linked to a specific element inside the project structure. When adding a player, double-check that you select the right element. Use the navigation tree and/or the sub-elements area to access the element you need.

If you are outside the project structure, i.e. on the page with the general list of players, you will also get access to the Filters button. Use it to filter players by name, schedule, description, MAC address, and tag. To configure filtering option, click on the button and select the option you need from the Filter by drop-down list. In the field to the right specify the filter value. Click on or to add or delete a filter respectively. Once done, click Apply. To reset filtering options, click Clear All.

---

The player information table displays players’ names, descriptions, assigned schedules, device types, player package versions, player statuses (installed/not installed/offline), MAC addresses, and broadcast start time.

The column Control will let you manage the players. To avoid changing some settings by accident, you can block editing altogether by clicking on . If a player is locked, all changed settings will be applied only once it’s unlocked. For one-click access to a player’s location inside the tree structure, click on . To restart a player, click .

To edit a player’s parameters, click on it’s name, causing the configuration window to open (see Editing Players).

If needed, content playback history is always available. To access it, hover over the History column and click on . You will be redirected to a new page—there you will find a timeline moving to the left. The red vertical line shows the present moment. Above the timeline are the related information and control buttons—the latter are the same as in the Players table. To browse screenshot history in a given period, specify the time frame using from and to fields and click Apply. You will then be given a mosaic of screenshots. To sort the screenshots from oldest to newest or vice versa, click . To reset all filters, click Clear All. To go back to the list of players, click Players.

By ticking one or more checkbox(es) in the list of players, you will be able to access edit, lock/unlock, and restart buttons via the player management panel. Additionally, several exclusive buttons will also become available.

Click on Command button to open a window that will let you alter the state of a player or a device that a player is being operated on. Enter the command name in the Parameter field; next, specify its value in the Value field and finally click Apply. To learn more about the pool of commands and values, contact the Elecard technical support team.

Redirect button lets you configure a player to make it interact with a different server. Click on the button, enter the new server’s address and click Apply.

To delete selected players, click Delete and confirm deletion.

---

The Page numbering area lets you break the list of players into pages. If you have to manage a large number of players, hover over the Display per page drop-down list and choose how many players you would like to be displayed per page: 5, 20, etc. If the number of added players goes over the set limit, players will be broken down into pages automatically.

Editing Players

To edit the device settings, click on its name. This will open the Edit Player window with several tabs in it.

The Player tab displays basic information about the player (name, description, MAC address). The Device type field lets you assign a certain device type to the player. By doing so, you will also create a device-specific schedule that will be linked to the player.

Note

If the list has no device type that fits you, create it on Device Types page.

If you need to install a player package, expand the list in the Package parameter and select a version for installation. Enter the player IP address and port (for Ubuntu-based players, the default port is 22; for Android-based players—5555). Set a login and password.

In the Main tab, you can assign a source of content to the player by selecting the required item from the Schedule drop-down list.

Warning

If you assigned a specific device type with a specific schedule to your player, schedule change will cause the player to malfunction.

In the Streaming interface or subnet, you can specify an IP address or a subnet mask of the network interface for the input stream.

In the Delete unused files after, you can specify a period after which files will be deleted from the storage of the player device. The period starts if a certain file is removed from an active schedule. The period can also start once a certain file’s playback is over, provided that this file is not scheduled for playback in the future.

The Screen rotation setting lets you change the orientation of the player screen.

In the SNMP tab, you can configure SNMP notifications for monitoring player events. The player sends SNMP notifications each time a media file playback starts and ends, or when streaming starts or interrupts due to stream loss.

To create a new community, click the Add Community button. Then specify recipients by clicking the Add Host button and provide an IP address and port. This way, you can add the required number of recipients and communities.

The Events tab enables you to configure the player behavior in case a problem occurs with an input stream. If a schedule with multiple Media layers is assigned to the player, you can configure the player to switch to a lower layer in the following cases:

• The bitrate of the upper layer stream is below the threshold value during the specified period.

• The number of decoded frames in the upper layer stream is below the threshold value during the specified period.

If the schedule contains only one Media layer, you will see a black screen in case of problems with the input stream.

To avoid excessive memory usage, player restart mechanism is employed. If memory usage reaches the threshold value during the specified period, the player will restart.

After switching to a lower layer or restarting the player, the system will take a while to initialize. For each of the mentioned events, you should specify the time that should pass before statistics will start being collected again.

Use the Thumbnails tab to set how often screenshots would be taken as well as their resolution.

As soon as you are done editing the parameters, save changes by clicking the Apply button.

To link a player to a different location, access the Location tab. The tab’s content fully resembles the project structure: Click on the element you want to move the player to, then click Apply. While inside a certain element, you can also use the search bar to look for a specific sub-element.

Mass Editing of Player Parameters

The mass editing tool allows you to change the parameters of multiple players at the same time. To start editing, go to the Players page, tick the checkboxes of the necessary players in the list, and click the edit button . The tabs in the mass editing window are similar to those used when setting up individual players. Go to the necessary tab, select the required parameters by ticking their checkboxes, and make changes. After editing, click Apply.

Device Types

The Device Types page displays information about devices for players to transmit content to. Information is presented inside a table and, among other things, includes devices’ names and descriptions. Columns Width and Height show output content’s width and height in pixels, with Layout showing layout size. Additionally, the Configuration column displays device configuration, which can be single-sided|OneSided| or double-sided . A double-sided device has two distinct screens that can broadcast different content. Each device type is linked to its own schedule, with the latter being created along with a new device type.

You can create a new device type by clicking on Add on top of the table. Enter the device’s name and, if necessary, description. Specify the size of to-be-displayed content. By default, the layout size is 1920×1080, but you can change it if you enter new values in corresponding fields. Click Add.

To configure a device type, click on the name of the device you want to configure. Set new values in the window that popped up and click Apply. To delete a device type, tick its checkbox in the table and click Delete on top of the table.

Warning

After you assign a device type to a player, you will also automatically create a schedule. If you edit or delete a device type, you will have to reconfigure the corresponding schedule.

6. Content

The Content section comprises such pages as Files, Streams, Playlists, Web Pages, Layouts. These are the types of content supported by ViCont players. By selecting a certain page, you can add new content to the system or edit the parameters of already added entities.

Files

The Files page is for adding and editing video or audio files, or pictures. You can use files to make playlists or include them in schedules. Pictures are also used to create layouts. Supported file extensions include:

• video: ts, mp4, mpegts, mpeg, avi, mov;

• audio: mp3, mp4, m4a, aiff, aac, flac, ogg, wav;

• pictures: jpeg, gif, png, bmp.

To add a new file, on the panel above the list of files, select either the Videos, Audios or Pictures tab depending on what type of file you want to add. Click the Import button and select the required file. Then click the Open button, and the file upload window will appear. Add the file description and/or tags; if necessary, rename the file. Click the Upload button.

You can add multiple files at the same time. However, adding a description to multiple files or changing their names is not supported.

Note

When adding a file, the system will need some time to upload it to the web interface.

Once uploaded, the file will appear on the page. To filter uploaded files by name or tag, use the corresponding fields above the file list in the top right corner.

To edit an uploaded file, click on its name, causing a configuration window to pop up. You can change the name, description, and/or tags.

To delete a file, select one or more files and click Delete. Confirm deletion. Please note that deleting a file will also remove it from playlists and schedules in which it is included.

Streams

The Streams page lets you add and edit streams. To add a new stream, click the Add button. In the window that opens, enter the stream name in the Name field. In the Stream field, specify the network address that the media stream is transfered to from the streaming provider non-stop. Ubuntu-based ViCont players support UDP and RTP streaming, while those based on Android support HTTP(S), UDP, RTP, SRT, HLS, and MPEG-DASH protocols. You can protect a stream from unauthorized access by toggling the Use Uplynk DRM switch. If enabled, prior to starting the stream the player will request the Uplynk token from the ViCont server.

After adding a stream, you can change its name or specify a new address, if necessary. To do this, click on the name of the stream that you’d like to edit.

To delete a stream, select one or more streams and click Delete. Confirm the deletion of stream(s).

Note that deleting a stream will also remove it from the schedule(s) that contain said stream.

Playlists

Playlists are sets of elements uploaded to the system. They can be of two types: ordinary and emergency. An ordinary playlist consists of video, audio, and images and can be added to a schedule for planned playback. An emergency playlist is used for organizing emergency broadcasting and cannot be added to a schedule. You can find more information about emergency playlists in the Emergency section.

To create a new playlist, go to the Playlists page and click the Add button.

In the window that opens, enter the playlist name; if necessary, provide a description.

When you enable the Emergency setting, the playlist will be added to the emergency list.

To set up a playlist, in the table to the left choose what type of element you want to add: supported are the Video, Audio, Picture, Playlist, and Web Page types. Then below tick the checkboxes of the elements you need. Move the ticked elements to the playlist by clicking the arrow directed to the right. To delete files, tick them in the playlist (the table to the right) and click Delete.

You can change the order of elements in the playlist. Hover the cursor over the icon at the start of the required element row, press down the left mouse button, and drag the row up or down.

In the Duration column, you can specify the duration for elements that don’t have it originally, e.g. pictures. Go to the column and set the necessary value for the required element in the active field.

Note

You can’t change the duration of elements that have it initially, such as video or audio files. In this case, the field in the Duration column will be inactive.

You can browse the information regarding the newly added element by clicking on in the corresponding bar. When it comes to video, audio, and pictures, you can browse their names and resolutions; in case of playlists you can browse lists of elements, in case of web pages—web pages’ names and links.

After the playlist is formed, click the Add button.

If necessary, you can edit a previously created playlist. Click on the playlist’s name, make the necessary changes, and click the Apply button.

You can delete one or more playlists by selecting them and clicking the Delete button.

Confirm the deletion in the window that opens.

Note that when deleting a playlist, it will be deleted from schedules it was included in, if any.

Complex Playlists

A playlist is considered complex in case it includes a web page and (or) a nested playlist.

Note

Playlist inside a playlist has to be simple, meaning that it can only be comprised of basic entities such as audio or video files as well as pictures.

By adding a playlist to another playlist, you will see the latter having an icon in the corresponding line within the Structure column. Note that when inside a schedule, a nested playlist will have an extra frame surrounding it, with the only info available being the total duration of the elements inside the nested playlist.

Web Pages

On the Web Pages page you can add a link to a web page to add it to a schedule in the future. During the playback of the schedule, the web page will be displayed to the user who can interact with it, e.g. using a remote control.

To add a link, click Add, enter the web page Name and URL. If necessary, provide a description and specify a refresh interval. Click Add.

You can edit a web page by clicking on its name.

Layouts

Note

Working with layouts is supported by Ubuntu-based players’ version 1.4.2 and higher, as well as Android-based players of all versions.

On the Layouts page, you can add new layouts to overlay streams or video files that should be played. The layout structure resembles the structure of a web page. You can create layouts in the native ViCont editor or in an external editor. The layout created in ViCont is called a native layout and can be changed in the ViCont editor. An archive with a native layout comprises image files, if used, and the index.html file that defines a set of overlay objects and their order, forming the layout structure. A layout created in an external editor cannot be changed in ViCont. An archive with such a layout also includes the renderer.js script, a system file required to play video within the layout.

A list of added layouts is displayed as a table with the following columns:

• Name — displays the layout name.

• Description — contains the layout description.

• Type — indicates the layout type. The icon marks layouts created in the ViCont editor that can be edited after creation.

If you click on a layout’s name, you will open a window where you can change the layout’s name and description. In the case of native layouts, you can also edit their structure in the ViCont editor. To open it, click on a natve layout’s name and then on Editor. When hovering over a table row, the button for downloading the archived layout will also appear in the Control column.

You can make a layout’s copy by ticking its checkbox and clicking on Clone—the latter will pop up after you tick one checkbox or more. To delete a layout, click Delete.

ViCont Layout Editor

Explained below is the process of creating and editing layouts in the ViCont editor. To open the editor and start working on the layout, click the Create button on the panel above. In the window that opened, set the layout width and height. The size used by default is 1920×1080 pixels. Click Apply. To get back to the screen with the list of layouts, click .

In the center of the editor, there is a work area. It is in this area that you create a layout by adding and combining items. Above the area, there is a panel where you need to write the layout name. Here, you can also provide the layout description, change the scale of the work area, or view the current layout size.

To the left of the work area, there is the Items panel. It will display a list of all items that you add to the layout. The display order of items can be set up by changing the order of these items on the panel. You can also rename an item by double-clicking it and typing a new name. To the right of the work area, there is the Insert panel where you can select items to insert. Clicking an item adds it to the work area. At the same time, the Clone and Delete buttons appear to the left above the work area. When you click the first button, a copy of the selected item is created in the work area. Clicking the second button deletes the selected item. To the right, there also appears the Clear All button. It deletes all blocks and clears the work area. After clicking it, you need to confirm the action by clicking Delete.

The right part of the screen contains settings of added items. Some settings are common for all or the majority of items. Others are available only for single items. You can find a list of available items and their individual settings in the table below:

Icon	Item	Settings	Note
	Text	Font: Arial/Courier New/Monospace/Times New Roman Size: size in pixels Font style: normal/italic/bold/bold italic Effects: none/strikethrough/underline Align: Left/Center/Right/Top/Middle/Bottom
	Picture Shape Video	Lock aspect ratio: enabled/disabled	When enabled, the option keeps the aspect ratio of the item when resizing it with the mouse. To set the size manually, disable the option by clicking the Lock aspect ratio toggle.
	Clock	24-hour time: enabled/disabled Show seconds: enabled/disabled Time zone: time zone in UTC	All the Text item settings are available for the Clock item, except effects.
	Date	Format: a date in the DD.MM.YYYY, YYYY-MM-DD or MM/DD/YYYY format	All the Text item settings are available for the Date item, except effects. You can also select a UTC time zone.
	Ticker	Scroll direction: right-to-left/left-to-right Ticker speed: a value in seconds that shows the time taken by the ticker to go all the way from appearing to disappearing	All the Text item settings are available for the Ticker item, except align.
	Weather	City: a drop-down list in which you can select a city to display weather for Displayed city name: a box in which you can enter a city name to display on the screen City search: a box to search for a city by typing its name Unit of measurement: Degree Celsius (°C)/Degree Fahrenheit (°F) Show picture: show/hide Show name: show/hide the city name	All the Text item settings are available for the Weather item, except effects. To find a city, enter its name and click the green circle with a check mark.
	QR code	Name: a line where you have to specify the QR code’s name Information: a line where you have to specify the information for display when scanned; this could be plain text, a link, etc. Size: a line where you have to set the QR code’s size in pixels Code color: a color palette that lets you choose the QR code’s color Background color: a color palette that lets you choose the color for the QR code’s background

In the table below, you can find settings that are common for the majority of items.

Name	Description	Application	Items
X and Y coordinates	Lets you position items on the layout.	Type values in X and Y fields or drag the item with the mouse.	All items
Width and height	Lets you set the size of an item.	Pull the item to change its size. If the Lock aspect ratio option is enabled, the height and width of the item will change on the ratio basis. To set the values of height and width manually, disable the option.	All items
Color	Lets you set the color of a font or a shape.	Click the palette under the Color heading. Select a color by clicking on the palette area or type in values according to the RGB model. Move the slider along the scale under the palette to move between palette shades. To select a color from an image, use the Eyedropper tool, which is to the left of the scale. Click the tool icon and then click the image area with the color you need.	All except Picture and Video items
Opacity	Lets you set the opacity of the font, picture or shape.	Move the slider to select the required opacity value.	All except the Video item
Display priority	Lets you set the priority for displaying a certain item if several items overlay.	Bring the selected item forward, backward, to the front or to the back by clicking the corresponding icons.	All items
Fix	Lets you prohibit the movement of an item in the work area.	Click the Fix toggle to enable the option.	All items

Creating Layout in the ViCont Editor

In this section, you can find an example of creating a layout. It comprises two rectangles: a horizontal one, which is called a header, and a vertical one, which will be a sidebar to the left. In the center, there is an item where the video is played. You can choose any design you want.

1. To insert the side bar image, click the Picture item in the right part of the screen. You will see a panel with available images.

   

2. If there is no image you need, add it. To do this, click the Import button and select the image file. If necessary, specify a name, description or tags. Click the Upload button. To delete an image, click the Delete button.

3. Select the uploaded file and click Apply. The image will appear in the work area.

4. To position the image, type in X and Y coordinates or drag the image with a mouse. If required, set the size by pulling the image. You can also provide size values in the Width and Height fields manually. To activate these fields, disable the Lock aspect ratio parameter.

   

5. Add a shape for the header. Click the Shape item and set its size and position.

6. Change the shape color. Click the palette to the right, select the Eyedropper tool, and then click the blue color area on the sidebar.

   

7. Add the logo image and set its size and position.

   

8. Add a Video item, position it, and set its size. For the video to display correctly, the item should have the same aspect ratio as the video, e.g., 16:9.

   

   Tip

   A layout doesn’t have to contain video. You can scale one picture over the entire area and use it as a static screensaver.

9. Type in the layout name in the field on the panel above if you didn’t do it at the very beginning.

10. Click the Create Layout button in the upper right part of the screen. To get back to the list of layouts without saving, click the Cancel button.

    Note

    If there are no items in the layout, the Create Layout button is disabled.

Creating Layouts in the External Google Web Designer Editor

This guide will help you to create layouts in an external editor called Google Web Designer. Based on the guide, you can use any other tool of your choice.

1. Go to the Google Web Designer website and download the app.

2. Install the app on your computer. After the installation, it will open by default.

3. In the opened window, select Create new file. Select HTML on the left and then enter the file name and location. Click OK.

   

4. In the window that opened, go to the Responsive tab in the left part of the screen and check the Responsive layout checkbox so that your layout is displayed the same on screens with different resolutions and equal aspect ratios.

   

5. In the same tab, set the layout size corresponding to the resolution and aspect ratio of the screen it will be shown on. The tab should display a list of available sizes. If it does not, place the cursor under the All sizes caption. The cursor will turn into a double-headed arrow. Press down the left mouse button and drag downwards to expand the list of pre-defined sizes. Select the size you need or specify your own by scrolling down to the Add custom size item at the bottom of the list and typing in the required width and height values in the corresponding field. If the field is not active, hover the cursor over it and click on the appeared pencil icon. First, enter width. Then, press Tab on the keyboard to move on to entering height. Press Enter.

   

6. To get back to editing the document, click on the Edit base document item above the list with sizes.

7. You can zoom out the layout using controls in the lower right corner of the work area where the layout is.

   

8. Create a layout based on the example above. There is a tool panel to the left in the Google Web Designer window. To create a rectangle for the sidebar, select the Element tool . You can select instruments using hot keys. For the element tool, it is D. You can also hover the cursor over any tool, and its name will be displayed. By default, the element tool creates div elements, but you can switch it to images as well by clicking a corresponding icon in the upper left part of the screen.

9. To create an element, place the cursor in any spot of the work area, press down the left mouse button, and drag the cursor in any direction. At this point, the position and the size of the element don’t matter.

10. Next, you need to align the element by the left side and set its dimensions. You can move the element with the Selection tool (hot key V) from the tool panel, or you can use the Position and size section in the Properties tab. The tab is in the lower right corner of the screen. In the same tab, you can specify the width and height of the element. After you finish, click the Use percentages icon below the width field.

    

    Important

    You need to use percentages for all elements so that they are scaled when the screen resolution changes.

11. You can fill the element you have added with color, add an image to it, or do both. The color palette is in the upper right corner of the program’s screen in the Color tab. Images can be imported with CTRL + Shift + i.

    

12. Add another element for the header and style it accordingly.

13. After you finish with decoration, insert a div element in the empty space. This element will be used to display your video content. Then, go to the Timeline area below the work area, find there the element you have created, double click it, and give it the main_render name.

    

14. If you add other elements over the video window (e.g., text), they should be in a separate div.

15. Download the renderer.js file (a link to open the file). Add the file to the root folder of your project. It is the folder where the HTML file of your layout is.

16. In the upper right part of the Google Web Designer window, switch to the Code view and add the <script src="./renderer.js"></script> line before the closing </body> tag, which is at the very end of the layout HTML file.

    

17. In the same mode, check the background-color property in the body block. The property value should be transparent. You can add this property manually; otherwise, delete the background-color property string.

    

18. Save the project and close Google Web Designer.

19. Rename the HTML file of your layout in the root folder as index.html.

20. Turn the project folder into a zip archive and upload it to ViCont.

Uploading the Layout to ViCont

To upload a ready-made layout, click the Import button on the layouts page and select the layout archive. Next, specify the Layout name and, if necessary, its description. Click the Upload button to finish importing the layout. You can remove an unused layout by selecting it in the table and clicking the Delete button. To apply the layout, add it to a schedule.

Note

When adding a layout, the system will need some time to upload it into the web interface.

7. Sources

The Sources section contains the Schedules page, where you can create and manage schedules. See below for an in-depth overview.

Schedules

A schedule is a content source for players to take content for playback from. It is formed automatically after you assign a specific device type to a player. Still, you can create new schedules on your own.

Previously created schedules are displayed on the page in the form of a table. If you want to generate a completely new schedule, click on the Create button. To edit an existing schedule, click on its name to open the configuration window.

The creation or editing of a schedule takes place on a separate page that provides a set of tools to form an order in which media files and layouts are played. The page comprises five parts:

1 — General settings panel

2 — Drag-and-drop item area

3 — Page numbering

4 — Schedule control panel

5 — Timeline

On the general settings panel, fill in the Schedule name. If necessary, provide the schedule description in the Description field. If a schedule was created while you were assigning a device type to a player, the device type’s name as well as the size of to-be-displayed content will be presented in the Device type field.

---

The drag-and-drop item area contains seven tabs: Video, Audio, Picture, Stream, Playlist, Web page, and Layout. These are the types of blocks you can add to the schedule.

Located to the right from the tabs is the list of items available for the selected device type. To add a new video, audio, picture, or layout, click on Import and select the file you need. Apart from importing a layout, you can also create a new one by clicking on Create. To add a new stream, playlist, or web page, click Add and fill out all the necessary fields in the window that popped up. You can sort items by date added or name in ascending or descending order. To do that, click on Sort by and select the option you need.

To the right from the drag-and-drop item area, you will find the filter panel . Any type of item can be filtered by name via the field Enter name. Filtering by tag is available for video and audio files as well as pictures: click on the Enter tags field and choose one or more corresponding tag(s).

Pictures and videos can additionally be filtered via size: to do that, specify the necessary values in the Width and Height fields.

Note

If a schedule was tailored for a player with a specific device type, pictures and videos will be automatically filtered by size for said type. That’s one of the reasons why an image or a video of wrong size will not be displayed in the item area if you try to import it. To enable the display of all available videos and pictures, disable filtering by size by clicking on in the width and height fields.

Each item’s card has multiple of icons on it. If you click in the card’s top right corner, you will open a detailed summary of that item. To edit item information such as name or description, click in the card’s lower right corner. To delete an item, tick its checkbox in the top left corner, causing the Import button to be replaced with Delete. Click on it and confirm deletion.

Attention

If you delete a file while in the Schedules page, you will delete it from the system entirely—that includes the playlists that it was added to.

---

The page numbering area lets you break the list of items into pages. If you have to manage a large number of items, hover over the Display per page drop-down list and choose how many items you would like to be displayed per page: 5, 20, etc. If the number of added items goes over the set limit, players will be broken down into pages automatically.

---

Below are the schedule control panel and timeline, with the latter consisting of several layers. To add a block to the schedule, simply drag it onto the required timeline layer Optionally, you can add a block by clicking on Add Block: This way, you will open the configuration window which can also be accessed via the Edit button. To manage an item added to the timeline, click on it; this will cause the Clone, Edit, and Delete buttons to appear on top of the panel. You can also delete items without leaving the Schedules page. To do so, hover the cursor over an item in the drag-and-drop area, then tick the corresponding checkbox, click the Delete button that popped up above, and confirm deletion.

Warning

If you delete an item from the drag-and-drop area, you will erase it from the system entirely.

Layers

By default, each schedule consists of Media and Layout layers. Each layer contains a set of blocks that define which object to play and its duration.

The Layout layer allows you to add layouts that will appear in parallel or on top of the media content playing in the background. A schedule can contain only one such layer. You can select only the Layout block type for this layer.

The Media layer allows for adding media files (videos/audios/pictures), streams, playlists, and web pages to be displayed. A schedule can contain multiple Media layers. For the Media layer you can select such blocks as Video, Audio, Picture, Stream, Playlist, Web page.

By default, schedules formed for double-sided players consist of only one Layout layer and two Media layers to ensure that different content is shown on two screens.

Schedules formed for single-sided players as well as user-created schedules consist of one Layout layer and one Media layer.

When it comes to user-created schedules, you can add an extra Media layer that will work as a redundant streaming source. To create a new Media layer, click the Add Layer button on the schedule control panel. In the window that opens, specify the Name of the layer, then click the Add button. Please note that the streaming priority is given to the top layer. To change the order of layers, click on the Layer Order button and arrange the layers in such a way that the desired layer is placed at the top. Save changes.

You can give the Media layer its own name. Hover the mouse over the word Media, and you will see the icon to the left of it. Click on the icon and specify a new name in the opened window. If necessary, change HTML id. Click Apply. You can delete an additional Media layer by hovering over the layer and clicking on the cross.

Blocks

To add a block to the schedule, go to the necessary tab in the drag-and-rop item area. Press and hold down the left mouse button on the selected item and drag it directly on the timeline layer using the drag-and-drop function.

Note

You cannot drag a block on a layer that does not support this block. The system will not let you do this, and the layer’s color will turn red.

The vertical red line on the timeline indicates the current moment. Each time you drag a block, you will also see a black line that helps to position this block accurately based on the moment in time.

The duration of Video, Audio, and Playlist blocks is set in advance. For other blocks, the duration is calculated when you drag them onto the schedule. The timeline scale is also taken into account. For example, the timeline scale is displayed in minutes, and the currently visible timeline part is 10 minutes. As a result, when you add a block without duration, its length will be set to 2 minutes.

The timeline is always positioned based on the last added block. The timeline scale and block sizes will also adjust automatically. For instance, if you add a 10-second video, the timeline scale will be set to seconds. If you then add a 20-minute playlist, the scale will change to minutes, and the size of the first block will decrease. You can zoom in and out of the timeline as required. To zoom, place the mouse pointer inside the timeline and scroll the mouse wheel until the desired zoom is achieved.

Blocks cannot overlap in time. The next block should start only when the previous one is over. Imagine, there are two blocks in the schedule with a 10-minute gap between them. If you want to insert another block in the gap, the duration of that block should fit in the gap.

The color of the block corresponds to the selected type and allows you to quickly assess the content of the schedule:

• olive — layout;

• green — video;

• purple — audio

• blue-gray — picture;

• brown — stream;

• blue — playlist;

• gray — web page.

The block type is also indicated on the block together with the name of the selected item and its duration. For a Stream block, there is also the source URI.

To change the block timing or playback order, click on the block with the left mouse button and drag it to the right to schedule it for future playback or to the left to schedule it for earlier playback. To change the playback duration, drag one of the block’s vertical edges to set the desired duration.

Note

A block can only be moved within a layer.

To adjust the display of blocks, click the Fit button. As a result, the timeline scale will change and all blocks will be displayed on one screen. The Now button allows you to jump to the current moment on the timeline. You can delete all blocks and clear the schedule with the Clear All button.

If you select a certain block, you will also see the Clone, Edit and Delete buttons on the schedule control panel. Clicking the first button creates a copy of the selected block. To change the block settings, for example duration, click the Edit button; to delete the block, click Delete or click the cross at the top right corner of the block.

You can select multiple blocks at once to move, duplicate, and delete them together. To do this, hold down the Ctrl button on the keyboard and select the required blocks by left-clicking each of them one by one.

Apart from dragging, you can add blocks using the Add Block button. This method allows you to set a desired playback start and end time even for blocks with duration specified in advance (videos, playlists). Click the button and select the type of the block you want to add. Once the block type is set, select the media option you want to use from the Item drop-down list. Each option in this list corresponds to an item previously added to the system. Note that once you have added a block, you cannot change its type or the item to be played.

Next, set the Start Time and the End Time for the item playback. If required, you can specify the Duration instead of the end time. Otherwise, you can enable the Endless block setting, and the player loops playing the block, beginning from the indicated start time. The endless block will take the entire remaining time on the layer, and you will not be able to add other blocks after this block. Click on the Add button to complete the creation of the new block.

8. Emergency

On the Emergency page, you can configure the demonstration of an emergency playlist for players. An emergency playlist is a set of files that can be assigned to players for emergency broadcasting of media content. It can be used to quickly pause the current demonstration of media content and start playing a pre-compiled playlist. Only Emergency-type playlists can be used for emergency demonstration.

Important

Emergency playback supports video files only.

To configure emergency playlist playback for several plaers, go to Emergency ➝ Players. Tick the required players and in the Common Playlist drop-down list select the playlist you need. To initiate broadcasting, click Play. Once a player initiates playlist’s playback, you will see that on the Players page, said player will have an icon in the Status column. To stop an emergency playlist’s playback, click Stop.

To assign an emergency playlist to a single player, go to the Playlist column, select the required playlist from the drop-down list, and click the button. When hovered over, the button changes color to green.

After you click on , it will then change into . Click on the latter to stop the emergency playlist.