...
| 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 add a 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 the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel.png" /> button, 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 a blank screen will appear with the white cross-like pointer sign indicating where the panel will begin on the screen.</p> <p>Simply drag your mouse across the screen and you can size the panel as you can see in below:</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_label_panel_2.png" alt="Add Label panel" /> <h2>How do I customise my Label panel?</h2> <p>To customize your label panel, click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/pointer_button.png" /> button on the top left hand side of the screen. Then click on the <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/nut_button.png" /> icon of the panel that you want to customise, as shon below:</p> <img src="http://www.tri-line.com/common/img/documentation/tim_enterprise/add_label_panel_3.png" alt="Add Label panel" /> <p>The following screen will appear:</p> <img id="border" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_1.png" alt="Label panel properties" /> <h4>Content</h4> <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 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 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>. as shown below. This will show the colour palate available:</p>. To <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 andor add the RGB colourscolour code to add to your custom palette. You need to click on the <b>Apply</b><span class="button">Apply</span> button to apply the colour.</p> <a<img onclickid="return false;border" classsrc="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>http://www.tri-line.com/common/img/documentation/tim_enterprise/label_panel_properties_2.png" alt="Label panel properties" /> <p>If you would like the 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<img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/text_formatting_1.png" />.</p> <p>To determine the placement of your title, 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> <img id="icon" src="http://www.tri-line.com/common/img/documentation/tim_enterprise/text_formatting_2.png" />.</p> <h4>Background</h4> <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> <h4>Metrics</h4> <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> |