Create static/js/solar_animation.js

static/js/solar_animation.js

@@ -0,0 +1,143 @@
+// solar_animation.js
+
+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
+
+// 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 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'
+};
+
+// 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ẽ 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
+
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+
+    // 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ẽ
+
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; // Màu sáng cho hiệu ứng dòng chảy
+    ctx.lineWidth = 2;
+
+    const numDots = 10;
+    const lineLength = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+    const dotSpacing = lineLength / numDots;
+
+    for (let i = 0; i < numDots; i++) {
+        let currentPos = (energyFlowOffset + i * dotSpacing) % lineLength;
+        if (currentPos < 0) currentPos += lineLength; // Xử lý khi offset âm
+
+        let ratio = currentPos / lineLength;
+        let x = startX + (endX - startX) * ratio;
+        let y = startY + (endY - startY) * ratio;
+
+        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
+        }
+
+        ctx.fill();
+    }
+    ctx.restore(); // Khôi phục trạng thái canvas
+}
+
+
+// Hàm chính để vẽ tất cả
+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ẽ luồng năng lượng
+    // Pin -> Biến tần
+    drawFlow(
+        solarPanel.x + solarPanel.width / 2, solarPanel.y + solarPanel.height,
+        inverter.x + inverter.width / 2, inverter.y,
+        'down'
+    );
+
+    // 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'
+    );
+
+    // 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'
+    );
+
+    // 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
+    );
+
+    // 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
+
+    animationFrameId = requestAnimationFrame(draw); // Lặp lại hoạt hình
+}
+
+// Các hàm điều khiển hoạt hình
+function startAnimation() {
+    if (!animationFrameId) { // Chỉ bắt đầu nếu chưa có hoạt hình đang chạy
+        draw();
+    }
+}
+
+function stopAnimation() {
+    if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+}
+
+// Bắt đầu hoạt hình khi trang tải xong
+window.onload = startAnimation;