<h2>What is a Label panel?</h2> <p><img style="float: left; margin: 0 12px 10px 0;" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel.png" />A label panel is as the name suggests a panel that can be used to provide a meaningful label for your display board or any area of the display board. e.g. If the display board is showing summary stats for your London site you might want choose something like 'London summary stats' as the name for the label panel. If your display board is showing call information for the service team at London, you may choose to call the label panel 'London Service'. You can also add an image, date and time to a label panel.</p> |
NOTE: There is no limit to the number of label panels you can use on a display board. e.g. you may choose to add a large label panel at the top of the board and smaller label panels on subsections. |
<p>The following example shows how label panels could eventually look on a display board. All the label panels are hilighted in red border. You can see a larger label panel at the top saying <b>'All Telesales'</b> followed by two smaller label panels describing the sections below, <b>'Top Performers'</b> and <b>'Summary Stats'</b>. At the top left hand side of the page, you can see the company's <b>logo</b>, whereas at the top right hand side of the page, you can see the current <b>time</b>.</p>
<img id="border" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/display_board_1_label_panels.png" alt="Label panel" />
<h2>How do I add a Label panel?</h2>
<p>To select the label panel, float over the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/panel_type_button.png" /> button and then click on <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel.png" /> to select, as shown below:</p>
<img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_label_panel_1.png" alt="Add Label panel" />
<p>The list of panels types available immediately disappears and the following blank screen will appear with the white <b>+</b> sign indicating where the panel will begin on the screen</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77228&w=500"><img onclick="screenshotOpen(this);" title="Start panel" alt="Start panel" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77228&w=500"></a>
<p>Simply drag your mouse across the screen and you can size the panel as you can see in below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77229&w=500"><img onclick="screenshotOpen(this);" title="Size label panel" alt="Size label panel" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77229&w=500"></a>
<p><b>HOW DO I NAME AND CUSTOMISE MY LABEL PANEL</b></p>
<p>To customize your label panel, click on the white arrow on the top left hand side of the screen as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77245&w=500"><img onclick="screenshotOpen(this);" title="Customise label panel" alt="Customise label panel" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77245&w=500"></a>
<p>To change the panel properties, simply click on the nut as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77244&w=500"><img onclick="screenshotOpen(this);" title="Change label panel properties" alt="Change label panel properties" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77244&w=500"></a>
<p>The following screen will appear:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=83994&w=350"><img onclick="screenshotOpen(this);" title="Ent lab pan prop" alt="Ent lab pan prop" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=83994&w=350"></a>
<p>Enter the name you would like to appear on the label as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77239&w=350"><img onclick="screenshotOpen(this);" title="label panel name" alt="label panel name" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77239&w=350"></a>
<p>Then choose the style of font you would like to use for your header.</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77238&w=300"><img onclick="screenshotOpen(this);" title="font" alt="font" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77238&w=300"></a>
<p>Then choose the font size you would like to use by simply selecting from the drop-down list as shown here:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77237&w=300"><img onclick="screenshotOpen(this);" title="font size" alt="font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77237&w=300"></a>
<p>To select the text colour, click on the drop-down arrow <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77236&w=100"><img onclick="screenshotOpen(this);" title="colour arrow" alt="colour arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77236&w=100"></a>. This will show the colour palate available:</p>
<p>To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and add the RGB colours to add to your custom palette. You need to click on the <b>Apply</b> button to apply the colour.</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77234&w=500"><img onclick="screenshotOpen(this);" title="font size" alt="font size" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77234&w=500"></a>
<p>If you would like text to appear as bold, italic or underlined, simply click on the required box to highlight as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77246&w=300"><img onclick="screenshotOpen(this);" title="font style" alt="font style" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77246&w=300"></a>
<p><b>Note</b> that you can select more than one option if required e.g. bold and italic and underlined.</p>
<p>If determine the placement, simply click on below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77248&w=300"><img onclick="screenshotOpen(this);" title="placement" alt="placement" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77248&w=300"></a>
<p><b>CREATING BACKGROUND FOR THE LABEL PANEL</b></p>
<p>Click on the 'Background' tab to configure the properties for the background of your label panel as shown below: </p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=83995&w=400"><img onclick="screenshotOpen(this);" title="Ent Lab panel back" alt="Ent Lab panel back" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=83995&w=400"></a>
<p>If you would like to add an image source, simply type the details in the box as shown below. Otherwise leave blank. </p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77247&w=400"><img onclick="screenshotOpen(this);" title="Image source" alt="Image source" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77247&w=400"></a>
<p>You can decide to repeat the image or centre it on the panel, by selecting from the drop-down list as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77248&w=400"><img onclick="screenshotOpen(this);" title="Placement" alt="Placement" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77248&w=400"></a>
<p>To select the background colour, click on the drop-down arrow <a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77236&w=100"><img onclick="screenshotOpen(this);" title="colour arrow" alt="colour arrow" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77236&w=100"></a>. This will show the colour palate available:</p>
<p>To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and add the RGB colours to add to your custom palette. You need to click on the <b>Apply</b> button to apply the colour.</p>
If you would like to apply lighting effects to the label panel, just tick the box as shown here:
<p><b>N.B. Please ensure the background colour selected is different to the text colour on the previous content section for this label panel or you will not see the text.</b></p>
<p><b>LIGHTING EFFECTS</b></p>
<p>If you would like to apply lighting effects to the label panel, just tick the box as shown here:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77249&w=300"><img onclick="screenshotOpen(this);" title="Lighting effects" alt="Lighting effects" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77249&w=300"></a>
<p>The two examples below show the difference between panels with and without lighting effects. The solid black panel has no lighting effects while the one with the slight shine has a lighting effect applied.</p>
<ul class="content">
<li><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77250&w=600"><img onclick="screenshotOpen(this);" title="With LE" alt="With LE" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77250&w=600"></a></li>
<li><a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=77251&w=600"><img onclick="screenshotOpen(this);" title="Without LE" alt="Without LE" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=77251&w=600"></a></li>
</ul>
<p><b>LABEL PANEL MATRICS</b></p>
<p>To define the panel's metrics to suit your particular screen, simply type the required pixel sizes in the boxes as shown below:</p>
<a onclick="return false;" class="screenshot_img" href="/web.ntl?cmd=docs.getsimg&i=83996&w=400"><img onclick="screenshotOpen(this);" title="Ent Lab Panel Met" alt="Ent Lab Panel Met" onerror="imageSubtract(this);" onload="imageSubtract(this);" src="/web.ntl?cmd=docs.getsimg&i=83996&w=400"></a>
<p>Click the <b>Save</b> button to save any changes made.</p> |