The First FrontPanel example contains the following files:

When the profile is loaded into FrontPanel, it creates a user interface that looks like this:

The file First.v contains the Verilog description of the project, including all pins which are physically connected to the FPGA.  It’s entire contents are listed below:  (Note that, while the USB version is shown here, the PCIe version is strikingly similar.)

module toplevel(
   input  wire [7:0]  hi_in,
   input  wire [1:0]  hi_out,
   inout  wire [15:0] hi_inout,

   output wire [7:0]  led,
   input  wire [3:0]  button
   );

// Target interface bus:
wire        ti_clk;
wire [30:0] ok1;
wire [16:0] ok2;

// Endpoint connections:
wire [15:0] ep00wire;
wire [15:0] ep01wire;
wire [15:0] ep02wire;
wire [15:0] ep20wire;
wire [15:0] ep21wire;

assign led      = ~ep00wire;
assign ep20wire = {12'b0000, ~button};
assign ep21wire = ep01wire + ep02wire;

// Instantiate the okHost and connect endpoints.
wire [17*2-1:0]  ok2x;
okHost okHI(.hi_in(hi_in), .hi_out(hi_out), .hi_inout(hi_inout),
            .ti_clk(ti_clk), .ok1(ok1), .ok2(ok2) );

okWireIn ep00 (.ok1(ok1), .ep_addr(8'h00), .ep_dataout(ep00wire));
okWireIn ep01 (.ok1(ok1), .ep_addr(8'h01), .ep_dataout(ep01wire));
okWireIn ep02 (.ok1(ok1), .ep_addr(8'h02), .ep_dataout(ep02wire));

okWireOut ep20 (.ok1(ok1), .ok2(ok2x[ 0*17 +: 17]),
                .ep_addr(8'h20), .ep_datain(ep20wire));
okWireOut ep21 (.ok1(ok1), .ok2(ok2x[ 1*17 +: 17]),
                .ep_addr(8'h21), .ep_datain(ep21wire));

endmoduleCode language: PHP (php)

Listed inside the module definition are several wires.  Most of these are for the FrontPanel host interface.  The two other busses, LED[7:0] and BUTTON[3:0] connect to the LEDs and pushbuttons on the XEM3001.  Their specific pin locations are constrained in First.ucf.

The logic description for this example is very simple and only consists of three lines of HDL connecting the Wire In endpoint to the physical LEDs and the Wire Out endpoint to the physical pushbuttons.

The LEDs are attached to endpoint 0x00 and the pushbuttons are attached to endpoint 0x20.  An adder is inferred on two of the Wire Ins (0x01 and 0x02) with the result sent to a Wire Out (0x21).

This design contains three FrontPanel interface modules: okHostInterface, okWireIn, and okWireOut.  Their instantiation is pretty straightforward.  We have chosen to call the endpoint wires ep00wire and ep20wire for clarity.

The user’s interface shown at the beginning of this example is described in XML and shown below.  Only one instance of the okToggleButton and one instance of the okLED are shown for brevity.  The others instances are similar with the exception of their position tag and endpoint bit.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--
First FrontPanel Example
Copyright (c) 2004, Opal Kelly Incorporated
-->


<resource version="2.3.0.1">
<object class="okPanel" name="panel1">
	<title>First FrontPanel Example</title>
	<size>180,70</size>
	<object class="okToggleButton">
		<label>1</label>
		<position>10,10</position>
		<size>20,20</size>
		<endpoint>0x00</endpoint>
		<bit>0</bit>
	</object>
	... other okToggleButton objects removed ...
	<!-- LEDs -->
	<object class="okLED">
		<position>48,40</position>
		<size>25,25</size>
		<label>1</label>
		<style>SQUARE</style>
		<color>#00ff00</color>
		<endpoint>0x20</endpoint>
		<bit>0</bit>
	</object>
	... other okLED objects removed ...
</object>
</resource>Code language: HTML, XML (xml)

Each FrontPanel XML description must contain the <?xml> tag shown at the top as well as the <resource …> and </resource> tags as they are required by the FrontPanel XML parser.

The first object specified is the okPanel object which has a “name” property with value “panel1”.  FrontPanel looks for these properties when loading a profile.  They must be sequenced panel1, panel2, and so on.  The okPanel object also has two child nodes serving as parameters for the okPanel as listed in the table below:

The okPanel object also has two child nodes which are FrontPanel components, okToggleButton and okLED.  Because they are children of the okPanel object, they will appear on this particular panel.

The toggle button is described with child nodes as indicated in the table below.

The LED is described with child nodes as indicated in the table below.

These two components are described in more detail in the Component XML section of this User’s Manual.  They provide a convenient way to enter and display multi-bit integers.  They support multiple radixes, as well.

The Counters example is a bit more complicated than the simple example.  It includes a few more FrontPanel components and also adds a few Trigger endpoints.  More importantly, though, it adds more hardware in the form of HDL so you can see how FrontPanel integrates with HDL in a slightly more complicated setup.

The FrontPanel Classic XFP looks like this:

The hardware for the Counters example has two counters, the okHostInterface, a single Wire In endpoint, three Wire Out endpoints, and a Trigger In endpoint.  The hardware also routes to the LEDs on the XEM3001.

The first counter is an 8-bit up counter with enable, synchronous reset, and disable.  The enable signal is generated by a separate 24-bit counter to make the count progression slower.  The Verilog HDL for this counter and its clock divider counter is shown here:

always @(posedge clk1) begin
   div1 <= div1 - 1;
   if (div1 == 24'h000000) begin
      div1 <= 24'h400000;
      clk1div <= 1'b1;
   end else begin
      clk1div <= 1'b0;
   end

   if (clk1div == 1'b1) begin
      if (reset1 == 1'b1)
         count1 <= 8'h00;
      else if (disable1 == 1'b0)
         count1 <= count1 + 1;
   end
endCode language: PHP (php)

From the description, we gather that when RESET1 is asserted, the counter will hold the value 0x00.  When DISABLE1 is asserted, the counter holds its current value.  Otherwise, the counter will increment each time the clock divider counter expires.

Note that this counter operates on CLK1 which is mapped to LCLK1 on the PLL.

The second counter operates on CLK2 which is mapped to LCLK2 on the PLL.  Using the PLL Configuration Dialog, we will be able to observe the effects of changing the PLL frequencies on the two counters.

The Verilog HDL for this counter and its own divider is listed below.  This counter will count up when UP2 is asserted, count down when DOWN2 is asserted, and automatically count up when AUTOCOUNT2 is asserted.  Note that UP2 and DOWN2 must be asserted for exactly one CLK2 cycle for the counter to count only one.  This is why we have the Trigger endpoints.

always @(posedge clk2) begin
   div2 <= div2 - 1;
   if (div2 == 24'h000000) begin
      div2 <= 24'h100000;
      clk2div <= 1'b1;
   end else begin
      clk2div <= 1'b0;
   end
   if (reset2 == 1'b1)
      count2 <= 8'h00;
   else if (up2 == 1'b1)
      count2 <= count2 + 1;
   else if (down2 == 1'b1)
      count2 <= count2 - 1;
   else if ((autocount2 == 1'b1) && (clk2div == 1'b1))
      count2 <= count2 + 1;
endCode language: PHP (php)

This example uses several endpoints to provide controllable inputs to the hardware and observable outputs to FrontPanel.  To reduce the number of endpoints, we have chosen to share them among the counters.

The only Wire In endpoint is used to carry the RESET1, DISABLE1, and AUTOCOUNT2 signals.  These are wires because we want them to have a static state rather than one-shot signals.

The only Trigger In endpoint is used for the Counter #2 inputs.  These are triggers because we want single events (one-shots) to occur, such as a count-up event.

Note that RESET2 behaves the same as RESET1 but we want to have RESET2 behave as a one-shot event so that the user cannot hold RESET2 asserted.  Therefore, we attach this one to a Trigger.

These wires provide observables for FrontPanel.  They are connected as follows:

The user interface for the Counters example includes two panels.  The first panel contains five buttons, four hex displays, eight LEDs, and a check box.  There are also two cosmetic components called okStaticBox which are used to group the components visually.  The second panel simply contains four LEDs used to display the state of the pushbuttons.

The active FrontPanel components are listed below with their corresponding endpoints:

Note that the okLED and two of the okHex components share endpoint 0x20.  FrontPanel allows this and will update both components when Wire Out endpoints change.  It is also possible to map two components to input endpoints.

The second panel is not automatically opened when the Conters XFP file is loaded.  You can open it by pressing the number `2’ on your keyboard or navigating to

View → Pushbuttons

at the top of the FrontPanel window.  This displays a small window with the following components:

The Controls example provides a FrontPanel Profile (XFP) with a comprehensive demo of available user interface elements.

There is no corresponding gateware or functionality to this example. Its purpose is to provide example UI controls.