Preview files from web browser?

If you are experiencing problems with "Everything", post here for assistance.
Post Reply
Corsair
Posts: 3
Joined: Tue Aug 20, 2019 12:55 pm

Preview files from web browser?

Post by Corsair »

Hi, I've been using the Everything search engine a lot lately and find the preview pane very useful for previewing photos in a quick way without having to open new windows. I recently tried out the Everything HTTP server that allows you to search and access your files from a web browser and was wondering if it is possible to preview the files from the web browser? At the moment when you click on a photo in the web page it opens the photo on the same tab and then you have to click back to get to the original web page. The desired result would be to have a preview pane on the web page similar to the one in the Everything software.
void
Developer
Posts: 15038
Joined: Fri Oct 16, 2009 11:31 pm

Re: Preview files from web browser?

Post by void »

Everything does not have preview functionality in the Everything HTTP server.

I'll consider adding something like this in a future release.
Corsair
Posts: 3
Joined: Tue Aug 20, 2019 12:55 pm

Re: Preview files from web browser?

Post by Corsair »

void wrote: Wed Aug 21, 2019 12:28 pm Everything does not have preview functionality in the Everything HTTP server.

I'll consider adding something like this in a future release.
Ok thank you, I have another question about the preview functionality. When I connect to an ETP/FTP server that is located on another computer, is it possible to preview the photos that are stored on the other computer from the Everything client without having to download them?
void
Developer
Posts: 15038
Joined: Fri Oct 16, 2009 11:31 pm

Re: Preview files from web browser?

Post by void »

Here's a basic java-script image browser I knocked up: walleverything.zip

Please extract this file somewhere, eg: your desktop.
Set the Everything HTTP server default page to this file:
  • In Everything, from the Tools menu, click Options.
  • Click the HTTP server tab on the left.
  • To the right of Default page, click Select....
  • Select the walleverything.htm we extracted earlier and click Open.
  • Click OK.


When you load localhost you should see something like:


walleverything.html

Code: Select all

<html>
<head>
<style type="text/css">
* {margin:0;padding:0;} body {font-family:Arial,sans-serif;font-size:13px;color:#fff;text-align:left;background-color:#111;padding:0px;margin:0px;}
.thumb {
	margin:8px;
	box-shadow: 0 0 4px rgba(0,0,0,.8);
	display:inline-block;
	vertical-align:bottom;
	position:relative;
	width:300px;
	height:200px;
	background-color:#000;
}
</style>
<script language="javascript" >

function ProcessTheData(jsonTexto) {

	var i;
	var content;

	content = "<ul>";

	for(i=0;i<jsonTexto.results.length;i++)
	{
		var srcurl;
		
		srcurl = "/" + jsonTexto.results[i].path + "/" + jsonTexto.results[i].name;
		
		srcurl = srcurl.replace(/\\/g,"/");
		
		content = content + '<a href="' + srcurl + '" target="_blank">';
		content = content + '<figure class="thumb">';
		
		content = content + '<img class="lazy" style="max-width:300px;max-height:200px;position:absolute;left: 50%;bottom:0;transform:translateX(-50%);" data-src="' + srcurl + '"' + ">" + "\n";

		content = content + "</figure>";
		content = content + '</a>';
	}

	content = content + "</ul>";

	document.getElementById("content").innerHTML = content;	
	
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {

          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
      // Not supported, load all images immediately
    lazyImages.forEach(function(image){
        image.nextElementSibling.src = image.nextElementSibling.dataset.srcset;
      });
  }	
}

var QueryString = function () {
	
	// This function is anonymous, is executed immediately and 
	// the return value is assigned to QueryString!
	var query_string = {};
	var query = window.location.search.substring(1);
	var vars = query.split("&");

	for (var i=0;i<vars.length;i++) {

		var pair = vars[i].split("=");

		// If first entry with this name
		if (typeof query_string[pair[0]] === "undefined") {

			query_string[pair[0]] = pair[1];

		// If second entry with this name
		} else if (typeof query_string[pair[0]] === "string") {

			var arr = [ query_string[pair[0]], pair[1] ];
			query_string[pair[0]] = arr;

		// If third or later entry with this name
		} else {
			query_string[pair[0]].push(pair[1]);
		}
	} 
	return query_string;
} ();

function DoSearch() {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', '/?j=1&path_column=1&sort=date_modified&ascending=0&s=' + ' ext:jpg;jpeg;png;gif;webp < ' + document.getElementById("search").value + ' >' , true);
xobj.onreadystatechange = function () {

	if (xobj.readyState == 4) {

		var jsonTexto = eval("("+xobj.responseText+")");
        ProcessTheData(jsonTexto);
	}
}

xobj.send();
}


</script>

</head>
<body>
<form action="javascript:DoSearch()"><input style="width:480px;margin:10px;" id="search" name="search" type="text" title="Search Everything" value="" ><input style="margin:10px;" type="submit"></form>
<div id="content">
</div>
</body>
</html>
Corsair
Posts: 3
Joined: Tue Aug 20, 2019 12:55 pm

Re: Preview files from web browser?

Post by Corsair »

void wrote: Thu Aug 22, 2019 8:00 am Here's a basic java-script image browser I knocked up: walleverything.zip

Please extract this file somewhere, eg: your desktop.
Set the Everything HTTP server default page to this file:
  • In Everything, from the Tools menu, click Options.
  • Click the HTTP server tab on the left.
  • To the right of Default page, click Select....
  • Select the walleverything.htm we extracted earlier and click Open.
  • Click OK.


When you load localhost you should see something like:
Thanks a lot Void, this was exactly what I was looking for. Really appreciate the help and how you're actively listening to the feedback in this community.
bebunw
Posts: 14
Joined: Tue Sep 05, 2017 1:02 am

Re: Preview files from web browser?

Post by bebunw »

How to random sort the results ? :)
void
Developer
Posts: 15038
Joined: Fri Oct 16, 2009 11:31 pm

Re: Preview files from web browser?

Post by void »

There's no random sort yet (next major version)

You can change the sort by changing the following line in the walleverything.html:

Code: Select all

xobj.open('GET', '/?j=1&path_column=1&sort=date_modified&ascending=0&s=' + ' ext:jpg;jpeg;png;gif;webp < ' + document.getElementById("search").value + ' >' , true);
where date_modified can be:
  • size
  • date_modified
  • date_created
  • name
  • path
You could randomize the results with javascript. However, its a little beyond the scope of this little project.
Stamimail
Posts: 1121
Joined: Sat Aug 31, 2013 9:05 pm

Re: Preview files from web browser?

Post by Stamimail »

Hi,
Is this a Preview solution for files on Smartphone/Camera too?
void
Developer
Posts: 15038
Joined: Fri Oct 16, 2009 11:31 pm

Re: Preview files from web browser?

Post by void »

Only files indexed by Everything at this stage.
Post Reply