# Battery percentage display

**URL:** <https://forum.inductiveautomation.com/t/battery-percentage-display/25993>\
**Category:** Ignition\
**Created:** [June 20, 2019, 5:23pm UTC](https://forum.inductiveautomation.com/t/battery-percentage-display/25993 "2019-06-20T17:23:18Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![simeonw](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simeonw](https://forum.inductiveautomation.com/u/simeonw)\
**Post date:** [July 4, 2024, 11:55pm UTC](https://forum.inductiveautomation.com/t/battery-percentage-display/25993/11 "2024-07-04T23:55:23Z")

</div>

I know this is an old post, but for anyone who is interested, using the JS injection method by @victordcq from here:

> [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805):
>
> Soo i'll just link this here... You can do whatever with it, but its not really gonna be clean or easy xD Have fun man_mage WARNING Dont let userinput enter in here

You can use the Javascript battery API to retrieve the

> **[Battery Status API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)**
>
> The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. This can be used to...

Here is a bit of sample code:

```python

	code = """<img style='display:none' 
	     src='/favicon.ico' 
	     onload="
	     
		     const jsInjectNode = document.getElementById('jsInjectBatteryMonitor');
		     
		     const dataComponentPath = jsInjectNode.getAttributeNode('data-component-path').value;
		     let view = [...window.__client.page.views._data.values()].find(
		       (view) => view.value.mountPath == dataComponentPath.split('.')[0]
		     ).value;
		     
		     function updateBatteryUI(battery) {
		       console.log('Battery Changed', battery);
		       view.custom.write('battery.level', (battery.level * 100));
		       view.custom.write('battery.charging', battery.charging);
		       view.custom.write('battery.chargingTime', battery.chargingTime);
		       view.custom.write('battery.dischargeTime', battery.dischargingTime);
		     }
		     
		     function monitorBattery(battery) {
		       updateBatteryUI(battery);
		       battery.addEventListener('levelchange',updateBatteryUI.bind(null, battery));
		       battery.addEventListener('chargingchange',updateBatteryUI.bind(null, battery));
		       battery.addEventListener('dischargingtimechange',updateBatteryUI.bind(null, battery));
		       battery.addEventListener('chargingtimechange',updateBatteryUI.bind(null, battery));
		     }
		     
		     if ('getBattery' in window.navigator) {
		       navigator.getBattery().then(monitorBattery);
		     } else {
		       console.log('The Battery Status API is not supported on ' +'this platform.');
		     }
	     
	       ">
	</img>""".replace("\n", "").replace("\t", "")

```

If you place this in a markdown component in a new view and add the following custom props, you can create yourself a little embeddable battery monitor.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/8592c6da85b908873852c741a8d01b7f1550a75d.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f4e5c1f913468b08793ac1637728022623fc1285.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/9/794d4f3dca5a4ed053c3473c0782a1259d29966c.png)

Keep in mind you need to be using HTTPS, not HTTP in order to use the Battery Status API.

---

_[View the full topic](https://forum.inductiveautomation.com/t/battery-percentage-display/25993)._