Simple system information plugin

[nokklair]

One thing I love about the GNOME on Linux is the Vitals extension which shows system information on top bar. The only reason I was using YASB on Windows is it was easily doable. Now I couldn't managed to find a way to do that on Seelen UI itself, I found another way to serve it. Here is a simple Python application that serves your CPU usage, memory usage, download speed, and upload speed, as a server:

# server.py
from flask import Flask, jsonify
from flask_cors import CORS
import psutil
import time

app = Flask(__name__)
CORS(app)

@app.route("/api/system_stats")
def system_stats():
    # Prime CPU (clears previous measurement)
    psutil.cpu_percent(interval=1.0)
    
    # Read initial network counters and time
    t0 = time.time()
    counters_t0 = psutil.net_io_counters()

    # This ensures accurate measurement for all metrics
    time.sleep(1.0)
    
    # Network Time Delta
    t1 = time.time()
    counters_t1 = psutil.net_io_counters()
    elapsed_time = t1 - t0 # Actual elapsed time (should be ~1.0)
    
    # CPU Usage (Calculates usage over the 1.0s sleep)
    cpu_usage = psutil.cpu_percent(interval=None) 

    # Memory Usage (Instantaneous read)
    memory_usage = psutil.virtual_memory().percent

    # Network Speed Calculation
    bytes_sent_delta = counters_t1.bytes_sent - counters_t0.bytes_sent
    bytes_recv_delta = counters_t1.bytes_recv - counters_t0.bytes_recv

    # Calculate speed in KB/s: (Bytes / 1024) / Elapsed Time
    upload_speed_kbps = (bytes_sent_delta / 1024.0) / elapsed_time
    download_speed_kbps = (bytes_recv_delta / 1024.0) / elapsed_time
    
    return jsonify({
        "cpu_usage": cpu_usage,
        "memory_usage": memory_usage,
        "download_speed": download_speed_kbps,
        "upload_speed": upload_speed_kbps
    })

if __name__ == "__main__":
    from waitress import serve
    serve(app, host="127.0.0.1", port=6969)

Only thing you need to do with this (except the venv you have to create and the modules you need to download) making it a task with Task Scheduler and make run it after you login. Another part is making this data readable from Seelen UI.

CPU Widget:

id: '@system/cpu-widget'
icon: 'GiDiceSixFacesOne'
target: '@seelen/fancy-toolbar'

plugin:
  type: text
  withMediaControls: false

  remoteData:
    stats:
      url: http://127.0.0.1:6969/api/system_stats
      updateIntervalSeconds: 4
  
  template: >-
    return stats ? ' ' + Number(stats.cpu_usage).toFixed(1) + '%' : 'Fetching ⏳';

  style:
    fontFamily: 'NotoSans NFP, NotoSerif NFP, Segoe UI'
    flexShrink: 0
    fontSize: 13
    marginRight: 8

Memory Widget:

id: '@system/memory-widget'
icon: 'GiDiceSixFacesOne'
target: '@seelen/fancy-toolbar'

plugin:
  type: text
  withMediaControls: false

  remoteData:
    stats:
      url: http://127.0.0.1:6969/api/system_stats
      updateIntervalSeconds: 4
  
  template: >-
    return stats ? ' ' + Number(stats.memory_usage).toFixed(1) + '%' : 'Fetching ⏳';

  style:
    fontFamily: 'NotoSans NFP, NotoSerif NFP, Segoe UI'
    flexShrink: 0
    fontSize: 13
    marginRight: 8

Download Widget:

id: '@system/download-widget'
icon: 'GiDiceSixFacesOne'
target: '@seelen/fancy-toolbar'

plugin:
  type: text
  withMediaControls: false

  remoteData:
    stats:
      url: http://127.0.0.1:6969/api/system_stats
      updateIntervalSeconds: 2
  
  template: >-
    const dl_mbps = Number(stats.download_speed) / 1024.0;
    const dl = (dl_mbps < 10 ? dl_mbps.toFixed(1) : dl_mbps.toFixed(0)) + 'MB'; 
    
    return stats ? ' ' + dl : 'Fetching ⏳';

  style:
    fontFamily: 'NotoSans NFP, NotoSerif NFP, Segoe UI'
    flexShrink: 0
    fontSize: 13
    marginRight: 8

Upload Widget:

id: '@system/upload-widget'
icon: 'GiDiceSixFacesOne'
target: '@seelen/fancy-toolbar'

plugin:
  type: text
  withMediaControls: false

  remoteData:
    stats:
      url: http://127.0.0.1:6969/api/system_stats
      updateIntervalSeconds: 2
  
  template: >-
    const ul_mbps = Number(stats.upload_speed) / 1024.0;
    const ul = (ul_mbps < 10 ? ul_mbps.toFixed(1) : ul_mbps.toFixed(0)) + 'MB';
    return stats ? ' ' + ul : 'Fetching ⏳';

  style:
    fontFamily: 'NotoSans NFP, NotoSerif NFP, Segoe UI'
    flexShrink: 0
    fontSize: 13
    marginRight: 8

and put them to Seelen UI plugins folder. I use NotoSans NFP for primary emoji font, and NotoSerif NFP for backup emoji font. Segoe UI is there for the system fonts in case something wrong happens with the fonts I downloaded. If you can't see the emojis even after installing the necessary fonts you can search them by their codes:

CPU Hex: U+F4BC
Memory Hex: U+EFC5
Download Hex: U+F063
Upload Hex: U+F062

CPU UTF-16: \uf4bc
Memory UTF-16: \uefc5
Download UTF-16: \uf063
Upload UTF-16: \uf062

I recommend using Character Map UWP app from Microsoft Store for finding emojis.