Permalink
Browse files

Adding secondary gallery support with PhotoSwipe.

  • Loading branch information...
1 parent 2339e5c commit e4d6f812036bb21099440d1e56526fa4c34f402f Andrew Hao committed Feb 11, 2012
View
38 app.js
@@ -3,16 +3,14 @@ var express = require('express'),
sys = require('sys'),
fs = require('fs'),
yaml = require('yaml'),
+ photo_file_utils = require('./photo_file_utils'),
camera_control = require('./camera_control.js'),
image_twiddle = require('./image_twiddler.js'),
web = express.createServer(),
exec = require('child_process').exec;
-Shmile = {};
-var yml = fs.readFileSync("config/shmile.yml", "ascii");
-// console.log(yml);
-// yml = yaml.eval(yml);
-// console.log(yml);
+// TODO/ahao
+var yml = fs.readFileSync("config/shmile.yml", "utf-8");
web.configure(function(){
web.set('views', __dirname + '/views');
@@ -23,15 +21,22 @@ web.configure(function(){
web.use(express.static(__dirname + '/public'));
});
+console.log()
+
web.get('/', function(req, res) {
res.render('index', {
- title: 'shmile'
+ title: 'shmile',
+ extra_js: ['camera_utils', 'photo_view', 'shmile'],
+ extra_css: []
});
});
web.get('/gallery', function(req, res) {
res.render('gallery', {
- title: 'gallery!'
+ title: 'gallery!',
+ extra_js: ['photoswipe/klass.min', 'code.photoswipe.jquery-3.0.4.min', 'shmile_gallery'],
+ extra_css: ['photoswipe/photoswipe'],
+ image_paths: photo_file_utils.composited_images(true)
});
});
@@ -76,19 +81,36 @@ io.sockets.on('connection', function(websocket) {
camera.emit('snap', isFirst);
});
+ // The browser is requesting an updated array of images
+ websocket.on('all_images', function() {
+ // TODO
+ });
+
// The browser is telling me to knit the images together.
websocket.on('composite', function() {
var compositer = image_twiddle(State.image_src_list);
compositer.emit('composite');
+
// Reset when finished.
compositer.on('composited', function(output_file_path) {
console.log('Finished compositing image. Output image is at ', output_file_path);
// Clear the source list.
State.image_src_list = [];
// Print the image to the default printer.
- exec('lpr ' + output_file_path);
+ // TODO change to config var
+ if (false) {
+ exec('lpr ' + output_file_path);
+ }
+ // Let all connected clients know there is a new composited image
+ websocket.broadcast.emit('composited_image', photo_file_utils.photo_path_to_url(output_file_path))
});
+
+ compositer.on('generated_thumb', function(thumb_path) {
+ // Let all connected clients know there is a new thumb image
+ websocket.broadcast.emit('generated_thumb', photo_file_utils.photo_path_to_url(thumb_path));
+ });
+
});
});
View
@@ -14,11 +14,12 @@ var TOTAL_HEIGHT = IMAGE_HEIGHT * 2 + IMAGE_PADDING * 3,
image_twiddle = function(img_src_list, opts, cb) {
if (img_src_list === undefined) img_src_list = null;
- if (opts == null) {
+ if (opts === undefined) {
opts = {
overlay_src: 'public/images/overlay.png',
tmp_dir: 'public/temp',
- output_dir: 'public/photos/generated'
+ output_dir: 'public/photos/generated',
+ thumb_dir: 'public/photos/generated/thumbs'
}
}
@@ -33,7 +34,9 @@ image_twiddle = function(img_src_list, opts, cb) {
var utcSeconds = (new Date()).valueOf(); // secs from epoch
var IMAGE_GEOMETRY = IMAGE_WIDTH + 'x' + IMAGE_HEIGHT;
var OUTPUT_PATH = opts.tmp_dir + '/out.jpeg';
- var FINAL_OUTPUT_PATH = opts.output_dir + '/gen' + utcSeconds + '.jpeg';
+ var OUTPUT_FILE_NAME = utcSeconds + '.jpeg';
+ var FINAL_OUTPUT_PATH = opts.output_dir + '/' + 'gen_' + OUTPUT_FILE_NAME;
+ var FINAL_OUTPUT_THUMB_PATH = opts.thumb_dir + '/' + 'thumb_' + OUTPUT_FILE_NAME;
var GEOMETRIES = [
IMAGE_GEOMETRY + '+' + IMAGE_PADDING + "+" + IMAGE_PADDING,
@@ -71,8 +74,23 @@ image_twiddle = function(img_src_list, opts, cb) {
throw error;
}
emitter.emit('composited', FINAL_OUTPUT_PATH);
+ doGenerateThumb();
});
}
+
+ var resizeCompressArgs = [
+ '-size', '25%',
+ '-quality', '20',
+ FINAL_OUTPUT_PATH,
+ FINAL_OUTPUT_THUMB_PATH
+ ];
+
+ var doGenerateThumb = function() {
+ im.convert(resizeCompressArgs, function(e, out, err) {
+ if (err) throw err
+ emitter.emit('generated_thumb', FINAL_OUTPUT_THUMB_PATH)
+ })
+ }
});
return emitter;
}
View
@@ -40,7 +40,7 @@
"express": ">=2.4.6",
"jade": ">=0.15.4",
"imagemagick": ">=0.1.2",
- "yaml": ">=0.2.3"
+ "yaml": ">=0.2.3",
},
"engines": ["node >=0.6.2"],
"directories": {
View
@@ -0,0 +1,42 @@
+var fs = require('fs')
+
+// Singleton utility class.
+var PhotoFileUtils = (function() {
+
+ var GENERATED_PHOTOS_PATH = 'public/photos/generated'
+ var GENERATED_THUMBS_PATH = 'public/photos/generated/thumbs'
+ var GENERATED_PHOTOS_URL = 'photos/generated'
+
+ /**
+ * Return an array of all files in the dir.
+ * @param wantUrlPrefix
+ * Include a prefix such that a browser could use it to load the JPGs.
+ */
+ var composited_images = function(wantUrlPrefix, wantFullSize) {
+ var path = (wantFullSize) ? GENERATED_PHOTOS_PATH : GENERATED_THUMBS_PATH;
+ var files = fs.readdirSync(path);
+ var ret = [];
+ for (i in files) {
+ var file = files[i];
+ if (file.match(/jpeg$/)) {
+ var prefix = (wantUrlPrefix) ? GENERATED_PHOTOS_URL + '/' : '';
+ ret.push(prefix + file);
+ }
+ }
+ return ret;
+ };
+
+ /**
+ * Convert from a relative FS path ("public/photos/generated/foo.jpg") to
+ * a relative URL for the browser ("/photos/generated/foo.jpg")
+ */
+ var photo_path_to_url = function(relpath) {
+ return relpath.replace(/^public/, '')
+ };
+ return {
+ composited_images: composited_images,
+ photo_path_to_url: photo_path_to_url
+ }
+})();
+
+module.exports = PhotoFileUtils
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,176 @@
+/*
+ * photoswipe.css
+ * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com)
+ * Licensed under the MIT license
+ *
+ * Default styles for PhotoSwipe
+ * Avoid any position or dimension based styles
+ * where possible, unless specified already here.
+ * The gallery automatically works out gallery item
+ * positions etc.
+ */
+
+
+body.ps-active, body.ps-building, div.ps-active, div.ps-building
+{
+ background: #000;
+ overflow: hidden;
+}
+body.ps-active *, div.ps-active *
+{
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+ display: none;
+}
+body.ps-active *:focus, div.ps-active *:focus
+{
+ outline: 0;
+}
+
+
+/* Document overlay */
+div.ps-document-overlay
+{
+ background: #000;
+}
+
+
+/* UILayer */
+div.ps-uilayer {
+
+ background: #000;
+ cursor: pointer;
+
+}
+
+
+/* Zoom/pan/rotate layer */
+div.ps-zoom-pan-rotate{
+ background: #000;
+}
+div.ps-zoom-pan-rotate * { display: block; }
+
+
+/* Carousel */
+div.ps-carousel-item-loading
+{
+ background: url(loader.gif) no-repeat center center;
+}
+
+div.ps-carousel-item-error
+{
+ background: url(error.gif) no-repeat center center;
+}
+
+
+/* Caption */
+div.ps-caption
+{
+ background: #000000;
+ background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
+ border-bottom: 1px solid #42403f;
+ color: #ffffff;
+ font-size: 13px;
+ font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
+ text-align: center;
+}
+div.ps-caption * { display: inline; }
+
+div.ps-caption-bottom
+{
+ border-top: 1px solid #42403f;
+ border-bottom: none;
+ min-height: 44px;
+}
+
+div.ps-caption-content
+{
+ padding: 13px;
+ display: block;
+}
+
+
+/* Toolbar */
+div.ps-toolbar
+{
+ background: #000000;
+ background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
+ border-top: 1px solid #42403f;
+ color: #ffffff;
+ font-size: 13px;
+ font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
+ text-align: center;
+ height: 44px;
+ display: table;
+ table-layout: fixed;
+}
+div.ps-toolbar * {
+ display: block;
+}
+
+div.ps-toolbar-top
+{
+ border-bottom: 1px solid #42403f;
+ border-top: none;
+}
+
+div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
+{
+ cursor: pointer;
+ display: table-cell;
+}
+
+div.ps-toolbar div div.ps-toolbar-content
+{
+ width: 44px;
+ height: 44px;
+ margin: 0 auto 0;
+ background-image: url(icons.png);
+ background-repeat: no-repeat;
+}
+
+div.ps-toolbar-close div.ps-toolbar-content
+{
+ background-position: 0 0;
+}
+
+div.ps-toolbar-previous div.ps-toolbar-content
+{
+ background-position: -44px 0;
+}
+
+div.ps-toolbar-previous-disabled div.ps-toolbar-content
+{
+ background-position: -44px -44px;
+}
+
+div.ps-toolbar-next div.ps-toolbar-content
+{
+ background-position: -132px 0;
+}
+
+div.ps-toolbar-next-disabled div.ps-toolbar-content
+{
+ background-position: -132px -44px;
+}
+
+div.ps-toolbar-play div.ps-toolbar-content
+{
+ background-position: -88px 0;
+}
+
+/* Hi-res display */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 240dpi)
+{
+ div.ps-toolbar div div.ps-toolbar-content
+ {
+ -moz-background-size: 176px 88px;
+ -o-background-size: 176px 88px;
+ -webkit-background-size: 176px 88px;
+ background-size: 176px 88px;
+ background-image: url(icons@2x.png);
+ }
+}
@@ -14,7 +14,7 @@ CameraUtils.snap = function(idx) {
setTimeout(function() {
p.modalMessage('Cheese!', 2000);
p.flashEffect(2000);
- }, 2000);
+ }, 5000);
}
Oops, something went wrong.

0 comments on commit e4d6f81

Please sign in to comment.