| HTML |
|---|
<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 |
|---|
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. |
...
| Summary_list |
|---|
| Task1 | What is a label panel? |
|---|
| Task2 | Adding a label panel |
|---|
| Task3 | Customising a label panel |
|---|
| Task4 | Label panel - overview video |
|---|
|
| HTML |
|---|
<a id="What is a label panel?"></a> |
What is a label panel?
The label panel allows you to add textual labels anywhere on your display board. These labels can consist of static text, dynamic text (such as the current date and time), and images (such as your company logo) by specifying no text but choosing a background image.
The example below shows how label panels - highlighted in red - appear on a display board; a large label panel,
, is shown at the top of the screen, followed by two smaller label panels, and , describing the sections below them. Twofurther label panels were used to add a company logo (at the top-left of the page) and the current date and time (at the top-right of the page).| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/display_board_1_label_panels.png |
|---|
|
...
| Info |
|---|
There is no limit to the number of label panels you can use on a display board. |
| HTML |
|---|
<a id="Adding a label panel"></a> |
Adding a label panel
To add a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/panel_type_button.png |
|---|
|
...
toolbar button to expand the list of panel types and choose the | Inlineimage |
|---|
| URL | /download/attachments/4817204/label_panel.png |
|---|
|
...
button, as shown below:| Screenshotmacro |
|---|
| Border | false |
|---|
| Shadow | false |
|---|
| URL | /download/attachments/4817210/add_label_panel_1.png |
|---|
|
...
After selecting the label panel button, the mouse pointer changes into a white crosshair pointer, indicating that the designer is ready to draw your panel. Click and hold your left mouse button, starting at the point defining the upper-left corner of your new panel. Whilst still holding down the left mouse button, drag the marquee that will appear to the point that will define the lower-right corner of your panel, as shown below:
| Screenshotmacro |
|---|
| Border | false |
|---|
| Shadow | false |
|---|
| URL | /download/attachments/4817210/add_label_panel_2.png |
|---|
|
...
| HTML |
|---|
<a id="AddCustomising Labela label panel" />
<h2>How do I customise my Label panel?</h2>
<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>></a> |
Customising a label panel
To customise a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/pointer_button.png |
|---|
|
toolbar button to switch to panel selection mode. Hover your mouse pointer over the label panel you want to customise and click on the | Inlineimage |
|---|
| URL | /download/attachments/4817210/nut_button.png |
|---|
|
icon, when it appears towards the top-right corner of the panel, as shown below:| Screenshotmacro |
|---|
| Border | false |
|---|
| Shadow | false |
|---|
| URL | /download/attachments/4817210/add_label_panel_3.png |
|---|
|
The
| Referencemacro |
|---|
| Label | Label panel properties |
|---|
|
window will open, containing the following tabs:Content
This tab allows you to enter the name you want to appear on the label panel and apply any styling properties, such as font size, font style, text colour, etc.
| Screenshotmacro |
|---|
| Border | false |
|---|
| Shadow | false |
|---|
| URL | /download/attachments/2359400/label_panel_properties_2.png |
|---|
|
| Field | Description |
|---|
| Hide label | Tick this option if you don't want your panel to display the textual element, such as when you are adding a stand-alone image in the panel's background property |
| Label | Enter the text you want to appear on the label panel |
| Text style | Select any styling properties, such as font size, font style, text colour, etc. |
Background
This tab allows you to configure the background properties of your label panel.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/2359400/label_panel_properties_3.png |
|---|
|
| Field | Description |
|---|
| Image source | If you want your panel to display an image, type its source here, e.g. | Referencemacro |
|---|
| Label | C:\Program Files (x86)\Tri-Line\TIM Enterprise\ssldata\_admin |
|---|
|
. Remember, the path is relative to the folder on disk from which the web content is served, and is different for each class of web user |
| Image style | Choose how the image should be displayed |
| Colour | Choose the background colour of the panel; if you are adding an image, you may want to select so that this does not interfere with your image |
| Apply lighting effects to this panel | Tick this option to apply a shine effect to the entire panel; if you are using the panel to display an image, this may adversely affect how it appears |
Metrics
This tab allows you to define the shape of the panel, by entering values for its position and size.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/2359400/label_panel_properties_4.png |
|---|
|
When you have configured the properties of your Label panel, click on the Save button to apply the changes.
| HTML |
|---|
<a id="Label panel - overview video"></a> |
Label panel - overview video
For a live demonstration of how to design and customise a label panel, watch the video below:
| Videomacro |
|---|
| Image | label_panel.png |
|---|
| Video | label_panel_enterprise.mp4 |
|---|
|