initial commit

Author: JohnCoker

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+pictures/*
+tmp

README.md

@@ -0,0 +1,44 @@
+# Picture Frame
+
+This repository contains the code that supports using a
+[single-board computer](https://en.wikipedia.org/wiki/Single-board_computer),
+to drive a TV for use as a picture frame.
+In particular, it shows a different picture each day from the collection of photos you upload.
+
+## Architecture
+
+The picture frame is implemented with a single [Node.js](https://en.wikipedia.org/wiki/Node.js)
+application that supports two different web pages:
+ - `/`: view and control the picture frame's behavior
+ - `/frame`: page to view the current day's picture
+
+Connections can be made to the manage page to view pictures uploaded and control the behavior.
+
+New pictures can be uploading from that page, or you can issue HTTP requests PUT and DELETE in the
+`/pictures/` folder.
+
+A web browser in kiosk mode is pointed to the `/frame` page that displays only the current picture.
+The web browser needs to support
+[server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events),
+which is used to update the display when the current picture changes (either because it is a new
+day or because the user updated the picture from the manage page).
+
+## Setting Up
+
+You need to use an SBC capable of running Node.js with an HDMI output. For recent TVs, you want
+one capable of 4k (2160p) output, any frame rate. For older TVs, HD is fine (1080p).
+As far as disk space, you need enough for the OS and the pictures you want to upload.
+(This application requires only a few hundred Mb.)
+
+1. Set up your SBC running whatever flavor of Linux is supported and set up networking.
+   If there is another web server running already, disable it.
+
+2. Install Node.js then install this application and set it to start at computer boot-up.
+
+3. Set the screen saver to execute the browser in kiosk mode showing `http://localhost/frame`.
+
+4. Copy your pictures into the pictures folder of this app or upload them through the web server.
+
+5. Connect the SBC's HDMI output to your TV.
+
+6. Connect to the SBC's web interface from your computer or phone to manage it.

artwork/basic-frame.png

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+if (process.env.NODE_ENV == null)
+  process.env.NODE_ENV = 'development';
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../index');
+var debug = require('debug')('site:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

bin/www

@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+  /**
+   * Directory in which picture files are located.
+   */
+  pictures: path.join(__dirname, '../pictures'),
+
+  /**
+   * If true, PUT and DELETE is supported to upload and remove images.
+   */
+  uploads: true,
+
+  /**
+   * Allowed picture image extensions.
+   */
+  extensions: ['jpg', 'jpeg', 'png'],
+};

config/server.js

@@ -0,0 +1,226 @@
+/*
+ * Copyright 2016 John Coker for ThrustCurve.org
+ * Licensed under the ISC License, https://opensource.org/licenses/ISC
+ */
+'use strict';
+
+const path = require('path'),
+      fs = require('fs'),
+      express = require('express'),
+      favicon = require('serve-favicon'),
+      logger = require('morgan'),
+      cookieParser = require('cookie-parser'),
+      config = require('./config/server.js'),
+      Pictures = require('./pictures.js');
+
+const app = express(),
+      router = express.Router();
+
+app.use(logger('dev'));
+app.use(favicon(__dirname + '/public/favicon.ico'));
+app.use(express.static(path.join(__dirname, '/public')));
+app.use(cookieParser());
+
+// set up picture state
+const pictures = new Pictures(config);
+pictures.reload();
+
+// main page is dynamic
+const manageRoot = path.join(__dirname + '/public/manage/'),
+      manageHeader = fs.readFileSync(path.join(manageRoot, 'header.incl'), 'utf8'),
+      manageFooter = fs.readFileSync(path.join(manageRoot, 'footer.incl'), 'utf8');
+
+function formatCaption(picture) {
+  let s = encodeHTML(picture.file) + ', ';
+
+  if (picture == pictures.current)
+    s += 'showing now';
+  else if (!picture.lastShown)
+    s += 'never shown';
+  else {
+    let midnight = new Date();
+    midnight.setHours(0, 0, 0, 0);
+    let ago = 0;
+    while (picture.lastShown < midnight) {
+      midnight.setDate(midnight.getDate(-1));
+      ago++;
+    }
+
+    if (ago < 1)
+      s += 'shown today';
+    else if (ago == 1)
+      s += 'shown yesterday';
+    else
+      s += `shown ${ago}d ago`;
+  }
+
+  return s;
+}
+
+router.get(['/', '/index.html', '/manage', '/manage.html'], function(req, res, next) {
+
+  var feedback = [];
+
+  // change the current picture
+  if (req.query.hasOwnProperty('switch') && pictures.switch(req.query.switch)) {
+    let encoded = encodeHTML(pictures.current.file);
+    feedback.push(`Now showing ${encoded}.`);
+  }
+
+  // reset the sequence
+  if (req.query.hasOwnProperty('reset')) {
+    feedback.push('Picture sequence reset.');
+  }
+
+  // resume normal sequence
+  if (req.query.hasOwnProperty('resume')) {
+
+    if (pictures.current) {
+      let encoded = encodeHTML(pictures.current.file);
+      feedback.push('Resumed sequence with ${encoded}.');
+    }
+  }
+
+  // collect the sort order
+  let sort, setSort = false;
+  if (req.query.hasOwnProperty('sort') &&
+      /^(name|shown|updated)$/.test(req.query.sort.toLowerCase())) {
+    sort = req.query.sort;
+    res.append('Set-Cookie', 'sort=' + sort);
+  } else {
+    sort = req.cookies.sort;
+  }
+
+  // generate the page
+  var parts = [];
+  parts.push(manageHeader);
+
+  if (feedback.length > 0) {
+    parts.push(' <div class="container">\n');
+    for (let i = 0; i < feedback.length; i++) {
+      parts.push(`  <div class="alert alert-info" role="alert">
+   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+   ${feedback[i]}
+  </div>
+`);
+    }
+    parts.push('</div>\n');
+  }
+
+  parts.push(' <div class="container">\n');
+
+  if (pictures.current) {
+    let caption = formatCaption(pictures.current);
+    parts.push(`  <div class="row">
+   <div class="col-sm-12 picture current">
+    <img src="/picture/current" />
+    <p class="caption">${caption}</p>
+   </div>
+  </div>\n`);
+  }
+
+  if (pictures.length > 1) {
+    parts.push('  <div class="row">\n');
+    let col = 0;
+    let sorted = pictures.sorted(sort);
+    for (let i = 0; i < sorted.length; i++) {
+      if (sorted[i] == pictures.current)
+        continue;
+
+      if (col >= 12) {
+        parts.push('  </div>\n');
+        parts.push('  <div class="row">\n');
+        col = 0;
+      }
+      parts.push('   <div class="col-sm-3 picture">\n');
+      let encoded = encodeURIComponent(sorted[i].file);
+      parts.push(`    <a href="?switch=${encoded}"><img src="/thumbnail/${encoded}" /></a>\n`);
+      let caption = formatCaption(sorted[i]);
+      parts.push(`    <p class="caption">${caption}</p>\n`);
+      parts.push('   </div>\n');
+      col += 3;
+    }
+    if (col < 12)
+      parts.push(`   <div class="col-sm-${12 - col}">&nbsp;</div>\n`);
+    parts.push('  </div>\n');
+  }
+
+  parts.push(' </div>\n');
+  parts.push(manageFooter);
+
+  res.status(200)
+     .type('html');
+  for (let i = 0; i < parts.length; i++)
+    res.write(parts[i]);
+  res.end();
+});
+
+router.get(['/picture/current', '/thumbnail/current'], function(req, res, next) {
+  if (pictures.current) {
+    res.sendFile(pictures.current.path, {
+      lastModified: false,
+      cacheControl: false,
+      headers: {
+        'Last-Modified': pictures.current.lastShown.toUTCString(),
+        'Cache-Control': 'must-revalidate',
+        'X-Current-Picture': pictures.current.file
+      }
+    });
+  } else
+    res.status(404).send();
+});
+
+router.get(['/picture/:file', '/thumbnail/:file'], function(req, res, next) {
+  let found;
+  if (req.params.file != null && req.params.file !== '')
+    found = pictures.byFile(req.params.file);
+  if (found)
+    res.sendFile(found.path);
+  else
+    res.status(404).send();
+});
+
+app.use('/', router);
+
+// handle other routes as 404
+app.use(function(req, res, next) {
+  res.status(404).send();
+});
+
+// handle internal errors
+app.use(function(err, req, res, next) {
+  let status = err.status || 500;
+  let message = encodeHTML(err.message) || 'Unknown error';
+  let body = `<!DOCTYPE html>
+<html>
+<head>
+ <title>Server Error</title>
+</head>
+<body>
+ <h1>Server Error</h1>
+ <ul>
+ <li>URL: ${req.url}</li>
+ <li>status: ${status}</li>
+ <li>message: ${message}</li>
+ </ul>
+`;
+
+  if (err && err.stack)
+    body += ' <pre>\n' + encodeHTML(err.stack) + '\n</pre>\n';
+
+  body += `
+</body>
+</html>`;
+
+  res.status(status).send(body);
+});
+
+function encodeHTML(s) {
+  if (s == null || s === '')
+    return '';
+  return s.replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+}
+
+module.exports = app;