Home

Bluetooth Battery Monitor

Getting Started for User

• Release Page

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

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.

3. 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: #c9623db3;
  --hover-convert-btn-color: #cd2c6c95;
  --main-bg-color: #2223;
  --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);`;

  /**
   * Generates a random image URL and selects a corresponding theme preset.
   * @returns A tuple containing the image URL and the CSS preset.
   */
  const getRandomUrl = () => {
    /** 
     * @typedef {typeof preset1} Preset1
     * @typedef {typeof preset2} Preset2
     * @typedef {typeof preset4} Preset4
     * @typedef {Preset1|Preset2|Preset4} PresetType
     * @type {PresetType}
     */
    let preset = preset2;
    const imgNumList = (() => {
      if (window.location.pathname === '/') {
        return /** @type {const} */ ([1547163, 4589833, 7325003, 14133639]) // I'll leave out blue in data-gird because it's hard to see.
      }
      return /** @type {const} */ ([1543801, 1547163, 4589833, 7325003, 14133639])
    })();

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

  const [url, preset] = getRandomUrl();
  dynImg(url, preset);

  /**
   * Change the background on each page.
   * @template {string} T
   * @template {string} U
   * @param {T} imgUrl - Image URI
   * @param {U} preset - CSS vars
   */
  function dynImg(imgUrl, preset) {
    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';
    style.innerHTML = `:root { ${commonVariables} --image-url: url('${imgUrl}'); }`;
    document.body.appendChild(style);
  }
})();

Licenses

Licensed under either of

• Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)