Screensaver - Iframe?

Hi All,

Do you think it would be possible in the future to set the screen saver to show an iframe? I'd love to be able to show FlightRadar24 or Windy when the PC is not available.

Replies 1 - 5 (5)

Hi @TheAnticitizen1

that's actually a great idea, thanks for bringing that up!

That would basically be an additional screensaver option that allows you to provide a custom URL in the configuration wizard.
I've added it to the backlog, but can't really say when it's gonna be available.

For the meantime: Are you a bit familiar with coding?
Because you could get the result you're after by basically changing 1 line of code and just hard coding your desired screensaver URL in the service.

@Seraksab That's great news ^_^ I'm not brilliant at coding, but if you can give me a hint I'll certainly give it a try.. worse case I can just set the Pi up again.

you basically just need to change this one line here
on the Raspberry Pi, the file is located under /home/modbros/mobro-raspberrypi/service/mobro.sh

so the whole function with the changed URL would then look like this:

show_screensaver() {
    if [[ $SCREENSAVER == 0 ]]; then
        log "screensaver" "activating screensaver: $1"
    fi
    SCREENSAVER=1
    show_page_chrome "https://www.windy.com/"
}

you still need to select a screensaver in the configuration wizard (doesn't matter which one) to enable it
but instead of opening the local configured screensaver, it will display Windy (or any other URL)

I've done this by replacing the clock_date.php on the rpi image with some custom code and some javascript that shows:

customized screensaver
iStatistica PRO (mac only) when it is online → you can replace this with whatever you are serving

On the config wizard just select the clock date screensaver with 0 delay.

It continuously checks if at some point in time the iStatistica server is or not online.

below is the code I use on the clock_date.php (\home\mobro-raspberrypi\web\screensavers\clock_date.php):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>

    <link href='https://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Screensaver and iStatistica</title>

    <style>

    body, html
    {
        margin: 0px; height: 100%; overflow: hidden;
    }

    #content
    {
        position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
        margin-left: 0px;
        margin-top: 0px;
    }

    iframe{
        overflow:hidden;
    }

    </style>
  </head>
  <body>

<div id="content">
<iframe id="myframe" src="clock_date_custom_made.php" height=480px width=800px frameborder=0 scrolling="no"></></iframe>
</div>

	<script type="text/javascript">

    var dstatus = 0;

    function doSomething() {
        console.log("tick");
        var iisite = "http://192.168.1.100:4027";
        isSiteOnline(iisite,function(found){
            if(found) {
                // site is online
                console.log("online");
                if (dstatus == 1)  {
                  console.log("same-online");
                  } else {
                    console.log("not-same-online");
                    var site = "http://192.168.1.100:4027";
                    changesrc('myframe', site );
                    dstatus = 1;

                  }
              }
            else {
                // site is offline (or favicon not found, or server is too slow)
                console.log("offline");

                if (dstatus == 0)  {
                  console.log("same-offline");
                  } else {
                    console.log("not-same-offline");
                    var site = "clock_date_custom_made.php";
                    changesrc('myframe', site );
                    dstatus = 0;
                  }
                }
        })
    }
    doSomething();
    setInterval(doSomething, 10000);


    function isSiteOnline(url,callback) {
        // try to load favicon
        var timer = setTimeout(function(){
            // timeout after 5 seconds
            callback(false);
        },5000)

        var img = document.createElement("img");
        img.onload = function() {
            clearTimeout(timer);
            callback(true);
        }

        img.onerror = function() {
            clearTimeout(timer);
            callback(false);
        }

        img.src = url+"/favicon.ico?v="+Date.now();
    }

    function changesrc(myframe, href)
    {
     document.getElementById(myframe).setAttribute('src', href);
    }

	</script>

  </body>
</html>

@TheAnticitizen1 just wanted to let you know that we already added the option for a ‘custom URL’ screensaver in the recent v12.1 of the image

@magnificent3 that's actually also a nice workaround to have custom screensaver :)

Screensaver - Iframe?

Login to comment