From 1faf91ff51c4c9d637c330846c04b16bf7913690 Mon Sep 17 00:00:00 2001
From: Romain Bazile <gromain.baz@gmail.com>
Date: Sat, 5 Dec 2020 02:22:20 +0100
Subject: [PATCH] Remove thumbsup and replace by simple nginx autoindex

---
 flows/main.json                     | 156 ++++++++--------
 scripts/bash/update.sh              |  18 +-
 scripts/gallery/gallery.conf        |  20 +++
 scripts/gallery/nginx_template.xlst | 268 ++++++++++++++++++++++++++++
 scripts/planktoscope/imager.py      |   8 -
 scripts/thumbsup/config.json        |  18 --
 scripts/thumbsup/gallery.conf       |  13 --
 7 files changed, 367 insertions(+), 134 deletions(-)
 create mode 100644 scripts/gallery/gallery.conf
 create mode 100644 scripts/gallery/nginx_template.xlst
 delete mode 100644 scripts/thumbsup/config.json
 delete mode 100644 scripts/thumbsup/gallery.conf

diff --git a/flows/main.json b/flows/main.json
index f7817db..e4a79f9 100644
--- a/flows/main.json
+++ b/flows/main.json
@@ -708,78 +708,6 @@
         "width": "6",
         "collapse": true
     },
-    {
-        "id": "a411788e.45a8c8",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "4322c187.e73e5",
-        "order": 8,
-        "width": 10,
-        "height": 1
-    },
-    {
-        "id": "d4c1caa0.890fd8",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 2,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "79ebf4e3.1b427c",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 4,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "75450d64.f4d56c",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 5,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "6b099e83.09f0c8",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 6,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "2644b2c2.9c138e",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 7,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "fca12a17.304738",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b5d61bc7.54fe48",
-        "order": 8,
-        "width": 2,
-        "height": 1
-    },
-    {
-        "id": "76e8a3c5.176964",
-        "type": "ui_spacer",
-        "name": "spacer",
-        "group": "b7919ae2.c01788",
-        "order": 2,
-        "width": 5,
-        "height": 1
-    },
     {
         "id": "a7d64879.38298",
         "type": "ui_group",
@@ -952,6 +880,78 @@
         "width": "6",
         "collapse": false
     },
+    {
+        "id": "a748d93b.3e49e8",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "4322c187.e73e5",
+        "order": 8,
+        "width": 10,
+        "height": 1
+    },
+    {
+        "id": "4916e0fe.8e26f8",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 2,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "366cefec.a908d8",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 4,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "635fb8ab.69d218",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 5,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "213ca819.bc3248",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 6,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "2b17d559.4543ca",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 7,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "2d0a5067.ac6518",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b5d61bc7.54fe48",
+        "order": 8,
+        "width": 2,
+        "height": 1
+    },
+    {
+        "id": "bf163cd3.8abe38",
+        "type": "ui_spacer",
+        "name": "spacer",
+        "group": "b7919ae2.c01788",
+        "order": 2,
+        "width": 5,
+        "height": 1
+    },
     {
         "id": "4e78af2d.90be7",
         "type": "ui_ui_control",
@@ -2689,7 +2689,7 @@
         "order": 9,
         "width": 0,
         "height": 0,
-        "format": "<div>\n    <table style=\"text-align: center; width:100%\">\n        <tr style=\"vertical-align: top\">\n            <td>\n                <h2>Sample</h2><br>\n                <strong>project:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_project\"></span><br>\n                <strong>ship:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_ship\"></span><br>\n                <strong>operator:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_operator\"></span><br>\n                <strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_id\"></span><br>\n                <strong>sampling gear:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_sampling_gear\"></span><br>\n                <strong>concentrated volume:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_concentrated_sample_volume\"></span><br>\n                <strong>gear net opening:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_gear_net_opening\"></span><br></td>\n                <strong>total volume filtered:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_total_volume\"></span><br></td>\n            <td>\n                <h2>Acquisition</h2><br>\n                <strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_id\"></span><br>\n                <strong>instrument:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_instrument\"></span><br>\n                <strong>instrument id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_instrument_id\"></span><br>\n                <strong>camera:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_camera\"></span><br>\n                <strong>celltype:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_celltype\"></span><br>\n                <strong>minimum mesh:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_minimum_mesh\"></span><br>\n                <strong>maximum mesh:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_maximum_mesh\"></span><br>\n                <strong>min esd:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_min_esd\"></span><br>\n                <strong>max esd:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_max_esd\"></span><br>\n                <strong>volume:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_volume\"></span><br>\n                <strong>magnification:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_magnification\"></span><br>\n                <strong>fnumber objective:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_fnumber_objective\"></span><br>\n                <strong>software:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_software\"></span><br>\n        </tr>\n        <tr style=\"vertical-align: top\">\n            <td>\n                <h2>Object</h2><br>\n                <strong>latitude:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lat\"></span><br>\n                <strong>longitude:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lon\"></span><br>\n                <strong>latitude end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lat_end\"></span><br>\n                <strong>longitude end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lon_end\"></span><br>\n                <strong>date:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_date\"></span><br>\n                <strong>time:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_time\"></span><br>\n                <strong>date end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_date_end\"></span><br>\n                <strong>time end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_time_end\"></span><br>\n                <strong>depth min:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_depth_min\"></span><br>\n                <strong>depth max:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_depth_max\"></span><br></td>\n            <td>\n                <h2>Process</h2><br>\n                <strong>pixel:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.process_pixel\"></span><br>\n                <strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.process_id\"></span></td>\n        </tr>\n    </table>\n</div>",
+        "format": "<div>\n    <table style=\"text-align: center; width:100%\">\n        <tr style=\"vertical-align: top\">\n            <td>\n                <h2>Sample</h2>\n                <p><strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_id\"></span></p>\n                <p><strong>project:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_project\"></span></p>\n                <p><strong>ship:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_ship\"></span></p>\n                <p><strong>operator:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_operator\"></span></p>\n                <p><strong>sampling gear:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_sampling_gear\"></span></p>\n                <p><strong>concentrated volume:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_concentrated_sample_volume\"></span></p>\n                <p><strong>gear net opening:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_gear_net_opening\"></span></p>\n                <p><strong>total volume filtered:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.sample_total_volume\"></span></p>\n            </td>\n            <td>\n                <h2>Acquisition</h2>\n                <p><strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_id\"></span></p>\n                <p><strong>instrument:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_instrument\"></span></p>\n                <p><strong>instrument id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_instrument_id\"></span></p>\n                <p><strong>camera:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_camera\"></span></p>\n                <p><strong>celltype:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_celltype\"></span></p>\n                <p><strong>minimum mesh:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_minimum_mesh\"></span></p>\n                <p><strong>maximum mesh:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_maximum_mesh\"></span></p>\n                <p><strong>min esd:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_min_esd\"></span></p>\n                <p><strong>max esd:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_max_esd\"></span></p>\n                <p><strong>volume:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_volume\"></span></p>\n                <p><strong>magnification:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_magnification\"></span></p>\n                <p><strong>fnumber objective:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_fnumber_objective\"></span></p>\n                <p><strong>software:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.acq_software\"></span></p>\n            </td>\n        </tr>\n        <tr style=\"vertical-align: top\">\n            <td>\n                <h2>Object</h2>\n                <p><strong>latitude:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lat\"></span></p>\n                <p><strong>longitude:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lon\"></span></p>\n                <p><strong>latitude end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lat_end\"></span></p>\n                <p><strong>longitude end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_lon_end\"></span></p>\n                <p><strong>date:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_date\"></span></p>\n                <p><strong>time:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_time\"></span></p>\n                <p><strong>date end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_date_end\"></span></p>\n                <p><strong>time end:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_time_end\"></span></p>\n                <p><strong>depth min:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_depth_min\"></span></p>\n                <p><strong>depth max:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.object_depth_max\"></span></p>\n            </td>\n            <td>\n                <h2>Process</h2>\n                <p><strong>pixel:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.process_pixel\"></span></p>\n                <p><strong>id:</strong> <span id=\"max_size\" ng-bind-html=\"msg.payload.config.process_id\"></span></p>\n            </td>\n        </tr>\n    </table>\n</div>",
         "storeOutMessages": false,
         "fwdInMessages": false,
         "resendOnRefresh": false,
@@ -2919,7 +2919,7 @@
         "type": "ui_slider",
         "z": "bccd1f23.87219",
         "name": "focus_distance",
-        "label": "",
+        "label": "Focus Distance",
         "tooltip": "in µm",
         "group": "fbd92986.1028c8",
         "order": 3,
@@ -3149,7 +3149,7 @@
         "topic": "",
         "payload": "100",
         "payloadType": "num",
-        "x": 110,
+        "x": 130,
         "y": 720,
         "wires": [
             [
@@ -5370,8 +5370,8 @@
         "fwdInMessages": true,
         "resendOnRefresh": false,
         "templateScope": "local",
-        "x": 600,
-        "y": 160,
+        "x": 440,
+        "y": 140,
         "wires": [
             []
         ]
@@ -8167,7 +8167,7 @@
         "z": "bccd1f23.87219",
         "name": "",
         "env": [],
-        "x": 80,
+        "x": 100,
         "y": 900,
         "wires": [
             [
diff --git a/scripts/bash/update.sh b/scripts/bash/update.sh
index ecc9644..ff52acc 100755
--- a/scripts/bash/update.sh
+++ b/scripts/bash/update.sh
@@ -19,25 +19,9 @@ function special(){
     if [[ -f "/etc/udev/rules.d/99-local.rules" ]]; then
         sudo rm /etc/udev/rules.d/99-local.rules
     fi
-    if ! hash thumbsup &> /dev/null ; then
-        ${log} "thumbsup is not installed, installing now"
-        sudo chown -R pi:pi /usr/lib/node_modules/
-        sudo chown pi:pi /usr/bin
-        if npm install -g thumbsup; then
-            ${log} "Error when installing thumbsup"
-        else
-            ${log} "Thumbsup installed, installing dependencies now"
-            sudo apt install -y libimage-exiftool-perl graphicsmagick
-            sudo apt autoremove -y
-            ${log} "Install complete, running thumbsup for the first time now"
-            thumbsup --config /home/pi/PlanktonScope/scripts/thumbsup/config.json
-        fi
-        sudo chown -R root:root /usr/lib/node_modules/
-        sudo chown root:root /usr/bin
-    fi
     if ! [[ -f "/etc/nginx/sites-available/gallery.conf" ]]; then
         ${log} "Nginx config is not installed, doing that now"
-        sudo cp /home/pi/PlanktonScope/scripts/thumbsup/gallery.conf /etc/nginx/sites-available/gallery.conf
+        sudo cp /home/pi/PlanktonScope/scripts/gallery/gallery.conf /etc/nginx/sites-available/gallery.conf
         sudo ln -s /etc/nginx/sites-available/gallery.conf /etc/nginx/sites-enabled/gallery.conf
         sudo nginx -t && sudo systemctl reload nginx
     fi
diff --git a/scripts/gallery/gallery.conf b/scripts/gallery/gallery.conf
new file mode 100644
index 0000000..ca7fdd4
--- /dev/null
+++ b/scripts/gallery/gallery.conf
@@ -0,0 +1,20 @@
+server {
+        listen   80;
+        listen   [::]:80;
+
+        root /home/pi/data/;
+        server_name localhost;
+
+        autoindex on;
+        autoindex_format xml;
+        autoindex_exact_size off;
+        autoindex_localtime on;
+
+        location / {
+                try_files $uri @autoindex;
+        }
+
+        location @autoindex {
+                xslt_stylesheet /home/pi/PlanktonScope/scripts/gallery/nginx_template.xslt path='$uri';
+        }
+}
diff --git a/scripts/gallery/nginx_template.xlst b/scripts/gallery/nginx_template.xlst
new file mode 100644
index 0000000..85264f4
--- /dev/null
+++ b/scripts/gallery/nginx_template.xlst
@@ -0,0 +1,268 @@
+<?xml version="1.0"?>
+<!--
+  dirlist.xslt - transform nginx's into lighttpd look-alike dirlistings
+
+  I'm currently switching over completely from lighttpd to nginx. If you come
+  up with a prettier stylesheet or other improvements, please tell me :)
+
+-->
+<!--
+   Copyright (c) 2016 by Moritz Wilhelmy <mw@barfooze.de>
+   All rights reserved
+
+   Redistribution and use in source and binary forms, with or without
+   modification, are permitted providing that the following conditions
+   are met:
+   1. Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+   2. Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+   THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
+   IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+   ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+   DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+   DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
+   OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+   HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+   STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
+   IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+   POSSIBILITY OF SUCH DAMAGE.
+-->
+<!DOCTYPE fnord [<!ENTITY nbsp "&#160;">]>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:func="http://exslt.org/functions" version="1.0" exclude-result-prefixes="xhtml" extension-element-prefixes="func">
+  <xsl:output method="xml" version="1.0" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" indent="yes" media-type="application/xhtml+xml"/>
+  <xsl:strip-space elements="*" />
+
+  <xsl:template name="size">
+    <!-- transform a size in bytes into a human readable representation -->
+    <xsl:param name="bytes"/>
+    <xsl:choose>
+      <xsl:when test="$bytes &lt; 1000"><xsl:value-of select="$bytes" />B</xsl:when>
+      <xsl:when test="$bytes &lt; 1048576"><xsl:value-of select="format-number($bytes div 1024, '0.0')" />K</xsl:when>
+      <xsl:when test="$bytes &lt; 1073741824"><xsl:value-of select="format-number($bytes div 1048576, '0.0')" />M</xsl:when>
+      <xsl:otherwise><xsl:value-of select="format-number(($bytes div 1073741824), '0.00')" />G</xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
+  <xsl:template name="timestamp">
+    <!-- transform an ISO 8601 timestamp into a human readable representation -->
+    <xsl:param name="iso-timestamp" />
+    <xsl:value-of select="concat(substring($iso-timestamp, 0, 11), ' ', substring($iso-timestamp, 12, 5))" />
+  </xsl:template>
+
+  <xsl:template name="breadcrumb">
+    <xsl:param name="list" />
+    <xsl:param name="delimiter" select="'/'"  />
+    <xsl:param name="reminder" select="$list" />
+    <xsl:variable name="newlist">
+      <xsl:choose>
+        <xsl:when test="contains($list, $delimiter)">
+          <xsl:value-of select="normalize-space($list)" />
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="concat(normalize-space($list), $delimiter)"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:variable name="first" select="substring-before($newlist, $delimiter)" />
+    <xsl:variable name="remaining" select="substring-after($newlist, $delimiter)" />
+    <xsl:variable name="current" select="substring-before($reminder, $remaining)" />
+
+    <xsl:choose>
+      <xsl:when test="$remaining">
+        <xsl:choose>
+          <xsl:when test="$first = ''">
+            <li class="breadcrumb-item">
+              <i class="fas fa-home"></i><a href="/">Home</a>
+            </li>
+          </xsl:when>
+          <xsl:otherwise>
+            <li class="breadcrumb-item">
+              <a href="{$current}"><xsl:value-of select="$first" /></a>
+            </li>
+          </xsl:otherwise>
+        </xsl:choose>
+
+        <xsl:call-template name="breadcrumb">
+          <xsl:with-param name="list" select="$remaining" />
+          <xsl:with-param name="delimiter" select="$delimiter" />
+          <xsl:with-param name="reminder" select="$reminder" />
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:choose>
+          <xsl:when test="$first = ''">
+            <li class="breadcrumb-item">
+              <i class="fas fa-home"></i><a href="/">Home</a>
+            </li>
+          </xsl:when>
+          <xsl:otherwise>
+            <li class="breadcrumb-item active">
+              <a href="{$current}"><xsl:value-of select="$first" /></a>
+            </li>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
+  <xsl:template match="directory">
+    <tr>
+      <td class="n">
+        <a href="{current()}/">
+          <code>
+            <i class="far fa-folder" style="padding-right: 5px;"></i><xsl:value-of select="."/>
+          </code>
+        </a>
+      </td>
+      <td class="m">
+        <code>
+          <xsl:call-template name="timestamp"><xsl:with-param name="iso-timestamp" select="@mtime" /></xsl:call-template>
+        </code>
+      </td>
+      <td class="s">- &nbsp;</td>
+    </tr>
+  </xsl:template>
+
+  <xsl:template name="icon">
+    <xsl:param name="path"/>
+    <xsl:variable name="extension">
+      <xsl:call-template name="get-file-extension">
+        <xsl:with-param name="path" select="$path" />
+      </xsl:call-template>
+    </xsl:variable>
+
+    <xsl:choose>
+      <xsl:when test="$extension = 'bz2'">
+        <i class="far fa-file-archive" style="padding-right: 5px;"></i>
+      </xsl:when>
+      <xsl:when test="$extension = 'gz'">
+        <i class="far fa-file-archive" style="padding-right: 5px;"></i>
+      </xsl:when>
+      <xsl:when test="$extension = 'xz'">
+        <i class="far fa-file-archive" style="padding-right: 5px;"></i>
+      </xsl:when>
+      <xsl:when test="$extension = 'zip'">
+        <i class="far fa-file-archive" style="padding-right: 5px;"></i>
+      </xsl:when>
+      <xsl:otherwise>
+        <i class="far fa-file" style="padding-right: 5px;"></i>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
+  <xsl:template name="get-file-extension">
+    <xsl:param name="path"/>
+    <xsl:choose>
+      <xsl:when test="contains($path, '/')">
+        <xsl:call-template name="get-file-extension">
+          <xsl:with-param name="path" select="substring-after($path, '/')"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:when test="contains($path, '.')">
+        <xsl:call-template name="get-file-extension">
+          <xsl:with-param name="path" select="substring-after($path, '.')"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:value-of select="$path"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
+  <xsl:template match="file">
+    <tr>
+      <td class="n">
+        <a href="{current()}">
+          <code>
+            <xsl:call-template name="icon"><xsl:with-param name="path" select="." /></xsl:call-template>
+            <xsl:value-of select="." />
+          </code>
+        </a>
+      </td>
+      <td class="m">
+        <code>
+          <xsl:call-template name="timestamp"><xsl:with-param name="iso-timestamp" select="@mtime" /></xsl:call-template>
+        </code>
+      </td>
+      <td class="s">
+        <code>
+          <xsl:call-template name="size"><xsl:with-param name="bytes" select="@size" /></xsl:call-template>
+        </code>
+      </td>
+    </tr>
+  </xsl:template>
+
+  <xsl:template match="/">
+    <html>
+      <head>
+        <title>Debian Repository</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" integrity="sha256-ybRkN9dBjhcS2qrW1z+hfCxq+1aBdwyQM5wlQoQVt/0=" crossorigin="anonymous" />
+        <style type="text/css">
+          /* Sticky footer styles
+          -------------------------------------------------- */
+          html {
+            position: relative;
+            min-height: 100%;
+          }
+          body {
+            margin-bottom: 60px; /* Margin bottom by footer height */
+          }
+          .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 60px; /* Set the fixed height of the footer here */
+            line-height: 60px; /* Vertically center the text there */
+            background-color: #f5f5f5;
+          }
+
+          /* Custom page CSS
+          -------------------------------------------------- */
+          .container {
+            width: auto;
+            max-width: 980px;
+            padding: 0 15px;
+          }
+        </style>
+      </head>
+      <body>
+        <!-- Begin page content -->
+        <main role="main" class="container">
+          <h1 class="mt-5">Debian Repository</h1>
+          <ol class="breadcrumb"><xsl:call-template name="breadcrumb"><xsl:with-param name="list" select="$path" /></xsl:call-template></ol>
+          <div class="list">
+            <table class="table" summary="Directory Listing" cellpadding="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th class="n">Name</th>
+                  <th class="m">Last Modified</th>
+                  <th class="s">Size</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="n"><a href="../"><i class="fas fa-level-up-alt" style="padding-right: 5px;"></i>Parent Directory/</a></td>
+                  <td class="m">&nbsp;</td>
+                  <td class="s">- &nbsp;</td>
+                </tr>
+                <xsl:apply-templates />
+              </tbody>
+            </table>
+          </div>
+        </main>
+
+        <footer class="footer">
+          <div class="container">
+            <span class="text-muted">Debian Repository</span>
+          </div>
+        </footer>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
diff --git a/scripts/planktoscope/imager.py b/scripts/planktoscope/imager.py
index 9b43802..33282a6 100644
--- a/scripts/planktoscope/imager.py
+++ b/scripts/planktoscope/imager.py
@@ -8,9 +8,6 @@ from loguru import logger
 # Library to get date and time for folder name and filename
 import datetime
 
-# Subprocess is used to update the gallery folder
-import subprocess  # nosec
-
 # Library to be able to sleep for a given duration
 import time
 
@@ -696,11 +693,6 @@ class ImagerProcess(multiprocessing.Process):
             f'{{"status":"Image {self.__img_done + 1}/{self.__img_goal} has been imaged to {filename}"}}',
         )
 
-        # Update the gallery with the new image
-        subprocess.Popen(
-            "thumbsup --config /home/pi/PlanktonScope/scripts/thumbsup/config.json".split()
-        )  # nosec
-
         # Increment the counter
         self.__img_done += 1
 
diff --git a/scripts/thumbsup/config.json b/scripts/thumbsup/config.json
deleted file mode 100644
index 47c27ca..0000000
--- a/scripts/thumbsup/config.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "input": "/home/pi/data/img",
-    "output": "/home/pi/gallery",
-    "title": "Planktoscope's Gallery",
-    "thumb-size": 200,
-    "photo-preview": "symlink",
-    "video-preview": "symlink",
-    "photo-download": "symlink",
-    "video-download": "symlink",
-    "cleanup": true,
-    "albums-from": [
-        "%path"
-    ],
-    "sort-albums-by": "title",
-    "sort-media-by": "filename",
-    "theme": "classic",
-    "usage-stats": false
-}
\ No newline at end of file
diff --git a/scripts/thumbsup/gallery.conf b/scripts/thumbsup/gallery.conf
deleted file mode 100644
index f077f9c..0000000
--- a/scripts/thumbsup/gallery.conf
+++ /dev/null
@@ -1,13 +0,0 @@
-server {
-        listen   80;
-        listen   [::]:80;
-
-        root /home/pi/gallery;
-        server_name localhost;
-        autoindex off;
-
-        # index.html fallback
-        location / {
-                try_files $uri $uri/ /index.html;
-        }
-}
\ No newline at end of file