Skip to content

Home

Jump to bottom
SARDONYX edited this page Jan 19, 2025 · 9 revisions

Bluetooth Battery Monitor

Getting Started for User

Features

  • Search Bluetooth(Classic) battery info

  • Autostart at PC startup

  • Localization(could be customized)

  • Custom edit JavaScript & CSS

UnSupported Features(I does not have a supported device.)

  • ☒ Bluetooth LE device search
  • ☒ Battery information acquisition for Bluetooth LE

Device List menu image

Device List

How to use?

  1. When the application is launched, an icon will appear on the taskbar.

  2. When the Bluetooth Classic battery information is successfully acquired, the icon will switch to battery reporting.

  • Hover the mouse over the icon to see <device name> <battery>%.
  • Left-click once on the icon: Opens the Bluetooth device information list.
  • Right click on the icon: Opens a small menu

The circle on that side shows the percentage, and if you choose to show unconnected devices in the tray, the area around them will turn gray. Example: Icon with 80% battery information and no connection.

{FB9E0583-6873-48AD-8304-58FDBF7CCE87}

  1. The icon will change according to the battery %.

  • If you want to change the design: Settings page -> Editor/Preset tab -> Click Preset1

  • background image randomization(NOTE: Script execution is at your own risk.)

  1. Settings page -> Editor/Preset tab -> Click Preset1
  2. Click JS Auto run button
  3. Copy this code.
//@ts-check
(() => {
  const preset1 = `
  --autofill-color: #691c3747;
  --convert-btn-color: #ab2b7e6e;
  --error-color: #ff1655;
  --hover-btn-color: #ff89898b;
  --hover-convert-btn-color: #fd3b3b6e;
  --theme-color: #ff8e16;`;
  const preset2 = `
  --autofill-color: #5eb1ef24;
  --convert-btn-color: #3369ad7d;
  --hover-btn-color: #1d5aa58b;
  --hover-convert-btn-color: #2665b5d1;
  --theme-color: #5a9ab9;`;
  const preset4 = `
  --autofill-color: #a19c0038;
  --convert-btn-color: #94ce7c6e;
  --hover-btn-color: #cefb518b;
  --hover-convert-btn-color: #81c462a3;
  --main-bg-color: #222a;
  --theme-color: rgb(185, 185, 90);`;

  let preset =/** @type{const} */ preset2;
  const getRandomUrl = () => {
    const imgNumList = [1543801, 1547163, 4589833, 7325003, 14133639];

    const imgNum = imgNumList[Math.floor(Math.random() * imgNumList.length)];
    if ([1547163, 14133639].includes(imgNum)) {
      preset = preset1;
    } else if ([4589833, 7325003].includes(imgNum)) {
      preset = preset4;
    }
    return `https://images.pexels.com/photos/${imgNum}/pexels-photo-${imgNum}.jpeg`;
  };

  const img = getRandomUrl();
  // Change the background on each page.(JS is executed every time, so the same variable is fine.)
  dynImg(/** index */ img, /** settings */ img);

  /**
   * Change the background on each page.
   * @param {string} indexUrl - Image URI of index(converter) page
   * @param {string} settingsUrl - Image URI of settings page
   */
  function dynImg(indexUrl, settingsUrl) {
    const commonVariables = `
        --image-position-x: center;
        --image-position-y: center;
        --image-size: cover;
        --main-bg-color: #222a;
        ${preset}
`;
    const style = document.getElementById('dyn-style') ?? document.createElement('style');
    style.id = 'dyn-style';
    const currentPage = window.location.pathname;
    if (currentPage === '/') {
      style.innerHTML = `:root { ${commonVariables} --image-url: url('${indexUrl}');  }`;
    } else if (currentPage === '/settings') {
      style.innerHTML = `:root { ${commonVariables} --image-url: url('${settingsUrl}'); }`;
    }
    document.body.appendChild(style);
  }
})();

Licenses

Licensed under either of

Clone this wiki locally