Added images for compare example

12 years ago · 6d499c4a7c
7 changed files with 46 additions and 71 deletions
--- a/2
+++ b/2
@ -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
--- a/demoassets/People.jpg
+++ b/demoassets/People.jpg
--- a/demoassets/People2.jpg
+++ b/demoassets/People2.jpg
--- 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;
+		});
+
+	}());
+
 });
--- 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;
    }
--- 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 @@
 								<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>
@ -156,6 +159,9 @@ resemble(file).compareTo(file2).onComplete(function(){
 				<p>	
 					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>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
--- a/resemble.css
+++ b/resemble.css
@ -1,67 +0,0 @@
-
-
-h1 {
-	text-align: center;
-}
-
-body {
-	padding-top: 60px;  
-}
-	
-footer {
-	margin-top: 45px;
-	padding: 35px 0 36px;
-	border-top: 1px solid #e5e5e5;
-}
-
-.drop-zone{
-	border: 10px dashed #ccc;
-	color: #ccc;
-	font-size: 32px;
-	height: 400px;
-	line-height: 400px;
-	text-align: center;
-	width: 400px;
-	overflow: hidden;
-	position: relative;
-}
-	.drop-zone.drag-over{
-		border: 10px dashed #0088CC;		
-	}
-	.drop-zone img {
-		width: 400px;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-.small-drop-zone{
-	margin-top: 20px;
-	margin-left: 90px;
-	border: 10px dashed #ccc;
-	color: #ccc;
-	font-size: 32px;
-	height: 330px;
-	line-height: 330px;
-	text-align: center;
-	width: 330px;
-	overflow: hidden;
-	position: relative;
-}
-	.small-drop-zone.drag-over{
-		border: 10px dashed #0088CC;        
-	}
-	.small-drop-zone img {
-		width: 330px;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	#image-diff {
-		margin-left: 0px;
-		margin-top: 90px;
-		border-style: solid;
-	}
-	#image-diff img {
-		cursor: pointer !important;
-	}