View source

'''Layout files''' are used to customize the look and feel of [[WeatherPanel]]. These files commonly end with the extension [[.wpl]]. The files themeselves are simple text files, and can be edited using any text editior, such as NotePad. The encoding of the file should be ANSI or UNICODE (big endian). Unicode is recommended because it supports all international characters, but not all text editors may support the Unicode encoding.

==Basics==
The layout file consists of a series of commands that tell WeatherPanel where to place the various elements that make up the display. Each command begins with a semicolon (;), followed by the name of the command in ALL CAPS. Some commands span several lines, and there should not be more than one newline between each line in a command.

===Position===
Many commands require a '''position''' in the following formant:

'''x,y''' where,
*'''x''' is the horizontal position 
*'''y''' is the vertical position

'''x''' and '''y''' can be simple arithmetic expressions, and include the two constants '''W''' (the width of the display area), and '''H''' (the height of the display area). For example '''W-10''' is equivalent to '''230''' in portrait mode (the width is '''240'''), and '''310''' in landscape mode (the width is '''320'''). 

'''NOTE:''' '''W''' always equals '''240''' in portrait mode and '''320''' in landscape mode whether using a '''VGA''' or a '''QVGA''' device, it appears that the software doubles the number for '''VGA''' devices after the arithmetic expression is done so if you have an image 100 pixels in width you wish to always place at the right side of the screen in '''QVGA''' mode it would be W-100 while in '''VGA''' mode it would be W-50 (half the width of the image).

While this can be somewhat confusing, it maximizes compatability between WPL files made for either a VGA or QVGA device. If the software didn't do this when you opened a WPL file made for a VGA device on a QVGA device, all of the spacing of icons, text, ext. would be double what it would show on a VGA device, and if you did the reverse everything would be overlapping on the VGA device.

===Bounding Rectangle===
Some commands require a '''bounding rectangle''' in the following format:

'''x,y,w,h''' where,
*'''x,y''' are the same as above
*'''w''' is the width of the rectangle
*'''h''' is the height of the rectangle

===Colors===
Colors are specified using '''R-G-B''' where,
*'''R''' is the <font color="#ff0000">red</font> component (0-255)
*'''G''' is the <font color="#00ff00">green</font> component (0-255)
*'''B''' is the <font color="#0000ff">blue</font> component (0-255)
Hex colors can be converted to RGB values using converters, such as the one found [http://www.maths.hscripts.com/colorCoder.php here]. To specify the color of the text used in the Today Screen, the keyword '''TODAY''' can be used instead of specifying a '''R-G-B''' color.

==Sections==
The today screen section is split into three parts. First is the “;CUSTOM” section then the “;CURRENT” section and finally the “;FORECAST” section. See [[WeatherPanel Sections]] for more details.

==Commands==
{| border="1" cellpadding="5" cellspacing="0"
|-
! style="background:#efefef;" | Command
! style="background:#ffdead;" | Description
|-
!colspan="2" align="center" style="background:#ffdead;" |General
|-
|DEBUG
|Used to place a square around text commands to see placement
|-
|TEXT<br>''text''<br>''bounding rectangle''<br>''font''
|the text command.  See [[Text Substitution Parameters]].
|-
|IMAGE<br>''filename'' or ''image parameter''<br>''position''
|Used to display a graphic.  See [[Image Substitution Parameters]].
|-
|HEIGHT<br>''height''
|This is used to define the Height of the layout.
|-
|TIME<br>''bounding rectangle''<br>''font''
|Time, either update or current, that users chooses in settings
|-
|GRAPH<br>''options''<br>''bounding rectangle''
|Display a graph of weather conditions.  See [[Graph Options]].
|-
|COMPARE-GRAPH
|
|-
|WINDOW
|
|-
!colspan="2" align="center" style="background:#ffdead;" |Sections
|-
|CUSTOM<br>''width''
|
|-
|CURRENT<br>''width''
|
|-
|FORECAST<br>''width''
|
|-
!colspan="2" align="center" style="background:#ffdead;" |Buttons
|-
|SETTINGS
|Where to place the settings icon
|-
|UP
|This is the Up arrow icon. Used to cycle through Cities.
|-
|DOWN
|The Down arrow. Used to cycle through Cities
|-
|NEXTDAY
|Advance to the next day
|-
|PREVDAY
|Go back a day
|-
|CLOSE
|Close button for popups
|-
|REFRESH
|Refresh button
|-
!colspan="2" align="center" style="background:#ffdead;" |Set / Modify State
|-
|RESET-STATE
|
|-
|CURRENT-FORECAST
|
|-
|SET-CURRENT
|
|-
|FORECAST-''day number''
|
|-
|SKIP-FIRST-FORECAST
|
|-
!colspan="2" align="center" style="background:#ffdead;" |Conditionals (IF-''''conditional''''-BEGIN) (ELSE) (END)
|-
|CURRENT
|
|-
|CURRENT-ACTUAL
|
|-
|HOURLY
|
|-
|FORECAST
|}