ECC VERSION-3 SOURCE CODE

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

<h2 style="color:#2a5db0;">Body Roll & FULL INTERACTIVE Vehicle Dynamics Simulator (EEC / EU Type Approval)</h2>

<p>

Simulasi Body Roll / Limbung & Vehicle Dynamics INTERAKTIF. Pengguna bisa mengubah kecepatan, radius tikungan, dan berat kendaraan untuk melihat efek langsung.

</p>

<hr />

<h3 style="color:#2a5db0;">1. Kontrol Interaktif</h3>

<div style="display:flex; justify-content:space-around; flex-wrap:wrap; margin-bottom:10px;">

  <div>

    <label>Speed (km/h): <span id="speedVal">60</span></label><br>

    <input type="range" id="speedInput" min="10" max="120" value="60">

  </div>

  <div>

    <label>Corner Radius (m): <span id="radiusVal">100</span></label><br>

    <input type="range" id="radiusInput" min="20" max="200" value="100">

  </div>

  <div>

    <label>Vehicle Mass (kg): <span id="massVal">1500</span></label><br>

    <input type="range" id="massInput" min="800" max="2500" value="1500">

  </div>

</div>

<hr />

<h3 style="color:#2a5db0;">2. Lintasan & Kendaraan</h3>

<svg id="simSVG" width="100%" height="350px" viewBox="0 0 1000 350">

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

  <g id="car">

    <rect x="-15" y="-7" width="30" height="14" fill="#2a5db0" rx="3"/>

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

    <line x1="0" y1="0" x2="0" y2="-25" stroke="orange" stroke-width="3" marker-end="url(#arrowheadYaw)"/>

  </g>

  <line id="latDisp" x1="0" y1="0" x2="0" y2="0" stroke="purple" stroke-width="2" stroke-dasharray="4"/>

  <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="red"/>

    </marker>

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

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

    </marker>

  </defs>

</svg>

<hr />

<h3 style="color:#2a5db0;">3. Dashboard + Numeric Indicators</h3>

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

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

      <div style="width:120px; 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:120px; 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:120px; height:20px; background:#ccc; border-radius:5px; overflow:hidden;">

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

      </div></div>

  <div><b>Speed</b> <span id="numSpeed">0 km/h</span><br>

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

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

      </div></div>

  <div><b>Lateral Displacement</b> <span id="numLatDisp">0 m</span><br>

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

        <div id="barLatDisp" style="width:20%; height:100%; background:purple;"></div>

      </div></div>

</div>

<hr />

<h3 style="color:#2a5db0;">4. Real-Time Line Chart Multi-Parameter</h3>

<canvas id="chart" width="950" height="350" 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},

            {label:'Speed', data:Array(50).fill(0), borderColor:'blue', fill:false},

            {label:'Lateral Displacement', data:Array(50).fill(0), borderColor:'purple', fill:false}

        ]

    },

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

});

// SVG references

const car = document.getElementById('car');

const path = document.getElementById('track');

const pathLength = path.getTotalLength();

const latLine = document.getElementById('latDisp');

let t = 0;

// Input elements

const speedInput = document.getElementById('speedInput');

const radiusInput = document.getElementById('radiusInput');

const massInput = document.getElementById('massInput');

const speedVal = document.getElementById('speedVal');

const radiusVal = document.getElementById('radiusVal');

const massVal = document.getElementById('massVal');

function updateSimulator(){

    const speed = parseInt(speedInput.value);

    const radius = parseInt(radiusInput.value);

    const mass = parseInt(massInput.value);

    // Update labels

    speedVal.innerText = speed;

    radiusVal.innerText = radius;

    massVal.innerText = mass;

    // Simple physics approximations

    const aLat = (speed*1000/3600)**2 / radius; // m/s²

    const roll = Math.min(aLat*mass*0.0005, 15); // degree

    const yaw = aLat*mass*0.05; // Nm

    const Fy = aLat*mass; // N

    const latDisp = Math.min(aLat*0.05, 3); // meter

    // Update dashboard

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

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

    document.getElementById('numRoll').innerText = roll.toFixed(1)+'°';

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

    document.getElementById('numYaw').innerText = yaw.toFixed(0)+' Nm';

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

    document.getElementById('numSpeed').innerText = speed+' km/h';

    document.getElementById('barSpeed').style.width = (speed/120*100)+'%';

    document.getElementById('numLatDisp').innerText = latDisp.toFixed(2)+' m';

    document.getElementById('barLatDisp').style.width = (latDisp/3*100)+'%';

    // Update chart

    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.data.datasets[3].data.push(speed); chart.data.datasets[3].data.shift();

    chart.data.datasets[4].data.push(latDisp); chart.data.datasets[4].data.shift();

    chart.update();

    // Update car position

    t += 0.01;

    if(t>1) t=0;

    const pos = path.getPointAtLength(t*pathLength);

    const next = path.getPointAtLength(Math.min(t*pathLength+1,pathLength));

    const angle = Math.atan2(next.y-pos.y,next.x-pos.x)*180/Math.PI;

    car.setAttribute('transform', `translate(${pos.x},${pos.y}) rotate(${angle+roll})`);

    latLine.setAttribute('x1', pos.x);

    latLine.setAttribute('y1', pos.y);

    latLine.setAttribute('x2', pos.x+latDisp*20);

    latLine.setAttribute('y2', pos.y);

}

setInterval(updateSimulator, 100);

</script>

<hr />

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

<p>

Versi FINAL INTERAKTIF menampilkan:

<ul>

<li>Kendaraan bergerak di lintasan spline</li>

<li>Bodi kendaraan miring sesuai Roll Angle</li>

<li>Panah gaya lateral & yaw sinkron</li>

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

<li>Real-time line chart multi-parameter</li>

<li>Lateral displacement visual</li>

<li>User bisa mengubah kecepatan, radius tikungan, dan berat kendaraan → efek langsung terlihat</li>

<li>Simulasi interaktif mirip software profesional</li>

<li>100% aman untuk Blogger / Blogspot</li>

</ul>

</p>

</div>