history

Your personal history storyboarded with photo and video albums. Associate photos with their meta data including geocode, caption... in XML albums.

• Plot thumbnails on a map
• Includes administration tools for XML generation

Installation

1. Node.js v6.9.x
2. Install project dependencies yarn install (Ensure yarn is installed globally npm install yarn --global
3. Start web server yarn start
4. View address in browser

Technologies

####Viewing

• XML databases for photo/video galleries
• Isomorphic React.js phasing out of JavaScript/jQuery for the pagination & lightbox

####Administration

• Node.js to support AJAX & image manipulation
• AJAX to read the XML gallery data

Dependencies

Included in this project

• jQuery via bower
• ColorBox (jQuery plugin) via bower
• Mapstraction (mapping) build 2.0.18
• Google Maps (map provider) v3
• Twitter Bootstrap (admin) v2.0.3
• Fluid 960 Grid System (admin)

To use the administration tools

• node.js
• hapi.js
• GraphicsMagick Install GraphicsMagick before npm

Photo/video album XML schemas

Current schema (2.0)

Example

<album>
	<meta>
		<gallery>demo</gallery> <!-- gallery directory name excluding 'gallery-'; new in schema 2.0 -->
		<id>sample</id> <!--Filename is album_sample.xml; new in schema 2.0-->
		<version>1.8</version> <!--Reference schema version; new in schema 2.0-->
	</meta>
	<item><!-- photo -->
		<id>1</id> <!-- id attribute must be unique for this album; used by JavaScript & for character association -->
		<filename>2001-03-21-01.jpg</filename> <!-- must start with YYYY year; photos and thumbs must be places in this folder too -->
		<geo> <!-- geocode -->
			<lat>49.25</lat> <!-- latitude -->
			<lon>-123.1</lon> <!-- longitude -->
		</geo>
		<photo_city>Vancouver, BC</photo_city> <!-- Political location name often City, Province/State -->
		<photo_loc>Granville Island</photo_loc> <!-- General location name often neighourhood or building -->
		<photo_desc>An oversized avocado</photo_desc> <!-- The photo description only viewable in the lightbox view -->
		<thumb_caption>Lunch</thumb_caption> <!-- Less than three words to descibe the thumbnail in gallery view -->
	</item>
	<item><!-- video -->
		<type>video</type>
		<id>1</id> <!-- id attribute must be unique for this album; used by JavaScript & for character association -->
		<filename>2012-fireplace.mp4</filename> <!-- History supports both HTML5 video formats for best browser support; must start with YYYY year; photos and thumbs must be places in this folder too -->
		<filename>2012-fireplace.webm</filename>
		<photo_city>Vancouver, BC</photo_city>
		<photo_loc>Home</photo_loc>
		<thumb_caption>Video: Fireplace</thumb_caption>
		<photo_desc>A sample HTML5 video in both MP4 and WebM formats</photo_desc>
		<size><w>1280</w><h>720</h></size> <!-- Dimensions for opening the popup window and enlarging the HTML5 video -->
		<geo>
			<lat>49.25</lat>
			<lon>-123.1</lon>
		</geo>
	</item>
</album>