Development is quite easy with this skin.

The src directory has these files / directories:

Name	Content	Description
archive/	TXT templates	This dir contains the NOAA TXT report templates
css/	bootstrap.min.css style.css / style.min.css	This dir contains the minified bootstrap css + the generated CSS file
fonts/	Rubik-*	This dir contains the Rubik web font files
img/	icon-*.png / splash screens	This dir contains all used images
js/	*.js / modules / vendor	This dir contains all JS files
scss/	*.scss	This dir contains all SCSS sass source files which get build into css/
weather-icons/	css / font / svg	This dir contains the weather icons package
almanac.html.tmpl	Almanac page	Cheetah template file
archive.html.tmpl	Archive overview page	Cheetah template file
footer.inc	Footer part for each template	Included in all templates
graph_area_archive_config.inc	Common JS code for all archive area charts	Included in JS part of each archive template
graph_area_config.inc	Common JS code for all area charts	Included in JS part of each template
graph_bar_archive_config.inc	Common JS code for all archive bar charts	Included in JS part of each archive template
graph_bar_config.inc	Common JS code for all bar charts	Included in JS part of each template
graph_radar_config.inc	Common JS code for all radar charts	Included in JS part of each template
head.inc	Head part of all templates (meta tags, css)	Included in all templates
header.inc	Header part of all templates (nav bar)	Included in all templates
index.html.tmpl	Current page	Cheetah template file
js.inc	Common JS code	Included in all templates
manifest.json	Web App manifest	Not used by generator - only copied once
month.html.tmpl	Month page	Cheetah template file
month-%Y-%m.html.tmpl	Monthly archive page (%Y = year, %m = month, will be replaced by generator)	Cheetah template file
package.json	Yarn config file with all 3rd party packages needed for development	Only for development
skin.conf	Main config file for this skin	Skin config file
telemetry.html.tmpl	Telemetry page	Cheetah template file
week.html.tmpl	Week page	Cheetah template file
yarn.lock	Lock file of yarn packages	Only for development
year.html.tmpl	Year page	Cheetah template file
year-%Y.html.tmpl	Yearly archive page (%Y = year, will be replaced by generator)	Cheetah template file
yesterday.html.tmpl	Yesterday page	Cheetah template file

Each .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 $valuesCard() function. 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:

The $getChartData() function is only used internally to get the data from WeeWX and store it in an array.

The $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.

A new value

To display a new value it only needs to be added in the skin.conf. In the [[Appearance]] section in values_order you simply add the name of this value and it will get displayed if data is available.

The $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 [[Appearance]] section like you've added a new value to values_order.

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 $getChartJsCode() function. 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 myfancynewchart to charts_order. 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 appTemp and extraTemp1.

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.

All .html.tmpl templates have some functions / macros included.

valuesCard - add a values card (left column)

$valuesCard("name")

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, like outTemp or rain.

Same for name2 but this is optional. If name2 is set the title of the card will show: name1 & name2.

The names must be valid label names, so obs.label.$name must be available.

The 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

$getChartData("name", "column")

As said before this is only used internally by the $getChartJsCode() function.

Name must be a valid sensor / observation name, like outTemp or rain.

The column is the wanted column of this sensor / observation. This can be something like min, avg or max.

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")

name	The unique name of the chart. Only used internally, e.g. for charts_order
id	The id of the chart card element. So JS knows where the chart should be displayed.
type	The type of the chart. Can be any ApexCharts type. Mostly needed: area, bar
series1	Name of sensor / observation which should be displayed in the chart
series2	(Optional) Name of second sensor / observation which should be displayed in the chart as well
column	(Optional) The wanted column of the sensor / observation. By default this is avg but can also be min, max or something similar.
series3	(Optional) Name of third sensor / observation which should be displayed in the chart as well
series4	(Optional) Name of fourth sensor / observation which should be displayed in the chart as well