==> Development: Overview <==
Development is quite easy with this skin.
->> Skin structure <<-
The src directory has these files / directories:
||TXT templates||This dir contains the NOAA TXT report templates|
style.css / style.min.css
|This dir contains the minified bootstrap css + the generated CSS file|
||Rubik-*||This dir contains the Rubik web font files|
||icon-*.png / splash screens||This dir contains all used images|
||*.js / modules / vendor||This dir contains all JS files|
||*.scss||This dir contains all SCSS sass source files which get build into css/|
||css / font / svg||This dir contains the weather icons package|
||Almanac page||Cheetah template file|
||Archive overview page||Cheetah template file|
||Footer part for each template||Included in all templates|
||Common JS code for all archive area charts||Included in JS part of each archive template|
||Common JS code for all area charts||Included in JS part of each template|
||Common JS code for all archive bar charts||Included in JS part of each archive template|
||Common JS code for all bar charts||Included in JS part of each template|
||Common JS code for all radar charts||Included in JS part of each template|
||Head part of all templates (meta tags, css)||Included in all templates|
||Header part of all templates (nav bar)||Included in all templates|
||Current page||Cheetah template file|
||Common JS code||Included in all templates|
||Web App manifest||Not used by generator - only copied once|
||Month page||Cheetah template file|
||Monthly archive page (%Y = year, %m = month, will be replaced by generator)||Cheetah template file|
||Yarn config file with all 3rd party packages needed for development||Only for development|
||Main config file for this skin||Skin config file|
||Telemetry page||Cheetah template file|
||Week page||Cheetah template file|
||Lock file of yarn packages||Only for development|
||Year page||Cheetah template file|
||Yearly archive page (%Y = year, will be replaced by generator)||Cheetah template file|
||Yesterday page||Cheetah template file|
->> Template structure <<-
.html.tmpl file has a similar structure.
To make the code more compact and reduce repeating the same content again and again we use some functions.
All code is well commented so just dive in a template file and have a look.
Each template has a
This is a small macro which
will generate the values card (left column) with min / max values and the big
one in the middle.
This macro contains some special cases for wind and rain but can easily be adjusted.
Similar to the values cards there's also a chartCard function which will generate a display card for a chart. But only the card - the chart must be defined later in the JS section.
After these two definitions the main layout starts.
Then the chart section starts. There are two more functions which are used:
$getChartData() function is only used
internally to get the data from WeeWX and store it in an array.
$getChartJsCode() function creates
the needed JS code for displaying a chart. This will also call getChartData.
After the function definitions the chart definitions start where all available charts are defined.
In most cases the macros are used. Only the wind vector needs to be calculated because these values aren't available directly through WeeWX.
->> Adding values / charts <<-
A new value
To display a new value it only needs to be added in the
[[Appearance]] section in
values_order you simply add the name of
this value and it will get displayed if data is available.
$valuesCard() function uses any
available name to display data.
A new chart
To display a new chart you need to do a bit more.
First you need to give it a name. Add this name to charts_order in the
section like you've added a new value to
Then go through each .html.tmpl file, look for the Chart definitions section and add the chart like any other chart is added.
You simply need to call the
For example in the index.html.tmpl I added a second chart after outTemp + Dewpoint:
// outTemp + Dewpoint $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint") // My new chart $getChartJsCode("myfancynewchart", "myfancynewchart", "area", "appTemp", "extraTemp1")
In this case I need to add
This is declared twice because the first value is the name of the chart, the second
the ID which is the same in this case.
This would create an area chart with the values of
See the description below for further information.
A new hope
We all like Star Wars but this skin won't need any more hope because it's already so hopeful.
->> Template functions <<-
All .html.tmpl templates have some functions / macros included.
valuesCard - add a values card (left column)
Name must be a valid sensor / observation name, like outTemp or rain.
This function includes special cases for names "windSpeed" and "rain".
chartCard - add a chart card (right column)
$chartCard("name", "id", "name2")
Name must be a valid sensor / observation name,
name2 but this is optional.
name2 is set the title of the card
will show: name1 & name2.
The names must be valid label names, so
must be available.
id of this card must be unique and set in
the JS part as well so the chart knows where to be displayed.
getChartData - get data from WeeWX and store in an array
As said before this is only used internally by the
Name must be a valid sensor / observation name,
column is the wanted column of this
sensor / observation. This can be something
getChartJsCode - add the whole JS code for a chart
This function will add the needed JS code for a chart. Each chart can display up to 4 different sensors (series).
$getChartJsCode("name", "id", "type", "series1", "series2", "column", "series3", "series4")
||The unique name of the chart. Only used internally, e.g. for charts_order|
||The id of the chart card element. So JS knows where the chart should be displayed.|
||The type of the chart. Can be any ApexCharts type. Mostly needed:
||Name of sensor / observation which should be displayed in the chart|
||(Optional) Name of second sensor / observation which should be displayed in the chart as well|
||(Optional) The wanted column of the sensor / observation. By default this is
||(Optional) Name of third sensor / observation which should be displayed in the chart as well|
||(Optional) Name of fourth sensor / observation which should be displayed in the chart as well|