How it's done
This website summarizes weather data logged by a weather station using the polished and highly customizable WeeWX software (version 5.1.0). WeeWX collects data from the weatherstation in a customizable interval and stores it in an archive database. It also creates all the data for the graphs and webpages which are uploaded to the website every interval.
This website uses a custom skin which uses Bootstrap to deal with the layout and presentation. The gauges and the history tables are generated by JavaScript using Apache eCharts and by Python scripts which hook into WeeWX.
Optionally, using MQTT, the gauges and charts can be updated as the weatherstation sends a "loop" value.
The code for this skin can be found on github: github.com/brewster76/fuzzy-archer
Having already a working WeeWX installation, the easiest way to install this skin is to download the source archive from GitHub: releases, and use the WeeWX installer to unpack it:
wee_extension --install [wherever you've put the archive]
or, if you are running weewx v5 and above:
weectl extension install https://github.com/brewster76/fuzzy-archer/archive/refs/tags/{replace_with_the_current_version.}zip
The preferred way to custumize your page is to apply any changes and additions in your weewx.conf, using the skin's section within [StdConfig].
Change the language using lang = {your_language} in the section for your skin in weewx.conf.
For more information concerning localization see the official WeeWX docs.
Example:
The following example is an excerpt of weewx.conf. It will result in a english translated page, using the en_US locale, kilometers per hour instead of miles per hour for group_speed and setting the Footer text to "My custom footer text". Also, two news items will be shown on the "News" page. Also, a custom chart "inTemp", appearing as first chart, and the preconfigured "radiation" chart, as the last chart, is configured.
[StdReport]
[[Bootstrap]]
skin = Bootstrap
HTML_ROOT = /var/www/html/weewx/Bootstrap/en
lang = en
enable = true
locale = en_US
[[[Units]]]
[[[[Groups]]]]
group_speed = km_per_hour
[[[Texts]]]
Footer Text = "My custom footer text."
[[[News]]]
[[[[February 3, 2023]]]]
header = "Big News!"
body = "We have big news!"
img_src = "path/to/big_news.jpg"
img_alt = "Big News!"
img_title = "We have big news!"
[[[[December 7, 2022]]]]
header = "News"
body = "We have news, but no pictures."
[[[LiveCharts]]]
live_chart_items = inTemp, outTemp, barometer, rain, outHumidity, wind, windDir, radiation # radiation is already preconfigured in skin.conf
[[[[inTemp]]]]
[[[[[inTemp]]]]]
payload_key = inTemp_F
showMaxMarkPoint = true
showMinMarkPoint = true
showAvgMarkLine = true
lineColor = '#b44242'
decimals = 1
Custom pages:
Let's say, you want to exchange this about page with your own. Create a template file extra.html.tmpl
and tell CheetahGenerator to handle it. Then exchange about with extra in the navigation_items.
Then configure your new page in the [[[[extra]]]] stanza as below.
[[[CheetahGenerator]]]
[[[[HTMLFiles]]]]
[[[[[extra]]]]]
template = extra.html.tmpl
[[[Navigation]]]
navigation_items = index, stats, history, news, extra
[[[[extra]]]]
text = About
href = extra.html
icon = bi-question-square # insert bootstrap icon here: bi-{icon} see Bootstrap Icons