-
Notifications
You must be signed in to change notification settings - Fork 8
/
make-html-lightbox-table.sh
188 lines (142 loc) · 5.81 KB
/
make-html-lightbox-table.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
#!/bin/bash
# Copyright (c) 2020, lowkey digital studio
# Author: Nathan Wolek
# Usage of this file and its contents is governed by the MIT License
# BEGUN - 23 June 2020
# GOAL - variation on make-html-table.sh that adds lightbox overlays for video playback
# expected input .wav files (lower case extension) from rename-by-date.sh script
# expected output index.html file with table of spectrogram thumbnail images
# index.html uses the generate-table.css file in this repo to support fixed header and left column
# because filenames are based on the date, we can grab the first and last
first_time="${1%.wav}"
last_time="${BASH_ARGV%.wav}"
# setup var to collect all times in HH-MM format
all_hh_mm=""
# setup var to collect all dates in YYYY-MM-DD format
all_dates=""
for file in $@
do
# get hours & minutes from each filename in HH-MM format
new_time=${file:11:5}
# add to the end of list
all_hh_mm="$all_hh_mm $new_time"
# get calendar date from each filename in YYYY-MM-DD format
new_date=${file:0:10}
# add to the end of list
all_dates="$all_dates $new_date"
done
# these echo statements were used for testing
##echo "The complete list of dates:"
##echo $all_dates
##echo "The complete list of times:"
##echo $all_hh_mm
# filter repetitions so that only unique values remain
unique_dates=$(echo $all_dates | tr ' ' '\n' | sort -u)
unique_hh_mm=$(echo $all_hh_mm | tr ' ' '\n' | sort -u)
# these echo statements were used for testing
##echo "The unique dates are:"
##echo $unique_dates
##echo "The unique times are:"
##echo $unique_hh_mm
# delete old version if it exists
if [[ -f "index.html" ]]; then
rm index.html
fi
# start the html document
echo \<!DOCTYPE html\> >> index.html
echo \<html\> >> index.html
echo \<head\> >> index.html
echo \<link rel=\"stylesheet\" type=\"text/css\" href=\"spectrogram-table.css\"\> >> index.html
echo \<link rel=\"stylesheet\" type=\"text/css\" href=\"perfundo.min.css\"\> >> index.html
echo \<\/head\> >> index.html
echo \<body\> >> index.html
# start the table
echo \<div class=\"perfundo\"\> >> index.html
echo \<div id=\"table-scroll\" class=\"table-scroll\"\> >> index.html
echo \<table id=\"main-table\" class=\"main-table\"\> >> index.html
# create the header row
echo \<thead\> >> index.html
echo \<tr\> >> index.html
# first table cell in header contains the "Time" label
echo \<th\>Time\<\/th\> >> index.html
for each_date in $unique_dates; do
# other table cells in header contains the date
# reformat the date to look like this: Mon 01 Jun 2020
each_date_reformat=$(date -j -f "%Y-%m-%d" "+%a %d %b %Y" $each_date)
echo \<th\>"$each_date_reformat"\<\/th\> >> index.html
done
echo \<\/tr\> >> index.html
echo \<\/thead\> >> index.html
# create the other rows
echo \<tbody\> >> index.html
for each_hh_mm in $unique_hh_mm; do
echo \<tr\> >> index.html
# first table cell in row contains the time
# mark 00 minute as start of hour
if [[ ${each_hh_mm:3:2} = "00" ]]; then
echo -n \<th class=\"start-of-hour\"\> >> index.html
else
echo -n \<th\> >> index.html
fi
echo ${each_hh_mm:0:2}:${each_hh_mm:3:2} UTC\<\/th\> >> index.html
# other table cells in row contain thumbnail spectrogram images
for each_date in $unique_dates; do
# assemble the timestamp from $each_date & $each_hh_mm
each_timestamp_assembled="$each_date-$each_hh_mm-00-UTC"
# which day of the week?
day_of_week=$(date -j -f "%Y-%m-%d-%H-%M-%S-UTC" "+%a" $each_timestamp_assembled)
# make sure the thumbnail image exists
if [[ -f "$each_timestamp_assembled"-thumbnail.png ]]; then
# mark sunday columns as start of week
if [[ $day_of_week = "Sun" ]]; then
echo -n \<td class=\"start-of-week\"\> >> index.html
else
echo -n \<td\> >> index.html
fi
# embed the thumbnail image and make it a link
echo -n \<a class=\"perfundo__link\" href=\"\#perfundo-$each_timestamp_assembled\"\> >> index.html
echo -n \<img src=\"$each_timestamp_assembled\-thumbnail.png\" width=\"128\" height=\"72\"\> >> index.html
echo \<\/a\>\<\/td\> >> index.html
# add code for perfundo lightbox overlay
echo -n \<div id=\"perfundo-$each_timestamp_assembled\" class=\"perfundo__overlay\"\> >> index.html
echo -n \<figure class=\"perfundo__content perfundo__figure\"\> >> index.html
echo -n \<video width=\"1138\" height=\"640\" controls preload=\"none\"\> >> index.html
echo -n \<source src=\"$each_timestamp_assembled.mp4\" type=\"video\/mp4\"\> >> index.html
echo -n Your browser does not support the video tag. >> index.html
echo \<\/video\> >> index.html
# add caption and close link for lightbox overlay
echo -n \<figcaption class=\"perfundo__figcaption\"\>Audio source: $each_timestamp_assembled.wav\<\/figcaption\> >> index.html
echo -n \<\/figure\> >> index.html
echo -n \<a href=\"\#perfundo-untarget\" class=\"perfundo__close perfundo__control\"\>Close\<\/a\> >> index.html
echo \<\/div\> >> index.html
else
echo \<td\>\ \;\<\/td\> >> index.html
fi
done
echo \<\/tr\> >> index.html
done
# close the table
echo \<\/tbody\> >> index.html
echo \<\/table\> >> index.html
echo \<\/div\> >> index.html
echo \<\/div\> >> index.html
# close the html document
echo \<\/body\> >> index.html
echo \<\/html\> >> index.html
# copy the CSS file if it's missing
file_list="spectrogram-table.css perfundo.min.css"
for css_file in $file_list
do
if [[ ! -f "$css_file" ]]; then
# where is this bash script source located?
directory_audiomoth_scripts="$( dirname "${BASH_SOURCE[0]}" )"
# where is the bash script running?
directory_current=$(pwd)
# if the file exists in the script source location, then copy it
if [[ -f "$directory_audiomoth_scripts/$css_file" ]]; then
cp "$directory_audiomoth_scripts/$css_file" "$directory_current/$css_file"
else
echo "Could not copy spectrogram-table.css - HTML formatting will not match expectations"
fi
fi
done