Add configuration / webserver setup so you can browse images #24

geerlingguy · 2020-04-02T17:36:26Z

As I've now been using this little app on numerous Pis for projects around the house, and I've also seen some of the nifty timelapse work done by Matthias Wandel (see https://github.com/Matthias-Wandel/imgcomp), I figured it would be nice to have some way of viewing results (and maybe also starting/stopping the timelapses, and maybe even tweaking configuration) via a web UI.

Right now, the process I have for every timelapse is:

Set up Pi, turn it on.
Go to laptop which can SSH into Pi. Log in, kick off a timelapse.
Open up SFTP app, view some photos from the series.
Adjust things if need be, then restart timelapse.
Back in SFTP app, check again.
[Rinse and repeat until all settings are correct]
Start off timelapse, finally.

And it can be even more frustrating if I have to adjust the Pi's focus, especially if my laptop's upstairs and my rig is downstairs or outside. It takes minutes to get it set up.

It would be nice if, at a minimum, I had a web UI that let me browse the current timelapse folders (e.g. via Apache, just listing the directory contents and allowing pictures to be viewed).

And then, it would also be nice to allow starting/stopping timelapse series.

And finally, allowing configuration to be set, then when it is started/stopped/saved, it would write a new config.yml file with the updated settings.

Maybe Python, PHP, or Node.js to keep things simple? Or even a Go app, for some learning and fun, and easier deployment?

geerlingguy · 2020-05-14T02:18:32Z

Poor man's way of doing this, quick and dirty but it works:

First, install Apache:

sudo apt-get update
sudo apt-get install -y apache2

Second, create a virtualhost that serves up the contents of your pi-timelapse folder. Open the default virtualhost file with sudo nano /etc/apache2/sites-enabled/000-default.conf and make it look like this:

<VirtualHost *:80>
        DocumentRoot /home/pi/pi-timelapse
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        <Directory /home/pi/pi-timelapse>
                Require all granted
                Options +Indexes
        </Directory>
</VirtualHost>

Replace /home/pi/pi-timelapse with the path to where you've downloaded the pi-timelapse project, if somewhere different.

Then restart Apache and make sure it's set to run on boot:

sudo systemctl restart apache2
sudo systemctl enable apache2

Now browse to your Pi's IP address anywhere else on the network (e.g. http://10.0.100.103/).

This is NOT a secure configuration for any Pi that would be accessible from the outside.

I'd also like some sort of php script (or anything that can be dynamic, or maybe even an apache rewrite rule) that lets you visit http://10.0.100.103/latest-image, and that dynamically refreshes every X seconds (maybe every 5 by default), and the rewrite looks for the newest folder in the timelapse directory, then the latest full image (since we don't want to load a 0-byte image) in that directory.

geerlingguy · 2021-01-31T21:07:55Z

Added a latest.html page to the project directory so you can hit that page and it will just use Javascript to load up the latest image from the latest series:

<!DOCTYPE html>
<html>
<head>
  <title>Latest Image in Timelapse Series</title>
  <meta http-equiv="refresh" content="30" />
</head>
<body>
  <img id="the_big_image" src="" width="80%" height="auto" style="display: block; margin: 0 auto;">

  <p style="text-align: center;">This page refreshes every 30 seconds.</p>

  <script>
    // Get the current hostname.
    var loc = window.location.href;
    const url = new URL(window.location.href);
    var current_host = url.protocol + "//" + url.host + "/";

    // Get the contents of the hostname.
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", current_host, false);
    xmlHttp.send(null);
    var host_result = xmlHttp.responseText;

    // Get all instances of 'series-[date]' dirs.
    const series_regexp = /series-[0-9]{4}-[0-9]{2}-[0-9]{2}_[0-9]{2}-[0-9]{2}-[0-9]{2}/g;
    var dirs = host_result.match(series_regexp);

    // Get the last dir.
    var last_dir = dirs.pop();

    // Get the contents of the last dir.
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", current_host + last_dir + "/", false);
    xmlHttp.send(null);
    var image_result = xmlHttp.responseText;

    // Get all instances of 'imageXXXXX.jpg' files.
    const image_regexp = /image[0-9]{8}.jpg/g;
    var images = image_result.match(image_regexp);
    var last_image = images.pop();

    // Replace the placeholder image.
    document.getElementById("the_big_image").src = '/' + last_dir + '/' + last_image;
  </script>
</body>
</html>

Note that there's currently a bug with that code—if the latest image is still being written (happens a lot on a Pi Zero since the 2 MB file write can take a second or so), then when the latest page refreshes it will show no image sometimes (or a partially-written image).

That happens maybe 10% of the time in my experience at a 10 second refresh rate (though the rate shouldn't have much effect).

I considered setting it to show current-1 (e.g. pop() but pop off two images from the list).

geerlingguy · 2021-01-31T21:09:02Z

Also, the above is a pretty inefficient technique—three page loads and a little JS that uses some regex on what could be thousands of bytes of text—to load in the image (so four resource loads total).

It would be nice to do this server-side with a little JS or PHP, but that would require more server-side setup.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add configuration / webserver setup so you can browse images #24

Add configuration / webserver setup so you can browse images #24

geerlingguy commented Apr 2, 2020

geerlingguy commented May 14, 2020 •

edited

geerlingguy commented Jan 31, 2021 •

edited

geerlingguy commented Jan 31, 2021

Add configuration / webserver setup so you can browse images #24

Add configuration / webserver setup so you can browse images #24

Comments

geerlingguy commented Apr 2, 2020

geerlingguy commented May 14, 2020 • edited

geerlingguy commented Jan 31, 2021 • edited

geerlingguy commented Jan 31, 2021

geerlingguy commented May 14, 2020 •

edited

geerlingguy commented Jan 31, 2021 •

edited