Difference between revisions of "Template:LCD"

From MegaDrumWiki
Jump to: navigation, search
m
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="margin: 0.5em 0 0.5em 0; padding: 0.5em; border: 1px dotted #B0B0B0; text-align: center; width: 400px;" align="center">
+
<includeonly>{{#css:Template:LCD/style.css}}<div class="lcd-container" align="center" style="float: {{{float|none}}}; clear: {{{float|none}}};">
<table style="background: {{{bgcolor|#00FF00}}}; border: 5px #000000 solid; text-align: center; width: 250px;" align="center" summary="MegaDrum display">
+
<table class="lcd-table" align="center" summary="MegaDrum display" style="background: {{{bgcolor|#00FF00}}};">
 
<tr>
 
<tr>
<td style="letter-spacing:3px; padding: 10px 10px 2px 10px; font-family: 'Courier New', monospace, Verdana; font-weight: bold; font-size: 20px; color: {{{color|#000000}}}">{{{line1|&lt;MegaDrum.info&nbsp;&gt;}}}</td>
+
<td class="lcd-row1 {{{contrast|}}}" style="color: {{{color|#000000}}};">{{{line1|&lt;MegaDrum.info&nbsp;&gt;}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td style="letter-spacing:3px; padding: 2px 10px 10px 10px;; font-family: 'Courier New', monospace, Verdana; font-weight: bold; font-size: 20px; color: {{{color|#000000}}}">{{{line2|(c)D.Skachkov&nbsp;&nbsp;&nbsp;}}}</td>
+
<td class="lcd-row2 {{{contrast|}}}" style="color: {{{color|#000000}}};">{{{line2|(c)D.Skachkov&nbsp;&nbsp;&nbsp;}}}</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
 
''{{{caption|MegaDrum display}}}''
 
''{{{caption|MegaDrum display}}}''
</div>
+
</div></includeonly>
 
<noinclude>{{documentation}}</noinclude>
 
<noinclude>{{documentation}}</noinclude>

Latest revision as of 13:37, 2 August 2010

Documentation

This template is used to illustrate various MegaDrum settings that a user can observe on the LCD screen. Here's how it works in a nutshell: you write the following code:

{{LCD|
color=black|
bgcolor=#00FF00|
line1=<MegaDrum.info >|
line2=(c)D.Skachkov{{nbsp|2}}{{LCD/arrows|black}}|
caption=MegaDrum copyright screen and contrast adjust
}}

And get this result:

<MegaDrum.info >
(c)D.Skachkov  ArrowsUpDown black.gif

MegaDrum copyright screen and contrast adjust


As you can see, there is 2 lines, 16 characters in each. This mimics the type of LCD currently used with MegaDrum.

The format of the template is self-explanatory. Any parameter can be omitted. Defaults are: black characters on green background. The default text is the copyright screen and default caption is "MegaDrum display". Observe the main template to see how it looks.

A note on text formatting: Please note that if a line contains more than a single whitespace character you will need to use the Nbsp template. For example, let's say you need 5 consecutive space characters in a string. You would write this as:

{{nbsp|5}}

Please consult the documentation for more information.

Also consider using &lt; for the "<" character and "&gt;" for the ">" character.

Here's another example. Note that I used a different color/bgcolor here. You can also use standard RGB color representations such as #00FF00.

{{LCD|
color=white|
bgcolor=blue|
line1=█_______________|
line2=________________|
caption=MegaDrum VU Meter screen
}}

Result:

█_______________
________________

MegaDrum VU Meter screen


Finally here is an example settings screen.

{{LCD|
color=white|
bgcolor=blue|
line1=&lt;CustomCurve1{{nbsp|2}}&gt;|
line2=P1:{{nbsp|11}}2{{LCD/arrows|white}}|
caption=Custom curve '''CustomCurve1''' point '''P1''' value
}}

Note that to insert a up/down arrow symbol a special template is used. Here's the syntax:

{{LCD/arrows|color}}

where color can be: black, blue, red, magenta, green, cyan, yellow and white. Please use the same color as you do for the LCD font.

The result is as follows:

<CustomCurve1  >
P1:           2ArrowsUpDown white.gif

Custom curve CustomCurve1 point P1 value


You can also float the LCD screen to left/right using an additional float parameter. For example, here is the previous example right-aligned:

{{LCD|
color=white|
float=right|
bgcolor=blue|
line1=&lt;CustomCurve1{{nbsp|2}}&gt;|
line2=P1:{{nbsp|11}}2{{LCD/arrows|white}}|
caption=Custom curve '''CustomCurve1''' point '''P1''' value
}}
<CustomCurve1  >
P1:           2ArrowsUpDown white.gif

Custom curve CustomCurve1 point P1 value

You should see the container to the right of this text.

To make an example of poor contrast of this screen, add one more parameter: contrast=poor-contrast. This makes the font barely visible. The full example is:

{{LCD|
color=white|
bgcolor=blue|
contrast=poor-contrast|
line1=&lt;CustomCurve1{{nbsp|2}}&gt;|
line2=P1:{{nbsp|11}}2{{LCD/arrows|white}}|
caption=Custom curve '''CustomCurve1''' point '''P1''' value
}}

Here's how it will look like:

<CustomCurve1  >
P1:           2ArrowsUpDown white.gif

Custom curve CustomCurve1 point P1 value