Neste exemplo, criaremos um monitor de sistema usando BigBashView com HTML, CSS e JavaScript. O monitor exibirá informações do sistema em tempo real.
1. Crie um arquivo chamado **monitor_sistema.sh.htm** com o seguinte conteúdo:
#!/bin/bash
echo "<!DOCTYPE html>"
echo "<html>"
echo "<head>"
echo "<title>Monitor do Sistema - BigBashView</title>"
echo "<style>"
echo " body { font-family: Arial, sans-serif; background-color: #333; color: #fff; }"
echo " .container { display: flex; flex-wrap: wrap; gap: 16px; }"
echo " .info-box { width: 50%; padding: 16px; background-color: #444; border-radius: 4px; }"
echo " .info-title { font-size: 24px; margin-bottom: 8px; }"
echo " .info-value { font-size: 48px; font-weight: bold; }"
echo "</style>"
echo "</head>"
echo "<body>"
echo "<h1>Monitor do Sistema</h1>"
echo "<div class='container'>"
echo " <div class='info-box'><div class='info-title'>Uso da CPU</div><div class='info-value' id='cpu_value'>0%</div></div>"
echo " <div class='info-box'><div class='info-title'>Uso da Memória</div><div class='info-value' id='memory_value'>0%</div></div>"
echo " <div class='info-box'><div class='info-title'>Uso do Disco</div><div class='info-value' id='disk_value'>0%</div></div>"
echo "</div>"
echo "<script>"
echo " function fetchData() {"
echo " return fetch('fetch_data.run')"
echo " .then(response => response.json());"
echo " }"
echo ""
echo " function updateInfo(data) {"
echo " document.getElementById('cpu_value').innerText = data.cpu_usage + '%';"
echo " document.getElementById('memory_value').innerText = parseFloat(data.memory_usage).toFixed(2) + '%';"
echo " document.getElementById('disk_value').innerText = data.disk_usage + '%';"
echo " }"
echo ""
echo " async function updateSystemInfo() {"
echo " const data = await fetchData();"
echo " updateInfo(data);"
echo " }"
echo ""
echo " setInterval(updateSystemInfo, 1000);"
echo "</script>"
echo "</body>"
echo "</html>"
2. Crie um arquivo chamado `fetch_data.run` com o seguinte conteúdo:
#!/bin/bash
cpu_usage=$(grep 'cpu ' /proc/stat | awk '{usage=($2+$4)*100/($2+$4+$5)} END {print usage "%"}')
memory_usage=$(free | grep Mem | awk '{print 100 * $3 / $2}')
disk_usage=$(df | grep "/$" | awk '{print $5}' | tr -d '%')
echo "{
\"cpu_usage\": \"$cpu_usage\",
\"memory_usage\": \"$memory_usage\",
\"disk_usage\": \"$disk_usage\"
}"
3. Torne o arquivo **fetch_data.run** executável:
chmod +x fetch_data.run
4. Para executar o script no BigBashView, utilize o comando:
bigbashview monitor_sistema.sh.htm
Agora o arquivo **monitor_sistema.sh.htm** contém o código HTML, CSS e JavaScript para criar um monitor de sistema que exibe os valores do consumo de processamento, memória, gravação e leitura de disco e tráfego de rede como números atualizados em tempo real.
O arquivo **fetch_data.run** continua sendo responsável por coletar os dados do sistema. A função **updateInfo(data)** atualiza os valores exibidos na tela com os dados recebidos.