diff --git a/.gitignore b/.gitignore
index 6565fa5..c67cc0e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,5 @@
!/packages/
!/packages/wifi.yaml
!/packages/beacon.yaml
+!/README_Assets/*
+!/docs/*
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..13a8c52
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Garage Parking Assistant
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/simulator.js b/docs/simulator.js
new file mode 100644
index 0000000..94f7e11
--- /dev/null
+++ b/docs/simulator.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { Slider } from '@/components/ui/slider';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+const GarageParkingAssistant = () => {
+ const [distance, setDistance] = useState(2.5);
+ const [isWarningState, setIsWarningState] = useState(false);
+ const [warningBlink, setWarningBlink] = useState(false);
+
+ // Constants from the configuration
+ const MIN_DISTANCE = 0.5;
+ const BUFFER_DISTANCE = 0.1;
+ const MAX_DISTANCE = 5.0;
+ const NUM_LEDS = 60;
+
+ // Calculate boundaries
+ const minSafe = MIN_DISTANCE - BUFFER_DISTANCE;
+ const maxSafe = MIN_DISTANCE + BUFFER_DISTANCE;
+
+ // Warning blink effect
+ useEffect(() => {
+ let interval;
+ if (isWarningState) {
+ interval = setInterval(() => {
+ setWarningBlink(prev => !prev);
+ }, 500);
+ }
+ return () => clearInterval(interval);
+ }, [isWarningState]);
+
+ // Calculate LED colors based on distance
+ const calculateLEDs = () => {
+ if (distance < minSafe) {
+ return Array(NUM_LEDS).fill(warningBlink ? '#ff0000' : '#000000');
+ }
+
+ const leds = Array(NUM_LEDS).fill('#000000');
+ const center = Math.floor(NUM_LEDS / 2);
+
+ if (distance <= maxSafe) {
+ return Array(NUM_LEDS).fill('#ff0000');
+ } else if (distance >= MAX_DISTANCE) {
+ return Array(NUM_LEDS).fill('#00ff00');
+ } else {
+ const distanceRatio = (distance - maxSafe) / (MAX_DISTANCE - maxSafe);
+ const ledsToLight = Math.max(2, Math.ceil(NUM_LEDS * distanceRatio));
+ const halfLeds = Math.floor(ledsToLight / 2);
+
+ const red = Math.floor(255 * (1 - distanceRatio));
+ const green = Math.floor(255 * distanceRatio);
+ const color = `#${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}00`;
+
+ for (let i = 0; i < halfLeds; i++) {
+ leds[center + i] = color;
+ leds[center - 1 - i] = color;
+ }
+ }
+ return leds;
+ };
+
+ // Update warning state when distance changes
+ useEffect(() => {
+ setIsWarningState(distance < minSafe);
+ }, [distance]);
+
+ const leds = calculateLEDs();
+
+ return (
+
+
+ Garage Parking Assistant Simulator
+
+
+
+ Distance: {distance.toFixed(2)}m
+ setDistance(value[0])}
+ min={0}
+ max={MAX_DISTANCE}
+ step={0.1}
+ className="w-full"
+ />
+
+
+
+
+ {leds.map((color, index) => (
+
+ ))}
+
+
+
+
+
Status Zones:
+
+
+
Too Close Zone (< {minSafe}m)
+
+
+
+
Buffer Zone ({minSafe}m - {maxSafe}m)
+
+
+
+
Approach Zone ({maxSafe}m - {MAX_DISTANCE}m)
+
+
+
+
Safe Zone (> {MAX_DISTANCE}m)
+
+
+
+
+ );
+};
+
+export default GarageParkingAssistant;
\ No newline at end of file