Added images for compare example

rsmbl · Feb 26, 2013 · 6d499c4 · 6d499c4
1 parent 50c1cda
commit 6d499c4
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 71 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,4 +1,4 @@
-The MIT License (MIT) Copyright © 2013 Richard Owen
+The MIT License (MIT) Copyright © 2013 Huddle
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the “Software”), to deal in

diff --git a/demoassets/People.jpg b/demoassets/People.jpg
diff --git a/demoassets/People2.jpg b/demoassets/People2.jpg
diff --git a/demoassets/main.js b/demoassets/main.js
@@ -81,6 +81,7 @@ $(function(){
 	var file2;
 	var resembleControl;
 	dropZone($('#dropzone1'), function(file){
+		console.log(file);
 		file1 = file;
 		if(file2){
 			resembleControl = resemble(file).compareTo(file2).onComplete(onComplete);
@@ -115,4 +116,39 @@ $(function(){
 		}
 	});
 
+
+	(function(){
+		var xhr = new XMLHttpRequest();
+		var xhr2 = new XMLHttpRequest();
+		var done = $.Deferred();
+		var dtwo = $.Deferred();
+
+		xhr.open('GET', 'demoassets/people.jpg', true);
+		xhr.responseType = 'blob';
+		xhr.onload = function(e) {
+			done.resolve(this.response);
+		};
+		xhr.send();
+
+		xhr2.open('GET', 'demoassets/people2.jpg', true);
+		xhr2.responseType = 'blob';
+		xhr2.onload = function(e) {
+			dtwo.resolve(this.response);
+		};
+		xhr2.send();
+
+		$('#example-images').click(function(){
+
+			$('#dropzone1').html('<img src="demoassets/people.jpg"/>');
+			$('#dropzone2').html('<img src="demoassets/people2.jpg"/>');
+
+			$.when(done, dtwo).done(function(file, file1){
+				resembleControl = resemble(file).compareTo(file1).onComplete(onComplete);
+			});
+
+			return false;
+		});
+
+	}());
+
 });
diff --git a/demoassets/resemble.css b/demoassets/resemble.css
@@ -59,6 +59,6 @@ footer {
     }
     #image-diff {
         margin-left: 0px;
-        margin-top: 90px;
+        margin-top: 50px;
         border-style: solid;
     }
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width">
 		<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
-		<link rel="stylesheet" href="demoassets/resemble.css">		
+		<link rel="stylesheet" href="demoassets/resemble.css?v1">		
 	</head>
 	<body>
 		<div class="container">
@@ -77,6 +77,9 @@ <h2>Compare two images?</h2>
 								<p>
 									Drop two images on the boxes to the left.  The box below will show a generated 'diff' image, pink areas show mismatch.  This example best works with two very similar but slightly different images.  Try for yourself!
 								</p>
+								<p>
+								Don't have any images to compare? <button class="btn" id="example-images">Use example images</button>
+								</p>
 								<div id="image-diff" class="small-drop-zone">
 									Diff will appear here.
 								</div>
@@ -154,7 +157,10 @@ <h2>How can I use it?</h2>
 
 			<footer class="footer">
 				<p>	
-				Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.
+					Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.
+				</p>
+				<p>
+					The image used in the comparison example was created by <a href="https://twitter.com/Shadowise" target="_blank">Daniel Rajendran</a>
 				</p>
 			</footer>
 		</div>

diff --git a/resemble.css b/resemble.css