| 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 Labellabel panel?"></a> |
What is a label panel?
A The label panel is generally used to "label" areas of allows you to add textual labels anywhere on your display board, but also to add . These labels can consist of static text, dynamic text (such as the current date and time or an image, ), and images (such as your company logo) by specifying no text but choosing a background image.
The following example below shows how label panels - highlighted in red - look appear on a display board. A ; a large label panel panel,
, is shown at the top of the screen, followed by two smaller label panels
, and and , describing the sections below
. At them. Twofurther label panels were used to add a company logo (at the top-left of the page
, a label panel was used to add the company logo and another one, ) and the current date and time (at the top-right of the page
, to add the data and time).
| 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, e.g. you may choose to add a large label panel at the top of the board and smaller label panels on subsections. |
| HTML |
|---|
<a id="Adding a label panel"></a> |
...
To add a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/panel_type_button.png |
|---|
|
toolbar button
and then select 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 |
|---|
|
The list of available panels types will disappear and the mouse pointer will transform in a white, cross-like pointer sign indicating where your panel will begin. Simply drag your mouse across the screen and you can size the panel 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 |
|---|
|
...
Customising a label panel
To customize your customise a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/pointer_button.png |
|---|
|
toolbar button
on the top-left corner of the screen, then select the 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
to customise the , 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 following screen will appearThe
| Referencemacro |
|---|
| Label | Label panel properties |
|---|
|
window will open, containing the following tabs:
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_1.png |
|---|
|
Content
Enter The
tab allows you to enter the name you
would like want to appear on the label
, then choose the style of font you would like to use for your header as well as the font size, by selecting from the drop-down list.To select the text colour, click on the drop-down arrow as shown below. This will show the colour palate available. 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 type in the RGB colour codes to add to your custom palette.You will need to click on theApplybutton to set the chosen color.panel and apply any styling properties, such as font size, font style, text colour, etc.| Screenshotmacro |
|---|
| Border | false |
|---|
| Shadow | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_2.png |
|---|
|
If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight
| Inlineimage |
|---|
| URL | /download/attachments/4817210/text_formatting_1.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
The
tab allows you to configure the background properties of your label panel.| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/textlabel_formattingpanel_2properties_3.png |
|---|
|
.At the end, click on theSavebutton to save any changes made.
Background
Click on theBackgroundtab to configure the properties for the background of your label panel.
If you would like to add an image source, simply type the details in the box provided, as shown in the sceenshot below, otherwise leave blank. You can decide to repeat the image or centre it on the panel, by selecting from the drop-down list of the
field.To select the background colour, click on the drop-down arrow; this will show the colour palette available. 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 type in the RGB colour codes to add to your custom palette. You can also pick a transparent background, if you prefer. You will need to click on theApplybutton to set the chosen colour.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_3.png |
|---|
|
If you would like to apply lighting effects to the label panel, just tick the box as shown here:
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | http://docs.tri-line.com:8090/download/attachments/4817210/label_panel_properties_4.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 Plus\ssldata\_globaladmin |
|---|
|
. 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
The
tab allows you to define the shape of the panel, by entering values for its position and size.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_56.png |
|---|
|
Metrics
To define the panel's metrics to suit your particular screen, simply type the required pixel sizes in the boxes provided, then Once you have configured the properties of your Label panel, click on the Save button to save apply any changes made.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_6.png |
|---|
|
| HTML |
|---|
<a id="Label panel - overview video"></a> |
Label panel - overview video
For a live demonstration on of how to design and customise a label panel, watch the video below:
| Vimeovideomacrovideomacro |
|---|
|
| Image | label_panel.png |
|---|
| Video | label_panel_plus.mp4 |
|---|
|
|