Created
January 20, 2017 20:34
-
-
Save catbadger/1b660bae98d903156a0bdc94a70e0091 to your computer and use it in GitHub Desktop.
A gallery for image diffs that are lumped into 3 seperate directories. Used for selenium screenshot comparisions at TimeTrex.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$memory = array(); | |
function listFolderFiles( $dir='.', $root_dir=null){ | |
$ffs = scandir($dir); | |
$dir = str_replace('./','',$dir); | |
$pretty_dir = explode('/',$dir); | |
$pretty_dir = $pretty_dir[0]; | |
$files = array(); | |
foreach($ffs as $ff){ | |
if(isset($root_dir)==false ||$root_dir==''|| $dir =='.') { | |
$root_dir = str_replace('.'.DIRECTORY_SEPARATOR,'',$dir.DIRECTORY_SEPARATOR.$ff); | |
} | |
if ($ff != '.' && $ff != '..' && $ff != '.htaccess' && $ff != 'gal.php') { | |
$new_root_dir =explode('/',$dir); | |
$new_root_dir = $new_root_dir[0]; | |
if ( is_dir($dir.DIRECTORY_SEPARATOR.$ff) ) { | |
$dir_name = $dir.DIRECTORY_SEPARATOR.$ff; | |
$sub_dir_files = listFolderFiles( | |
$dir.DIRECTORY_SEPARATOR.$ff, | |
$root_dir, | |
$files); | |
foreach($sub_dir_files as $r => $file_path){ | |
$files[$r] = array_merge( isset($files[$r])? $files[$r]:array(), $file_path); | |
} | |
} else { | |
$fn = $dir.DIRECTORY_SEPARATOR.$ff.''; | |
$files[$new_root_dir][] = $fn; | |
} | |
} | |
} | |
return $files; | |
} | |
$memory = listFolderFiles(); | |
/** / | |
echo "<pre>"; | |
var_dump($memory); | |
die(); | |
/**/ | |
?> | |
<html> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
<script> | |
var dirA = null; | |
var dirB = null; | |
var diff = null; | |
var list = <?php echo json_encode($memory); ?>; | |
$(document).ready(function(){ | |
$('.image_row_title').click(function(e){ | |
$(this).addClass('clicked'); | |
var g = $(this).attr('group'); | |
if(dirA == null){ | |
dirA =g; | |
//console.debug(list[dirA]); | |
$('#instructions').html('Click Version B.'); | |
} else if(dirB == null) { | |
dirB = g; | |
if(dirA==dirB){ | |
var table = buildTable(); | |
$('#image_align_table').remove(); | |
$('#images_holder').append(table); | |
$('#dir_container').hide(); | |
// $('#images_holder table tr.no_diff').hide(); | |
}else{ | |
//console.debug(list[dirB]); | |
$('#instructions').html('Click the diff.'); | |
} | |
} else { | |
diff = g; | |
//console.debug(list[diff]); | |
var table = buildTable(); | |
$('#image_align_table').remove(); | |
$('#images_holder').append(table); | |
$('#dir_container').hide(); | |
$('#images_holder table tr.no_diff').hide(); | |
//$('#instructions').html('Compare the versions visually.'); | |
} | |
}); | |
$(document).on('click', '.thumb', function(e){ | |
e.preventDefault(); | |
window.open($(this).attr('src'), '', ''); | |
//scroll to center it. | |
}); | |
}); | |
function buildTable(){ | |
var table = $("<table>", {id: "image_align_table"}); | |
var d1 = list[dirA]; | |
var d2 = list[dirB]; | |
var d3 = list[diff]; | |
if(dirA != dirB){ | |
$('#instructions').html(d3.length + " differences"); | |
} else{ | |
$('#instructions').html(d1.length+" images"); | |
} | |
for(var i in d1){ | |
var tbody = $("<tbody>", {id: 'row_'+just_filename, class:'no-diff'}); | |
var path = d1[i]; | |
var just_filename = path.split('/'); | |
just_filename = just_filename[just_filename.length-1].toLowerCase(); | |
var tr = $("<tr>", {id: 'row_'+just_filename}); | |
var th = $("<th>", {class: 'title', src: path, colspan:3, style:'text-align:left;'}); | |
th.html(just_filename); | |
tr.append(th); | |
tr.appendTo(tbody); | |
tr = $("<tr>", {id: 'row_'+just_filename+'_title', style:""}); | |
img_1 = $("<img>", {class: 'thumb', src: path}); | |
td_1 = $("<td>", {class: 'dirA', src: path}); | |
td_1.append(img_1); | |
tr.append(td_1) | |
if(dirA==dirB){ | |
return; | |
} | |
var d2_path = d2[i]; | |
var d2_filename_pieces = d2_path.split('/'); | |
var d2_just_filename = ''; | |
for(var n=1; n < d2_filename_pieces.length;n++){ | |
d2_just_filename += d2_filename_pieces[n]; | |
if(n < d2_filename_pieces.length-1){ | |
d2_just_filename +='/'; | |
} | |
} | |
var d2_img = $("<img>", {class: 'thumb', src: d2_path}); | |
var d2_td = $("<td>", {class: 'dirB', src: d2_path}); | |
d2_td.append(d2_img); | |
tr.append(d2_td); | |
for(var i in d3){ | |
var d3_path = d3[i]; | |
var d3_filename_pieces = d3_path.split('/'); | |
var d3_just_filename = ''; | |
for(var n=1; n < d3_filename_pieces.length; n++){ | |
d3_just_filename += d3_filename_pieces[n]; | |
if(n<d3_filename_pieces.length-1){ | |
d3_just_filename +='/'; | |
} | |
} | |
var d3_img = ''; | |
var d3_td = $("<td>"); | |
if (d3_just_filename == d2_just_filename){ | |
d3_img = $("<img>", {class: 'thumb', src: d3_path}); | |
d3_td = $("<td>", {class: 'diff', src: d3_path}); | |
d3_td.append(d3_img); | |
tr.append(d3_td); | |
tbody.removeClass('no-diff'); | |
} | |
} | |
tr.appendTo(tbody); | |
tr = $("<tr>", {id: 'row_'+just_filename+'_hr', style:""}); | |
var hr = $("<th>", {class: 'hr', src: path, colspan:3}); | |
hr.html("<hr>"); | |
tr.append(hr); | |
tr.appendTo(tbody); | |
table.append(tbody); | |
} | |
return table | |
} | |
</script> | |
<style> | |
div, img { | |
max-width:100%; | |
} | |
img { | |
cursor:pointer; | |
border:1px solid #fff; | |
} | |
.thumb { | |
width:100%; | |
} | |
.image_row_title{ | |
cursor:pointer; | |
color:blue; | |
} | |
.clicked{ | |
color:purple; | |
} | |
.no-diff{ | |
display:none; | |
} | |
img:hover{ | |
border:1px solid red; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Image Diff Comparator</h1> | |
<p id='instructions'>Click version A.</p> | |
<div id="dir_container"> | |
<?php foreach ( $memory as $group=>$path_arr ): ?> | |
<div class='image_row_title' group='<?php echo $group; ?>'><?php echo $group; ?></div> | |
<?php endforeach;?> | |
</div> | |
<div id='images_holder'> | |
</div> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment