Update static/js/solar_animation.js

static/js/solar_animation.js

@@ -4,154 +4,219 @@ const canvas = document.getElementById('solarCanvas');
 const ctx = canvas.getContext('2d');
 
 let animationFrameId;
-let energyFlowOffset = 0; // Dịch chuyển để tạo hiệu ứng dòng chảy
+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
-const solarPanel = { x: 50, y: 50, width: 100, height: 80 };
-const inverter = { x: 250, y: 150, width: 80, height: 60 };
-const battery = { x: 450, y: 250, width: 70, height: 100 };
+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 };
 
 // Định nghĩa màu sắc và thuộc tính
 const colors = {
-    solar: '#FFD700', // Vàng năng lượng mặt trời
-    inverter: '#4CAF50', // Xanh lá cây
-    battery: '#ADD8E6', // Xanh dương nhạt
-    home: '#FF4500',    // Đỏ cam
-    flow: '#FFA500',    // Cam cho dòng năng lượng
-    text: '#333333',
-    arrow: '#FFFFFF'    // Màu trắng cho mũi tên
+    solarDark: '#4CAF50', // Xanh đậm cho tấm pin
+    solarLight: '#8BC34A', // Xanh nhạt cho tấm pin
+    inverterBody: '#607D8B', // Xám xanh cho thân biến tần
+    inverterAccent: '#FFC107', // Vàng cam cho điểm nhấn biến tần
+    batteryBody: '#2196F3', // Xanh dương cho thân pin
+    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à
+    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
+    shadow: 'rgba(0, 0, 0, 0.2)' // Màu bóng đổ
 };
 
-// Hàm vẽ một hộp (thành phần)
-function drawComponent(comp, label, color) {
-    ctx.fillStyle = color;
-    ctx.fillRect(comp.x, comp.y, comp.width, comp.height);
-    ctx.strokeStyle = '#333';
-    ctx.lineWidth = 2;
-    ctx.strokeRect(comp.x, comp.y, comp.width, comp.height);
-
-    ctx.fillStyle = colors.text;
-    ctx.font = '14px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText(label, comp.x + comp.width / 2, comp.y + comp.height + 20);
-}
+// --- Hàm vẽ các biểu tượng chi tiết 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;
+// 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();
-    // Hình chữ nhật cơ bản
-    ctx.rect(x, y, size, size * 0.7);
+    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();
-    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();
+    // Các ô pin
+    ctx.strokeStyle = colors.solarLight;
+    ctx.lineWidth = 1.5;
+    const cellWidth = width / 4;
+    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);
+        }
     }
+
+    // Hiệu ứng phản chiếu
+    let gradient = ctx.createLinearGradient(x, y, x + width, y + height);
+    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.moveTo(x, y + height * 0.1);
+    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.fillStyle = colors.text;
+    ctx.font = '14px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText('Tấm pin', x + width / 2, y + height + 20);
 }
 
-// Hàm vẽ biểu tượng biến tần (inverter)
+// Vẽ biểu tượng biến tần (inverter)
 function drawInverterIcon(x, y, width, height) {
-    ctx.fillStyle = colors.inverter;
+    // Thân biến tần
+    ctx.fillStyle = colors.inverterBody;
     ctx.fillRect(x, y, width, height);
+
+    // Viền và bóng đổ
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
     ctx.strokeRect(x, y, width, height);
 
-    // Vẽ mũi tên AC/DC
+    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 đổ
+
+    // 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
+
+    // Ký hiệu DC/AC
     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(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();
+    ctx.fillText('DC', x + width * 0.25, y + height / 2);
+    ctx.fillText('AC', x + width * 0.75, y + height / 2);
+
+    ctx.fillStyle = colors.text;
+    ctx.fillText('Biến tần', x + width / 2, y + height + 20);
 }
 
-// Hàm vẽ biểu tượng pin lưu trữ (battery)
+// Vẽ biểu tượng pin lưu trữ (battery)
 function drawBatteryIcon(x, y, width, height) {
-    ctx.fillStyle = colors.battery;
+    // Thân pin
+    ctx.fillStyle = colors.batteryBody;
     ctx.fillRect(x, y, width, height);
+
+    // Viền và bóng đổ
     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
+    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 đổ
+
+    // Các cực
+    ctx.fillStyle = colors.batteryAccent;
+    ctx.fillRect(x + width * 0.35, y - 10, width * 0.3, 10); // Cực dương
+    ctx.fillRect(x + width * 0.35, y + height, width * 0.3, 10); // Cực âm
+    ctx.beginPath();
+    ctx.arc(x + width * 0.5, y - 5, 5, 0, Math.PI * 2); ctx.fill(); // Đầu cực dương
+    ctx.beginPath();
+    ctx.arc(x + width * 0.5, y + height + 5, 5, 0, Math.PI * 2); ctx.fill(); // Đầu cực âm
+
+    // Vạch năng lượng (ví dụ 3/4 pin)
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.fillRect(x + width * 0.1, y + height * 0.1, width * 0.8, height * 0.75); // Mức năng lượng
+
+    ctx.fillStyle = colors.text;
+    ctx.fillText('Pin lưu trữ', x + width / 2, y + height + 20);
 }
 
-// Hàm vẽ biểu tượng nhà (home load)
-function drawHomeIcon(x, y, size) {
-    ctx.fillStyle = colors.home;
+// Vẽ biểu tượng nhà (home load)
+function drawHomeIcon(x, y, width, height) {
     // Thân nhà
-    ctx.fillRect(x, y + size * 0.4, size, size * 0.6);
+    ctx.fillStyle = colors.homeBody;
+    ctx.fillRect(x, y + height * 0.4, width, height * 0.6);
+
     // Mái nhà
+    ctx.fillStyle = colors.homeRoof;
     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.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();
 
+    // Viền và bóng đổ
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 2;
-    ctx.strokeRect(x, y + size * 0.4, size, size * 0.6);
+    ctx.strokeRect(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.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);
+    ctx.fillRect(x + width * 0.55, y + height * 0.5, width * 0.25, height * 0.25);
+
+    ctx.fillStyle = colors.text;
+    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 = 8, speed = 1) {
+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);
 
-    // Chỉ vẽ nếu có đủ không gian cho mũi tên
+    // Không vẽ nếu đường quá ngắn
     if (distance < arrowSize * 2) return;
 
-    ctx.strokeStyle = colors.flow;
-    ctx.lineWidth = 3;
+    // Đường dẫn chính của dòng chảy
+    ctx.strokeStyle = colors.flowPrimary;
+    ctx.lineWidth = 4;
     ctx.beginPath();
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p2.x, p2.y);
     ctx.stroke();
 
-    ctx.fillStyle = colors.arrow; // Màu trắng cho mũi tên
+    ctx.fillStyle = colors.flowSecondary; // Màu trắng cho mũi tên
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 1;
 
-    // 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
+    // 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;
+
     for (let i = 0; i < numArrows; i++) {
-        let currentPos = (offset + i * (arrowSize * 3)) % distance;
+        let currentPos = (offset + i * arrowSpacing) % distance;
         if (currentPos < 0) currentPos += distance; // Xử lý offset âm
 
         const ratio = currentPos / distance;
@@ -179,51 +244,39 @@ function drawMovingArrow(p1, p2, offset, arrowSize = 8, speed = 1) {
 }
 
 
-// Hàm chính để vẽ tất cả
+// --- Hàm chính để vẽ tất cả ---
 function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height); // Xóa canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Xóa canvas cho khung hình mới
 
-    // Vẽ các thành phần với biểu tượng trực quan
-    drawSolarPanelIcon(solarPanel.x, solarPanel.y, solarPanel.width);
+    // Vẽ các thành phần với biểu tượng trực quan chi tiết
+    drawSolarPanelIcon(solarPanel.x, solarPanel.y, solarPanel.width, solarPanel.height);
     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);
-
+    drawHomeIcon(homeLoad.x, homeLoad.y, homeLoad.width, homeLoad.height);
 
     // Vẽ luồng năng lượng với mũi tên
-    // Pin -> Biến tần
+    // Pin -> Biến tần (DC)
     drawMovingArrow(
         { x: solarPanel.x + solarPanel.width / 2, y: solarPanel.y + solarPanel.height },
-        { x: inverter.x + inverter.width / 2, y: inverter.y },
+        { x: inverter.x + inverter.width * 0.25, y: inverter.y + inverter.height / 2 },
         energyFlowOffset
     );
 
-    // Biến tần -> Tải nhà
+    // Biến tần -> Tải nhà (AC)
     drawMovingArrow(
-        { x: inverter.x + inverter.width, y: inverter.y + inverter.height / 2 },
+        { 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)
-    // Đường chéo xuống
+    // Biến tần -> Pin lưu trữ (năng lượng dư thừa, AC sang DC)
     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 tải cần)
-    // Đường chéo lên
+    // 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 },