Add DBC view (FOME-Tech#180)

.vscode/settings.json

@@ -26,6 +26,7 @@
     "DFCO",
     "dyno",
     "easyops",
+    "endianess",
     "FOME",
     "footwell",
     "GPPMW",
@@ -43,6 +44,7 @@
     "pinout",
     "Polygonus",
     "powerband",
+    "Pulsewidth",
     "pushrod",
     "rehype",
     "standardised",

docs/07-Advanced-Features/CAN.mdx

@@ -1,8 +1,30 @@
+import DbcViewer from '@site/src/components/DbcViewer';
+
 # CAN
 
-## What is CANBUS?
+## What is CAN and CANBUS?
+
+**CAN** (Controller Area Network) is a robust vehicle bus standard designed to facilitate communication among various components without a host computer. It is used in many modern cars, and is a great way to get data from the car to the **ECU**. It is also a great way to get data from the **ECU** to other devices, such as a dash, or a data logger.
+
+**CANBUS / CAN bus**, or Controller Area Network Bus, refers to the physical medium (wires and connections) through which the CAN protocol operates. It's the network of interconnected CAN devices within a vehicle or industrial setup.
+
+## DBC
+
+A **DBC** (Database Container) file is a standard file format used in the context of Controller Area Network (CAN) networks. It contains information about messages and signals that can be transmitted over a CAN network.
+
+In a **DBC** file:
+
+- Messages represent specific packets of data sent over the CAN network, each identified by a unique ID.
+
+- Signals are individual pieces of data within messages, specifying the data's name, start bit, length, endianess, and other attributes. Signals can represent information such as vehicle speed, engine RPM, or sensor readings.
+
+## FOME's DBC file
+
+:::info SOURCE
+
+[FOME-Tech/fome-fw/blob/master/firmware/controllers/can/rusEFI_CAN_verbose.dbc](https://github.com/FOME-Tech/fome-fw/blob/master/firmware/controllers/can/rusEFI_CAN_verbose.dbc)
 
-CANBUS is a communication protocol that allows devices to talk to each other.
+:::
 
-It is used in many modern cars, and is a great way to get data from the car to the ECU. It is also a great way to get data from the ECU to other devices, such as a dash, or a data logger.
+<DbcViewer />
 

global.d.ts

@@ -0,0 +1,3 @@
+declare module '*.txt';
+declare module '*.html';
+declare module '*.dbc';

package.json

@@ -28,6 +28,7 @@
     "@docusaurus/preset-classic": "^3.0.0",
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@mdx-js/react": "^3.0.0",
+    "candied": "^2.2.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
@@ -43,6 +44,7 @@
     "@tsconfig/docusaurus": "^2.0.2",
     "@types/node": "^20.8.10",
     "docusaurus-prince-pdf": "^1.2.1",
+    "raw-loader": "^4.0.2",
     "typescript": "^5.2.2"
   },
   "browserslist": {

src/components/DbcViewer.tsx

@@ -0,0 +1,95 @@
+import { Dbc } from 'candied';
+import { DbcData } from 'candied/lib/dbc/Dbc';
+import { dbcReader } from 'candied/lib/filesystem/DbcWebFs';
+import { useEffect, useState } from 'react';
+
+import fomeDbcFileRaw from '!!raw-loader!../data/FOME_CAN_verbose.dbc';
+
+const DbcViewer = () => {
+  const [dbcData, setDbcData] = useState<DbcData>(null);
+
+  useEffect(() => {
+    const dbc = new Dbc();
+
+    dbcReader(new File([fomeDbcFileRaw], 'file.dbc'), (content) => {
+      const data = dbc.load(content);
+      setDbcData(data);
+    });
+  }, []);
+
+  if (!dbcData) {
+    return <span>Loading</span>;
+  }
+
+  return (
+    <div>
+      {Array.from(dbcData.messages.values())
+        .sort((a, b) => Number(a.id) - Number(b.id))
+        .map((message) => (
+          <div key={message.id}>
+            <h3 id={`#${message.name}`}>Message {message.name}</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>CAN ID</th>
+                  <th>DLC</th>
+                  <th>Sending Node</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{message.name}</td>
+                  <td>{message.id}</td>
+                  <td>{message.dlc}</td>
+                  <td>{message.sendingNode}</td>
+                  <td>{message.description}</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <h4>Signals</h4>
+            <table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Format</th>
+                  <th>Start</th>
+                  <th>Length</th>
+                  <th>Factor</th>
+                  <th>Offset</th>
+                  <th>Min</th>
+                  <th>Max</th>
+                  <th>Unit</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from(message.signals.values()).map((signal) => (
+                  <tr key={`${signal.name}-${signal.startBit}`}>
+                    <td>{signal.name}</td>
+                    <td>{signal.dataType}</td>
+                    <td>{signal.endian}</td>
+                    <td>{signal.startBit}</td>
+                    <td>{signal.length}</td>
+                    <td>{signal.factor}</td>
+                    <td>{signal.offset}</td>
+                    <td>{signal.min}</td>
+                    <td>{signal.max}</td>
+                    <td>{signal.unit}</td>
+                    <td>{signal.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <hr />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default DbcViewer;