In a previous post, I talked about generating timelapse videos from a Raspberry Pi. I also wanted a simple way to automate this process. Part of that process was to create a HTML listing of each video, ordered by date and separated by year. The resulting videos are placed in data/2020 – We want to iterate over each file, provide a date, filename and size.

Let’s take a simple HTML template aptly named template.html:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width">
    </head>
    <body>
        <div>
            <h1>Time Lapses</h1>	
            #tr_list
        </div>
    </body>
</html>

Now, using the magic of Python and making use of the built-in re, os and datetime libs, we can build up our <table> and replace #tr_list with our generated table.

The following assumptions are applied to our code:

  • Each file in our directory has -- after the date. Eg. 2020-03-07--timelapse.mp4, we will use this as a basis to split and grab the date from the filename.
  • Years and Dates are descending.
#!/usr/bin/python3
import os
import re
from datetime import datetime

index = 'index.html'
data_dir='data/'

years = [d for d in sorted(os.listdir(data_dir),reverse=True)]

tr_list = ""

for year in years:
    tr_list +=  f"""<h2>{year}</h2>
                    <table>
                        <tr>
                            <th>Date</th>
                            <th>Filename</th>
                            <th>Size</th>
                        </tr>
                """

    for filename in sorted(os.listdir(f"{data_dir}/{year}"),reverse=True):
        date = filename.split("--")[0]
        full_path = f"{data_dir}/{year}/{filename}"
        tr_list+=f"""<tr>
                        <td>{date}</td>
                        <td><a href=\"{data_dir}{year}/{filename}\">{filename}</a></td>
                        <td>{os.stat(full_path).st_size}</t2d>
                    </tr>"""

    tr_list += "</table>"

template = ""
out = ""

with open("template.html") as f: template = f.read()

out = re.sub("#tr_list", tr_list, template)

with open(index, "w") as f: f.write(out)

And just like that, our resulting HTML will look like:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width">
    </head>
    <body>
        <div>
            <h1>Time Lapses</h1>    
            <h2>2020</h2>
                    <table>
                        <tr>
                            <th>Date</th>
                            <th>Filename</th>
                            <th>Size</th>
                        </tr>
                <tr>
                        <td>2020-09-24</td>
                        <td><a href="data/2020/2020-09-24--timelapse.mp4">2020-09-24--timelapse.mp4</a></td>
                        <td>16578430</t2d>
                    </tr><tr>
                        <td>2020-09-23</td>
                        <td><a href="data/2020/2020-09-23--timelapse.mp4">2020-09-23--timelapse.mp4</a></td>
                        <td>19379975</t2d>
                    </tr><tr>
                        <td>2020-09-22</td>
                        <td><a href="data/2020/2020-09-22--timelapse.mp4">2020-09-22--timelapse.mp4</a></td>
                        <td>20267534</t2d>
                    </tr><tr>
                        <td>2020-09-21</td>
                        <td><a href="data/2020/2020-09-21--timelapse.mp4">2020-09-21--timelapse.mp4</a></td>
                        <td>15874168</t2d>
                    </tr><tr>
                        <td>2020-09-20</td>
                        <td><a href="data/2020/2020-09-20--timelapse.mp4">2020-09-20--timelapse.mp4</a></td>
                        <td>21714272</t2d>
                    </tr><tr>
                        <td>2020-09-19</td>
                        <td><a href="data/2020/2020-09-19--timelapse.mp4">2020-09-19--timelapse.mp4</a></td>
                        <td>19444237</t2d>
                    </tr><tr>
                        <td>2020-09-18</td>
                        <td><a href="data/2020/2020-09-18--timelapse.mp4">2020-09-18--timelapse.mp4</a></td>
                        <td>9619756</t2d>
                    </tr></table>
        </div>
    </body>
</html>

As you would notice, this code is not attempting to output pretty looking HTML. tr’s are on the same line, not correct indented. However, this does not affect the browsers ability to correctly render our HTML.

Note

This is a super crude way of working, and for anything larger than simply rendering a bunch of files in a directory as plain old HTML. you should probably look at some static site generators such as Pelican, Jekyll, and more.