Update static/js/solar_animation.js

static/js/solar_animation.js

@@ -11,6 +11,8 @@ 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
 
 // Định nghĩa màu sắc và thuộc tính
 const colors = {
@@ -22,6 +24,8 @@ const colors = {
     batteryAccent: '#BBDEFB', // Xanh dương nhạt cho điểm nhấn pin
     homeRoof: '#E91E63', // Hồng cho mái nhà
     homeBody: '#FFEB3B', // Vàng cho thân nhà
+    gridBody: '#795548', // Nâu cho lưới điện
+    generatorBody: '#FF5722', // Cam đỏ cho máy phát điện
     flowPrimary: '#FF9800', // Cam sáng cho dòng chảy chính
     flowSecondary: 'rgba(255, 255, 255, 0.7)', // Trắng trong suốt cho hiệu ứng dòng chảy
     text: '#212121', // Đen gần cho văn bản
@@ -30,17 +34,20 @@ const colors = {
 
 // --- Hàm vẽ các biểu tượng chi tiết hơn ---
 
+// Hàm vẽ chung cho các thành phần có bóng đổ
+function drawRectWithShadow(x, y, width, height, color) {
+    ctx.shadowColor = colors.shadow;
+    ctx.shadowBlur = 8;
+    ctx.shadowOffsetX = 3;
+    ctx.shadowOffsetY = 3;
+    ctx.fillStyle = color;
+    ctx.fillRect(x, y, width, height);
+    ctx.shadowBlur = 0; // Reset shadow for subsequent drawings
+}
+
 // Vẽ biểu tượng tấm pin mặt trời
 function drawSolarPanelIcon(x, y, width, height) {
-    // Nền tấm pin (hơi nghiêng)
-    ctx.fillStyle = colors.solarDark;
-    ctx.beginPath();
-    ctx.moveTo(x, y + height * 0.1);
-    ctx.lineTo(x + width, y);
-    ctx.lineTo(x + width, y + height);
-    ctx.lineTo(x, y + height * 0.9);
-    ctx.closePath();
-    ctx.fill();
+    drawRectWithShadow(x, y, width, height, colors.solarDark); // Nền tấm pin
 
     // Các ô pin
     ctx.strokeStyle = colors.solarLight;
@@ -49,7 +56,7 @@ function drawSolarPanelIcon(x, y, width, height) {
     const cellHeight = height / 3;
     for (let i = 0; i < 4; i++) {
         for (let j = 0; j < 3; j++) {
-            ctx.strokeRect(x + i * cellWidth, y + j * cellHeight + (j * cellHeight * 0.1), cellWidth, cellHeight);
+            ctx.strokeRect(x + i * cellWidth, y + j * cellHeight, cellWidth, cellHeight);
         }
     }
 
@@ -59,13 +66,17 @@ function drawSolarPanelIcon(x, y, width, height) {
     gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
     ctx.fillStyle = gradient;
     ctx.beginPath();
-    ctx.moveTo(x, y + height * 0.1);
+    ctx.moveTo(x, y);
     ctx.lineTo(x + width * 0.3, y);
     ctx.lineTo(x + width * 0.5, y + height * 0.3);
     ctx.lineTo(x, y + height * 0.5);
     ctx.closePath();
     ctx.fill();
 
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, width, height); // Viền ngoài
+
     ctx.fillStyle = colors.text;
     ctx.font = '14px Arial';
     ctx.textAlign = 'center';
@@ -74,21 +85,11 @@ function drawSolarPanelIcon(x, y, width, height) {
 
 // Vẽ biểu tượng biến tần (inverter)
 function drawInverterIcon(x, y, width, height) {
-    // Thân biến tần
-    ctx.fillStyle = colors.inverterBody;
-    ctx.fillRect(x, y, width, height);
+    drawRectWithShadow(x, y, width, height, colors.inverterBody); // Thân biến tần
 
-    // Viền và bóng đổ
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
-    ctx.strokeRect(x, y, width, height);
-
-    ctx.shadowColor = colors.shadow;
-    ctx.shadowBlur = 8;
-    ctx.shadowOffsetX = 3;
-    ctx.shadowOffsetY = 3;
-    ctx.fillRect(x, y, width, height); // Vẽ lại để áp dụng bóng đổ
-    ctx.shadowBlur = 0; // Đặt lại bóng đổ
+    ctx.strokeRect(x, y, width, height); // Viền ngoài
 
     // Các cổng kết nối
     ctx.fillStyle = colors.inverterAccent;
@@ -109,21 +110,11 @@ function drawInverterIcon(x, y, width, height) {
 
 // Vẽ biểu tượng pin lưu trữ (battery)
 function drawBatteryIcon(x, y, width, height) {
-    // Thân pin
-    ctx.fillStyle = colors.batteryBody;
-    ctx.fillRect(x, y, width, height);
+    drawRectWithShadow(x, y, width, height, colors.batteryBody); // Thân pin
 
-    // Viền và bóng đổ
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
-    ctx.strokeRect(x, y, width, height);
-
-    ctx.shadowColor = colors.shadow;
-    ctx.shadowBlur = 8;
-    ctx.shadowOffsetX = 3;
-    ctx.shadowOffsetY = 3;
-    ctx.fillRect(x, y, width, height); // Vẽ lại để áp dụng bóng đổ
-    ctx.shadowBlur = 0; // Đặt lại bóng đổ
+    ctx.strokeRect(x, y, width, height); // Viền ngoài
 
     // Các cực
     ctx.fillStyle = colors.batteryAccent;
@@ -144,9 +135,7 @@ function drawBatteryIcon(x, y, width, height) {
 
 // Vẽ biểu tượng nhà (home load)
 function drawHomeIcon(x, y, width, height) {
-    // Thân nhà
-    ctx.fillStyle = colors.homeBody;
-    ctx.fillRect(x, y + height * 0.4, width, height * 0.6);
+    drawRectWithShadow(x, y + height * 0.4, width, height * 0.6, colors.homeBody); // Thân nhà
 
     // Mái nhà
     ctx.fillStyle = colors.homeRoof;
@@ -157,7 +146,6 @@ function drawHomeIcon(x, y, width, height) {
     ctx.closePath();
     ctx.fill();
 
-    // Viền và bóng đổ
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
     ctx.strokeRect(x, y + height * 0.4, width, height * 0.6);
@@ -168,19 +156,6 @@ function drawHomeIcon(x, y, width, height) {
     ctx.closePath();
     ctx.stroke();
 
-    ctx.shadowColor = colors.shadow;
-    ctx.shadowBlur = 8;
-    ctx.shadowOffsetX = 3;
-    ctx.shadowOffsetY = 3;
-    ctx.fillRect(x, y + height * 0.4, width, height * 0.6);
-    ctx.beginPath();
-    ctx.moveTo(x - 10, y + height * 0.4);
-    ctx.lineTo(x + width / 2, y);
-    ctx.lineTo(x + width + 10, y + height * 0.4);
-    ctx.closePath();
-    ctx.fill();
-    ctx.shadowBlur = 0; // Đặt lại bóng đổ
-
     // Cửa sổ
     ctx.fillStyle = 'rgba(173, 216, 230, 0.8)'; // Xanh da trời nhạt
     ctx.fillRect(x + width * 0.2, y + height * 0.5, width * 0.25, height * 0.25);
@@ -190,56 +165,131 @@ function drawHomeIcon(x, y, width, height) {
     ctx.fillText('Tải nhà', x + width / 2, y + height + 20);
 }
 
-// Hàm vẽ mũi tên di chuyển
-function drawMovingArrow(p1, p2, offset, arrowSize = 10) {
-    const dx = p2.x - p1.x;
-    const dy = p2.y - p1.y;
-    const distance = Math.sqrt(dx * dx + dy * dy);
+// Vẽ biểu tượng Lưới điện quốc gia (Grid)
+function drawGridIcon(x, y, width, height) {
+    drawRectWithShadow(x, y, width, height, colors.gridBody);
 
-    // Không vẽ nếu đường quá ngắn
-    if (distance < arrowSize * 2) return;
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, width, height);
 
-    // Đường dẫn chính của dòng chảy
+    ctx.fillStyle = '#FFF';
+    ctx.font = 'bold 16px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Lưới điện', x + width / 2, y + height / 2 - 10);
+    ctx.fillText('Quốc gia', x + width / 2, y + height / 2 + 10);
+
+    ctx.fillStyle = colors.text;
+    ctx.fillText('Lưới điện', x + width / 2, y + height + 20);
+}
+
+// Vẽ biểu tượng Máy phát điện (Generator)
+function drawGeneratorIcon(x, y, width, height) {
+    drawRectWithShadow(x, y, width, height, colors.generatorBody);
+
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, width, height);
+
+    // Hình trụ
+    ctx.beginPath();
+    ctx.arc(x + width / 2, y + height * 0.4, width * 0.2, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.fill();
+    ctx.stroke();
+
+    // Ống xả
+    ctx.fillStyle = '#333';
+    ctx.fillRect(x + width * 0.7, y + height * 0.2, width * 0.1, height * 0.2);
+
+    ctx.fillStyle = '#FFF';
+    ctx.font = 'bold 14px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Máy phát', x + width / 2, y + height / 2 + 5);
+
+    ctx.fillStyle = colors.text;
+    ctx.fillText('Máy phát điện', x + width / 2, y + height + 20);
+}
+
+
+// --- Hàm vẽ các đường thẳng/ngang và mũi tên di chuyển ---
+
+function drawLinearFlow(points, offset, arrowSize = 10) {
     ctx.strokeStyle = colors.flowPrimary;
     ctx.lineWidth = 4;
     ctx.beginPath();
-    ctx.moveTo(p1.x, p1.y);
-    ctx.lineTo(p2.x, p2.y);
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        ctx.lineTo(points[i].x, points[i].y);
+    }
     ctx.stroke();
 
-    ctx.fillStyle = colors.flowSecondary; // Màu trắng cho mũi tên
+    ctx.fillStyle = colors.flowSecondary;
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 1;
 
-    // Tính toán số lượng mũi tên và vị trí
-    const numArrows = Math.floor(distance / (arrowSize * 2.5)); // Số lượng mũi tên trên đường
-    const arrowSpacing = distance / numArrows;
+    // Tính toán tổng chiều dài đường dẫn
+    let totalLength = 0;
+    for (let i = 0; i < points.length - 1; i++) {
+        totalLength += Math.sqrt(
+            Math.pow(points[i+1].x - points[i].x, 2) +
+            Math.pow(points[i+1].y - points[i].y, 2)
+        );
+    }
+
+    const numArrows = Math.floor(totalLength / (arrowSize * 2.5));
+    const arrowSpacing = totalLength / numArrows;
 
     for (let i = 0; i < numArrows; i++) {
-        let currentPos = (offset + i * arrowSpacing) % distance;
-        if (currentPos < 0) currentPos += distance; // Xử lý offset âm
-
-        const ratio = currentPos / distance;
-        const arrowX = p1.x + dx * ratio;
-        const arrowY = p1.y + dy * ratio;
-
-        // Tính góc của đường
-        const angle = Math.atan2(dy, dx);
-
-        ctx.save();
-        ctx.translate(arrowX, arrowY);
-        ctx.rotate(angle);
-
-        // Vẽ hình tam giác (mũi tên)
-        ctx.beginPath();
-        ctx.moveTo(-arrowSize, -arrowSize / 2);
-        ctx.lineTo(0, 0); // Đầu mũi tên
-        ctx.lineTo(-arrowSize, arrowSize / 2);
-        ctx.closePath();
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.restore();
+        let currentPathPos = (offset + i * arrowSpacing) % totalLength;
+        if (currentPathPos < 0) currentPathPos += totalLength;
+
+        let segmentLength = 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) {
+                p1 = points[j];
+                p2 = points[j+1];
+                segmentIndex = j;
+                break;
+            }
+            segmentLength += segLen;
+        }
+
+        if (p1 && p2) {
+            const dx = p2.x - p1.x;
+            const dy = p2.y - p1.y;
+            const segmentRelativePos = currentPathPos - segmentLength;
+            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);
+
+            ctx.save();
+            ctx.translate(arrowX, arrowY);
+            ctx.rotate(angle);
+
+            ctx.beginPath();
+            ctx.moveTo(-arrowSize, -arrowSize / 2);
+            ctx.lineTo(0, 0); // Đầu mũi tên
+            ctx.lineTo(-arrowSize, arrowSize / 2);
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+
+            ctx.restore();
+        }
     }
 }
 
@@ -253,35 +303,56 @@ 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
 
-    // Vẽ luồng năng lượng với mũi tên
-    // Pin -> Biến tần (DC)
-    drawMovingArrow(
+    // 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: inverter.x + inverter.width * 0.25, y: inverter.y + inverter.height / 2 },
-        energyFlowOffset
-    );
-
-    // Biến tần -> Tải nhà (AC)
-    drawMovingArrow(
-        { x: inverter.x + inverter.width * 0.75, y: inverter.y + inverter.height / 2 },
-        { x: homeLoad.x, y: homeLoad.y + homeLoad.height / 2 },
-        energyFlowOffset
-    );
-
-    // Biến tần -> Pin lưu trữ (năng lượng dư thừa, AC sang DC)
-    drawMovingArrow(
+        { x: solarPanel.x + solarPanel.width / 2, y: inverter.y + inverter.height / 2 },
+        { x: inverter.x, y: inverter.y + inverter.height / 2 }
+    ], 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 }
+    ], energyFlowOffset);
+
+    // 3. Biến tần <-> Lưới điện (AC)
+    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
+
+    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)
+
+
+    // 4. Biến tần <-> Pin lưu trữ (AC/DC)
+    drawLinearFlow([
         { x: inverter.x + inverter.width / 2, y: inverter.y + inverter.height },
-        { x: battery.x + battery.width / 2, y: battery.y },
-        energyFlowOffset
-    );
+        { 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
+
+    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)
+
+    // 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)
+    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
+    ], energyFlowOffset);
 
-    // Pin lưu trữ -> Biến tần (khi tải cần, DC sang AC)
-    drawMovingArrow(
-        { x: battery.x + battery.width / 2, y: battery.y },
-        { x: inverter.x + inverter.width / 2, y: inverter.y + inverter.height },
-        -energyFlowOffset // Sử dụng offset ngược lại để tạo hiệu ứng mũi tên đi ngược
-    );
 
     // 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
@@ -289,9 +360,9 @@ function draw() {
     animationFrameId = requestAnimationFrame(draw); // Lặp lại hoạt hình
 }
 
-// Các hàm điều khiển hoạt hình
+// Các hàm điều khiển hoạt hình (không thay đổi)
 function startAnimation() {
-    if (!animationFrameId) { // Chỉ bắt đầu nếu chưa có hoạt hình đang chạy
+    if (!animationFrameId) {
         draw();
     }
 }