Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Build a Digital Photo Frame With a Raspberry Pi

DZone's Guide to

Build a Digital Photo Frame With a Raspberry Pi

Got a Raspberry Pi and a screen? Then you've got yourself a digital photo frame. Let's build one using JavaScript and HTML5's canvas elements.

· IoT Zone ·
Free Resource

With a $35 Raspberry Pi and an old screen, you too can build your own digital photo frame. Today, we are going to build a custom digital photo frame powered by a Raspberry Pi. I'm using an HTML5 canvas element to display images, along with the weather, and time and date information.

Prerequisites

You need to configure your Raspberry Pi and install an operating system, which I have covered in my previous article.

The Code

The HTML code to display photos, the weather, and time and date information is below:

<div class="container" style="overflow: hidden;">
        <div class="event">
            <h1 style="margin-bottom: 5px;font-family:Alegreya Sans;text-align: center;"><span style="padding-left:15px;" id="dateHead"></span></h1>
            <h1 style="margin-bottom: 5px;font-family:Alegreya Sans;"><span style="padding-left:15px;" id="weatherHead"></span></h1>
            <h4 style="margin-top: 5px;font-family:Alegreya Sans;"><span style="padding-left:15px;font-size:18px;" id="weatherBody"></span></h4>
            <h1 style="margin-bottom:5px;font-family:Alegreya Sans;text-align: center;"><span id="timeHead"></span></h1>
        </div>
       <canvas id="photoGallery" style="background-color :black;top: 0px;left: 0px;">
                Your browser does not support the HTML5 canvas tag.
       </canvas>
</div>


The HTML <canvas> element is used to draw graphics via JavaScript. Here is the JavaScript code to load images in a canvas:

var imgIndex = 0;
var photoTimer = 10000;
var weatherTimer = 1000 * 60 * 60;
var clockTimer = 1000;
var canvas = document.getElementById('photoGallery');
var context = canvas.getContext('2d');
var img = new Image();
img.src = images[imgIndex];
img.onload = function() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    context.canvas.width = width;
    context.canvas.height = height;
    context.drawImage(img, 0, 0, width, height);
};

setClock();
setInterval(loadPhoto, photoTimer);
setInterval(getWeather, weatherTimer);
setInterval(setClock, clockTimer);

function loadPhoto() {
    imgIndex = imgIndex >= images.length ? 0 : ++imgIndex;
    img.src = images[imgIndex];
}

function setClock() {
    var d = new Date();
    $("#dateHead").html(d.toDateString());
    $("#timeHead").html(d.toLocaleTimeString());
}

function getWeather() {
    $.simpleWeather({
        location: 'Burlington,CA',
        woeid: '',
        unit: 'c',
        success: function(weather) {
            html = weather.city + ', ' + weather.region + '&nbsp;&nbsp;&nbsp;' + weather.temp + '&deg;' + weather.units.temp;
            $("#weatherHead").html(html);
            html = 'Feel like ' + eval(weather.wind.chill + weather.temp) + '&deg;' + '&nbsp;&nbsp;' + weather.currently + '&nbsp;&nbsp;' + weather.wind.direction + '&nbsp;&nbsp;' + weather.wind.speed + '&nbsp;&nbsp;' + weather.units.speed;
            $("#weatherBody").html(html);
        },
        error: function(error) {
            $(".weather").html('<p>' + error + '</p>');
        }
    });

    $(function() {
        getWeather();
    });


The above code snippet uses JQuery's simpleweather plugin to display weather information for a given location. Currently, I'm displaying photos from Flickr, however, Google photos, Calendar, or the Flickr API can be integrated, which I will cover in my next article. Also, I'm using the weather location 'Burlington,CA', which can be pulled using HTML5's Geolocation API. Here is our HTML output.

Raspberry Pi Setup

The Raspberry Pi setup has been covered in my previous article here. Next, we will install the NGINX web server in our Raspberry Pi. First, install the nginx package by typing the following command into the Terminal:

sudo apt-get install nginx


Next, we will replace the default nginx page with our code using either FTP or via Terminal:

sudo nano /var/www/html/index.nginx-debian.html


Snd start the server with:

sudo /etc/init.d/nginx start


Now, launch the page in your Raspberry Pi's Chromium by typing http://localhost in the browser. You can enter Fullscreen mode by pressing the F11 key on the keyboard. Here is my demo below.

I will be covering integration with Google photos, Calendar, the Flickr API in my next article.

Topics:
raspberry pi 3 ,html 5 ,javascript ,iot ,home automation

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}