Simulatore di Circuiti AC by @fammattera - Codewith.it

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

Referenze

application-x-www-form-urlencodedCodifica dei caratteri di un form
<li>Inserisce voci all'interno di una lista
<body>Tag primario di un documento HTML
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Italiano-Cinema [Bacheca]

Analizzatore Exif

Review of Functions I

compito 15 maggio

Calcolo Costo Totale

ciao io sono sara

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>