Skip to content

Instantly share code, notes, and snippets.

@daveilers
Created February 17, 2026 17:49
Show Gist options
  • Select an option

  • Save daveilers/a98c24f89fa9c9d445c66502d827a3c6 to your computer and use it in GitHub Desktop.

Select an option

Save daveilers/a98c24f89fa9c9d445c66502d827a3c6 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<body>
<style>
VisionectBatteryMonitor {
font-size: 3rem;
position: absolute;
bottom: 0;
right: 0;
padding: 0.75rem 1.5rem;
background-color: white;
}
</style>
<VisionectBatteryMonitor />
<script type="module">
function batteryClass(itme) {
let percent = itme.Battery;
let current = itme.BatteryCurrent;
let chargerConnected = itme.Charger == 1;
if (chargerConnected && current > 100) {
return `fa-battery-bolt`;
} else if (percent > 95) {
return `fa-battery-full`;
} else if (percent > 75) {
return `fa-battery-three-quarters`;
} else if (percent > 50) {
return `fa-battery-half`;
} else if (percent >= 25) {
return `fa-battery-quarter`;
} else if (percent > 20) {
return `fa-battery-low`;
}
return `fa-battery-exclamation`;
}
function visionectDeviceStatus() {
return okular.DevicesStatus()[okular.session_uuid];
}
function batteryClassUpdate(who, itme) {
let classes = who.classList;
classes.remove(
`fa-battery-bolt`,
`fa-battery-full`,
`fa-battery-three-quarters`,
`fa-battery-half`,
`fa-battery-quarter`,
`fa-battery-low`,
`fa-battery-exclamation`,
);
classes.add(batteryClass(itme));
}
export function batteryInit() {
const host = document.querySelector("VisionectBatteryMonitor");
const i = document.createElement("i");
i.classList.add(
"fa-duotone",
"fa-solid",
"fa-battery-exclamation",
);
host.appendChild(i);
setInterval(function () {
batteryClassUpdate(i, visionectDeviceStatus());
}, 60000); // 24*60*60*1000
batteryClassUpdate(i, visionectDeviceStatus());
}
window.onload = function () {
if (typeof okular === "undefined") {
return;
}
batteryInit();
};
</script>
<script
src="https://kit.fontawesome.com/a7893f27a9.js"
crossorigin="anonymous"
></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment