Simulatore di Circuiti AC by @fammattera - Codewith.it

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

References

<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<tfoot>Definisce il footer o sezione inferiore di una tabella.
minImposta il valore numerico o temporale minimo per un elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

sanchez ximena html 3

Ufficio FSL [Fumetto Toastmasters]

ArteFORMA — Architectural Digita

Heads Or Tails Random Tally

Pagina di esempio

Round+ - social bar

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>