urmic_digital_encoder_decoder/encoder/index.php

<?php
/*
Urmi you happy me happy licence
Copyright (c) 2026 shreebhattji
License text:
https://github.com/shreebhattji/Urmi/blob/main/licence.md
*/
include 'header.php'; ?>

<div class="containerindex">
  <div class="grid">

    <div class="card">
      <h3>CPU (%)</h3>
      <div class="chart-wrap"><canvas id="cpuChart"></canvas></div>
    </div>

    <div class="card">
      <h3>RAM (%)</h3>
      <div class="chart-wrap"><canvas id="ramChart"></canvas></div>
    </div>

    <div class="card">
      <h3>Network (KB/s)</h3>
      <div class="chart-wrap"><canvas id="netChart"></canvas></div>
    </div>

    <div class="card">
      <h3>Disk I/O (KB/s) & Disk %</h3>
      <div class="chart-wrap"><canvas id="diskChart"></canvas></div>
    </div>

    <div class="card">
      <h3>Intel iGPU Engines (%)</h3>
      <div class="chart-wrap"><canvas id="gpuChart"></canvas></div>
    </div>

  </div>

  <div style="margin-top:12px;color:#9fb2d6;display:flex;justify-content:space-between;">
    <div>Last update: <span id="lastUpdate">—</span></div>
    <div>
      CPU: <span id="lastCpu">—</span>% ·
      RAM: <span id="lastRam">—</span>% ·
      GPU: <span id="lastGpu">—</span>% ·
      In: <span id="lastIn">—</span>KB/s ·
      Out: <span id="lastOut">—</span>KB/s
    </div>
  </div>
</div>

<script>
  const POLL_MS = 1000;
  const JSON_URL = "metrics.json";
  const toKB = v => Math.round(v / 1024);

  /* CPU */
  const cpuChart = new Chart(document.getElementById('cpuChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
        label: 'CPU %',
        data: [],
        tension: 0.2
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  });

  /* RAM */
  const ramChart = new Chart(document.getElementById('ramChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
        label: 'RAM %',
        data: [],
        tension: 0.2
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  });

  /* GPU multi-engine */
  const gpuChart = new Chart(document.getElementById('gpuChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
          label: 'Total',
          data: [],
          tension: 0.2
        },
        {
          label: 'Video',
          data: [],
          tension: 0.2
        },
        {
          label: 'Render',
          data: [],
          tension: 0.2
        },
        {
          label: 'Blitter',
          data: [],
          tension: 0.2
        },
        {
          label: 'Enhance',
          data: [],
          tension: 0.2
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  });

  /* Network */
  const netChart = new Chart(document.getElementById('netChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
          label: 'Net In (KB/s)',
          data: [],
          tension: 0.2
        },
        {
          label: 'Net Out (KB/s)',
          data: [],
          tension: 0.2
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  /* Disk */
  const diskChart = new Chart(document.getElementById('diskChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
          label: 'Disk Read (KB/s)',
          data: [],
          tension: 0.2
        },
        {
          label: 'Disk Write (KB/s)',
          data: [],
          tension: 0.2
        },
        {
          label: 'Disk %',
          data: [],
          yAxisID: 'percent',
          tension: 0.2
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          position: 'left',
          beginAtZero: true
        },
        percent: {
          position: 'right',
          min: 0,
          max: 100,
          grid: {
            display: false
          },
          ticks: {
            callback: v => v + '%'
          }
        }
      }
    }
  });

  async function update() {
    try {
      const res = await fetch(JSON_URL + "?_=" + Date.now(), {
        cache: 'no-store'
      });
      if (!res.ok) throw new Error(res.status);
      const j = await res.json();

      const labels = j.timestamps.map(t => new Date(t).toLocaleTimeString());

      /* CPU */
      cpuChart.data.labels = labels;
      cpuChart.data.datasets[0].data = j.cpu_percent;

      /* RAM */
      ramChart.data.labels = labels;
      ramChart.data.datasets[0].data = j.ram_percent;

      /* GPU */
      gpuChart.data.labels = labels;
      gpuChart.data.datasets[0].data = j.gpu_total;
      gpuChart.data.datasets[1].data = j.gpu_video;
      gpuChart.data.datasets[2].data = j.gpu_render;
      gpuChart.data.datasets[3].data = j.gpu_blitter;
      gpuChart.data.datasets[4].data = j.gpu_videoenhance;

      /* NET */
      netChart.data.labels = labels;
      netChart.data.datasets[0].data = j.net_in_Bps.map(toKB);
      netChart.data.datasets[1].data = j.net_out_Bps.map(toKB);

      /* DISK */
      diskChart.data.labels = labels;
      diskChart.data.datasets[0].data = j.disk_read_Bps.map(toKB);
      diskChart.data.datasets[1].data = j.disk_write_Bps.map(toKB);
      diskChart.data.datasets[2].data = j.disk_percent;

      cpuChart.update();
      ramChart.update();
      gpuChart.update();
      netChart.update();
      diskChart.update();

      const last = labels.length - 1;
      if (last >= 0) {
        lastUpdate.textContent = labels[last];
        lastCpu.textContent = j.cpu_percent[last];
        lastRam.textContent = j.ram_percent[last];
        lastGpu.textContent = j.gpu_total[last];
        lastIn.textContent = toKB(j.net_in_Bps[last]);
        lastOut.textContent = toKB(j.net_out_Bps[last]);
      }

    } catch (e) {
      console.error("metrics fetch error", e);
    }
  }

  setInterval(update, POLL_MS);
  update();
</script>

<?php include 'footer.php'; ?>