...
| HTML |
|---|
<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 id="border" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/displayadd_boardlabel_designpanel_41.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> |