Widget showing whether a Player is online

Dear XIBO staff,

I’ve coloured and set up the new version of the cms, ready for the summer. I’ve another idea (useful for me)… sometimes the people using the players, claims that the server has problems, but usually is a connection issue (of the player). So, I’d like to show up in the monitor if the player is connected on the internet.

I found a javascript, but I’m still in trouble… Where I must put this code? I’d like to show in a text region “Online” or “Offline”, checking each time the layout is played. It’s possible?

<script type="text/javascript">
function updateIndicator() {
	// Show a different icon based on offline/online
}

// Update the online status icon based on connectivity
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();
</script>

Thanks in advance,
Francesco

Wouldn’t it be easier to set up maintenance properly with the email alerts?
so you’d then receive email alert when the display is down/up?

Hi Peter,

You are right, and this is already set up. And it’s working really well. But when someone is watching at one player, would be nice to see if the player can reach Internet… otherwise we can recognize an outdated player only if it’s showing outdated content, since the wifi icon is hided below the Xibo Player.

So it’s not possible using a javascript showing online/offline status of the player, on a layout?

thanks again,
Francesco

I tried put in “Optional JavaScript” this code:

<script type="text/javascript">
if(navigator.onLine) {
document.getElementById("statz").innerHTML = "Online";
} else {
document.getElementById("statz").innerHTML = "Offline";
}
</script>

and, in a text region, this code:

<p id="statz"><span style="font-size: 48px;"><span style="color: black;">
</span></span></p>

But for the moment, isn’t working. Also seems that the region isn’t saving the html code; just the Additional javascript.

I did it…

I used the Embedded region!

In the HTML:

<!DOCTYPE html>
<html><body>

<p id="statz" style="text-align:center;background-color:transparent;"></p>

</body></html>

In the HEAD:

<script type="text/javascript">
function doConnectFunction() {
	document.getElementById('statz').innerHTML = '';
}
function doNotConnectFunction() {
	document.getElementById('statz').innerHTML = '<span style=\"color:red;\">Player is OFFLINE</span>';
}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;

i.src = 'LINK-TO-AN-IMAGE?d=' + escape(Date());
</script>

In this way seems working quite well.

2 Likes

I’ve marked your own reply as a solution and changed the title so others may find it.

Thanks,
Dan