I’ve recently set up SharpTools on 2 Fire tablets using the Fully Kiosk browser and wanted a way to monitor their charging status and battery level at a glance.
Using the Fully Kiosk JavaScript API I was able to access the tablet status for battery and power and build it into a Custom Tile.
Note that this will only display data in the Fully Kiosk browser and requires JavaScript enabled in the browser settings. If run in any other browser the tile will just show “N/A”.
Here’s the tile normal output:
and here’s the tile code:
<script src="//cdn.sharptools.io/js/custom-tiles.js"></script>
<div class="main-content">
<span id="content"><span data-index="0">Loading...</span></span>
</div>
<!---------- SET CONTENT FORMAT ----------->
<style>
html,body {height: 100%; margin:0;}
.main-content {
line-height: 1.0;
display: flex;
height:100%;
align-items: center;
justify-content: center;
}
.main-content #content {
font-size: 80%; /* Change Font Size */
text-align: center; /* Center align text */
}
</style>
<script>
var refresh = 1000; // starting refresh interval 1 sec
// When the tile is ready, get the settings from the callback
stio.ready(function(data){
tileSettings = data.settings; //Tile editor settings
defaultSettings(); //and initialize the tile
});
function defaultSettings() {
document.documentElement.style.setProperty('font-size', "150%", 'important');
}
//
// Process at regular intervals
//
var x = setInterval(function() {
var battery = -1;
var plugged = false;
var ptext = "Unplugged";
// If Fully Kiosk browser then use JS APIs to get battery level and charginfg status
// Javascript needs to be enabled in browser settings
if (typeof FullyKiosk !== "undefined") {
battery = fully.getBatteryLevel();
plugged = fully.isPlugged();
}
// Display the result in the element with id="content"
if (battery > -1) {
if (plugged) {
ptext= "Charging";
document.getElementById("content").innerHTML = "Tablet Battery <br> "
+ battery.toFixed(0) + "% <br><p style='color:rgb(20, 240, 80);'>" + ptext +"</p>";
}
else {
ptext="Unplugged";
document.getElementById("content").innerHTML = "Tablet Battery <br> "
+ battery.toFixed(0) + "% <br><p style='color:rgb(255,0,0);'>" + ptext +"</p>";
}
refresh = 60000; // Since battery level doesn't change fast set check to every 60sec
}
else {
document.getElementById("content").innerHTML = "N/A"; // Return N/A if not Fully browser
clearInterval(x); // and stop
}
}, refresh);
</script>
Hope it’s helpful!