用Raspberry Pi制作数码相框（译文）

原文地址：https://www.codeproject.com/Articles/1223258/Build-digital-photo-frame-with-a-Raspberry-Pi

原文作者：Farooq Kaiser

译文由本站 robot-v1.0 翻译

前言

With $35 raspberry pi and an old screen to build your own digital photo frame.

只需35美元的用树莓派和旧屏幕即可制作自己的数码相框.

介绍(Introduction)

由Raspberry Pi驱动的自定义数码相框.我正在使用Html5 canvas元素显示图像以及天气,时间和日期信息.(A custom digital photo frame powered by a Raspberry Pi. I’m using Html5 canvas element to display images, along with the weather, time and date information.)

先决条件(Prerequisites)

您需要配置树莓派并安装一个操作系统,这在我之前的文章中已经介绍过(You need to configure raspberry pi and install an operating system, which I have covered in my previous) 文章(article) .(.)

使用代码(Using the code)

显示照片的HTML代码以及天气,时间和日期信息:(The Html code to display photos, along with the weather, time and date information:)

<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>

HTML 元素用于通过JavaScript绘制图形.这是在画布中加载图像的javascript代码.(The HTML element is used to draw graphics, via JavaScript. Here is the javascript code to load images in 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 + '   ' + weather.temp + '°' + weather.units.temp;
        $("#weatherHead").html(html);
        html = 'Feel like ' + eval(weather.wind.chill + weather.temp) + '°' + '  ' + weather.currently + '  ' +             weather.wind.direction + '  ' + weather.wind.speed + '  ' + weather.units.speed;
        $("#weatherBody").html(html);
    },
    error: function (error) {
        $(".weather").html('<p>' + error + '</p>');
    }
  });

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

上面的代码片段使用jquery(The above code snippet uses jquery) 简单天气(simpleweather) 插件可显示给定位置的天气信息.目前,我正在显示闪烁的照片,但是可以集成Google照片,日历或闪烁的API,我将在下一篇文章中介绍.另外,我正在使用天气位置’Burlington,CA',可以使用HTML5将其拉出(plugin to display weather information for a given location. Currently, I’m displaying photos from flicker, however, Google photos, Calendar or flicker API can be integrated, which i will cover in next article. Also, i’m using weather location ‘Burlington,CA’, which can be pulled using HTML5) 地理位置API.(Geolocation API.) 这是我们的html输出.(Here is our html output.)

设置树莓派(Setup Raspberry Pi)

我已经介绍了Raspberry Pi的设置(The Raspberry Pi setup has been covered in my) 上一篇文章(previous article) 这里.接下来,我们将在Raspberry Pi中安装NGINX Web服务器.首先通过在终端中键入以下命令来安装nginx软件包:(here. Next, we will install the NGINX web server in Raspberry Pi. First install the nginx package by typing the following command in to the Terminal:)

sudo apt-get install nginx

接下来,我们将使用ftp或in terminal将nginx默认页面替换为我们的代码.(Next, we will replace nginx default page with our code either using ftp or in terminal.)

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

并使用以下命令启动服务器:(and start the server with:)

sudo /etc/init.d/nginx start

现在,通过输入http://localhost在树莓派铬中启动页面,在浏览器中,您可以通过按键盘上的F11键进入全屏模式.这是下面的演示.(Now, launch the page in raspberry pi chromium by typing http://localhost, in a browser you can enter Fullscreen mode by pressing the F11 key on the keyboard. Here is my demo below.)

兴趣点(Points of Interest)

我将在下一篇文章中介绍与Google照片,日历或闪烁API的集成.(I will be covering integration with Google photos, Calendar or flicker API in next article.)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。