ONLym BOT Gist Uploaded

canvas-Server.js

const { createCanvas, loadImage } = require('canvas');

async function createServerStatusImage(data) {
    const width = 1280;
    const height = 720;
    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext('2d');

    // Load Background
    const background = await loadImage('https://files.catbox.moe/7dlq8d.jpg');
    ctx.drawImage(background, 0, 0, width, height);

    // Overlay Gradient
    const overlay = ctx.createLinearGradient(0, 0, width, height);
    overlay.addColorStop(0, 'rgba(0, 0, 0, 0.85)');
    overlay.addColorStop(1, 'rgba(10, 20, 30, 0.7)');
    ctx.fillStyle = overlay;
    ctx.fillRect(0, 0, width, height);

    // Border Futuristic Glow
    ctx.strokeStyle = '#00fbff';
    ctx.lineWidth = 5;
    ctx.strokeRect(40, 40, width - 80, height - 80);

    // Header
    ctx.font = 'bold 55px Arial';
    ctx.fillStyle = '#00fbff';
    ctx.shadowBlur = 15;
    ctx.shadowColor = '#00fbff';
    ctx.textAlign = 'center';
    ctx.fillText('SYSTEM MONITOR', width / 2, 120);
    ctx.shadowBlur = 0;

    // Helper Function: Progress Bar (Modified with Extra Info)
    const drawProgressBar = (label, currentPercent, extraInfo, x, y, widthBar, color) => {
        const percent = parseFloat(currentPercent);
        
        // Label & Persentase
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 22px Arial';
        ctx.textAlign = 'left';
        ctx.fillText(label, x, y - 15);
        ctx.textAlign = 'right';
        ctx.fillText(`${percent}%`, x + widthBar, y - 15);

        // Background Bar
        ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
        ctx.roundRect(x, y, widthBar, 22, 10);
        ctx.fill();

        // Main Bar (Progress)
        const grad = ctx.createLinearGradient(x, 0, x + widthBar, 0);
        grad.addColorStop(0, color);
        grad.addColorStop(1, '#ffffff');
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.roundRect(x, y, (percent / 100) * widthBar, 22, 10);
        ctx.fill();

        // (Spesifik RAM/DISK)
        if (extraInfo) {
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
            ctx.font = '16px Arial';
            ctx.textAlign = 'right';
            ctx.fillText(extraInfo, x + widthBar, y + 45);
        }
    };

    // 1. Info detail
    const infoX = 100;
    let infoY = 210; 
    const itemSpacing = 75; 

    const details = [
        { label: 'PLATFORM', value: data.osType },
        { label: 'UPTIME', value: data.uptime },
        { label: 'LATENCY', value: `${data.latensi}ms` },
        { label: 'CPU CORE', value: `${data.coreCount} Cores` },
        { label: 'PROCESSOR', value: data.cpuModel }
    ];

    details.forEach(item => {
        ctx.textAlign = 'left';
        ctx.font = '16px Arial'; 
        ctx.fillStyle = '#00fbff';
        ctx.fillText(item.label, infoX, infoY);
        
        ctx.font = 'bold 26px Arial'; 
        ctx.fillStyle = '#ffffff';
        ctx.fillText(item.value, infoX, infoY + 28); 
        infoY += itemSpacing; 
    });

    // 2. Bagian Progress Bar
    const barX = 680;
    const barWidth = 500;
    
    const ramPercent = ((parseFloat(data.usedMem) / parseFloat(data.totalMem)) * 100).toFixed(1);
    const diskPercent = ((parseFloat(data.storageUsed) / parseFloat(data.storageTotal)) * 100).toFixed(1);

    drawProgressBar('CPU LOAD', data.cpuUsage, null, barX, 240, barWidth, '#00fbff');
    drawProgressBar('MEMORY USAGE', ramPercent, `${data.usedMem} GB / ${data.totalMem} GB`, barX, 350, barWidth, '#ff00ff');
    drawProgressBar('STORAGE USAGE', diskPercent, `${data.storageUsed} GB / ${data.storageTotal} GB`, barX, 460, barWidth, '#ffff00');


    ctx.textAlign = 'center';
    ctx.font = 'italic 20px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillText(`Automated System Monitor • ${data.botName}`, width / 2, height - 70);

    return canvas.toBuffer('image/png');
}

module.exports = { createServerStatusImage };