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