| 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?
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, to your display boards) 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,
, is shown at the top of the screen, followed by two smaller label panels
, and and , describing the sections below them. Two
other further 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 |
|---|
|
...
To add a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/panel_type_button.png |
|---|
|
toolbar button
and 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 |
|---|
|
After you select selecting the label panel button, the mouse pointer will transform in changes into a white , cross-like crosshair pointer sign, indicating where that the designer is ready to draw your panel will begin. Drag Click and hold your left mouse across the canvas to size 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:
...
Customising a label panel
To customize customise a label panel, click on the
| Inlineimage |
|---|
| URL | /download/attachments/4817206/pointer_button.png |
|---|
|
button at the top-left corner of the screen and select the 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
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
| Referencemacro |
|---|
| Label | Label panel properties |
|---|
|
window will open,
where you can configure the properties of your label panel. Each tab in this window will de described belowcontaining the following tabs:
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_1.png |
|---|
|
...
The
tab allows you to enter the name you want to appear on the label panel and
to select 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 |
|---|
|
| Field | Description |
|---|
| Hide label | Tick this option if you don't want your panel to contain a label, e.g if display the textual element, such as when you are adding an image or the date and timea stand-alone image in the panel's background property |
| Label | Enter the name text you want to appear on the label panel |
| Text style | Apply Select any styling properties, e.g such as font size, font style or , text colour, etc. |
Background
The
tab allows you to configure the background properties of your label panel.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_3.png |
|---|
|
| Field | Description |
|---|
| Image source | If you want |
...
...
...
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | http://docs.tri-line.com:8090/download/attachments/4817210/label_panel_properties_4.png |
|---|
|
If you would like to add an image source, type the details in the box provided, 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 and choose from colour palette. You can also pick a transparent background, if you prefer. Click on the Apply button to set the colour.
| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_3.png |
|---|
|
The two examples below show the difference between panels with and without lighting effects. The panel with the slight shine has a lighting effect applied, while the solid black panel has no lighting effects.
...
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
size shape of the panel
to suit your particular screen. Enter the preferred values in the boxes provided. , by entering values for its position and size.| Screenshotmacro |
|---|
| Border | false |
|---|
| URL | /download/attachments/4817210/label_panel_properties_6.png |
|---|
|
Click Once you have configured the properties of your Label panel, click on the Save button to apply the any changes.
| 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 |
|---|
|
|