Belchertown CSS formating for INC blocks

[David Trebacz]

Looking for some help embedding some time lapse images in my newly formatted belchertown skin. I on Weewx 4.1.1 and Belchertown . I'm trying to insert two images in /skins/Belchertown/index_hook_after_station_info.inc. I added the following code which points to the latest time lapse images.

<div text-align: center>

        <a href="https://www.trebacz.com/Fountain-Hills-Weather-Cam2.html" target="_blank"><img src="../time-lapse/Trebacz-Weather-CAM2-Fountain-Hills-Last-2-Hours.gif" border="0" alt="2 Hour Fountain Hills, AZ Weather Cam Time Lapse"></a>

        <a href="https://www.trebacz.com/Fountain-Hills-Weather-Cam5.html" target="_blank"><img src="../time-lapse/Trebacz-Weather-CAM5-Fountain-Hills-Last-2-Hours.gif" border="0" alt="2 Hour Fountain Hills, AZ Weather Cam Time Lapse"></a>

</div>

You can view it here:

https://www.trebacz.com/weather/belchertown/

My desire is to center the two images in the "inc" area. I'm not sure how or what CSS I can use for formatting. I looked for examples and documentation, but found none. I'd roughly like the images centered in the div for now, but may add text an other items later. Any suggestions or points to documentation - appreciated.

[David Trebacz]

Thanks for the community suggestion to use good old fashioned tables. Actually close the behavior I wanted and behaves pretty good at breakpoints.

<table>
       <tr>
               <td style="text-align: center;">
                       <a href="https://www.trebacz.com/Fountain-Hills-Weather-Cam2.html" target="_blank"><img src="../time-lapse/Trebacz-Weather-CAM2-Fountain-Hills-Last-2-Hours.gif" border="0"></a>  
               </td>
               <td style="text-align: center;">
                       <a href="https://www.trebacz.com/Fountain-Hills-Weather-Cam5.html" target="_blank"><img src="../time-lapse/Trebacz-Weather-CAM5-Fountain-Hills-Last-2-Hours.gif" border="0"></a>
               </td>
       </tr>
</table>

[vince]

What did you do for webcams and how did you generate the timelapse ?

[David Trebacz]

I did it quite a few years ago. I used Reolink cameras, (available on Amazon), ftp images every minute and a ffmpeg-convert script that rebuilds though a cron job (all on Ubuntu). Kinda mention some of it here: https://reolink.com/users/trebacz/replies/ Happy to share, but there may be better ways to do it today. BlueIris comes to mind - but at the time I rolled my own solution...

[John Burricelli]

You can do it via ffmpeg.  I have a Reolink which ftp's the image every 15 seconds and at midnight I automatically create a movie.  This is the script I use.

#!/bin/bash

#Set Date

FDATE=$(date +%m%d%Y)

YEAR=$(date +%Y)

MONTH=$(date +%m)

DAY=$(date +%d)

sleep 120

#Rename Files, needed for ffmpeg

cd /volume1/Camera/incoming/$YEAR/$MONTH/$DAY

ls  *.jpg | cat -n | while read n f; do mv "$f" "$(printf webcam_%04d.jpg $n)"; done

#Create Movies`

ffmpeg -framerate 30 -i webcam_%04d.jpg -codec copy webcam$FDATE.mkv

mv *.mkv /volume1/Camera/movies

#Cleanup old videos and pictures

/bin/find /volume1/Camera/movies/ -mtime +30 -name '*.*' -exec rm -f {} \;

/bin/find /volume1/Camera/incoming/$YEAR/* -mtime +7 -exec rm {} \;