FrontPanel 6 Sensor Example

A FrontPanel 6 app designed to work with the XEM8320 and SZG-SENSOR on PORT D. It features a single screen display of temperature, pressure, humidity, GPS, gyroscope, and accelerometer data with rich visualizations.

Features

• SI1153 - Proximity Sensor with real-time display
• HTS221 - Humidity and Temperature Sensor with environment monitoring
• LPS22HB - Barometric Pressure Sensor
• LSM9DS1 - 9-DOF IMU with:
  • 3-axis Accelerometer with real-time graphing
  • 3-axis Gyroscope with 3D visualization using SYZYGY peripheral STL model
  • 3-axis Magnetometer with calibration support and compass display
• CAM-M8Q - GNSS Receiver with:
  • Satellite tracking and signal strength display
  • Real-time position on world map
  • Latitude, longitude, and altitude display
• Dark mode support with automatic theme switching
• Real-time sensor graphs with smooth animations

Usage

Running in FrontPanel 6

1. Download the prebuilt ASAR from the most recent release or build it

2. Launch FrontPanel 6

3. Install the app using the '+' button in the top right of FP6.

4. Connect XEM8320 with SZG-SENSOR attached to PORT D and power it on

5. Drag the app to the device in FP6

Requirements

Hardware Requirements

• XEM8320 FPGA Module (AU25P variant)
• SZG-SENSOR SYZYGY Peripheral (connected to PORT D)
• USB 3.0 cable for XEM8320

Software Requirements

• FrontPanel SDK 6.0.0+ (includes FrontPanel HDL and runtime libraries)
• Node.js 18+ and npm (for building the application)
• Vivado 2024.x (if you wish to edit the gateware, a prebuilt bitfile is already included)

Project Structure

sensor/
├── Gateware/              # Vivado HDL source files
│   ├── i2c/              # I2C controller for Si1153, HTS221, LPS22HB
│   │   ├── i2cController.v
│   │   ├── i2cTokenizer.v
│   │   ├── mux8to1.v
│   │   └── okDRAM64X8D.v
│   ├── spi/              # SPI controller for LSM9DS1
│   │   └── spi_control.v
│   ├── sensor.v          # Top-level module
│   ├── uart_rx.v         # UART receiver for GNSS
│   ├── uart_tx.v         # UART transmitter for GNSS
│   ├── xem8320.xdc       # Constraints file
│   └── project.tcl       # Vivado project creation script
├── Software/             # FrontPanel 6 application (React/TypeScript)
└── README.md

How to Build

Building the Hardware (Bitfile)

Note: The pre-built bitfile sensor_xem8320.bit is already included in the repository at Software/assets/bitfiles/. You only need to rebuild if you modify the gateware.

To rebuild the bitfile:

1. Open Vivado 2024.x and navigate to the Gateware directory using the TCL console:

   cd /path/to/sensor/Gateware

2. Create the project by sourcing the project script:

   source project.tcl

3. Add FrontPanel HDL sources:

   • In Vivado, go to Project Manager → Add Sources
   • Add all files from: <FrontPanel_SDK_Install>/FrontPanelHDL/XEM8320-AU25P/Vivado-2021/
   • Note: For newer SDK versions, the directory may be Vivado-2024 or similar
   • Files to add: okCoreHarness.v, okLibrary.v, and all .xci IP core files

4. Generate Bitstream:

   • Click Generate Bitstream in Vivado
   • Output bitfile location: Gateware/Vivado/sensor_sample.runs/impl_1/sensor.bit

5. Copy bitfile to app (only if you modified the gateware):

   cp Gateware/Vivado/sensor_sample.runs/impl_1/sensor.bit Software/assets/bitfiles/sensor_xem8320.bit

   • Note: The app already includes a pre-built bitfile, so this step is only needed if you modify the gateware

Building the Software

1. Navigate to the Software directory:

   cd Software

2. Install dependencies:

   npm install

3. Build the application:

   # Development build (unminified, with source maps)
   npm run build:dev
   
   # Production build (minified, optimized)
   npm run build

4. Package as ASAR (for distribution with FrontPanel):

   # Production package
   npm run pack
   
   # Development package
   npm run pack:dev

   Output: output/app.asar (production) or output/app-dev.asar (development)

License

Copyright (c) 2024-2025 Opal Kelly Incorporated