FrontPanel user interfaces (“panels”) are constructed from “components” – graphical devices that interface to your design or serve some decorative function. The interfaces are described in FrontPanel “profiles” which are written in a text file format known as XML. The XML profile contains structure which defines where each component exists on a panel as well as the connections that component has to your FPGA design. FrontPanel XML files end with the extension XFP.
The following figure shows most of the FrontPanel components available. Some components do not have a corresponding GUI representation.
XML stands for eXtensible Markup Language and is used in documents containing structured information. The syntax for XML is defined at http://www.w3.org/TR/WD-xml. For its part, XML does not define the content but rather how the content is organized. FrontPanel uses XML because the standard is well-known and there are many tools available to read, write, edit, and parse the content. It is also easily human-readable so you can read and write FrontPanel profiles in a text-editor with ease.
A complete tutorial of XML is beyond the scope of this text. What is provided here is a basic tutorial of the aspects of XML required to compose FrontPanel profiles. Please refer to the enormous on-line resources available for a complete understanding of XML, its applications, and the tools available for working with XML.
Basic Structure for FrontPanel
The basic FrontPanel XFP file has the following structure:
<!-- A basic FrontPanel Example --> <resource version="126.96.36.199"> <object class="okPanel" name="panel1"> <title>Main Panel Title</title> <size>180,70</size> ... Main Panel component XML will go here ... </object> </resource>Code language: HTML, XML (xml)
This simple example defines a single panel. Note the first line starting with <?xml…> and the <resource version=”188.8.131.52”> … </resource> are required content in any FrontPanel profile.
Comments in XML can appear anywhere outside of normal markup. They have the form as shown below. Note that the string “–” is not allowed within a comment and that the comment must end with exactly two “-” (hyphen) characters and the “>” character.
<!-- This is some comment text. --> <!-- This text is NOT allowed because it is incorrectly terminated: --->Code language: HTML, XML (xml)
Start-Tags and End-Tags
The start- and end-tags enclose an XML element. In the listing below, the XML element is an “object” and its content is defined between the first line (Start-Tag) and last line (End-Tag). This particular element contains a child element, “label” which also has (as a requirement) a Start-Tag and an End-Tag.
<object class="okStaticText"> <label>Hello there</label> </object>Code language: HTML, XML (xml)
The “object” element in the above example contains one attribute, “class” which is set to “okStaticText”. In FrontPanel, all of the graphical components are “object” elements with an attribute which defines what type of component it is.
All XML component types and value names are currently case sensitive. That is, “okPushButton” is not a valid component name, but “okPushbutton” is.
Element Data Types
All FrontPanel components have sub-elements which specify certain properties of the component. These sub-elements are listed with each component and take a certain data type as their value. The various data types available along with an example and description are shown in the table below.
|POSITION||50,75||Position represented as: x,y in pixels.|
|SIZE||40,80||Size represented as: width,height in pixels. Many controls will accept -1 as a width and/or height and automatically compute the best value.|
|TEXT||Hello World||A text string. No quotes are necessary.|
|HEX BYTE||0x3F||An 8-bit hexadecimal number. The leading “0x” is required.|
|NUMBER||7||Numeral, range is determined by object type.|
|BIGNUMBER||1790x7FFFFFF||Like NUMBER, but also supports hexadecimal with a “0x” prefix. Decimal values are supported to 31 bits. Hexadecimal values are supported to 63 bits.|
|COLOR||#2040A3||24-bit hexadecimal HTML color format #RRGGBB.|
|STYLE||ROUND||The STYLE type is object-dependent and contains one or more styles which can be or’ed together using the pipe (“|”) symbol.|