New Rainmeter-style widgets for HTWind (Clock, System Monitor, Network Tools) #4

sametcn99 · 2026-02-27T00:24:47Z

sametcn99
Feb 27, 2026
Maintainer

Small set of Rainmeter-style widgets for HTWind: Clock, System Monitor, Network Tools, and Quick Actions.

Disks

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rainmeter Disks</title>
  <style>
    :root {
      --text: #d6d6d6;
      --line: rgba(255, 255, 255, 0.08);
      --panel: rgba(0, 0, 0, 0.56);
      --accent: #d7ab18;
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      color: var(--text);
      font-family: "Bahnschrift", "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .widget {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }

    .panel {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      box-sizing: border-box;
      padding: 12px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          142deg,
          rgba(255, 255, 255, 0.06) 0 12px,
          transparent 12px 44px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
      opacity: 0.38;
    }

    .title,
    .rows {
      position: relative;
      z-index: 1;
    }

    .title {
      text-align: center;
      font-size: 2rem;
      line-height: 1;
      font-weight: 700;
      color: #d0d0d0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .rows {
      display: grid;
      align-content: start;
      gap: 10px;
    }

    .row {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: baseline;
      gap: 10px;
      font-size: 1.03rem;
      line-height: 1.1;
      color: #cfcfcf;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      padding-bottom: 6px;
      position: relative;
    }

    .name {
      min-width: 2.3ch;
      font-weight: 700;
      color: #dfdfdf;
    }

    .value {
      justify-self: end;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .meter {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 3px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(215, 171, 24, 0.45);
      width: 0;
    }
  </style>
</head>
<body>
  <div class="widget">
    <section class="panel">
      <div class="title">DISKS</div>
      <div class="rows">
        <div class="row">
          <div class="name">C:\</div>
          <div id="cValue" class="value">- / - used</div>
          <span id="cBar" class="meter"></span>
        </div>

        <div class="row">
          <div class="name">D:\</div>
          <div id="dValue" class="value">- / - used</div>
          <span id="dBar" class="meter"></span>
        </div>
      </div>
    </section>
  </div>

  <script>
    function clampPercent(value) {
      const number = Number(value);
      if (Number.isNaN(number)) return 0;
      return Math.max(0, Math.min(100, number));
    }

    function formatGigabytes(bytes) {
      const gb = (Number(bytes) || 0) / (1024 ** 3);
      return `${gb.toFixed(1)} GB`;
    }

    async function runPs(script, parseJson = false, timeoutMs = 10000) {
      const executableScript = parseJson
        ? `$ProgressPreference='SilentlyContinue'; $ErrorActionPreference='Stop'; $__result = & { ${script} }; if ($null -eq $__result) { '{}' } else { $__result | ConvertTo-Json -Depth 24 -Compress }`
        : script;

      const result = await window.HTWind.invoke("powershell.exec", { script: executableScript, timeoutMs });
      const timedOut = !!(result?.timedOut ?? result?.TimedOut);
      const exitCode = result?.exitCode ?? result?.ExitCode;
      const stdout = String(result?.output ?? result?.Output ?? "");
      const stderr = String(result?.error ?? result?.Error ?? "");

      if (timedOut) throw new Error("PowerShell command timed out.");
      if (typeof exitCode === "number" && exitCode !== 0) {
        throw new Error(stderr || stdout || `PowerShell failed with exit code ${exitCode}.`);
      }

      if (!parseJson) return result;
      return stdout.trim() ? JSON.parse(stdout) : {};
    }

    function toArray(value) {
      if (Array.isArray(value)) return value;
      if (value == null) return [];
      if (typeof value === "object") return [value];
      return [];
    }

    function updateDrive(prefix, data) {
      const total = Number(data?.sizeBytes ?? data?.SizeBytes ?? 0);
      const free = Number(data?.freeBytes ?? data?.FreeBytes ?? 0);
      const used = Math.max(0, total - free);
      const percent = total > 0 ? clampPercent((used / total) * 100) : 0;

      document.getElementById(`${prefix}Value`).textContent = `${formatGigabytes(used)}/${formatGigabytes(total)} used`;
      document.getElementById(`${prefix}Bar`).style.width = `${percent}%`;
    }

    async function refresh() {
      const data = await runPs(`
        $drives = Get-CimInstance Win32_LogicalDisk -Filter "DriveType=3" |
          Select-Object DeviceID, @{Name='SizeBytes';Expression={ if ($null -eq $_.Size) { 0.0 } else { [double]$_.Size } }}, @{Name='FreeBytes';Expression={ if ($null -eq $_.FreeSpace) { 0.0 } else { [double]$_.FreeSpace } }}

        [pscustomobject]@{ Drives = $drives }
      `, true, 12000);

      const drives = toArray(data?.drives ?? data?.Drives);
      const cDrive = drives.find((d) => String(d?.deviceID ?? d?.DeviceID ?? "").toUpperCase() === "C:");
      const dDrive = drives.find((d) => String(d?.deviceID ?? d?.DeviceID ?? "").toUpperCase() === "D:");

      updateDrive("c", cDrive);
      updateDrive("d", dDrive);
    }

    refresh().catch(() => {
      updateDrive("c", null);
      updateDrive("d", null);
    });

    setInterval(() => {
      refresh().catch(() => {
        updateDrive("c", null);
        updateDrive("d", null);
      });
    }, 8000);
  </script>
</body>
</html>

System

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rainmeter System</title>
  <style>
    :root {
      --page-text: #d7d7d7;
      --muted: #a8a8a8;
      --panel: rgba(0, 0, 0, 0.56);
      --line: rgba(255, 255, 255, 0.08);
      --accent: #d7ab18;
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
      --panel-radius: 12px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      color: var(--page-text);
      font-family: "Bahnschrift", "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .widget {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
    }

    .panel {
      position: relative;
      border-radius: var(--panel-radius);
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          142deg,
          rgba(255, 255, 255, 0.06) 0 12px,
          transparent 12px 44px
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0)
        );
      opacity: 0.38;
    }

    .clock {
      min-height: 78px;
      padding: 10px 12px;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: auto auto;
      gap: 8px;
      position: relative;
      z-index: 1;
    }

    .time {
      text-align: center;
      font-size: clamp(1.65rem, 5vw, 2rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
      color: #e8e8e8;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }

    .day-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: baseline;
      font-size: 1.16rem;
      font-weight: 600;
      color: #dbdbdb;
      padding: 0 4px;
      line-height: 1;
    }

    .system {
      min-height: 150px;
      padding: 12px;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto;
      gap: 8px;
    }

    .title {
      text-align: center;
      font-size: 2rem;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #d0d0d0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .rows {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      font-size: 1.02rem;
      font-weight: 600;
      line-height: 1.1;
      color: #cfcfcf;
    }

    .row-label {
      position: relative;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    }

    .row-value {
      color: #d6d6d6;
      min-width: 3.5ch;
      text-align: right;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .meter {
      position: absolute;
      left: 0
10BC0
;
      bottom: -1px;
      height: 3px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(215, 171, 24, 0.45);
    }
  </style>
</head>
<body>
  <div class="widget">
    <section class="panel">
      <div class="clock">
        <div id="time" class="time">--:--</div>
        <div class="day-row">
          <span id="dayName">---</span>
          <span id="dateValue">--.--.----</span>
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="system">
        <div class="title">SYSTEM</div>
        <div class="rows">
          <div class="row">
            <div class="row-label">
              CPU Usage
              <span id="cpuBar" class="meter" style="width: 6%;"></span>
            </div>
            <div id="cpuValue" class="row-value">0%</div>
          </div>

          <div class="row">
            <div class="row-label">
              RAM Usage
              <span id="ramBar" class="meter" style="width: 12%;"></span>
            </div>
            <div id="ramValue" class="row-value">0%</div>
          </div>

          <div class="row">
            <div class="row-label">
              SWAP Usage
              <span id="swapBar" class="meter" style="width: 10%;"></span>
            </div>
            <div id="swapValue" class="row-value">0%</div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    function clampPercent(value) {
      const number = Number(value);
      if (Number.isNaN(number)) return 0;
      return Math.max(0, Math.min(100, number));
    }

    function updateClock() {
      const now = new Date();
      document.getElementById("time").textContent = now.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false
      });

      document.getElementById("dayName").textContent = now.toLocaleDateString([], {
        weekday: "long"
      });

      document.getElementById("dateValue").textContent = now.toLocaleDateString("tr-TR", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
      });
    }

    async function runPs(script, parseJson = false, timeoutMs = 10000) {
      const executableScript = parseJson
        ? `$ProgressPreference='SilentlyContinue'; $ErrorActionPreference='Stop'; $__result = & { ${script} }; if ($null -eq $__result) { '{}' } else { $__result | ConvertTo-Json -Depth 24 -Compress }`
        : script;

      const result = await window.HTWind.invoke("powershell.exec", { script: executableScript, timeoutMs });
      const timedOut = !!(result?.timedOut ?? result?.TimedOut);
      const exitCode = result?.exitCode ?? result?.ExitCode;
      const stdout = String(result?.output ?? result?.Output ?? "");
      const stderr = String(result?.error ?? result?.Error ?? "");

      if (timedOut) {
        throw new Error("PowerShell command timed out.");
      }

      if (typeof exitCode === "number" && exitCode !== 0) {
        throw new Error(stderr || stdout || `PowerShell failed with exit code ${exitCode}.`);
      }

      if (!parseJson) {
        return result;
      }

      return stdout.trim() ? JSON.parse(stdout) : {};
    }

    function setMetric(idPrefix, value) {
      const percent = Math.round(clampPercent(value));
      document.getElementById(`${idPrefix}Value`).textContent = `${percent}%`;
      document.getElementById(`${idPrefix}Bar`).style.width = `${percent}%`;
    }

    async function updateSystemMetrics() {
      const stats = await runPs(`
        $os = Get-CimInstance Win32_OperatingSystem
        $cpu = (Get-Counter '\\Processor(_Total)\\% Processor Time').CounterSamples[0].CookedValue
        $ramUsed = ($os.TotalVisibleMemorySize - $os.FreePhysicalMemory)
        $ramPercent = if ($os.TotalVisibleMemorySize -gt 0) { ($ramUsed / $os.TotalVisibleMemorySize) * 100 } else { 0 }
        $swapUsed = ($os.TotalVirtualMemorySize - $os.FreeVirtualMemory)
        $swapPercent = if ($os.TotalVirtualMemorySize -gt 0) { ($swapUsed / $os.TotalVirtualMemorySize) * 100 } else { 0 }

        [pscustomobject]@{
          CpuPercent = [math]::Round($cpu, 0)
          RamPercent = [math]::Round($ramPercent, 0)
          SwapPercent = [math]::Round($swapPercent, 0)
        }
      `, true, 12000);

      setMetric("cpu", stats?.cpuPercent ?? stats?.CpuPercent ?? 0);
      setMetric("ram", stats?.ramPercent ?? stats?.RamPercent ?? 0);
      setMetric("swap", stats?.swapPercent ?? stats?.SwapPercent ?? 0);
    }

    async function refresh() {
      updateClock();
      try {
        await updateSystemMetrics();
      } catch {
        setMetric("cpu", 0);
        setMetric("ram", 0);
        setMetric("swap", 0);
      }
    }

    refresh();
    setInterval(updateClock, 1000);
    setInterval(refresh, 4000);
  </script>
</body>
</html>

Google

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rainmeter Google Search</title>
  <style>
    :root {
      --text: #d6d6d6;
      --line: rgba(255, 255, 255, 0.08);
      --panel: rgba(0, 0, 0, 0.56);
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
      --input-bg: rgba(255, 255, 255, 0.06);
      --placeholder: rgba(220, 220, 220, 0.75);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      color: var(--text);
      font-family: "Bahnschrift", "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .widget {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }

    .panel {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      box-sizing: border-box;
      padding: 12px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          142deg,
          rgba(255, 255, 255, 0.06) 0 12px,
          transparent 12px 44px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
      opacity: 0.38;
    }

    .title,
    .search {
      position: relative;
      z-index: 1;
    }

    .title {
      text-align: center;
      font-size: 2rem;
      line-height: 1;
      font-weight: 700;
      color: #d0d0d0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .search {
      align-self: center;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 10px;
      background: var(--input-bg);
      color: var(--text);
      font: inherit;
      font-size: 1.08rem;
      line-height: 1.2;
      padding: 9px 10px;
      outline: none;
    }

    .search::placeholder {
      color: var(--placeholder);
      opacity: 1;
    }

    .search:focus {
      border-color: rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.09);
    }
  </style>
</head>
<body>
  <div class="widget">
    <section class="panel">
      <div class="title">GOOGLE</div>
      <input id="searchBox" class="search" type="text" placeholder="Search..." />
    </section>
  </div>

  <script>
    function esc(value) {
      return String(value ?? "").replace(/'/g, "''");
    }

    async function runPs(script, parseJson = false, timeoutMs = 10000) {
      const executableScript = parseJson
        ? `$ProgressPreference='SilentlyContinue'; $ErrorActionPreference='Stop'; $__result = & { ${script} }; if ($null -eq $__result) { '{}' } else { $__result | ConvertTo-Json -Depth 24 -Compress }`
        : script;

      const result = await window.HTWind.invoke("powershell.exec", { script: executableScript, timeoutMs });
      const timedOut = !!(result?.timedOut ?? result?.TimedOut);
      const exitCode = result?.exitCode ?? result?.ExitCode;
      const stdout = String(result?.output ?? result?.Output ?? "");
      const stderr = String(result?.error ?? result?.Error ?? "");

      if (timedOut) throw new Error("PowerShell command timed out.");
      if (typeof exitCode === "number" && exitCode !== 0) {
        throw new Error(stderr || stdout || `PowerShell failed with exit code ${exitCode}.`);
      }

      if (!parseJson) return result;
      return stdout.trim() ? JSON.parse(stdout) : {};
    }

    async function openSearch(query) {
      const encoded = encodeURIComponent(query);
      const url = `https://www.google.com/search?q=${encoded}`;

      await runPs(`
        $url = '${esc(url)}'
        Start-Process -FilePath $url
      `, false, 10000);
    }

    const input = document.getElementById("searchBox");
    input.addEventListener("keydown", async (event) => {
      if (event.key !== "Enter") {
        return;
      }

      const query = input.value.trim();
      if (!query) {
        return;
      }

      try {
        await openSearch(query);
      } catch {
      }
    });

    input.focus();
  </script>
</body>
</html>

Network

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rainmeter Network</title>
  <style>
    :root {
      --text: #d6d6d6;
      --line: rgba(255, 255, 255, 0.08);
      --panel: rgba(0, 0, 0, 0.56);
      --accent: #d7ab18;
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      color: var(--text);
      font-family: "Bahnschrift", "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .widget {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }

    .panel {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: <
7440
span class="pl-c1">1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      box-sizing: border-box;
      padding: 12px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          142deg,
          rgba(255, 255, 255, 0.06) 0 12px,
          transparent 12px 44px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
      opacity: 0.38;
    }

    .title,
    .rows {
      position: relative;
      z-index: 1;
    }

    .title {
      text-align: center;
      font-size: 2rem;
      line-height: 1;
      font-weight: 700;
      color: #d0d0d0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .rows {
      display: grid;
      align-content: start;
      gap: 8px;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      font-size: 1.02rem;
      font-weight: 600;
      color: #cfcfcf;
      line-height: 1.15;
    }

    .label {
      position: relative;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    }

    .value {
      min-width: 8ch;
      text-align: right;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .meter {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 3px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(215, 171, 24, 0.45);
      width: 5%;
    }
  </style>
</head>
<body>
  <div class="widget">
    <section class="panel">
      <div class="title">NETWORK</div>
      <div class="rows">
        <div class="row">
          <div class="label">IP Address</div>
          <div id="ipValue" class="value">0.0.0.0</div>
        </div>

        <div class="row">
          <div class="label">
            Upload
            <span id="uploadBar" class="meter"></span>
          </div>
          <div id="uploadValue" class="value">0 B/s</div>
        </div>

        <div class="row">
          <div class="label">
            Download
            <span id="downloadBar" class="meter"></span>
          </div>
          <div id="downloadValue" class="value">0 B/s</div>
        </div>
      </div>
    </section>
  </div>

  <script>
    let previousSample = null;

    function fmtRate(bytesPerSec) {
      const value = Math.max(0, Number(bytesPerSec) || 0);
      if (value < 1024) return `${value.toFixed(0)} B/s`;
      if (value < 1024 ** 2) return `${(value / 1024).toFixed(1)} kB/s`;
      if (value < 1024 ** 3) return `${(value / 1024 ** 2).toFixed(1)} MB/s`;
      return `${(value / 1024 ** 3).toFixed(2)} GB/s`;
    }

    function clampPercent(value) {
      const number = Number(value);
      if (Number.isNaN(number)) return 0;
      return Math.max(0, Math.min(100, number));
    }

    function calcRateBar(rate) {
      const kbps = (Number(rate) || 0) / 1024;
      return clampPercent(Math.log10(1 + kbps) * 24);
    }

    async function runPs(script, parseJson = false, timeoutMs = 10000) {
      const executableScript = parseJson
        ? `$ProgressPreference='SilentlyContinue'; $ErrorActionPreference='Stop'; $__result = & { ${script} }; if ($null -eq $__result) { '{}' } else { $__result | ConvertTo-Json -Depth 24 -Compress }`
        : script;

      const result = await window.HTWind.invoke("powershell.exec", { script: executableScript, timeoutMs });
      const timedOut = !!(result?.timedOut ?? result?.TimedOut);
      const exitCode = result?.exitCode ?? result?.ExitCode;
      const stdout = String(result?.output ?? result?.Output ?? "");
      const stderr = String(result?.error ?? result?.Error ?? "");

      if (timedOut) throw new Error("PowerShell command timed out.");
      if (typeof exitCode === "number" && exitCode !== 0) {
        throw new Error(stderr || stdout || `PowerShell failed with exit code ${exitCode}.`);
      }

      if (!parseJson) return result;
      return stdout.trim() ? JSON.parse(stdout) : {};
    }

    async function readNetwork() {
      const data = await runPs(`
        $adapters = Get-NetAdapterStatistics | Where-Object { $_.ReceivedBytes -gt 0 -or $_.SentBytes -gt 0 }
        $totalRx = ($adapters | Measure-Object -Property ReceivedBytes -Sum).Sum
        $totalTx = ($adapters | Measure-Object -Property SentBytes -Sum).Sum

        $ip = Get-NetIPAddress -AddressFamily IPv4 |
          Where-Object {
            $_.IPAddress -notlike '169.254*' -and
            $_.IPAddress -ne '127.0.0.1' -and
            $_.PrefixOrigin -ne 'WellKnown'
          } |
          Sort-Object -Property InterfaceMetric |
          Select-Object -First 1 -ExpandProperty IPAddress

        if ([string]::IsNullOrWhiteSpace($ip)) { $ip = '0.0.0.0' }

        if ($null -eq $totalRx) { $totalRx = 0 }
        if ($null -eq $totalTx) { $totalTx = 0 }

        [pscustomobject]@{
          ReceivedBytes = [double]$totalRx
          SentBytes = [double]$totalTx
          IpAddress = $ip
        }
      `, true, 12000);

      const current = {
        ts: Date.now(),
        rx: Number(data?.receivedBytes ?? data?.ReceivedBytes ?? 0),
        tx: Number(data?.sentBytes ?? data?.SentBytes ?? 0),
        ip: String(data?.ipAddress ?? data?.IpAddress ?? "0.0.0.0")
      };

      document.getElementById("ipValue").textContent = current.ip;

      if (previousSample) {
        const seconds = Math.max(0.001, (current.ts - previousSample.ts) / 1000);
        const downRate = Math.max(0, (current.rx - previousSample.rx) / seconds);
        const upRate = Math.max(0, (current.tx - previousSample.tx) / seconds);

        document.getElementById("uploadValue").textContent = fmtRate(upRate);
        document.getElementById("downloadValue").textContent = fmtRate(downRate);
        document.getElementById("uploadBar").style.width = `${calcRateBar(upRate)}%`;
        document.getElementById("downloadBar").style.width = `${calcRateBar(downRate)}%`;
      }

      previousSample = current;
    }

    async function refresh() {
      try {
        await readNetwork();
      } catch {
        document.getElementById("uploadValue").textContent = "0 B/s";
        document.getElementById("downloadValue").textContent = "0 B/s";
        document.getElementById("uploadBar").style.width = "0%";
        document.getElementById("downloadBar").style.width = "0%";
      }
    }

    refresh();
    setInterval(refresh, 2000);
  </script>
</body>
</html>

Recycle Bin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rainmeter Recycle Bin</title>
  <style>
    :root {
      --text: #d6d6d6;
      --line: rgba(255, 255, 255, 0.08);
      --panel: rgba(0, 0, 0, 0.56);
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: transparent;
      color: var(--text);
      font-family: "Bahnschrift", "Segoe UI", sans-serif;
      overflow: hidden;
    }

    .widget {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }

    .panel {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      box-sizing: border-box;
      padding: 12px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          142deg,
          rgba(255, 255, 255, 0.06) 0 12px,
          transparent 12px 44px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
      opacity: 0.38;
    }

    .title,
    .row {
      position: relative;
      z-index: 1;
    }

    .title {
      text-align: center;
      font-size: 2rem;
      line-height: 1;
      font-weight: 700;
      color: #d0d0d0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 8px;
      font-size: 1.3rem;
      line-height: 1;
      color: #cecece;
      font-weight: 600;
      border-top: 1px solid rgba(255, 255, 255, 0.09);
      padding-top: 9px;
      align-self: end;
    }
  </style>
</head>
<body>
  <div class="widget">
    <section class="panel">
      <div class="title">RECYCLE BIN</div>
      <div class="row">
        <div id="countValue">0 items</div>
        <div id="sizeValue">0 B</div>
      </div>
    </section>
  </div>

  <script>
    function formatSize(bytes) {
      const value = Math.max(0, Number(bytes) || 0);
      if (value < 1024) return `${value.toFixed(0)} B`;
      if (value < 1024 ** 2) return `${(value / 1024).toFixed(1)} KB`;
      if (value < 1024 ** 3) return `${(value / 1024 ** 2).toFixed(1)} MB`;
      return `${(value / 1024 ** 3).toFixed(1)} GB`;
    }

    async function runPs(script, parseJson = false, timeoutMs = 10000) {
      const executableScript = parseJson
        ? `$ProgressPreference='SilentlyContinue'; $ErrorActionPreference='Stop'; $__result = & { ${script} }; if ($null -eq $__result) { '{}' } else { $__result | ConvertTo-Json -Depth 24 -Compress }`
        : script;

      const result = await window.HTWind.invoke("powershell.exec", { script: executableScript, timeoutMs });
      const timedOut = !!(result?.timedOut ?? result?.TimedOut);
      const exitCode = result?.exitCode ?? result?.ExitCode;
      const stdout = String(result?.output ?? result?.Output ?? "");
      const stderr = String(result?.error ?? result?.Error ?? "");

      if (timedOut) throw new Error("PowerShell command timed out.");
      if (typeof exitCode === "number" && exitCode !== 0) {
        throw new Error(stderr || stdout || `PowerShell failed with exit code ${exitCode}.`);
      }

      if (!parseJson) return result;
      return stdout.trim() ? JSON.parse(stdout) : {};
    }

    async function refresh() {
      const data = await runPs(`
        try {
          $shell = New-Object -ComObject Shell.Application
          $bin = $shell.Namespace(0xA)

          if ($null -eq $bin) {
            [pscustomobject]@{ Count = 0; SizeBytes = 0 }
            return
          }

          $items = @($bin.Items())
          $count = $items.Count
          $bytes = 0.0
          foreach ($item in $items) {
            if ($null -eq $item.Size) {
              $size = 0.0
            }
            else {
              $size = [double]$item.Size
            }
            if ($size -gt 0) {
              $bytes += $size
            }
          }

          [pscustomobject]@{
            Count = [int]$count
            SizeBytes = [math]::Round($bytes, 0)
          }
        }
        catch {
          [pscustomobject]@{ Count = 0; SizeBytes = 0 }
        }
      `, true, 12000);

      const count = Number(data?.count ?? data?.Count ?? 0);
      const size = Number(data?.sizeBytes ?? data?.SizeBytes ?? 0);

      document.getElementById("countValue").textContent = `${count} items`;
      document.getElementById("sizeValue").textContent = formatSize(size);
    }

    refresh().catch(() => {
      document.getElementById("countValue").textContent = "0 items";
      document.getElementById("sizeValue").textContent = "0 B";
    });

    setInterval(() => {
      refresh().catch(() => {
        document.getElementById("countValue").textContent = "0 items";
        document.getElementById("sizeValue").textContent = "0 B";
      });
    }, 8000);
  </script>
</body>
</html>

sametcn99 · 2026-02-27T00:49:23Z

sametcn99
Feb 27, 2026
Maintainer Author

Download and look files here: https://stackblitz.com/edit/stackblitz-starters-tkgj37qr

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Rainmeter-style widgets for HTWind (Clock, System Monitor, Network Tools) #4

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

New Rainmeter-style widgets for HTWind (Clock, System Monitor, Network Tools) #4

Uh oh!

sametcn99 Feb 27, 2026 Maintainer

Replies: 1 comment

Uh oh!

sametcn99 Feb 27, 2026 Maintainer Author

sametcn99
Feb 27, 2026
Maintainer

sametcn99
Feb 27, 2026
Maintainer Author