ECC RELATED

 <div style="font-family:Arial, Helvetica, sans-serif; line-height:1.7; max-width:950px; margin:auto; padding:20px; background:#fdfdfd; border:1px solid #ccc; border-radius:8px;">

<h2 style="color:#2a5db0;">Body Roll (Limbung) & FULL Simulator Dashboard + Real-Time Graph (EEC / EU Type Approval)</h2>

<p>

Body roll adalah efek samping dinamika kendaraan. EEC menilai stabilitas kendaraan melalui:

<ul>

<li>Yaw stability</li>

<li>Lateral acceleration</li>

<li>Roll motion</li>

<li>Lateral displacement</li>

</ul>

</p>

<hr />

<h3 style="color:#2a5db0;">1. Lateral Acceleration & Roll Moment</h3>

<p>

<b>Lateral Acceleration (a_y):</b> a_y = v² / R<br>

<b>Roll Moment (M_roll):</b> M_roll = m × a_y × h

</p>

<hr />

<h3 style="color:#2a5db0;">2. Roll Motion & Yaw Stability</h3>

<ul>

<li>Roll angle & roll rate menentukan seberapa cepat kendaraan miring.</li>

<li>Yaw moment menentukan arah kendaraan saat lateral force berubah.</li>

<li>Oversteer / Understeer terjadi jika roll motion tidak terkendali.</li>

</ul>

<hr />

<h3 style="color:#2a5db0;">3. Lateral Displacement</h3>

<p>

Perpindahan lateral = hasil interaksi gaya lateral, roll moment, & yaw moment. Limbung berlebihan → kendaraan keluar jalur.

</p>

<hr />

<h3 style="color:#2a5db0;">4. Diagram Gaya Lengkap</h3>

<pre style="background:#f4f4f4; padding:12px; border-radius:6px; overflow:auto;">

Lateral Force → Lateral Acceleration → Roll Moment

       ↓                         ↓

       Yaw Moment ← Distribusi Beban → Lateral Displacement

</pre>

<hr />

<h3 style="color:#2a5db0;">5. Diagram ASCII</h3>

<pre style="background:#f4f4f4; padding:12px; border-radius:6px; overflow:auto; font-family:monospace;">

       ↑ Roll Moment

       │

       │     ● Bodi Kendaraan

       │    / \

       │   /   \

       │

       │

       ─────────────→ Lateral Force (Fy)

       │

       │

       │

       ↓ Yaw Moment

</pre>

<hr />

<h3 style="color:#2a5db0;">6. Diagram SVG Interaktif + Animasi Panah</h3>

<svg width="100%" height="250px" viewBox="0 0 500 250">

  <rect x="200" y="100" width="100" height="40" fill="#2a5db0" rx="5" />

  <line x1="300" y1="120" x2="450" y2="120" stroke="red" stroke-width="4" marker-end="url(#arrowhead)">

    <animate attributeName="x2" values="300;450;300" dur="2s" repeatCount="indefinite"/>

  </line>

  <text x="460" y="125" fill="red" font-size="12">Lateral Force (Fy)</text>

  <line x1="250" y1="100" x2="250" y2="30" stroke="green" stroke-width="4" marker-end="url(#arrowhead)">

    <animate attributeName="y2" values="100;30;100" dur="2s" repeatCount="indefinite"/>

  </line>

  <text x="260" y="35" fill="green" font-size="12">Roll Moment</text>

  <line x1="200" y1="120" x2="150" y2="170" stroke="orange" stroke-width="4" marker-end="url(#arrowhead)">

    <animate attributeName="x2" values="200;150;200" dur="2s" repeatCount="indefinite"/>

    <animate attributeName="y2" values="120;170;120" dur="2s" repeatCount="indefinite"/>

  </line>

  <text x="80" y="180" fill="orange" font-size="12">Yaw Moment</text>

  <defs>

    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">

      <polygon points="0 0, 10 3.5, 0 7" fill="black"/>

    </marker>

  </defs>

</svg>

<hr />

<h3 style="color:#2a5db0;">7. Simulasi Trajectory + Roll Angle</h3>

<svg width="100%" height="250px" viewBox="0 0 500 250">

  <path id="path" d="M50 200 Q250 50 450 200" stroke="#999" stroke-width="2" fill="none"/>

  <g>

    <rect x="-10" y="-5" width="20" height="10" fill="#2a5db0" rx="2">

      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">

        <mpath href="#path"/>

      </animateMotion>

      <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="10 0 0" dur="3s" repeatCount="indefinite" additive="sum"/>

    </rect>

    <line x1="0" y1="0" x2="20" y2="0" stroke="red" stroke-width="3" marker-end="url(#arrowhead2)">

      <animate attributeName="x2" values="0;20;0" dur="2s" repeatCount="indefinite"/>

    </line>

  </g>

  <defs>

    <marker id="arrowhead2" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">

      <polygon points="0 0, 10 3.5, 0 7" fill="red"/>

    </marker>

  </defs>

</svg>

<hr />

<h3 style="color:#2a5db0;">8. Dashboard Real-Time + Numeric Indicators</h3>

<div style="display:flex; justify-content:space-around; background:#eef; padding:10px; border-radius:8px;">

  <div>

    <b>Lateral Force (Fy)</b> <span id="numFy">0 N</span><br>

    <div style="width:100px; height:20px; background:#ccc; border-radius:5px; overflow:hidden;">

      <div id="barFy" style="width:50%; height:100%; background:red;"></div>

    </div>

  </div>

  <div>

    <b>Roll Angle</b> <span id="numRoll">0°</span><br>

    <div style="width:100px; height:20px; background:#ccc; border-radius:5px; overflow:hidden;">

      <div id="barRoll" style="width:30%; height:100%; background:green;"></div>

    </div>

  </div>

  <div>

    <b>Yaw Moment</b> <span id="numYaw">0 Nm</span><br>

    <div style="width:100px; height:20px; background:#ccc; border-radius:5px; overflow:hidden;">

      <div id="barYaw" style="width:40%; height:100%; background:orange;"></div>

    </div>

  </div>

</div>

<hr />

<h3 style="color:#2a5db0;">9. Real-Time Line Chart (Simulasi Data Dinamis)</h3>

<canvas id="chart" width="900" height="250" style="background:#f4f4f4; border:1px solid #ccc; border-radius:8px;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {

    type: 'line',

    data: {

        labels: Array.from({length:50}, (_,i)=>i),

        datasets: [

            {label:'Lateral Force (Fy)', data: Array(50).fill(0), borderColor:'red', fill:false},

            {label:'Roll Angle', data: Array(50).fill(0), borderColor:'green', fill:false},

            {label:'Yaw Moment', data: Array(50).fill(0), borderColor:'orange', fill:false}

        ]

    },

    options: {animation:false, responsive:true, scales:{y:{beginAtZero:true}}}

});

// Update data setiap detik

setInterval(()=>{

    const Fy = Math.floor(Math.random()*1000);

    const Roll = Math.floor(Math.random()*10);

    const Yaw = Math.floor(Math.random()*500);

    chart.data.datasets[0].data.push(Fy); chart.data.datasets[0].data.shift();

    chart.data.datasets[1].data.push(Roll); chart.data.datasets[1].data.shift();

    chart.data.datasets[2].data.push(Yaw); chart.data.datasets[2].data.shift();

    chart.update();

    // Update numeric dashboard

    document.getElementById('numFy').innerText = Fy + ' N';

    document.getElementById('barFy').style.width = (Fy/1000*100)+'%';

    document.getElementById('numRoll').innerText = Roll + '°';

    document.getElementById('barRoll').style.width = (Roll/10*100)+'%';

    document.getElementById('numYaw').innerText = Yaw + ' Nm';

    document.getElementById('barYaw').style.width = (Yaw/500*100)+'%';

},1000);

</script>

<hr />

<h3 style="color:#2a5db0;">10. Kesimpulan</h3>

<p>

Versi ULTRA TOTAL ini menampilkan:

<ul>

<li>Body roll & limbung secara teoritis & dinamis</li>

<li>Diagram animatif & interaktif</li>

<li>Simulasi trajectory + roll angle</li>

<li>Dashboard + numeric indicators real-time</li>

<li>Real-time line chart untuk Lateral Force, Roll Angle, Yaw Moment</li>

<li>Full simulator visual: kendaraan bergerak, bodi miring sesuai roll, panah gaya bergerak mengikuti lintasan</li>

</ul>

Semua membantu memahami perilaku kendaraan secara realistis sesuai standar EEC / EU Type Approval.

</p>

</div>