Update static/js/solar_animation.js

static/js/solar_animation.js

@@ -19,7 +19,8 @@ const colors = {
     battery: '#ADD8E6', // Xanh dương nhạt
     home: '#FF4500',    // Đỏ cam
     flow: '#FFA500',    // Cam cho dòng năng lượng
-    text: '#333333'
+    text: '#333333',
+    arrow: '#FFFFFF'    // Màu trắng cho mũi tên
 };
 
 // Hàm vẽ một hộp (thành phần)
@@ -36,46 +37,145 @@ function drawComponent(comp, label, color) {
     ctx.fillText(label, comp.x + comp.width / 2, comp.y + comp.height + 20);
 }
 
-// Hàm vẽ dòng năng lượng
-function drawFlow(startX, startY, endX, endY, direction = 'right', speed = 5) {
-    ctx.strokeStyle = colors.flow;
-    ctx.lineWidth = 4;
-    ctx.lineCap = 'round'; // Để đầu mũi tên tròn hơn
+// Hàm vẽ biểu tượng tấm pin mặt trời
+function drawSolarPanelIcon(x, y, size) {
+    ctx.fillStyle = colors.solar;
+    ctx.beginPath();
+    // Hình chữ nhật cơ bản
+    ctx.rect(x, y, size, size * 0.7);
+    ctx.fill();
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // Thêm các đường lưới nhỏ để trông giống pin hơn
+    ctx.strokeStyle = 'rgba(0,0,0,0.3)';
+    ctx.lineWidth = 0.5;
+    for (let i = 1; i < 4; i++) {
+        ctx.beginPath();
+        ctx.moveTo(x + i * (size / 4), y);
+        ctx.lineTo(x + i * (size / 4), y + size * 0.7);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y + i * (size * 0.7 / 3));
+        ctx.lineTo(x + size, y + i * (size * 0.7 / 3));
+        ctx.stroke();
+    }
+}
 
+// Hàm vẽ biểu tượng biến tần (inverter)
+function drawInverterIcon(x, y, width, height) {
+    ctx.fillStyle = colors.inverter;
+    ctx.fillRect(x, y, width, height);
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, width, height);
+
+    // Vẽ mũi tên AC/DC
+    ctx.fillStyle = '#FFF';
+    ctx.font = 'bold 12px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('DC', x + width / 4, y + height / 2);
+    ctx.fillText('AC', x + width * 3 / 4, y + height / 2);
     ctx.beginPath();
-    ctx.moveTo(startX, startY);
-    ctx.lineTo(endX, endY);
+    ctx.moveTo(x + width / 2 - 5, y + height / 2);
+    ctx.lineTo(x + width / 2 + 5, y + height / 2);
     ctx.stroke();
+    ctx.beginPath(); // Mũi tên nhỏ
+    ctx.moveTo(x + width / 2 + 5, y + height / 2 - 3);
+    ctx.lineTo(x + width / 2 + 10, y + height / 2);
+    ctx.lineTo(x + width / 2 + 5, y + height / 2 + 3);
+    ctx.fill();
+}
 
-    // Vẽ hiệu ứng "dòng chảy"
-    ctx.save(); // Lưu trạng thái canvas
-    ctx.clip(); // Clip để chỉ vẽ trong đường đã vẽ
+// Hàm vẽ biểu tượng pin lưu trữ (battery)
+function drawBatteryIcon(x, y, width, height) {
+    ctx.fillStyle = colors.battery;
+    ctx.fillRect(x, y, width, height);
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, width, height);
+
+    // Vẽ các vạch pin
+    ctx.fillStyle = '#FFF';
+    const barHeight = height / 3;
+    ctx.fillRect(x + width * 0.1, y + height * 0.1, width * 0.8, barHeight);
+    ctx.fillRect(x + width * 0.1, y + height * 0.4, width * 0.8, barHeight);
+    ctx.fillRect(x + width * 0.1, y + height * 0.7, width * 0.8, barHeight);
+
+    // Cực dương, cực âm
+    ctx.fillRect(x + width * 0.4, y - 5, width * 0.2, 5); // Cực dương
+    ctx.fillRect(x + width * 0.4, y + height, width * 0.2, 5); // Cực âm
+}
+
+// Hàm vẽ biểu tượng nhà (home load)
+function drawHomeIcon(x, y, size) {
+    ctx.fillStyle = colors.home;
+    // Thân nhà
+    ctx.fillRect(x, y + size * 0.4, size, size * 0.6);
+    // Mái nhà
+    ctx.beginPath();
+    ctx.moveTo(x - 5, y + size * 0.4);
+    ctx.lineTo(x + size / 2, y);
+    ctx.lineTo(x + size + 5, y + size * 0.4);
+    ctx.closePath();
+    ctx.fill();
 
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; // Màu sáng cho hiệu ứng dòng chảy
+    ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
+    ctx.strokeRect(x, y + size * 0.4, size, size * 0.6);
+    ctx.stroke();
+}
+
+// Hàm vẽ mũi tên di chuyển
+function drawMovingArrow(p1, p2, offset, arrowSize = 8, speed = 1) {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    // Chỉ vẽ nếu có đủ không gian cho mũi tên
+    if (distance < arrowSize * 2) return;
 
-    const numDots = 10;
-    const lineLength = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
-    const dotSpacing = lineLength / numDots;
+    ctx.strokeStyle = colors.flow;
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.stroke();
 
-    for (let i = 0; i < numDots; i++) {
-        let currentPos = (energyFlowOffset + i * dotSpacing) % lineLength;
-        if (currentPos < 0) currentPos += lineLength; // Xử lý khi offset âm
+    ctx.fillStyle = colors.arrow; // Màu trắng cho mũi tên
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
 
-        let ratio = currentPos / lineLength;
-        let x = startX + (endX - startX) * ratio;
-        let y = startY + (endY - startY) * ratio;
+    // Tính toán vị trí mũi tên
+    const numArrows = Math.floor(distance / (arrowSize * 3)); // Số lượng mũi tên trên đường
+    for (let i = 0; i < numArrows; i++) {
+        let currentPos = (offset + i * (arrowSize * 3)) % distance;
+        if (currentPos < 0) currentPos += distance; // Xử lý offset âm
 
-        ctx.beginPath();
-        if (direction === 'right' || direction === 'down') {
-             ctx.arc(x, y, 3, 0, Math.PI * 2); // Vẽ chấm tròn
-        } else { // Ví dụ: dòng đi lên hoặc sang trái
-             ctx.arc(x, y, 3, 0, Math.PI * 2); // Vẽ chấm tròn
-        }
+        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();
     }
-    ctx.restore(); // Khôi phục trạng thái canvas
 }
 
 
@@ -83,44 +183,55 @@ function drawFlow(startX, startY, endX, endY, direction = 'right', speed = 5) {
 function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height); // Xóa canvas
 
-    // Vẽ các thành phần
-    drawComponent(solarPanel, 'Tấm pin', colors.solar);
-    drawComponent(inverter, 'Biến tần', colors.inverter);
-    drawComponent(battery, 'Pin lưu trữ', colors.battery);
-    drawComponent(homeLoad, 'Tải nhà', colors.home);
+    // Vẽ các thành phần với biểu tượng trực quan
+    drawSolarPanelIcon(solarPanel.x, solarPanel.y, solarPanel.width);
+    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);
+
+    // Vẽ nhãn cho các thành phần (có thể đặt lại vị trí cho phù hợp với icon mới)
+    ctx.fillStyle = colors.text;
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('Tấm pin', solarPanel.x + solarPanel.width / 2, solarPanel.y + solarPanel.height + 20);
+    ctx.fillText('Biến tần', inverter.x + inverter.width / 2, inverter.y + inverter.height + 20);
+    ctx.fillText('Pin lưu trữ', battery.x + battery.width / 2, battery.y + battery.height + 20);
+    ctx.fillText('Tải nhà', homeLoad.x + homeLoad.width / 2, homeLoad.y + homeLoad.height + 20);
+
 
-    // Vẽ luồng năng lượng
+    // Vẽ luồng năng lượng với mũi tên
     // Pin -> Biến tần
-    drawFlow(
-        solarPanel.x + solarPanel.width / 2, solarPanel.y + solarPanel.height,
-        inverter.x + inverter.width / 2, inverter.y,
-        'down'
+    drawMovingArrow(
+        { x: solarPanel.x + solarPanel.width / 2, y: solarPanel.y + solarPanel.height },
+        { x: inverter.x + inverter.width / 2, y: inverter.y },
+        energyFlowOffset
     );
 
     // Biến tần -> Tải nhà
-    drawFlow(
-        inverter.x + inverter.width, inverter.y + inverter.height / 2,
-        homeLoad.x, homeLoad.y + homeLoad.height / 2,
-        'right'
+    drawMovingArrow(
+        { x: inverter.x + inverter.width, y: inverter.y + inverter.height / 2 },
+        { x: homeLoad.x, y: homeLoad.y + homeLoad.height / 2 },
+        energyFlowOffset
     );
 
-    // Biến tần -> Pin lưu trữ
-    drawFlow(
-        inverter.x + inverter.width / 2, inverter.y + inverter.height,
-        battery.x + battery.width / 2, battery.y,
-        'down'
+    // Biến tần -> Pin lưu trữ (năng lượng dư thừa)
+    // Đường chéo xuống
+    drawMovingArrow(
+        { x: inverter.x + inverter.width / 2, y: inverter.y + inverter.height },
+        { x: battery.x + battery.width / 2, y: battery.y },
+        energyFlowOffset
     );
 
-    // Pin lưu trữ -> Biến tần (khi năng lượng được lấy từ pin)
-    drawFlow(
-        battery.x + battery.width / 2, battery.y,
-        inverter.x + inverter.width / 2, inverter.y + inverter.height,
-        'up', // Dòng đi lên
-        -5 // Tốc độ ngược lại
+    // Pin lưu trữ -> Biến tần (khi tải cần)
+    // Đường chéo lên
+    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 - 1) % 50; // Thay đổi tốc độ và độ dài dòng chảy
+    energyFlowOffset = (energyFlowOffset + 2) % 100; // Thay đổi tốc độ và khoảng cách mũi tên
 
     animationFrameId = requestAnimationFrame(draw); // Lặp lại hoạt hình
 }