Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

A while back I wrote an entry on how to get the Lenovo LT1421 USB DisplayLink monitor working on a RaspberryPi. Now I took that a bit further and created a photo frame using the Raspberry Pi model A, a USB monitor and a bunch of software and some custom scripts.

This is part four of this blog post, if you haven't seen the first, second or third part, you can find them here: https://www.igorkromin.net/index.php/2015/04/06/raspberrypi-and-a-usb-monitor-combined-to-make-a-photo-frame-part-1/ and https://www.igorkromin.net/index.php/2015/04/07/raspberrypi-and-a-usb-monitor-combined-to-make-a-photo-frame-part-2/ and https://www.igorkromin.net/index.php/2015/04/12/raspberrypi-and-a-usb-monitor-combined-to-make-a-photo-frame-part-3/.

In the previous parts I had the photo frame completely set up and working, except for one bit - it had no website. This part shows how I've set up Apache to run on the Raspberry Pi, what changes I've made to the configuration to make it possible to control the photo frame and then finally the photo frame HTML page itself (PHP actually).

This is the end result for the web presence for the photo frame. It is possible to turn the monitor on or off, select the next photo and even shut down the photo frame. Everything is scripted using PHP, some HTML and some CSS.
photofram3.png


To get this working I installed the following two packages: apache2, php5. I then deleted the default /var/www/index.html file and added my own content to the www directory. Those details later. Once Apache is installed, it will start up automatically the next time that the Raspberry Pi is restarted.

To get the web page able to control the photo frame, Apache needed to be give the right permissions. Since my photo frame was only ever going to be on my network, I thought it would be safe to give sudo access to Apache. This is dangerous to do and should usually not be done unless the device is running on an isolated network. You've been warned.

Here's how I did it, using visudo I added the following line to the sudoers file:
 sudo visudo
www-data ALL=(ALL) NOPASSWD: ALL




Now to make sure that I could serve the right photo via the web page, I made a symlink:
 Terminal
sudo ln -s /photos/cache/current.jpg /var/www/current.jpg


Next, I copied the ConkyWeather.ttf to the /var/www directory, and finally I created the following files to serve the web page itself...
 pp.css
@font-face {font-family: 'ConkyWeather'; src: url('ConkyWeather.ttf')}
body {margin:0;padding:4px;background-color:#eee;font-size:16pt;font-family:Verdana;color:White;}
a {text-decoration:none;color:Red;}
.heading {font-size:17pt;font-weight:bold;padding-bottom:0.25em;}
.separator {border-top:1px solid silver;margin-top:1em;padding-top:1em;}
.weather {font-family:'ConkyWeather';font-size:90px;float:right;padding-left:8px;}
.weather2 {margin-bottom:2em;clear:both;}

 pp.php
<?php
$cmd = (isset($_GET["c"])) ? $_GET["c"] : "";
switch ($cmd) {
case "on":
exec("sudo su pi -c 'xset dpms force on -display :0'"); break;
case "off":
exec("sudo su pi -c 'xset dpms force off -display :0'"); break;
case "next":
exec("sudo su pi -c '/photos/cache/select.sh'"); break;
case "halt":
exec("sudo su -c 'shutdown -h now'"); break;
}
if ($cmd != "") {
header("Location:/");
exit();
}
$monStateTxt = trim(shell_exec("sudo su pi -c 'xset q -display :0|grep Monitor'"));
$monStateOff = strpos($monStateTxt, "Off") > 0;
$weather = file("/home/pi/1d_accuweather_rss/weather");
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>


 index.php
<?php
include "pp.php";
?>
<html>
<head>
<title>Photo Frame</title>
<link rel="stylesheet" type="text/css" href="pp.css">
</head>
<body>
<div style="margin-left:auto;margin-right:auto;background-color:#222;width:1366px;height:768px;border:1px solid #222;">
<img style="vertical-align:top;" src="current.jpg?<?php echo rand(); ?>" width="1066" height="768"/>
<div style="padding:4px;float:right;right:0;width:290px;">
<div class="heading">Photo Frame Controls</div>
<?php
echo $monStateTxt . " | ";
if ($monStateOff) {
echo '<a href="/?c=on">Turn On</a>';
}
else {
echo '<a href="/?c=off">Turn Off</a>';
}
?>
<br><a href="/?c=next">Select Next Photo</a>
<div class="separator"></div>
<div class="heading">Date and Time</div>
<?php echo nl2br(date("l, j F YnH:i e")); ?>
<div class="separator"></div>
<div class="heading">Weather</div>
<div class="weather2">
<div class="weather"><?php echo $weather[1]; ?></div>
<?php echo $weather[0]; ?>
</div>
<div class="weather2">
<div class="weather"><?php echo $weather[4]; ?></div>
Today's Forecast: <?php echo $weather[3]; ?>
</div>
<div class="weather2">
<div class="weather"><?php echo $weather[7]; ?></div>
Tomorrow's Forecast: <?php echo $weather[6]; ?>
</div>
<a href="/?c=halt">Shut Down</a>
</div>
</div>
</body>
</html>


That's it. The links on the web page are processed using PHP, which executes some commands on the shell. Very simple, but a little unsafe, however it works to get the intended job done.

This is it for the write up about the photo frame. It took a while to get all of the information online, but hopefully this means that the whole project can be reproduced by others. Enjoy!

-i

Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

How to fix Google Cloud SDK dev server error - No module named ipaddr

Adorable but totally metal - Metal Earth 3D Guardians of the Galaxy Groot model kit

Riverside Expressway Cam shut down permanently

Inserting Google DFP ads with Backbone, Underscore and jQuery

How to resolve the domain is already mapped to a project error in Google App Engine

A quick look at the Nyko Super MiniBoss wireless controllers for the SNES mini

Loading and displaying a collection from bootstrapped data in Backbone.js

Add this handy function to your Bash profile file to display the compiled JDK version for a .class file

How does PCBWay stack up as a low budget PCB fab

Resolving the Cannot reference X before supertype constructor is called compiler error in Java

Recent Galleries

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Tiny Arcade revision 6 kit assembly and decal application

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity