Simulatore di Circuiti AC by @fammattera - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<q>Indica una parte di testo come citazione breve
requiredRende obbligatorio un campo di input
minlengthDetermina il numero minimo di caratteri per un elemento input
maxImposta il valore numerico o temporale massimo per un elemento input
<blockquote>Inserisce citazioni in un documento HTML
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

esercitazione numero 1

esercizio esame \"if else\" in html

Tastiera digitale

Eleganza Gioielli

VERIFICA RANZI LEONARDO

Esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulatore di Circuiti AC</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background-color: #f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); padding: 1.5rem; margin-bottom: 1rem; }
        .math-box { font-family: 'Courier New', Courier, monospace; color: #1e293b; background: #f1f5f9; padding: 1rem; border-left: 4px solid #3b82f6; }
        /* Altezza maggiorata per il grafico */
        .chart-container { position: relative; height: 500px; width: 100%; }
        canvas { width: 100% !important; height: 100% !important; }
    </style>
</head>
<body class="p-4 md:p-8">

    <div class="max-w-7xl mx-auto">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold text-slate-800">Simulatore Interattivo di Circuiti AC</h1>
            <p class="text-slate-600 mt-2 text-lg">Analisi avanzata e visualizzazione delle grandezze elettriche</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <!-- Colonna Sinistra: Input e Formule (4/12) -->
            <div class="lg:col-span-4 space-y-6">
                <!-- Parametri -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
                        <span>⚙️</span> Parametri
                    </h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">Tipo di Circuito</label>
                            <select id="circuitType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 bg-slate-50 border">
                                <option value="R">Puramente Resistivo (R)</option>
                                <option value="L">Puramente Induttivo (L)</option>
                                <option value="C">Puramente Capacitivo (C)</option>
                                <option value="RL">Serie RL</option>
                                <option value="RC">Serie RC</option>
                                <option value="RLC" selected>Serie RLC</option>
                            </select>
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <div>
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    V_picco (V) <span id="vPeakVal" class="text-blue-600">100 V</span>
                                </label>
                                <input type="range" id="vPeak" min="10" max="400" value="100" class="w-full">
                            </div>
                            <div>
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Frequenza (Hz) <span id="freqVal" class="text-blue-600">50 Hz</span>
                                </label>
                                <input type="range" id="freq" min="1" max="200" value="50" class="w-full">
                            </div>
                            <div id="rowR">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Resistenza (Ω) <span id="resVal" class="text-blue-600">100 Ω</span>
                                </label>
                                <input type="range" id="res" min="1" max="1000" value="100" class="w-full">
                            </div>
                            <div id="rowL">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Induttanza (mH) <span id="indVal" class="text-blue-600">200 mH</span>
                                </label>
                                <input type="range" id="ind" min="1" max="1000" value="200" class="w-full">
                            </div>
                            <div id="rowC">
                                <label class="flex justify-between text-sm font-medium text-slate-700">
                                    Capacità (µF) <span id="capVal" class="text-blue-600">50 µF</span>
                                </label>
                                <input type="range" id="cap" min="1" max="1000" value="50" class="w-full">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Formule -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-4 text-slate-800">? Formule e Valori</h2>
                    <div id="formulaBox" class="math-box text-sm space-y-2 overflow-x-auto">
                        <!-- JS content -->
                    </div>
                </div>
            </div>

            <!-- Colonna Destra: Schema e Grafico (8/12) -->
            <div class="lg:col-span-8 space-y-6">
                <!-- Schema del Circuito -->
                <div class="card">
                    <h2 class="text-xl font-semibold mb-2">?️ Schema Circuitale</h2>
                    <div id="circuitDiagram" class="flex justify-center items-center bg-slate-50 border rounded-lg h-40">
                        <!-- SVG dinamico -->
                    </div>
                </div>

                <!-- Grafico Ampio -->
                <div class="card">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold">? Andamento Temporale delle Grandezze</h2>
                        <span class="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500 italic">Asse Y doppio per risoluzione elevata</span>
                    </div>
                    <div class="chart-container">
                        <canvas id="acChart"></canvas>
                    </div>
                    <div class="mt-4 grid grid-cols-3 gap-2 text-center text-[11px] font-medium uppercase tracking-wider">
                        <div class="text-red-600 border-t-2 border-red-600 pt-1">Tensione [V]</div>
                        <div class="text-blue-600 border-t-2 border-blue-600 pt-1">Corrente [A]</div>
                        <div class="text-emerald-600 border-t-2 border-emerald-600 pt-1">Carica [mC]</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let chart;
        const ctx = document.getElementById('acChart').getContext('2d');
        const inputs = ['vPeak', 'freq', 'res', 'ind', 'cap', 'circuitType'];
        const elements = {};
        inputs.forEach(id => elements[id] = document.getElementById(id));

        function initChart() {
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [
                        {
                            label: 'Tensione v(t) [V]',
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.05)',
                            borderWidth: 3,
                            data: [],
                            pointRadius: 0,
                            fill: true,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Corrente i(t) [A]',
                            borderColor: '#3b82f6',
                            borderWidth: 3,
                            data: [],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y1'
                        },
                        {
                            label: 'Carica q(t) [mC]',
                            borderColor: '#10b981',
                            borderWidth: 2,
                            borderDash: [5, 5],
                            data: [],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: false,
                    interaction: { mode: 'index', intersect: false },
                    scales: {
                        x: { 
                            display: true, 
                            title: { display: true, text: 'Tempo [s]', font: { weight: 'bold' } },
                            grid: { color: '#e2e8f0' }
                        },
                        y: { 
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: { display: true, text: 'Tensione [Volt]', color: '#ef4444', font: { weight: 'bold' } },
                            grid: { color: '#e2e8f0' }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: { display: true, text: 'Corrente [A] / Carica [mC]', color: '#3b82f6', font: { weight: 'bold' } },
                            grid: { drawOnChartArea: false }
                        }
                    },
                    plugins: {
                        legend: { display: false } // Usiamo la legenda custom sotto il grafico
                    }
                }
            });
        }

        function updateUI() {
            const type = elements.circuitType.value;
            document.getElementById('rowR').style.display = type.includes('R') ? 'block' : 'none';
            document.getElementById('rowL').style.display = type.includes('L') ? 'block' : 'none';
            document.getElementById('rowC').style.display = type.includes('C') ? 'block' : 'none';

            document.getElementById('vPeakVal').innerText = elements.vPeak.value + " V";
            document.getElementById('freqVal').innerText = elements.freq.value + " Hz";
            document.getElementById('resVal').innerText = elements.res.value + " Ω";
            document.getElementById('indVal').innerText = elements.ind.value + " mH";
            document.getElementById('capVal').innerText = elements.cap.value + " µF";

            calculatePhysics();
            drawCircuit();
        }

        function calculatePhysics() {
            const Vp = parseFloat(elements.vPeak.value);
            const f = parseFloat(elements.freq.value);
            const R = elements.circuitType.value.includes('R') ? parseFloat(elements.res.value) : 0;
            const L = elements.circuitType.value.includes('L') ? parseFloat(elements.ind.value) / 1000 : 0;
            const C = elements.circuitType.value.includes('C') ? parseFloat(elements.cap.value) / 1000000 : Infinity;
            const type = elements.circuitType.value;

            const omega = 2 * Math.PI * f;
            const XL = omega * L;
            const XC = (C === Infinity) ? 0 : 1 / (omega * C);
            
            let X = 0;
            if (type === 'L') X = XL;
            else if (type === 'C') X = -XC;
            else if (type.includes('L') || type.includes('C')) X = XL - XC;

            const Z = Math.sqrt(R**2 + X**2);
            const phi = Math.atan2(X, R);
            const Ip = Vp / Z;

            let formulaHTML = `<div class="font-bold text-blue-800">Parametri Reattivi:</div>`;
            formulaHTML += `<div>ω = ${omega.toFixed(1)} rad/s | Z = ${Z.toFixed(2)} Ω</div>`;
            if (type.includes('L')) formulaHTML += `<div>X_L = ${XL.toFixed(2)} Ω</div>`;
            if (type.includes('C')) formulaHTML += `<div>X_C = ${XC.toFixed(2)} Ω</div>`;
            
            formulaHTML += `<div class="mt-3 font-bold text-blue-800">Equazioni Temporali:</div>`;
            formulaHTML += `<div>v(t) = ${Vp} · sin(${omega.toFixed(1)}t)</div>`;
            formulaHTML += `<div>i(t) = ${Ip.toFixed(3)} · sin(${omega.toFixed(1)}t - ${(phi).toFixed(2)})</div>`;
            
            if (type === 'RC' || type === 'C' || type === 'RLC') {
                const Qp = Ip / omega; 
                formulaHTML += `<div class="text-emerald-600 font-bold mt-2">q(t) = ${(Qp*1000).toFixed(3)} · cos(${omega.toFixed(1)}t - ${phi.toFixed(2)}) [mC]</div>`;
            }
            document.getElementById('formulaBox').innerHTML = formulaHTML;

            const labels = [];
            const dataV = [];
            const dataI = [];
            const dataQ = [];
            const T = 1 / f;
            const periods = 2.5;
            const steps = 300;

            const showQ = (type === 'RC' || type === 'C' || type === 'RLC');
            chart.setDatasetVisibility(2, showQ);

            for (let i = 0; i <= steps; i++) {
                const t = (i / steps) * T * periods;
                const v_t = Vp * Math.sin(omega * t);
                const i_t = Ip * Math.sin(omega * t - phi);
                const q_t = - (Ip / omega) * Math.cos(omega * t - phi);
                
                labels.push(t.toFixed(4));
                dataV.push(v_t);
                dataI.push(i_t);
                dataQ.push(q_t * 1000); // In milliCoulomb per scala Y1
            }

            chart.data.labels = labels;
            chart.data.datasets[0].data = dataV;
            chart.data.datasets[1].data = dataI;
            chart.data.datasets[2].data = dataQ;
            chart.update();
        }

        function drawCircuit() {
            const type = elements.circuitType.value;
            let svg = `<svg viewBox="0 0 400 150" width="100%" height="100%">
                <circle cx="50" cy="75" r="20" fill="none" stroke="#475569" stroke-width="2"/>
                <path d="M 40 75 Q 45 65 50 75 T 60 75" fill="none" stroke="#475569" stroke-width="2"/>
                <line x1="50" y1="55" x2="50" y2="20" stroke="black" stroke-width="2"/>
                <line x1="50" y1="95" x2="50" y2="130" stroke="black" stroke-width="2"/>
                <line x1="50" y1="20" x2="100" y2="20" stroke="black" stroke-width="2"/>
                <line x1="50" y1="130" x2="350" y2="130" stroke="black" stroke-width="2"/>
                <line x1="350" y1="130" x2="350" y2="20" stroke="black" stroke-width="2"/>
            `;
            const parts = [];
            if(type.includes('R')) parts.push('R');
            if(type.includes('L')) parts.push('L');
            if(type.includes('C')) parts.push('C');
            const startX = 100, endX = 350;
            const segmentWidth = (endX - startX) / parts.length;
            parts.forEach((p, i) => {
                const x = startX + (i * segmentWidth);
                const midX = x + segmentWidth / 2;
                svg += `<line x1="${x}" y1="20" x2="${midX - 20}" y2="20" stroke="black" stroke-width="2"/>`;
                if (p === 'R') {
                    svg += `<path d="M ${midX-20} 20 L ${midX-15} 10 L ${midX-5} 30 L ${midX+5} 10 L ${midX+15} 30 L ${midX+20} 20" fill="none" stroke="#ef4444" stroke-width="2"/>`;
                } else if (p === 'L') {
                    svg += `<path d="M ${midX-20} 20 Q ${midX-15} 5 ${midX-10} 20 Q ${midX-5} 5 ${midX} 20 Q ${midX+5} 5 ${midX+10} 20 Q ${midX+15} 5 ${midX+20} 20" fill="none" stroke="#3b82f6" stroke-width="2"/>`;
                } else if (p === 'C') {
                    svg += `<line x1="${midX-5}" y1="5" x2="${midX-5}" y2="35" stroke="#10b981" stroke-width="3"/>`;
                    svg += `<line x1="${midX+5}" y1="5" x2="${midX+5}" y2="35" stroke="#10b981" stroke-width="3"/>`;
                }
                svg += `<line x1="${midX + 20}" y1="20" x2="${x + segmentWidth}" y2="20" stroke="black" stroke-width="2"/>`;
            });
            svg += `</svg>`;
            document.getElementById('circuitDiagram').innerHTML = svg;
        }

        inputs.forEach(id => elements[id].addEventListener('input', updateUI));
        window.onload = () => { initChart(); updateUI(); };
    </script>
</body>
</html>