Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Designing a display board video

Videomacro
Imagecustomising.png
Videocustomising.mp4

How to design a display board

To design a display board, locate the object in the Directory, click on it and select Design from the drop-down list, as shown below:

Screenshotmacro
URL/download/attachments/2359392/display_board_design_1.png

If you opted to design your display board from scratch, the following screen will appear:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/2359392/display_board_design_2.png

To add or edit panels in your display board, use the toolbar on the left-hand side of the panel. Each toolbar button is described below:

...

Centred_img
URL_imghttp://docs.tri-line.com:8090/download/attachments/4817204/web_panel.png
TextWeb panel
Link/display/enterprise/Web+panel
URLhttp://docs.tri-line.com:8090/download/attachments/4817204/web_panel.png

 

dfd

Display_boards_buttons
TextThe aspect ratio button
Img/download/attachments/4817206/aspect_ratio_button.png
fdf

This button allows you to change the ratio of the screen. The defaults available are 16:10 and 4:3, but the board can be stretched to any value you set.

...

This button allows you to save any changes made to the canvas.

 

 

 

 

HTML
<p>Once you have added a new Display Board, you need to actually design what you would like to appear on it. To do this, simply left-click on it and select <span class="button">Design</span> from the pop-up menu, as shown below:</p>

<img class="screenshot" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_design_1.png" alt="Display board properties" />

<p>The following screen will then appear, which is the design mode of a display board:</p>

<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_design_2.png" alt="Display board properties" />

<h2 style="line-height: 50px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/pointer_button.png" /> The pointer button</h2>

<p>The pointer (or selector button) as it's sometimes called allows you to select an object and alter it's properties.</p>
HTML
<table width="100%" cellspacing="0" cellpadding="5" border="0" class="sectionMacro">
	<tbody>
		<tr>
			<td valign="top">
				<h2 style="line-height: 50px; margin-top:0px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/panel_type_button.png" /> The panel type button</h2>

				<p>To select the type of panel you would like to add to this blank canvas, click on the black button on the top left-hand side of the screen and it will expand, as shown here:</p>

				<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_design_3.png" alt="Display board properties" />

				<p>You can choose between the  panel types presented below:</p>

				<ul style="list-style-type: none;">
    				<li class="design_panel"><img class="design_panel" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel.png" /> <b><a href="Label panel"> Label panel</a></b> - Label panels allow you to put meaningful labels on your Display Boards. Label panels can also contain logos, pictures or dynamic data such as date and time.	 </li>
    				<li class="design_panel"><img class="design_panel" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/leaderboard_panel.png" /> <b><a href="Leaderboard panel">Leaderboard panel</a></b> - Leaderboard panels allow you to order and display results for any object in your directory. Results can be positioned in either ascending or 
descending order based on any call property you want.</li>
					<li class="design_panel"><img class="design_panel" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/summary_panel.png" /> <b><a href="Summary panel">Summary panel</a></b> - Summary panels allow you to display key information clearly and concisely. As with all panels, the text, font, colour, etc. are completely customisable.</li>
    				<li class="design_panel"><img class="design_panel" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/rss_panel.png" /> <b><a href="RSS panel">RSS panel</a></b> - Provide your teams with up-to-the-second information on any subject by adding any number of RSS feeds.</li>
					<li class="design_panel"><img class="design_panel" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/web_panel.png" /> <b><a href="Web panel">Web panel</a></b> - Use web panels to integrate full or partial web pages into your Display Boards from third-party systems such as CRM, accounting or ACD equipment.</li>
				</ul>
			</td>
			<td width="1px" valign="top">
				<div style="border-width: 1px;" class="panel video">
					<div class="panelContent">
						<h4>Panel type customisation</h4>
						<p><a rel="nofollow" class="external-link" href="http://www.tri-line.com/en/products/video.php?id=13">
						<img class="screenshot naked no_border" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/displayboard_design_video.png" alt="Panel type customisation video" /></a></p>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>
HTML
<h2 style="line-height: 50px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/aspect_ratio_button.png" /> The aspect ratio button</h2>

<p>The aspect ration button, as the name suggests allows you to change the aspect ratio of the screen. The defaults available are 16:10 and 4:3. Those ratios are only really a guideline.  When you open the final board it will stretch to whatever you set.</p>

<h2 style="line-height: 50px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/grid_button.png" /> The grid button</h2>

<p>The grib button is a simple toggle switch that shows the grid or hides it.</p>


<h2 style="line-height: 50px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/settings_button.png" /> The canvas settings button</h2>

<p>This button allows you to change the canvas settings for the background e.g. background colour.</p>

<h2 style="line-height: 50px;"><img class="header_icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/save_button.png" /> The save button</h2>

<p>If you have made any changes to your Display board, simply click on the save button to apply these changes.</p>