Update static/js/solar_animation.js

static/js/solar_animation.js

@@ -6,13 +6,13 @@ const ctx = canvas.getContext('2d');
 let animationFrameId;
 let energyFlowOffset = 0; // Dịch chuyển để tạo hiệu ứng dòng chảy của mũi tên
 
-// Kích thước và vị trí các thành phần
+// Kích thước và vị trí các thành phần (đã điều chỉnh để có chỗ cho các luồng mới)
 const solarPanel = { x: 50, y: 50, width: 120, height: 90 };
-const inverter = { x: 280, y: 150, width: 90, height: 70 };
-const battery = { x: 480, y: 250, width: 80, height: 110 };
-const homeLoad = { x: 650, y: 150, width: 80, height: 70 };
-const grid = { x: 400, y: 50, width: 100, height: 70 }; // Lưới điện
-const generator = { x: 100, y: 250, width: 100, height: 70 }; // Máy phát điện
+const inverter = { x: 280, y: 150, width: 90, height: 70 }; // Biến tần là trung tâm
+const battery = { x: 50, y: 280, width: 80, height: 110 }; // Pin ở dưới bên trái
+const homeLoad = { x: 650, y: 150, width: 80, height: 70 }; // Tải nhà bên phải
+const grid = { x: 480, y: 50, width: 100, height: 70 }; // Lưới điện ở trên bên phải
+const generator = { x: 280, y: 320, width: 100, height: 70 }; // Máy phát điện ở dưới biến tần
 
 // Định nghĩa màu sắc và thuộc tính
 const colors = {
@@ -93,16 +93,18 @@ function drawInverterIcon(x, y, width, height) {
 
     // Các cổng kết nối
     ctx.fillStyle = colors.inverterAccent;
-    ctx.fillRect(x - 5, y + height * 0.2, 5, 10); // Cổng vào DC
-    ctx.fillRect(x + width, y + height * 0.7, 5, 10); // Cổng ra AC
+    ctx.fillRect(x - 5, y + height * 0.2, 5, 10); // Cổng vào DC (từ Solar)
+    ctx.fillRect(x + width, y + height * 0.7, 5, 10); // Cổng ra AC (tới Home Load)
+    ctx.fillRect(x + width * 0.25, y - 5, 10, 5); // Cổng lên Grid
+    ctx.fillRect(x + width * 0.75, y + height, 10, 5); // Cổng xuống Battery/Generator
 
     // Ký hiệu DC/AC
     ctx.fillStyle = '#FFF';
     ctx.font = 'bold 12px Arial';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    ctx.fillText('DC', x + width * 0.25, y + height / 2);
-    ctx.fillText('AC', x + width * 0.75, y + height / 2);
+    ctx.fillText('DC', x + width * 0.15, y + height / 2); // gần cổng vào DC
+    ctx.fillText('AC', x + width * 0.85, y + height / 2); // gần cổng ra AC
 
     ctx.fillStyle = colors.text;
     ctx.fillText('Biến tần', x + width / 2, y + height + 20);
@@ -216,7 +218,7 @@ function drawGeneratorIcon(x, y, width, height) {
 
 // --- Hàm vẽ các đường thẳng/ngang và mũi tên di chuyển ---
 
-function drawLinearFlow(points, offset, arrowSize = 10) {
+function drawLinearFlow(points, offset, arrowSize = 10, reverse = false) {
     ctx.strokeStyle = colors.flowPrimary;
     ctx.lineWidth = 4;
     ctx.beginPath();
@@ -232,49 +234,57 @@ function drawLinearFlow(points, offset, arrowSize = 10) {
 
     // Tính toán tổng chiều dài đường dẫn
     let totalLength = 0;
+    const segmentLengths = [];
     for (let i = 0; i < points.length - 1; i++) {
-        totalLength += Math.sqrt(
+        const segLen = Math.sqrt(
             Math.pow(points[i+1].x - points[i].x, 2) +
             Math.pow(points[i+1].y - points[i].y, 2)
         );
+        segmentLengths.push(segLen);
+        totalLength += segLen;
     }
 
     const numArrows = Math.floor(totalLength / (arrowSize * 2.5));
     const arrowSpacing = totalLength / numArrows;
 
     for (let i = 0; i < numArrows; i++) {
-        let currentPathPos = (offset + i * arrowSpacing) % totalLength;
+        let currentPathPos = (offset + i * arrowSpacing);
+        if (reverse) {
+            currentPathPos = totalLength - currentPathPos; // Đảo ngược hướng cho mũi tên
+        }
+        currentPathPos = currentPathPos % totalLength;
         if (currentPathPos < 0) currentPathPos += totalLength;
 
-        let segmentLength = 0;
+        let segmentLengthAccumulated = 0;
         let p1 = null, p2 = null;
         let segmentIndex = -1;
 
         // Tìm đoạn đường mà mũi tên đang ở trên
         for (let j = 0; j < points.length - 1; j++) {
-            const segLen = Math.sqrt(
-                Math.pow(points[j+1].x - points[j].x, 2) +
-                Math.pow(points[j+1].y - points[j].y, 2)
-            );
-            if (currentPathPos >= segmentLength && currentPathPos <= segmentLength + segLen) {
+            const segLen = segmentLengths[j];
+            if (currentPathPos >= segmentLengthAccumulated && currentPathPos <= segmentLengthAccumulated + segLen) {
                 p1 = points[j];
                 p2 = points[j+1];
                 segmentIndex = j;
                 break;
             }
-            segmentLength += segLen;
+            segmentLengthAccumulated += segLen;
         }
 
         if (p1 && p2) {
             const dx = p2.x - p1.x;
             const dy = p2.y - p1.y;
-            const segmentRelativePos = currentPathPos - segmentLength;
+            const segmentRelativePos = currentPathPos - segmentLengthAccumulated;
             const ratio = segLen > 0 ? segmentRelativePos / segLen : 0;
 
             const arrowX = p1.x + dx * ratio;
             const arrowY = p1.y + dy * ratio;
 
-            const angle = Math.atan2(dy, dx);
+            let angle = Math.atan2(dy, dx);
+            if (reverse) {
+                angle += Math.PI; // Xoay mũi tên 180 độ nếu ngược chiều
+            }
+
 
             ctx.save();
             ctx.translate(arrowX, arrowY);
@@ -303,57 +313,60 @@ function draw() {
     drawInverterIcon(inverter.x, inverter.y, inverter.width, inverter.height);
     drawBatteryIcon(battery.x, battery.y, battery.width, battery.height);
     drawHomeIcon(homeLoad.x, homeLoad.y, homeLoad.width, homeLoad.height);
-    drawGridIcon(grid.x, grid.y, grid.width, grid.height); // Lưới điện
-    drawGeneratorIcon(generator.x, generator.y, generator.width, generator.height); // Máy phát điện
+    drawGridIcon(grid.x, grid.y, grid.width, grid.height);
+    drawGeneratorIcon(generator.x, generator.y, generator.width, generator.height);
 
     // Vẽ luồng năng lượng bằng đường thẳng/ngang
     // 1. Tấm pin -> Biến tần (DC)
     drawLinearFlow([
-        { x: solarPanel.x + solarPanel.width / 2, y: solarPanel.y + solarPanel.height },
-        { x: solarPanel.x + solarPanel.width / 2, y: inverter.y + inverter.height / 2 },
-        { x: inverter.x, y: inverter.y + inverter.height / 2 }
+        { x: solarPanel.x + solarPanel.width / 2, y: solarPanel.y + solarPanel.height }, // Dưới pin
+        { x: solarPanel.x + solarPanel.width / 2, y: inverter.y + inverter.height * 0.2 }, // Điểm uốn ngang
+        { x: inverter.x, y: inverter.y + inverter.height * 0.2 } // Vào biến tần (cổng DC)
     ], energyFlowOffset);
 
     // 2. Biến tần -> Tải nhà (AC)
     drawLinearFlow([
-        { x: inverter.x + inverter.width, y: inverter.y + inverter.height / 2 },
-        { x: homeLoad.x, y: homeLoad.y + homeLoad.height / 2 }
+        { x: inverter.x + inverter.width, y: inverter.y + inverter.height * 0.7 }, // Ra biến tần (cổng AC)
+        { x: homeLoad.x, y: homeLoad.y + homeLoad.height / 2 } // Vào tải nhà
     ], energyFlowOffset);
 
     // 3. Biến tần <-> Lưới điện (AC)
+    // Biến tần -> Lưới (Xuất điện)
     drawLinearFlow([
-        { x: inverter.x + inverter.width / 2, y: inverter.y },
-        { x: inverter.x + inverter.width / 2, y: grid.y + grid.height / 2 },
-        { x: grid.x, y: grid.y + grid.height / 2 }
-    ], energyFlowOffset); // Biến tần -> Lưới
+        { x: inverter.x + inverter.width * 0.25, y: inverter.y }, // Từ biến tần (cổng lên Grid)
+        { x: inverter.x + inverter.width * 0.25, y: grid.y + grid.height / 2 }, // Điểm uốn ngang
+        { x: grid.x, y: grid.y + grid.height / 2 } // Vào lưới
+    ], energyFlowOffset);
 
+    // Lưới -> Biến tần (Nhập điện)
     drawLinearFlow([
-        { x: grid.x, y: grid.y + grid.height / 2 }, // Điểm này phải đúng
-        { x: inverter.x + inverter.width / 2, y: grid.y + grid.height / 2 },
-        { x: inverter.x + inverter.width / 2, y: inverter.y }
-    ], -energyFlowOffset); // Lưới -> Biến tần (ngược chiều)
-
+        { x: grid.x, y: grid.y + grid.height / 2 }, // Từ lưới
+        { x: inverter.x + inverter.width * 0.25, y: grid.y + grid.height / 2 }, // Điểm uốn ngang
+        { x: inverter.x + inverter.width * 0.25, y: inverter.y } // Vào biến tần (cổng lên Grid)
+    ], energyFlowOffset, 10, true); // true để đảo ngược hướng mũi tên
 
     // 4. Biến tần <-> Pin lưu trữ (AC/DC)
+    // Biến tần -> Pin (Sạc)
     drawLinearFlow([
-        { x: inverter.x + inverter.width / 2, y: inverter.y + inverter.height },
-        { x: inverter.x + inverter.width / 2, y: battery.y + battery.height / 2 },
-        { x: battery.x + battery.width, y: battery.y + battery.height / 2 } // Vị trí kết nối bên phải pin
-    ], energyFlowOffset); // Biến tần -> Pin
+        { x: inverter.x + inverter.width * 0.75, y: inverter.y + inverter.height }, // Từ biến tần (cổng xuống Battery)
+        { x: inverter.x + inverter.width * 0.75, y: battery.y + battery.height / 2 }, // Điểm uốn ngang
+        { x: battery.x + battery.width, y: battery.y + battery.height / 2 } // Vào pin
+    ], energyFlowOffset);
 
+    // Pin -> Biến tần (Xả)
     drawLinearFlow([
-        { x: battery.x + battery.width, y: battery.y + battery.height / 2 },
-        { x: inverter.x + inverter.width / 2, y: battery.y + battery.height / 2 },
-        { x: inverter.x + inverter.width / 2, y: inverter.y + inverter.height }
-    ], -energyFlowOffset); // Pin -> Biến tần (ngược chiều)
+        { x: battery.x + battery.width, y: battery.y + battery.height / 2 }, // Từ pin
+        { x: inverter.x + inverter.width * 0.75, y: battery.y + battery.height / 2 }, // Điểm uốn ngang
+        { x: inverter.x + inverter.width * 0.75, y: inverter.y + inverter.height } // Vào biến tần (cổng xuống Battery)
+    ], energyFlowOffset, 10, true); // true để đảo ngược hướng mũi tên
 
-    // 5. Máy phát điện -> Biến tần (hoặc thẳng vào nhà nếu không có biến tần, nhưng ở đây kết nối qua biến tần)
+
+    // 5. Máy phát điện -> Biến tần (AC)
     drawLinearFlow([
-        { x: generator.x + generator.width, y: generator.y + generator.height / 2 },
-        { x: inverter.x, y: inverter.y + inverter.height / 2 } // Nối vào biến tần
+        { x: generator.x + generator.width, y: generator.y + generator.height / 2 }, // Từ máy phát
+        { x: inverter.x, y: inverter.y + inverter.height * 0.7 } // Vào biến tần (cổng AC)
     ], energyFlowOffset);
 
-
     // Cập nhật offset để tạo hoạt hình dòng chảy
     energyFlowOffset = (energyFlowOffset + 2) % 100; // Thay đổi tốc độ và khoảng cách mũi tên