Merge pull request #18 from Western-Formula-Racing/dev-public-dbc

Changed to public version of DBC and testing data; centralized category tags

Author: elisedrouillard

pecan/Frontend/pecan-live-dashboard/CATEGORIES.md

@@ -0,0 +1,74 @@
+# Category Configuration
+
+This project uses a simple text-based configuration file to define CAN message categories.
+
+## Configuration File
+
+Location: `src/assets/categories.txt`
+
+## Format
+
+```
+CategoryName,TailwindColorClass,MessageIDs
+```
+
+### Components
+
+- **CategoryName**: Display name for the category (e.g., "VCU", "BMS", "TEST MSG")
+- **TailwindColorClass**: Tailwind CSS background color class (e.g., "bg-purple-500", "bg-sky-400")
+- **MessageIDs**: Comma-separated list of CAN message IDs or ranges
+
+### Message ID Formats
+
+- **Individual IDs**: Single numbers (e.g., `256`, `512`)
+- **Ranges**: Hyphen-separated (e.g., `100-110` includes 100, 101, 102, ..., 110)
+- **Mixed**: Combine both (e.g., `1,2,100-110,256`)
+
+### Comments
+
+Lines starting with `#` are treated as comments and ignored.
+
+## Example Configuration
+
+```txt
+# CAN Message Category Configuration
+
+# Test messages
+TEST MSG,bg-purple-500,256,512
+
+# Vehicle Control Unit messages
+VCU,bg-sky-400,170,171,172,173
+
+# Battery Management System messages
+BMS,bg-orange-400,168,176,177,192
+
+# Inverter messages with range
+INV,bg-green-400,163,180-190
+```
+
+## Tailwind Color Classes
+
+Common Tailwind background color classes you can use:
+
+- `bg-purple-500` - Purple
+- `bg-sky-400` - Light Blue
+- `bg-orange-400` - Orange
+- `bg-green-400` - Green
+- `bg-red-500` - Red
+- `bg-blue-500` - Blue
+- `bg-yellow-400` - Yellow
+- `bg-pink-500` - Pink
+- `bg-indigo-500` - Indigo
+
+## Default Category
+
+Messages that don't match any configured category will be assigned to "NO CAT" with a `bg-blue-500` color.
+
+## Usage in Code
+
+Categories are automatically loaded and parsed at build time. No code changes are needed to add or modify categories - just edit the `categories.txt` file.
+
+The category system is used by:
+- `src/components/DataCard.tsx` - Card view
+- `src/components/DataRow.tsx` - List/table view
+- `src/config/categories.ts` - Parser and utility functions

pecan/Frontend/pecan-live-dashboard/src/assets/categories.txt

@@ -0,0 +1,9 @@
+# CAN Message Category Configuration
+# Format: CategoryName,TailwindColorClass,MessageIDs
+# Message IDs can be individual numbers or ranges (e.g., 100-110)
+# Lines starting with # are comments
+
+TEST MSG,bg-purple-500,256,512
+VCU,bg-sky-400,170,171,172,173
+BMS,bg-orange-400,168,176,177,192
+INV,bg-green-400,163,180-190

pecan/Frontend/pecan-live-dashboard/src/assets/example.dbc

@@ -0,0 +1,58 @@
+VERSION ""
+
+NS_ :
+    NS_DESC_
+    CM_
+    BA_DEF_
+    BA_
+    VAL_
+    CAT_DEF_
+    CAT_
+    FILTER
+    BA_DEF_DEF_
+    EV_DATA_
+    ENVVAR_DATA_
+    SGTYPE_
+    SGTYPE_VAL_
+    BA_DEF_SGTYPE_
+    BA_SGTYPE_
+    SIG_TYPE_REF_
+    VAL_TABLE_
+    SIG_GROUP_
+    SIGTYPE_VALTYPE_
+    SIGTYPE_VALTYPE_DATA_
+    BO_TX_BU_
+    BA_DEF_REL_
+    BA_REL_
+    BA_DEF_DEF_REL_
+    BU_SG_REL_
+    BU_EV_REL_
+    BU_BO_REL_
+    SG_MUL_VAL_
+
+BS_:
+
+BU_: Vector__XXX
+
+BO_ 256 ExampleDrivetrain: 8 Vector__XXX
+ SG_ EngineSpeed : 0|16@1+ (0.125,0) [0|8000] "rpm" Vector__XXX
+ SG_ ThrottlePosition : 16|8@1+ (0.5,0) [0|100] "%" Vector__XXX
+ SG_ OilPressure : 24|8@1+ (1,0) [0|255] "kPa" Vector__XXX
+ SG_ SteeringAngle : 32|16@1- (0.1,0) [-180|180] "deg" Vector__XXX
+
+BO_ 512 ExampleBattery: 8 Vector__XXX
+ SG_ PackVoltage : 0|16@1+ (0.1,0) [0|600] "V" Vector__XXX
+ SG_ PackCurrent : 16|16@1- (0.1,0) [-300|300] "A" Vector__XXX
+ SG_ StateOfCharge : 32|8@1+ (0.5,0) [0|100] "%" Vector__XXX
+ SG_ CellTemperature : 40|8@1+ (1,-40) [-40|215] "C" Vector__XXX
+
+CM_ BO_ 256 "Sample drivetrain message for development and testing";
+CM_ BO_ 512 "Sample battery telemetry message for development and testing";
+CM_ SG_ 256 EngineSpeed "Engine crankshaft speed";
+CM_ SG_ 256 ThrottlePosition "Driver throttle pedal position";
+CM_ SG_ 256 OilPressure "Lubrication system pressure";
+CM_ SG_ 256 SteeringAngle "Front wheel steering angle";
+CM_ SG_ 512 PackVoltage "High voltage pack voltage";
+CM_ SG_ 512 PackCurrent "High voltage pack current";
+CM_ SG_ 512 StateOfCharge "Estimated battery state of charge";
+CM_ SG_ 512 CellTemperature "Representative cell temperature";

pecan/Frontend/pecan-live-dashboard/src/components/DataCard.tsx

@@ -1,5 +1,6 @@
 import Dropdown from "./Dropdown";
 import React, { useState, useMemo, useEffect } from "react";
+import { determineCategory, getCategoryColor } from "../config/categories";
 
 interface InputProps {
   msgID: string;
@@ -43,17 +44,12 @@ function DataCard({ msgID, name, category, data, lastUpdated, rawData }: Readonl
   const timeDiff = lastUpdated ? currentTime - lastUpdated : 0;
 
   const computedCategory = useMemo(() => {
-    if (category) return category;
-    if (!data || data.length === 0) return "NO CAT";
-    const signalNames = data.flatMap(obj => Object.keys(obj));
-    const hasINV = signalNames.some(name => name.includes("INV"));
-    const hasBMS = signalNames.some(name => name.includes("BMS") || name.includes("TORCH")) || name.includes("TORCH");
-    const hasVCU = signalNames.some(name => name.includes("VCU"));
-    if (hasVCU) return "VCU";
-    else if (hasBMS) return "BMS/TORCH";
-    else if (hasINV) return "INV";
-    else return "NO CAT";
-  }, [category, data]);
+    return determineCategory(msgID, category);
+  }, [category, msgID]);
+
+  const categoryColor = useMemo(() => {
+    return getCategoryColor(computedCategory);
+  }, [computedCategory]);
 
   const [collapsed, setCollapsed] = useState(false);
   const menuItems = collapsed ? ["Add to Favourites", "br", "Expand"] : ["Add to Favourites", "br", "Collapse"];
@@ -155,13 +151,7 @@ function DataCard({ msgID, name, category, data, lastUpdated, rawData }: Readonl
         {/* Category Name */}
         {/* div background colour will change based on which category is assigned to it  */}
         <div
-          className={`${collapsed ? "rounded-r-lg" : "rounded-t-md"} col-span-2 h-[40px] mx-[0px]  box-border flex justify-center items-center
-                        ${computedCategory === "VCU" ? "bg-sky-400" :
-              computedCategory === "INV" ? "bg-green-400" :
-                computedCategory === "CAT2" ? "bg-sky-500" :
-                  computedCategory === "BMS/TORCH" ? "bg-orange-400" :
-                    computedCategory === "CAT4" ? "bg-red-500" :
-                      "bg-blue-500"}`} // Default 
+          className={`${collapsed ? "rounded-r-lg" : "rounded-t-md"} col-span-2 h-[40px] mx-[0px]  box-border flex justify-center items-center ${categoryColor}`}
         // TODO: Assign data categories to colours
         >
           <p className="text-white text-xs font-semibold">{computedCategory}</p>

pecan/Frontend/pecan-live-dashboard/src/components/DataRow.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from "react";
+import { determineCategory, getCategoryColor } from "../config/categories";
 
 interface DataRowProps {
     msgID: string;
@@ -22,26 +23,12 @@ export default function DataRow({ msgID, name, category, data, rawData, lastUpda
     const timeDiff = lastUpdated ? currentTime - lastUpdated : 0;
 
     const computedCategory = useMemo(() => {
-        if (category) return category;
-        if (!data || data.length === 0) return "NO CAT";
-        const signalNames = data.flatMap(obj => Object.keys(obj));
-        const hasINV = signalNames.some(name => name.includes("INV"));
-        const hasBMS = signalNames.some(name => name.includes("BMS") || name.includes("TORCH")) || name.includes("TORCH");
-        const hasVCU = signalNames.some(name => name.includes("VCU"));
-        if (hasVCU) return "VCU";
-        else if (hasBMS) return "BMS/TORCH";
-        else if (hasINV) return "INV";
-        else return "NO CAT";
-    }, [category, data]);
-
-    // Category colour logic (same as DataCard)
-    const categoryColor =
-        computedCategory === "VCU" ? "bg-sky-400" :
-        computedCategory === "INV" ? "bg-green-400" :
-        computedCategory === "CAT2" ? "bg-sky-500" :
-        computedCategory === "BMS/TORCH" ? "bg-orange-400" :
-        computedCategory === "CAT4" ? "bg-red-500" :
-        "bg-blue-500"; // default
+        return determineCategory(msgID, category);
+    }, [category, msgID]);
+
+    const categoryColor = useMemo(() => {
+        return getCategoryColor(computedCategory);
+    }, [computedCategory]);
 
     // Alternating row background 
     const rowBg = index % 2 === 0 ? "bg-sidebar" : "bg-data-module-bg";

pecan/Frontend/pecan-live-dashboard/src/config/categories.ts

@@ -0,0 +1,146 @@
+/**
+ * Category Configuration
+ * 
+ * Centralized configuration for CAN message categories.
+ * Parses a simple text file format for easy configuration.
+ * 
+ * Format:
+ * CategoryName,Color,MessageIDs
+ * 
+ * Examples:
+ * BMS,bg-orange-400,1,2,100-110
+ * VCU,bg-sky-400,256,512
+ * TEST MSG,bg-purple-500,256,512
+ */
+
+import categoryConfig from '../assets/categories.txt?raw';
+
+export interface Category {
+  name: string;
+  color: string;
+  messageIds: Set<number>;
+}
+
+/**
+ * Default category for uncategorized messages
+ */
+export const DEFAULT_CATEGORY = {
+  name: "NO CAT",
+  color: "bg-blue-500"
+};
+
+/**
+ * Parse a range string like "100-110" into an array of numbers
+ */
+function parseRange(range: string): number[] {
+  const parts = range.split('-');
+  if (parts.length === 2) {
+    const start = parseInt(parts[0]);
+    const end = parseInt(parts[1]);
+    if (!isNaN(start) && !isNaN(end)) {
+      const result: number[] = [];
+      for (let i = start; i <= end; i++) {
+        result.push(i);
+      }
+      return result;
+    }
+  }
+  return [];
+}
+
+/**
+ * Parse the category configuration file
+ */
+function parseCategories(configText: string): Category[] {
+  const categories: Category[] = [];
+  const lines = configText.split('\n');
+  
+  for (const line of lines) {
+    // Skip empty lines and comments
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#') || trimmed.startsWith('//')) {
+      continue;
+    }
+    
+    const parts = trimmed.split(',').map(p => p.trim());
+    if (parts.length < 3) {
+      console.warn(`Invalid category line: ${line}`);
+      continue;
+    }
+    
+    const name = parts[0];
+    const color = parts[1];
+    const messageIds = new Set<number>();
+    
+    // Parse message IDs (parts[2] onwards)
+    for (let i = 2; i < parts.length; i++) {
+      const part = parts[i];
+      
+      // Check if it's a range (e.g., "100-110")
+      if (part.includes('-')) {
+        const rangeIds = parseRange(part);
+        rangeIds.forEach(id => messageIds.add(id));
+      } else {
+        // Single ID
+        const id = parseInt(part);
+        if (!isNaN(id)) {
+          messageIds.add(id);
+        }
+      }
+    }
+    
+    categories.push({ name, color, messageIds });
+  }
+  
+  return categories;
+}
+
+/**
+ * Loaded categories from configuration file
+ */
+export const CATEGORIES: Category[] = parseCategories(categoryConfig);
+
+/**
+ * Determine the category for a CAN message
+ * @param msgID - CAN message ID (as string)
+ * @param explicitCategory - Optional explicit category override
+ * @returns Category name
+ */
+export function determineCategory(
+  msgID: string,
+  explicitCategory?: string
+): string {
+  // If explicit category is provided, use it
+  if (explicitCategory) return explicitCategory;
+  
+  const numericId = parseInt(msgID);
+  if (isNaN(numericId)) return DEFAULT_CATEGORY.name;
+  
+  // Find first matching category
+  for (const category of CATEGORIES) {
+    if (category.messageIds.has(numericId)) {
+      return category.name;
+    }
+  }
+  
+  // No match found, return default
+  return DEFAULT_CATEGORY.name;
+}
+
+/**
+ * Get the color class for a category
+ * @param categoryName - Category name
+ * @returns Tailwind CSS color class
+ */
+export function getCategoryColor(categoryName: string): string {
+  const category = CATEGORIES.find(cat => cat.name === categoryName);
+  return category?.color ?? DEFAULT_CATEGORY.color;
+}
+
+/**
+ * Get all category names
+ * @returns Array of category names
+ */
+export function getAllCategoryNames(): string[] {
+  return CATEGORIES.map(cat => cat.name);
+}