Skip to content
David Baetge edited this page Oct 24, 2023 · 54 revisions

ObservationBindings

For more info, please see Custom data bindings.

Extras

base_path Set the base path for your weewx-wdc installation. If the skin is deployed to the root of your webserver, you do not need to change this. If you are hosting the skin in eg: www.your-domain.com/weewx/wdc-skin/, the base_path should be set to /weewx/wdc-skin/. More info here.

logo_image Full URL to your custom Logo, which will be shown on the top left instead of the blue default logo. The logo is displayed as 32px x 32px image, so a square image will work best. E.g. logo_image = https://www.your-domain.com/images/logo.png.

refresh_interval If activated the Fontpage (index.html) will be automatically be refreshed in the browser every 300 seconds. Also see https://en.wikipedia.org/wiki/Meta_refresh

github_link Set to False to disable.

radar_img and radar_url Same as in the default Seasons Skin. Will be shown in the "Forecast & Radar section".

radar_img and radar_url have been replaced by radar_html in v3.0.0, which accepts full HTML code to allow for inserting for example iFrames. If you used both radar_img and radar_url in a previous version you can easily migrate these to radar_html as:

radar_html = '<a href="your_radar_url"><img src="your_radar_img" alt="Radar" loading="lazy" /></a>'

Please replace your_radar_url and your_radar_img with actual values.

If you were using just radar_img, migrate to:

radar_html = '<img src="your_radar_img" alt="Radar" loading="lazy" />'

Important: When using iFrame codes, you need to specify a width and a height for the iFrame, use 100% as with and something between 400px and 500px as height, eg: <iframe width="100%" height="450px" src="https://embed.windy.com/embed2.html?lat=41.935&lon=-85.430..." />.

Important: For configuring webcams or more iFrames, see https://github.com/Daveiano/weewx-wdc/wiki/Webcams-and-Externals-Page

forecast_radar_heading Defaults to "Forecast & Recent radar", the section heading on the front page.

forecast_radar_equal_width When set to True, the Forecast tile and the radar/externals tile will have the same width. Default is forecast = 2/3 and radar tile = 1/3 width.

DisplayOptions

layout Switch between classic or alternative. See Screenshots for comparison. weewx-hbt.de uses the alternative layout. The classic layout can be seen here: https://weewx-hbt.de/classic

date_time_locale Date/Time localization for charts. Available locales are: de-DE, en-US, en-GB, it-IT. If not set, the value from weewx.conf (reports section) will be used. If lang = en, then en-US will be used (sorry GB!).

climatological_days E.g. Rain days (days with precipitation) or Summer days (Temp > 25°C). Leave empty to disable. When activated a rain days calendar chart and an average temperature calendar chart are shown alongside. Screenshots for Climatological days and Average temperature calendar chart.

Possible values are:

  • rainDays: rain > 0 cm
  • summerDays: outTemp.max >= 25°C
  • hotDays: outTemp.max >= 30°C
  • desertDays: outTemp.max >= 35°C
  • tropicalNights: outTemp.min >= 20°C
  • stormDays: windGust.max >= 62 km/h
  • iceDays: outTemp.max < 0°C
  • frostDays: outTemp.min < 0°C

show_last_rain Show the last rain date on the statistics page (in the Rain days panel).

show_most_days_with_rain Show the most days with rain on the statistics page and Yearly archive pages (in the Rain days panel).

show_most_days_without_rain Show the most days without rain on the statistics page and Yearly archive pages (in the Rain days panel).

table_tile_observations Defines which observations should be shown in the data table component at the end of the page. Simply comment this out or leave it empty to hide the tables on all pages: #table_tile_observations = outTemp, outHumidity, barometer, ...

stat_tile_observations Define which observations should be shown in the stat tiles (at the top of each page of the alternative layout, the classic layout uses a table instead of tiles). If you enable windDir or windGustDir, these will not be added as separate tiles (or rows in the classic layout), but be shown along with the corresponding windSpeed and windGust. Also the rainRate will be shown inside the rain tile.

stat_tiles_show_min, stat_tiles_show_max and stat_tiles_show_sum Changes the aggregation type (min/max/sum) of the stat tile main values and the display of min/max or sum values (eg. for the outTemp on the "Current Page": if there are 15°C outside (min value for that day is 12.6°C, max is 20,8°C), the main value will be 15°C and the displayed min value will be 12.6°C, the max value will be 20,8°C).

Stat tiles settings Main values: 3,3mm rain (totals), -3,9°C dewPoint, -0,8°C windChill. dewPoint and windChill shows the min and max values. Rain shows the total value and is combined with rainRate (current and max).

The "Current Page" always shows the current not-aggregated value for the main value, while all other pages (week, month, year, etc.) will show the value with the aggragate type specified via stat_tiles_show_max or stat_tiles_show_sum. If an observation does not appear in stat_tiles_show_max or stat_tiles_show_sum, the aggragtion type avg will be used. stat_tiles_show_min - For all observations that are listed here, the tile will show the min value (daily, weekly, monthly, etc.) Note The Conditions table (part of the classic layout) always shows the min and max values for every observation. But it uses stat_tiles_show_sum to differentiate between avg and sum display.

show_min_max_time_day ,show_min_max_time_yesterday, show_min_max_time_week and show_min_max_time_month By default, the date/time when the min and max values where reached are only shown on the year and statistics pages. Set any of these to True to show the date/time also on the other pages (will be shown in the stat tiles (alternative layout) or in the conditions table (classic layout)).

stat_tile_winddir_ordinal Show ordinals (S, E, SE, etc.) instead of degrees on the wind direction stat tile (alternative layout) and the conditions table (classic layout).

diagram_tile_winddir_ordinal Show ordinals legend in wind direction diagram.

windRose_colors The skin uses six different scales for the windrose, each with its own colour, by default:

  • #f3cec9 #f3cec9 for <= Beaufort 1
  • #e7a4b6 #e7a4b6 for Beaufort 2
  • #cd7eaf #cd7eaf for Beaufort 3
  • #a262a9 #a262a9 for Beaufort 4
  • #6f4d96 #6f4d96 for Beaufort 5
  • #3d3b72 #3d3b72 for >= Beaufort 6

When changing the colours, you can also use rgb() values or just something like "red".

windRose_show_beaufort When set to False, the scale of the windrose will be in your configured windspeed units (mph, km/h or m/s) instead of showing the Beaufort values. E.g. if you are using metric units, "6–11 km/h" will be shown instead of "Beaufort 2".

climatogram_enable_stats and climatogram_enable_year_stats = True Enable a combined chart which shows the rain (as bar chart) along the average temperature (as line chart) in one chart. The climatogram will be shown on the statistcs page (climatogram_enable_stats) and the yearly archive pages (climatogram_enable_year_stats).You can configure the chart as you like, use climatogram_year and climatogram_stats under the combined_observations key to configure the charts.

Default configuration:

[[[[climatogram_year]]]]
    label = "Climatogram"
    curve="natural"
    aggregate_interval = month
    [[[[[obs]]]]]
        [[[[[[rain]]]]]]
            observation = "rain"
        [[[[[[outTemp]]]]]]
            observation = "outTemp"

[[[[climatogram_statistics]]]]
    label = "Climatogram"
    curve="natural"
    aggregate_interval = year
    [[[[[obs]]]]]
        [[[[[[rain]]]]]]
            observation = "rain"
        [[[[[[outTemp]]]]]]
            observation = "outTemp"

For more info of sensor_stat_tile_observations, sensor_diagram_observations, sensor_table_observations, sensor_battery_status and sensor_diagram_period see https://github.com/Daveiano/weewx-wdc/wiki/Sensor-Status-Page

For more info on the computer_monitor settings see https://github.com/Daveiano/weewx-wdc/wiki/Support-for-weewx-cmon.

For more info on the gauges settings see https://github.com/Daveiano/weewx-wdc/wiki/Gauges.

[[tables]]

Define the aggragate_interval for the data tables for every context, eg. day or month.

[[tables]]
    [[[day]]]
        aggregate_interval = 3600  # 1 hour
    [[[week]]]
        aggregate_interval = 21600  # 6 hours
    [[[month]]]
        aggregate_interval = 43200  # 12 hours
    [[[year]]]
        aggregate_interval = 86400  # 1 day
    [[[alltime]]]
        aggregate_interval = day  # 1 day

[[diagrams]]

General

The diagram definition in the skin.conf includes definitions for combined diagrams (eg. outTemp and dewpoint). There are two different charts available for the wind direction: windDir will render a scatter diagram, windRose will render a windrose chart. For guidance on how to configure combined diagrams, see Combined diagrams

For general behaviour changes, use the options under [[line]] and [[bar]]:

[[[line]]]
    lineWidth = 2
    pointSize = 5
    isInteractive = True
    enablePoints = True
    enableCrosshair = True
    curve = "natural"
[[[bar]]]
    enableLabel = False
    isInteractive = True

lineWidth The line width (line diagrams)

pointSize The point size (line diagrams)

isInteractive Enable/disable interactive tooltips (line and bar)

enablePoints Show points at all (line diagrams)

enableCrosshair Show the crosshair on mouse over (line and bar)

enableLabel Show the value as label on the bars (bar)

enableArea Enable an colored area inside the line graph. Is the default for eg. outHumidity (line)

areaOpacity Set the opacity of the area.

color: Set the color of the bars/line (line and bar).

color_dark: Set the color of the bars/line for dark mode (line and bar). Attention: If there is no explicitly set color for dark mode, the skin will first try to use the color configured for the observation and check if it has enough contrast on the dark background. If not, it will lighten up the color until it has enough contrast.

type Line or bar.

aggregate_type Aggregate data over a time period, aggregation types are eg. avg, sum or max, see https://www.weewx.com/docs/customizing.htm#Individual_line_options

aggregate_interval The time period, in s, over which the data should be aggregated, see https://www.weewx.com/docs/customizing.htm#Individual_line_options. A period name (day, week, month, year) is also valid here.

curve Curve interpolation. One of basis, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, stepBefore (line diagram)

yScaleMin, yScaleMax and yScaleOffset Configure the y axis:

  • yScaleMin = 0 Set a 'static' minimum value of 0 for the y axis
  • yScaleMax = 100 Set a 'static' maximum value of 100 for the y axis
  • yScaleOffset = 3 Set a dynamic offset of 3. This means the minimum value will be the lowest value of the data minus the yScaleOffset. The maximum value will be the highest value plus the yScaleOffset.

Note: When setting yScaleMin or yScaleMax, the yScaleOffset will be ignored. The skin sets reasonable defaults for this, e.g. the yScaleMin is per default set to 0 for UV or wind speed, since there are no values below 0:

bottom_date_time_format and tooltip_date_time_format See Configuring date and time formats.

...
[[[windSpeed]]]
    yScaleMin = 0
[[[UV]]]
    curve = "step"
    yScaleMin = 0
    yScaleOffset = 1
...

However, you can change everything in the skin.conf. And you probably need to because some values only work with metric units, for example if you are showing pressure (barometer, pressure or altimeter) in inHg units, the default yScaleOffset = 1 may be to big, and a smaller offset like 0.1 is more accurate for the inHg unit (this was implemented by default in #37, but since version 2.2.1 the user has full control over these properties and needs to update them accordingly).

You can configure every diagram under the given observation key to define defaults like:

[[diagrams]]
    ...
    [[[barometer]]]
        yScaleOffset = 1
        type = line
        enableArea = True
        color = "#666666"
    [[[windchill]]]
        type = line
        color = "#0099CC"
    [[[heatindex]]]
        type = line
        color = "#610000"
    [[[windDir]]]
        curve = "basis"
        lineWidth = 0
        yScaleMin = 0
        yScaleMax = 360
        type = line
        color = "#161616"
    [[[windSpeed]]]
        yScaleMin = 0
        type = line
        enableArea = True
        color = "#ffc000"
    [[[windGust]]]
        aggregate_type = "max"
        yScaleMin = 0
        type = line
        enableArea = True
        color = "#666666"

[[[heights]]] Configure the height of the diagram tiles separate for each layout, classic and alternative per screen size.

Breakpoints are:

md: > 672px
lg > 1056px
xlg > 1312px
max > 1920px

Context specific settings

Under the [[[day]]], [[[week]]], [[[month]]], [[[year]]] and [[[alttime]]] keys, one can set a custom aggregate_interval or any other possible option, see [[diagrams]]. For the whole context, eg. for all diagrams on the week.html page:

[[[week]]]
    color = red
    aggregate_interval = 7200  # 2 hours

You can optionally set custom options for any observation, like:

[[[month]]]
    aggregate_interval = 21600  # 6 hours
    [[[[ET]]]]
        aggregate_interval = 172800  # 2 days
        color = black
    [[[[rain]]]]
        aggregate_interval = 172800  # 2 days

Note: The aggregate_interval can only be set by context, not for an observation in general.

Combined diagrams

Combined diagrams (like Temperature and Dew point or Windchill and Heat index) need to be defined in the [[diagrams]][[combined_observations]] section like this:

For a combined diagram of Temperature and Dew point:

[[[tempdew]]]                           # 1
    label = 'Temperature / Dewpoint'    # 2
    pointSize = 3                       # 3
    curve = "linear"                    # 3
    [[[[obs]]]]                         # 4
        [[[[[outTemp]]]]]
            observation = "outTemp"     # 5
            aggregate_type = "avg"
        [[[[[dewpoint]]]]]
            observation = "dewpoint"    # 5
            aggregate_type = "avg"      # 6
            color = '#610000'           # 7

# 1 Name of the combined diagram, needs to be the same as used in diagram_tile_observations.

# 2 Label of the diagram.

# 3 Any additional diagram config available (see [[diagrams]]).

# 4 Under the key obs specify the observations to combine (The keys here are random and only used internally).

# 5 Set the observation to show.

# 6 Optionally, define the aggregate type (min, max, avg, sum)

# 7 Optionally, define a colour.

Adding markers to diagrams

Per default, the combined diagrams temp_min_max_avg, tempdew, windchill_heatindex and the single diagram appTemp will include a marker at 0°C.

Marker

The default marker config is the following:

[[[[temp_min_max_avg]]]]
    label = "Temperature Min/Max/Avg"
    pointSize = 3
    yScaleOffset = 0.5
+   markerValue = 0
+   markerColor = "#00BFFF"
    [[[[[obs]]]]]
        [[[[[[outTemp_min]]]]]]
            observation = "outTemp"
            aggregate_type = "min"
            color = "#0198E1"
        [[[[[[outTemp_average]]]]]]
            ...

Where markerValue sets the value (in the configured unit of the observation) and markerColor sets the color of the marker. You can optionally specify markerLabel. If no label is specified the fallback will be "value + unit" (e.g. 0 °C).

If you want to show a marker on a multi-unit chart, you need to specify the marker under the given observation:

[[[[tempBarometer]]]]
    label = 'Temperature / Barometer'
    [[[[[obs]]]]]
        [[[[[[temp]]]]]]
            markerValue = 0
            markerColor = "#00BFFF"
            observation = "outTemp"
        [[[[[[barometer]]]]]]
            observation = "barometer"
            color = "#5F9EA0"
            markerValue = 1040
            markerColor = "black"

Configuring date and time formats

Each chart accepts a bottom_date_time_format and a tooltip_date_time_format option. The bottom_date_time_format is used to format the date/time on the x axis of the chart, the tooltip_date_time_format is used to format the date/time in the tooltip when hovering over the chart.

Per default these settings are predefined per conext. E.g. the day charts use %H:%M for the bottom axis and %x %X for the tooltip. The alltime charts use %m/%y for the bottom axis and %m/%y for the tooltip.

The display of the date/time depends on the language/locale your are using. If you are using the default lang = en setting, the date/time will be displayed in the US format. If you are using lang = de, the date/time will be displayed in the German format. See date_time_locale for more info.

The d3-time-format package is used for formatting the date/time. You can find the documentation here: https://d3-wiki.readthedocs.io/zh_CN/master/Time-Formatting/. Also see https://www.weewx.com/docs/customizing.htm#Units_TimeFormats

Customizing units

You can configure observations to use another unit (of the same unit_group as the original unit) in the diagrams. For example if you want to display the rainRate diagram on the current page with mm/h instead of cm/h you could do the following:

[[[week]]]
    aggregate_interval = 1800 # 30 minutes
    [[[[observations]]]]
        [[[[[tempdew]]]]]
        [[[[[outHumidity]]]]]
        [[[[[barometer]]]]]
        [[[[[windchill_heatindex]]]]]
        [[[[[wind]]]]]
        [[[[[windDir]]]]]
        [[[[[windRose]]]]]
        [[[[[rain]]]]]
            aggregate_interval = 7200  # 2 hours
        [[[[[rainRate]]]]]
+           unit = mm_per_hour
        [[[[[UV]]]]]

You can also configure the unit for combined diagrams (also for single observations under the obs key):

[[[[temp_min_max_avg]]]]
    label = "Temperature Min/Max/Avg"
    pointSize = 3
    yScaleOffset = 0.5
    unit = degree_F
    [[[[[obs]]]]]
        [[[[[[outTemp_min]]]]]]
            observation = "outTemp"
            aggregate_type = "min"
            color = "#0198E1"
        [[[[[[outTemp_average]]]]]]
            observation = "outTemp"
            aggregate_type = "avg"
            color = "#666666"
        [[[[[[outTemp_max]]]]]]
            observation = "outTemp"
            aggregate_type = "max"
            color = "#8B0000"

Note: If you want to change the unit not only for single charts, but for the whole skin, please have a look at: https://github.com/Daveiano/weewx-wdc/wiki/WeeWX-related#changing-the-unit-of-an-observation-for-the-whole-skin

Customizing rounding

Optionally, the rounding can be configured for the diagarams and for the tables. The main configuration is available in DisplayOptions > Rounding. Diagram-specific settings are available in DisplayOptions > diagrams > Rounding, table-specific settings in DisplayOptions > tables > Rounding.

[DisplayOptions]
    ...
    [[Rounding]]
        barometer = 3

    [[tables]]
        [[Rounding]]
            barometer = 3
        [[[day]]]
            aggregate_interval = 3600  # 1 hour
        [[[week]]]
            aggregate_interval = 21600  # 6 hours
        [[[month]]]
            aggregate_interval = 43200  # 12 hours
        [[[year]]]
            aggregate_interval = 86400  # 1 day
        [[[alltime]]]
            aggregate_interval = day  # 1 day

    [[diagrams]]
        [[[Rounding]]]
            barometer = 3

Rounding is also configurable per context:

[[[week]]]
    aggregate_interval = 7200  # 2 hours
    [[[[observations]]]]
        [[[[[tempdew]]]]]
        [[[[[outHumidity]]]]]
        [[[[[barometer]]]]]
+           rounding = 1

And for combined diagrams:

[[[[temp_min_max_avg]]]]
    label = "Temperature Min/Max/Avg"
    pointSize = 3
    yScaleOffset = 0.5
+   rounding = 0
    [[[[[obs]]]]]
        [[[[[[outTemp_min]]]]]]
            observation = "outTemp"
            aggregate_type = "min"
            color = "#0198E1"
        [[[[[[outTemp_average]]]]]]
            observation = "outTemp"
            aggregate_type = "avg"
            color = "#666666"
        [[[[[[outTemp_max]]]]]]
            observation = "outTemp"
            aggregate_type = "max"
            color = "#8B0000"

Yesterday page

The skin contains an optional Yesterdays page, which can be enabled by un-commenting the [[[yesterday]]] section in the skin.conf under [CheetahGenerator][[ToDate]]:

...
[CheetahGenerator]
...
    [[ToDate]]
        [[[day]]]
            template = index.html.tmpl

        [[[yesterday]]]
            template = yesterday.html.tmpl

        [[[week]]]
            template = week.html.tmpl
...

Units

Under the [[TimeFormats]] key, you can specify the time formats used to format the headings of the pages. Like the heading "27.06.2022 07:55:00" (current = %x %X) on the index page. For more info see the weewx documentation. The TimeFormat stats is used for the Min/Max date display in the stat tile and table.

Persisting changes to the skin.conf between updates

If you made changes to the skin.conf you will lose these changes on every update of the skin. To prevent this, you can move your customisations to the main weewx.conf file (see https://www.weewx.com/docs/usersguide.htm#Where_to_find_things under "Configuration directory") under the [[WdcReport]] section.

Your weewx.conf file could look like something like this:

...
[[WdcReport]]
    skin = weewx-wdc
    enable = True
    lang = en
    [[[Extras]]]
        radar_html = '<a href="https://www.dwd.de/DE/leistungen/radarbild_film/radarbild_film.html"><img src="https://www.dwd.de/DWD/wetter/radar/radfilm_sac_akt.gif" alt="Radar" loading="lazy" /></a>'
    [[[DisplayOptions]]]
        layout = 'classic'
        [[[[diagrams]]]]
            [[[[[pressure]]]]]
                yScaleOffset = 1
...

This way, you won't lose customizations between updates, because of configurations in the weewx.conf file will override configurations from the skin.conf. You can read more about this in the weewx user guide https://www.weewx.com/docs/customizing.htm#Processing_order

Clone this wiki locally