Info System HTML

Kalau di-host dengan Nginx di Armbian, solusi yang paling rapi adalah:

**Armbian → script shell → JSON → Nginx → index.html**

Sehingga data CPU, RAM, suhu, storage, dan uptime selalu update otomatis.

## 1. Buat script pengumpul data

“`bash
nano /usr/local/bin/sysinfo.sh
“`

Isi:

“`bash
#!/bin/bash

LOAD=$(awk -v c=”$(nproc)” ‘{printf “%.0f%%”, ($1/c)*100}’ /proc/loadavg)

MEM=$(free -m | awk ‘/Mem:/ {
used=$3;
total=$2;
printf “%.0f%% dari %.2fG”, (used/total)*100, total/1024
}’)

TEMP=$(cat /sys/class/thermal/thermal_zone0/temp 2>/dev/null)

if [ -n “$TEMP” ]; then
TEMP=”$((TEMP/1000))° Celcius”
else
TEMP=”N/A”
fi

DISK=$(df -h / | awk ‘NR==2{
printf “%s of %s”,$5,$2
}’)

UPTIME=$(uptime -p \
| sed ‘s/up //’ \
| sed ‘s/ days\?/hari/g’ \
| sed ‘s/ hours\?/jam/g’ \
| sed ‘s/ minutes\?/mnt/g’ \
| sed ‘s/,//g’)

MOPIDY=$(systemctl is-active mopidy)
CAMILLA=$(systemctl is-active camilladsp)
NGINX=$(systemctl is-active nginx)

cat <<EOF
{
“load”:”$LOAD”,
“memory”:”$MEM”,
“temp”:”$TEMP”,
“disk”:”$DISK”,
“uptime”:”$UPTIME”,
“mopidy”:”$MOPIDY”,
“camilla”:”$CAMILLA”,
“nginx”:”$NGINX”
}
EOF
“`

Simpan.

Beri izin:

“`bash
chmod +x /usr/local/bin/sysinfo.sh
“`

—

## 2. Buat file JSON yang di-update otomatis

“`bash
mkdir -p /var/www/html/api
“`

Test:

“`bash
/usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
“`

Cek:

“`bash
cat /var/www/html/api/sysinfo.json
“`

Harus muncul:

“`json
{
“load”:”6%”,
“memory”:”15% dari 1.87G”,
“temp”:”54° Celcius”,
“disk”:”42% of 5.7G”,
“uptime”:”54mnt”,
“mopidy”:”active”,
“camilla”:”active”,
“nginx”:”active”
}
“`

—

## 3. Update otomatis tiap 10 detik

“`bash
crontab -e
“`

Tambahkan:

“`cron
* * * * * /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
* * * * * sleep 10; /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
* * * * * sleep 20; /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
* * * * * sleep 30; /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
* * * * * sleep 40; /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
* * * * * sleep 50; /usr/local/bin/sysinfo.sh > /var/www/html/api/sysinfo.json
“`

—

## 4. Tambahkan panel di sidebar

Tepat setelah:

“`html
<div class=”mode-buttons”>
…
</div>
“`

Tambahkan:

“`html
<div class=”system-info”>

<div><span class=”label”>Load</span> :
<span id=”load”>–</span></div>

<div><span class=”label”>Memory</span> :
<span id=”memory”>–</span></div>

<div><span class=”label”>CPU Temp</span> :
<span id=”temp”>–</span></div>

<div><span class=”label”>Storage</span> :
<span id=”disk”>–</span></div>

<div><span class=”label”>Uptime</span> :
<span id=”uptime”>–</span></div>

</div>
“`

—

## 5. Tambahkan CSS

Di bagian `<style>`:

“`css
.system-info{
margin-top:15px;
padding:12px;
background:#151515;
border:1px solid #2a2a2a;
border-radius:10px;
color:#9cff9c;
font-family:monospace;
font-size:13px;
line-height:1.8;
}

.label{
color:#888;
display:inline-block;
width:80px;
}
“`

—

## 6. Tambahkan JavaScript

Sebelum `</script>` yang sudah ada:

“`javascript
async function updateSystemInfo(){

try{

const res = await fetch(‘/api/sysinfo.json?t=’ + Date.now());
const data = await res.json();

document.getElementById(‘load’).textContent = data.load;
document.getElementById(‘memory’).textContent = data.memory;
document.getElementById(‘temp’).textContent = data.temp;
document.getElementById(‘disk’).textContent = data.disk;
document.getElementById(‘uptime’).textContent = data.uptime;

}catch(e){
console.log(e);
}

}

updateSystemInfo();
setInterval(updateSystemInfo,10000);
“`

—

Hasilnya nanti area kosong di bawah preset akan berubah menjadi dashboard kecil seperti:

“`text
Load : 12%
Memory : 34% of 1.87G
CPU Temp : 48°C
Storage : 41% of 6.7G
Uptime : 2 hours
“`

dan nilainya akan refresh otomatis setiap 10 detik tanpa reload halaman. Ini cukup ringan untuk STB S905X yang sedang menjalankan MPD + CamillaDSP.