Weathermap-History — отображение GIF-файлов на основе выбранной даты

Weathermap-History — это HTML-страница которая позволяет просмотреть анимированные GIF-файлы на основе выбранной даты. Данная страница является дополнением к переработанному Weathermap плагину для LibreNMS, но может использоваться и для обычного везермап.

За основу взял готовое решение и изменил чтобы гифки генерились для всех карт, а также для удобства добавил линк на карты в подменю Weathermap плагина в LibreNMS. Измененный код с мануалом доступен по ссылке

Предварительно для работы скриптов необходимо установить следующее ПО:

  • «convert» (yum install ImageMagick, для ubuntu apt install imagemagick) — используется для конвертации png в gif
  • «pngquant» (yum install pngquant, apt install pngquant) — оптимизатор PNG файлов
  • «gifsicle» (yum install gifsicle, apt install gifsicle) — GIF оптимизатор, уменьшает размер файла до 87%
  • Также убедитесь что путь к вашей инсталяции librenms — /opt/librenms (если это не так вам необходимо будет поправить пути в скриптах)

Создадим скрипты:

mkdir -p /opt/weathermap-history/history
cd /opt/weathermap-history
vi getweather.sh

# Содержимое файла getweather.sh
# Скрипт копирует png файлы карт из output директории 
# weathermap в нашу папку и добавляет дату в конец файла
#!/bin/bash
DATE=`date '+%y%m%d%H%M'`
for map in $(ls -l /opt/librenms/html/plugins/Weathermap/output/ | grep png | awk '{print $9}' | awk -F\. '{print $1}');do
cp /opt/librenms/html/plugins/Weathermap/output/$map.png /opt/weathermap-history/history/${map}_$DATE.png
done
# EOF

chmod +x getweather.sh
# Измените пользователя и группу на те которые используются 
# в Librenms
chown librenms:librenms getweather.sh

vi makeGIF.sh 

# Содержимое makeGIF.sh
# Скрипт создает историю за вчерашний день для всех карт

#!/bin/bash

DATE=$(date "+%Y-%m-%d" -d "yesterday")
PATH_DIR=/opt/librenms/html/plugins/Weathermap/output
cd /opt/weathermap-history/history/
pngquant --force --quality=60-70 *.png -f --ext .png
for map in $(ls -l $PATH_DIR | grep png | awk '{print $9}' | awk -F\.png '{print $1}');do
mkdir -p $PATH_DIR/history/$map/$DATE
convert  -delay 50 -loop 0 ${map}_*.png $PATH_DIR/history/$map/$DATE/$DATE.gif
gifsicle -O3 $PATH_DIR/history/$map/$DATE/$DATE.gif -o $PATH_DIR/history/$map/$DATE/$DATE.gif
done
JS_ARRAY=$(ls -l $PATH_DIR | grep png | awk '{print $9}' | awk -F\.png '{print "!"$1"!,"}' | xargs | sed 's/!/\x27/g' | sed 's/,$//g')
sed -i '15d' $PATH_DIR/history/index.html
sed -i '14a\var arr = new Array('"${JS_ARRAY}"');\' $PATH_DIR/history/index.html

rm /opt/weathermap-history/history/*
#EOF

chmod +x makeGIF.sh
# Измените пользователя и группу на те которые используются 
# в Librenms
chown librenms:librenms makeGIF.sh 

vi makeGIF_today.sh 
# Содержимое makeGIF_today.sh
# Скрипт создает текущую историю на текущий день
# GIF генерится каждый час

#!/bin/bash

DATE=$(date "+%Y-%m-%d")
PATH_DIR=/opt/librenms/html/plugins/Weathermap/output
cd /opt/weathermap-history/history/
pngquant --force --quality=60-70 *.png -f --ext .png
for map in $(ls -l $PATH_DIR | grep png | awk '{print $9}' | awk -F\. '{print $1}');do
mkdir -p $PATH_DIR/history/$map/$DATE
convert  -delay 50 -loop 0 ${map}_*.png $PATH_DIR/history/$map/$DATE/$DATE.gif
gifsicle -O3 $PATH_DIR/history/$map/$DATE/$DATE.gif -o $PATH_DIR/history/$map/$DATE/$DATE.gif
done
JS_ARRAY=$(ls -l $PATH_DIR | grep png | awk '{print $9}' | awk -F\.png '{print "!"$1"!,"}' | xargs | sed 's/!/\x27/g' | sed 's/,$//g')
sed -i '15d' $PATH_DIR/history/index.html
sed -i '14a\var arr = new Array('"${JS_ARRAY}"');\' $PATH_DIR/history/index.html
# EOF

chmod +x makeGIF_today.sh
# Измените пользователя и группу на те которые используются 
# в Librenms
chown librenms:librenms makeGIF_today.sh

Скрипты готовы. Добавим их в кронфайл с остальными скриптами LibreNMS.

Первая строка копирует png файлы каждые 5 мин в нашу папку в период с 19:00 до 23:55. Измените этот интервал на необходимый вам.
Вторая — создает гиф-файл за текущий день с интервалом в 1 час. Запускается каждый час в 55 мин в период с 19 до 23.
Третья — создает гиф-файл за прошедшие сутки и очищает папку от не нужных файлов. Запускается в 3:00

Не забудьте оставить пустую строку в конце cron файла, чтобы он работал

vi /etc/cron.d/librenms

# weathermap-history
*/5 19-23 * * * librenmswww /opt/weathermap-history/getweather.sh >> /dev/null 2>&1
55 19-23 * * * librenmswww /opt/weathermap-history/makeGIF_today.sh >> /dev/null 2>&1
0 3 * * * librenmswww /opt/weathermap-history/makeGIF.sh >> /dev/null 2>&1

Далее отредактируем файл Weathermap.php чтобы ссылка на наши гиф файлы отображалась в подменю везермапа на сайте:

vi /opt/librenms/html/plugins/Weathermap/Weathermap.php 
# добавьте строку ниже после этих строк:
#        //Create submenu
#        $submenu = ' <ul class="dropdown-menu scrollable-menu">';
#        $count = 0;
$submenu .= ' <li><a href="/plugins/' . self::$name . '/output/history/index.html' . '"><i class="fa fa-folder fa-fw fa-lg" aria-hidden="true"></i> '. History . '</a></li>';
after these strings

Теперь склонируем репозиторий в папку:

cd /opt/librenms/html/plugins/Weathermap/output

git clone https://github.com/FlashBurn-inc/Weathermap-History history

Чтобы проверить что все работает можно запустить скрипты от имени librenms и проверить что все создалось

su - librenms -с "/opt/weathermap-history/getweather.sh"
su - librenms -с "/opt/weathermap-history/makeGIF_today.sh"

Если все прошло хорошо вы увидете два меню с просьбой выбрать карту и дату. При выборе карты и текущей даты должна загрузиться картинка. Если навести курсор на картинку проигрыватель остановится на текущем кадре. Движение курсором влево/вправо будут сдвигать кадры назад/вперед. Если же убрать курсор с картинки — он будет проигрываться циклично.