-
Notifications
You must be signed in to change notification settings - Fork 33
Customization
The skin is designed to be highly customizable yet still easy to upgrade. Gauges, Charts, Stats, History, even whole Pages can be customized. The concept: every Gauge, Chart, etc. is considered to be an item, that needs to be configured in two ways:
- Configuration of the item itself
- Configuration, if the item is to be activated, or not.
The skin is shipped with a default configuration, for instance, six LiveGauges (outTemp, barometer, windDir, outHumidity, windSpeed, windGust) are configured in a way to fit best within WeeWX' default configurations. This means, default settings in skin.conf for splitNumbers, colors, minValues, maxValues and payload_keys are selected for fitting the US unit system.
These skin.conf based settings are overridden by the settings in a specific lang/{language}.conf. WeeWX allows setting the language for internationalized skins. For instance, if you want to have your pages to be translated in German, you set it like this in your weewx.conf:
...
[StdReport]
[[Bootstrap]]
skin = Bootstrap
lang = de
...
This will set the language to German, translating labels an texts. Behind the scene, this setting also changes the unit_system to metricwx, and setting the locale to de_DE (Germany). By today, this locale setting has limited effect, especially for a multi-language installation. WeeWX currently doesn't support different locales for different reports. If you speak German, but want to use a different locale (for instance: Switzerland), you can override the default setting from lang/de.conf in the skin's configuration section in weewx.conf like this:
...
[StdReport]
[[Bootstrap]]
skin = Bootstrap
lang = de
locale = de_CH # German Switzerland
...
WeeWX 5.1.0 an higher supports setting a Locale for each report, see https://www.weewx.com/docs/5.1/custom/custom-reports/#changing-languages The desired locale has to be available on the system WeeWX is run. You now can set language and locale like this:
...
[StdReport]
[[Bootstrap]]
skin = Bootstrap
lang = de_AT.utf8 # German Austria
...
You can set your web pages to be generated in multiple languages. If you do so, you have to configure a report for each and every language you want to generate a web page for. You do this like this in your weewx.conf:
...
[StdReport]
[[Bootstrap]]
skin = Bootstrap
lang = de
locale = de_CH # German Switzerland
[[[TranslationLinks]]]
en = en
fr = fr
[[Bootstrap-en]]
skin = Bootstrap
lang = en
HTML_ROOT = public_html/Bootstrap/en
[[[TranslationLinks]]]
de = ..
fr = ../fr
[[Bootstrap-fr]]
skin = Bootstrap
lang = fr
HTML_ROOT = public_html/Bootstrap/fr
[[[TranslationLinks]]]
de = ..
en = ../en
...
The above example will generate a German report in your default HTML_ROOT (public_html/Bootstrap), an English report in public_html/Bootstrap/enand a french report inpublic_html/Bootstrap/fr. Notice the [TranslationLinks]` stanza: it will generate a language selector menu item to let you easily switch languages when browsing your web page.
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
Not every weather station provides every observation type. Most will at least provide outTemp, outHumidity and barometer, many will provide windDir, windGust and windSpeed, also a rain gauge ist very common. Less hardware will provide luminosity, radiation or UV readings. Out of the box, this skin provides and activates six LiveGauges (outTemp, barometer, windDir, outHumidity, windSpeed, windGust) and six LiveCharts (outTemp/dewpoint, barometer, precipitation, outHumidity, windSpeed/windGust, windDir), in that exact specified order. Other LiveCharts, the "radiation"-chart (a combined radiation/maxSolarRad/UV chart) and the lightning_strikes-chart, are configured but not activated.
To deactivate an existing gauge, override the ..._items key in the [LiveGauges] section in your weewx.conf. For example, if you want to remove the outTemp gauge, remove outTemp from the live_gauge_items list. (The default list in skin.conf reads: live_gauge_items = outTemp, barometer, windDir, outHumidity, windSpeed, windGust
For every report (e.g. every translation):
...
[StdReport]
...
[[Defaults]]
...
[[[LiveGauges]]]
live_gauge_items = barometer, windDir, outHumidity, windSpeed, windGust
Only in the English translation (see example above):
...
[StdReport]
...
[[Bootstrap-en]]
...
[[[LiveGauges]]]
live_gauge_items = barometer, windDir, outHumidity, windSpeed, windGust
If you want to add the predefined radiation chart, this is done very similar, by adding the item in the [LiveCharts] section:
...
[StdReport]
...
[[Defaults]]
...
[[[LiveCharts]]]
live_chart_items = outTemp, barometer, rain, outHumidity, wind, windDir, radiation
Adding gauges and charts works pretty much the same, and the same as adding other configuration items. For instance, if you want do add a gauge and a chart for your indoor temperature, add the configs in your weewx.conf, but think for one moment, where exactly. If you have a single language installation and not planning to ever add a second language, add the config in the skin's section. If you have a multi-language installation, like the one above, consider adding the configurations in the [[Defaults]] section. Adding inTemp gauge and inTemp/inHumiditycharts in a multi-language-installation like above could look like this:
...
[StdReport]
...
[[Defaults]]
...
[[[LiveGauges]]]
live_gauge_items = barometer, windDir, outHumidity, windSpeed, windGust, inTemp
[[[[inTemp]]]]
payload_key = inTemp_F # outTemp_C if target_unit 'METRICWX', or 'METRIC'
minvalue = 10
maxvalue = 30
splitnumber = 5
lineColor = '#428bca', '#b44242'
lineColorUntil = 22, maxvalue
decimals = 1
...
[[Bootstrap-en]]
...
[[[LiveGauges]]]
live_gauge_items = barometer, windDir, outHumidity, windSpeed, windGust, inTemp
[[[[inTemp]]]]
minvalue = 50
maxvalue = 90
splitnumber = 10
lineColorUntil = 72, maxvalue
In the above example you configure the default gauge in °C, because you have two metricwx reports ([Bootstrap] and [Bootstrap-fr]). By defining the gauge in [[Defaults]], no further configuration is needed for the reports. For the [Bootstrap-en] report, you need to override some values so the gauge will fit usual indoor temperatures.
Adding the inTemp chart looks much the same:
...
[StdReport]
...
[[Defaults]]
...
[[[LiveCharts]]]
live_chart_items = outTemp, barometer, rain, outHumidity, wind, windDir, inTemp
[[[[inTemp]]]]
[[[[[inTemp]]]]]
payload_key = inTemp_F
showMaxMarkPoint = true
showMinMarkPoint = true
showAvgMarkLine = true
lineColor = '#b44242'
decimals = 1
[[[[[inHumidity]]]]]
payload_key = inHumidity
showMaxMarkPoint = false
showMinMarkPoint = false
showAvgMarkLine = false
lineColor = '#428bca'
decimals = 1
Since the chart is adapting itself to the range of the current values, no further configuration is needed for the [Bootstrap-en] section.
You can add an observation type an existing chart. For instance, if you want to add windChill to the existing outTemp chart, you can do so by overriding the existing chart config. Notice: sections in [] brackets are overridden, so have to configure the whole chart:
...
[StdReport]
...
[[Defaults]]
...
[[[LiveCharts]]]
...
[[[[inTemp]]]]
[[[[[outTemp]]]]]
payload_key = outTemp_F
showMaxMarkPoint = true
showMinMarkPoint = true
showAvgMarkLine = true
lineColor = '#b44242'
decimals = 1
[[[[[dewpoint]]]]]
payload_key = dewpoint_F
showMaxMarkPoint = false
showMinMarkPoint = false
showAvgMarkLine = false
lineColor = '#428bca'
decimals = 1
[[[[[windchill]]]]]
payload_key = windChill_F
showMaxMarkPoint = false
showMinMarkPoint = false
showAvgMarkLine = false
lineColor = '#7f1ae5'
decimals = 1
Let's say, you want to exchange the 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](https://icons.getbootstrap.com/)
Extending on from Custom Pages in the navigation menu is the option to use a dropdown navigation menu with submenu items.
[[[Navigation]]]
navigation_items = index, stats, history, webcams, news, extra
[[[[webcams]]]]
text = Webcams
href = "#"
icon = bi-camera-video
navigation_items = webcam1, webcam2
[[[[[webcam1]]]]]
text = Webcam 1
href = webcam.html
[[[[[webcam2]]]]]
text = Webcam 2
href = webcam2.html