https://github.com/protoss78/battery-status-icon

A web component that detects and displays the current battery status as an icon. It uses Polymer 1.x and HTML5 Navigator.getBattery() API.
https://github.com/protoss78/battery-status-icon

battery battery-api battery-status battery-status-icon status

Last synced: 28 days ago
JSON representation

A web component that detects and displays the current battery status as an icon. It uses Polymer 1.x and HTML5 Navigator.getBattery() API.

• Host: GitHub
• URL: https://github.com/protoss78/battery-status-icon
• Owner: Protoss78
• Created: 2015-08-08T11:19:42.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-28T06:12:20.000Z (over 7 years ago)
• Last Synced: 2024-04-27T06:02:27.894Z (8 months ago)
• Topics: battery, battery-api, battery-status, battery-status-icon, status
• Language: HTML
• Homepage: https://www.webcomponents.org/element/Protoss78/battery-status-icon
• Size: 11.6 MB
• Stars: 9
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Protoss78/battery-status-icon)

# battery-status-icon

A web component that autodetects and displays the current battery status as an icon. It uses Polymer 1.x and the new HTML5 Navigator.getBattery() API. Alternatively the battery level and charging status can also be set from the outside (e.g. in combination with Cordova and the battery plugin).

Install:

```

bower i battery-status-icon -S

```

### Example:

```html

```

__Attributes:__

Attribute | Description | Default

  ----------------|-------------|----------

  `autodetect` | Auto detect battery level, rather than static input | `false`

  `charging` | Detects if device is charging (Can be set manually) | `false`

  `color-levels` | Change color depending on remaining battery level | `false`

  `label-position` | Where the label should render (top, right, bottom, left) | `right`

  `level` | Container for battery level value(Can be set manually) | `NULL`

  `show-label` | Shows label on mouse over if true. | `false`

### Styling

    

  The following custom properties are available for styling:

  

  Custom property | Description | Default

  ----------------|-------------|----------

  `--battery-icon-size` | Size of battery icon displayed. | `24px`

  `--battery-default-color` | Color of battery when colorLevels is false. | `#323`

  `--battery-high-color` | Color of battery when above 80%. | `Green`

  `--battery-mid-color` | Color of battery when between 80% >< 20%. | `Orange`

  `--battery-low-color` | Color battery when below 20%. | `Red`

  `--battery-label-background` | Background color of tooltip label. | `#616161`

  `--battery-label-opacity` | Opacity level of tooltip label. | `0.9`

  `--battery-label-text-color` | Text color of tooltip label | `White`

  `--battery-icon-rotate` | Use rotate(x) to rotate the battery icon.
Sample: --battery-icon-rotate: rotate(270deg); | `rotate(0deg)`

  

  __Style example:__

  

```html

    .changing-example {

        --battery-low-color: #D32F2F;

        --battery-mid-color: #F57C00;

        --battery-high-color: #388E3C;

        --battery-icon-size: 48px;

        --battery-label-background: #455A64;

        --battery-label-opacity: 1;

        --battery-label-text-color: #CFD8DC;

    }

    /* Battery Icon is rotated by 270° (left to right) */

    .left-to-right {

      --battery-icon-rotate: rotate(270deg);

    }

    

    /* Battery Icon is rotated by 90° (right to left) */

    .right-to-left {

      --battery-icon-rotate: rotate(90deg);

    }

                               

```