User Defined Menu and Website Generator: Difference between pages

Revision as of 13:08, 9 September 2025

Introduction

Website Example Wolfshagen

While CumulusUtils started as a collection of modules to be used at will in the creation of a weather website - for the site of the author - after several modules it became clear that generation of a complete website would not be too difficult. It required a HTML framework within which the modules would fit, a menu, a runtime system to handle the realtime data, loading of files, clocks, sun and moon and an adaptation of mcrossley's gauges.

The work set out on a scratch board where the site was drafted and the runtime was coded. The choice was made to split the screen in two in a 5/7 ratio which never changed since. The right pane became the ReportView where the user chooses the report he wishes to see while the realtime data are always visible in the left pane, the Dashboard. The contents of the Dashboard can be toggled between two sets of twelve panes and the lunar disc can be replaced by the lunar image produced by CMX (see DashBoard).

In the example on the image on the right you see Holgers' fully translated site with expanded user menu and even multilingual by his own design to show off the things possible with the CumulusUtils framework.

Operation

The website generation includes in principle all modules. It is created with the following command:

  utils/bin/cumulusutils.exe Website

Output

The output of the website generation is the output of all individual modules and in addition:

index.html => is the Bootstrap formatted start page of the site
cumulusutils.js => is the javascript runtime system
cumuluscharts.txt => contains the charts for the Home page and is originally based on the CumulusMX recent charts. This file is produced by the ChartsCompiler but if the compiler is not used, the original charts as present in the old standard CumulusMX website will be presented.
HighchartsLanguage.js => contains the language definitions for the charts. Not many possibilities are used but that may change. It is generated each run.

These files will be generated by the Website command. If you did not change anything, apart from the index.html they do NOT need to be uploaded (see the Thrifty qualifier)

The following files are not generated but are required. If not present a message is logged on the console.

CUserAbout.txt => The menu choice About=>This Site uses the contents of a file named CUserAbout.txt to be displayed in a popup window. As you can imagine, the user has to create this file himself. The contents of this file must be text with HTML tags for formatting.

Inifile parameters

NOTE: The Website Generator works closely together with the Internal FTP facility. You have to setup that first or upload the output manually. It's user preference.

The Website section is the largest parameters section. Not all parameters will be reproduced here, see the Cumulusutils.ini article. Only the important individual parameters will be discussed, the others are discussed as a group.

 [Website]
 // The statistics parameters are currently either for Google or Matomo 
 // If the corresponding ID's and or Url are not filled in, invalid code is generated. If you do not want
 // statistics than set StatisticsType without value
 
 StatisticsType= [Google || Matomo] default is empty 
 GoogleStatsId=                        => When not empty, a google stats code fragment will be generated with this code as the user Id, default is empty
 MatomoTrackerUrl=
 MatomoSiteId=
 PermitGoogleOptout=false (default)    => Permits to generate code so the users own access to the site will not be measured, default=false

 CumulusRealTimeLocation=              => see below, default is empty
 ShowInsideMeasurements=true | false   => when true, inside temperature and humidity will be shown on the website (when available in the datafile), default=false
 CumulusRealTimeInterval=30            => The refresh cycle time of the runtime system to update the values on the dashboard and gauges, default=15
 ShowUV=true                           => Show the UV values (if there is a sensor), default=true
 ShowSolar=true                        => Show the solar radiation values (if there is a sensor), default=true
 HeaderLeftText=                       => A free plain or HTML formatted text destined at the left side of the header, default is empty
 HeaderRightText=                      => A free plain or HTML formatted text destined at the right side of the header, default is empty
 SiteTitleAddition=                    => A free text addition to the title, default is empty
 UseCMXMoonImage=false                 => When true the CMX generated moon image is used i.s.o. the CUtils native abstracted image 
 MoonImageLocation=                    => The full URL for the moon image, used when UseCMXMoonImage=true, ignored otherwise
 PwsfwiButtonInHeader=true             => When true the direct access pwsFWI button will show in the header, when false it shows in the menu bar

All parameters starting with Panel affect what you actually see in that panel See Dashboard for more information.
All parameters starting with Color affect the Bootstrap elements relevant for the interface and give the user the possibility to create a personal touch to the presentation.
All parameters starting with Steelseries affect the presentation of the gauges. You may find examples here and here ^[1]. See also the SteelSeries FAQ.
All parameters starting with Threshold give a definition in pairs for a red led within a gauge to start flashing when the given boundary has surpassed.
All parameters starting with Home apply to the Home page graphs and give the user the possibility to explicitly set non-default colours ^[2].
When colours go in three they are gradient colours. If only the first colour is used, no gradient effect is seen.

↑ See the site of Mark Crossley if you wish to see more and create gauges yourself: lineair, extras, stopwatch, lightbulb, LCD and trafficlight
↑ When use is made of the CutilsCharts.def definition of charts for the ChartsCompiler, then these colours have no meaning and either the colours from the CutilsCharts.def or from the theme (if none specified) are used

Header Background Images

(v6.8.4 and up) Special attention must be given to the Header Background Images parameters, meant to make user specific artwork to the site possible. The perception of the site changes dramatically when the header image changes in colour, brightness and what is actually depicted.

ColorTitleBackGroundImage=                 (this image represents the DAY, for historical reasons the name of the parameter has not been modified)
ColorTitleBackGroundImageCivil=
ColorTitleBackGroundImageNautical=
ColorTitleBackGroundImageAstronomical=
ColorTitleBackGroundImageNight=

These parameters may contain the name of an imagefile which the user has placed on the website. The path must be relative to the webroot or a full URL specification. The images correspond to the respective phases of the day: DAY, CIVIL twilight, NAUTICAL twilight, ASTRONOMICAL twilight and NIGHT - see the solar disc in the dashboard - and are displayed when that corresponding phase starts. If an image is not specified, the image of the preceding phase is used where the order is: DAY, CIVIL, NAUTICAL, ASTRONOMICAL and NIGHT. So, when only DAY is specified, all phases have the DAY image displayed. When DAY and CIVIL are specified, DAY gets the DAY image and all other phases get the CIVIL image etc...

Chart Background Images

(v6.9.6 and up) It is possible to define a background image for the chart as a whole (so not only the plot area but also the axis and titles). For this a general parameter exists (general because it is valid for all modules carrying charts):

ChartBackgroundImage=

If this parameter contains a filename, that file is used as background image of the charts. Note that the specification may also be a url which must be accessible by the user running the website.

CumulusRealTimeLocation

The parameter CumulusRealTimeLocation gives the user the possibility to setup the CumulusUtils website beside a main website and share the realtime and datafiles with the other site.

If there is a directory structure like:

 \                              as webroot
 |
 - cutils\                       as directory where the CumulusUtils site is located
     |--- lib\
     |--- css\ 
     |--- CUicons\

then, when CumulusMX sends the realtime and datafiles to the webroot, you can set the CumulusRealTimeLocation to ..\ and it will automatically find the realtime and datafiles it needs.

CuserHead.def

If that file (user created) exists in the utils directory, its contents replaces three HTML Meta tags in the generated HTML code. This should facilitate any HTML header tags e.g. <META ...> to be positioned in the HTML header as the user wishes. No checks are made on the contents of the CutilsHead.def file and its effect on the resulting index.html, it is fully the users responsibility. No support on the contents and its effects will be given. The HTML tags replaced are:

<meta name="description" content="CumulusMX Website, part of CumulusUtils" />
<meta name="keywords" content="CumulusMX, weather, data, private weather station, CumulusUtils" />
<meta name="robots" content="index, noarchive, follow, noimageindex, noimageclick" />

Javascript libraries

When using the Website Generator, all modules are used implicitly. Modules, with some exceptions, can be used standalone in any website by including the output of CumulusUtils in that website. When using the standalone mode you need to be aware of the inifile parameters (section general) GeneratejQueryInclude and DoLibraryIncludes.

GeneratejQueryInclude will - if true - generate the required jQuery library reference line on top of the module.
DoLibraryIncludes will - if true - generate the required library references (e.g. HighCharts, Leaflet etc...) on top of the module.

If you manage these libraries in your website yourself set these parameter values to false. If the modules don't work and you have no idea what this is about, set these values to true.

If you use the Website Generator, set both parameters to false.

On top of the above use of these parameters, if you wish to run the ChartsCompiler as a module i.e. explicit activation (command CompileOnly) but for use inside the CUtils environment then both library parameters must be false.

Other remarks

In this section some special subjects and questions and answers from the forum will be summarized

The Clocks

The clocks panel of the website shows three clocks:

Station which is the actual time at the location of the station corrected for DST of the station location
Browser which is the time on the computer of the viewer corrected for the browser location DST
UTC

It is important for the automatic DST switch to understand that the generation of the daily website needs to take place after the switch time. So in spring that would be at 2 o'clock and in autumn that would be after 3 o'clock. If run before those hours the DST correction will obviously take place one day later.

[1] See the site of Mark Crossley if you wish to see more and create gauges yourself: lineair, extras, stopwatch, lightbulb, LCD and trafficlight

[2] When use is made of the CutilsCharts.def definition of charts for the ChartsCompiler, then these colours have no meaning and either the colours from the CutilsCharts.def or from the theme (if none specified) are used

[1]

[2]

@@ Line 1: / Line 1: @@
-== Introduction ==
  {|align=right
   |__TOC__
   |}
-When using the [[Website Generator]] the website comes with a standard menu. It is possible to expand this menu by adding items to it. It is not possible to modify the standard menu items or sub-items, it is possible though to remove some items from the main manu by using the parameters, some items cannot be removed. The About menu item cannot be removed nor changed.
+== Introduction ==
-The system in use is for historical reasons still called ''System 2''.
+[[File:Website example.jpg|thumb|right|Website Example Wolfshagen]]
+While CumulusUtils started as a collection of modules to be used at will in the creation of a weather website - for the site of the author - after several modules it became clear that generation of a complete website would not be too difficult. It required a HTML framework within which the modules would fit, a menu, a runtime system to handle the realtime data, loading of files, clocks, sun and moon and an adaptation of mcrossley's gauges.
+The work set out on a scratch board where the site was drafted and the runtime was coded. The choice was made to split the screen in two in a 5/7 ratio which never changed since. The right pane became the ''ReportView'' where the user chooses the report he wishes to see while the realtime data are always visible in the left pane, the [[Dashboard]]. The contents of the Dashboard can be toggled between two sets of twelve panes and the lunar disc can be replaced by the lunar image produced by CMX (see [[Dashboard#The_Lunar_Disc|DashBoard]]).
+In the example on the image on the right you see Holgers' fully translated site with expanded user menu and even multilingual by his own design to show off the things possible with the CumulusUtils framework.
 == Operation ==
+The website generation includes in principle all modules. It is created with the following command:
-=== System 1 ===
-In the website root there must exist a file ''CUsermenu.txt'' which contains the user defined menu. When the ''index.html'' is requested by a visitor the file ''CUsermenu.txt'' is read and the items in there form the ''User Defined Menu'' which is explained below. This menu is dynamically used by the website and NOT generated by CumulusUtils. System 1 has been deprecated and is removed from use in version 8.0.1
+   utils/bin/cumulusutils.exe Website
-=== System 2 ===
-In the utils directory there must be a file ''CutilsMenu.def''. If this file is not present you get the default menu. The contents of this file as delivered in the distribution is shown at the end of this page.
+== Output ==
-You recognize the standard menu of CumulusUtils. User items can be added  to the standard menu as is indicated above. While generating the website this menu will be incorporated.
+The output of the website generation is the output of all individual modules and in addition:
+#index.html                 => is the Bootstrap formatted start page of the site
-==== Items ====
+#cumulusutils.js            => is the javascript runtime system
-Any menu topic, named other than the standard items, will create a new user defined, top level menu dropdown. If the top level name contains an underscore, that underscore will be replaced by a space.
+#cumuluscharts.txt          => contains the charts for the Home page and is originally based on the CumulusMX recent charts. This file is produced by the ChartsCompiler but if the compiler is not used, the original charts as present in the old standard CumulusMX website will be presented.
+#HighchartsLanguage.js      => contains the language definitions for the charts. Not many possibilities are used but that may change. It is generated each run.
+These files will be generated by the ''Website'' command. If you did not change anything, apart from the index.html they do NOT need to be uploaded (see the [[Thrifty_-_Cutils_Command_Qualifier|Thrifty qualifier]])
-For all drop downs ''items'' can be defined as follows:
+The following files are not generated but are required. If not present a  message is logged on the console.
-  Item <name> <type> <destination> EndItem
+#CUserAbout.txt             => The menu choice About=>This Site uses the contents of a file named CUserAbout.txt to be displayed in a popup window. As you can imagine, the user has to create this file himself. The contents of this file must be text with HTML tags for formatting.
-This Item definition line has space separated words.
+== Inifile parameters ==
-The <name> is what you will see in the menu and may consist of one or more words (no need to use an underscore in the name to create a space).
+'''NOTE: The Website Generator works closely together with the Internal [[FTP facility]]. You have to setup that first or upload the output manually. It's user preference.'''
+The Website section is the largest parameters section. Not all parameters will be reproduced here, see the [[Cumulusutils.ini]] article. Only the important individual parameters will be discussed, the others are discussed as a group.
-If <name> is a valid filespec on the seerver or a valid URL, it will display the contents of that filespec or URL. It is intended to be used as a specification for a small images to be displayed in the menu. It is the users responsibility to have a correct filespec or URL. No validation is done other than:
+  [Website]
-#<name> starts with <code>'./' OR '../'</code>
+  // The statistics parameters are currently either for Google or Matomo
-#<name> starts with <code>'http' OR 'https'</code>
+  // If the corresponding ID's and or Url are not filled in, invalid code is generated. If you do not want
+  // statistics than set ''StatisticsType'' without value
+  StatisticsType= [Google || Matomo] default is empty
+  GoogleStatsId=                        => When not empty, a google stats code fragment will be generated with this code as the user Id, default is empty
+  MatomoTrackerUrl=
+  MatomoSiteId=
+  PermitGoogleOptout=false (default)    => Permits to generate code so the users own access to the site will not be measured, default=false
+  CumulusRealTimeLocation=              => see below, default is empty
-In which cases the <name> is interpreted as an URL.
+  ShowInsideMeasurements=true | false   => when true, inside temperature and humidity will be shown on the website (when available in the datafile), default=false
+  CumulusRealTimeInterval=30            => The refresh cycle time of the runtime system to update the values on the dashboard and gauges, default=15
+  ShowUV=true                           => Show the UV values (if there is a sensor), default=true
+  ShowSolar=true                        => Show the solar radiation values (if there is a sensor), default=true
+  HeaderLeftText=                       => A free plain or HTML formatted text destined at the left side of the header, default is empty
+  HeaderRightText=                      => A free plain or HTML formatted text destined at the right side of the header, default is empty
+  SiteTitleAddition=                    => A free text addition to the title, default is empty
+  UseCMXMoonImage=false                 => When true the CMX generated moon image is used i.s.o. the CUtils native abstracted image
+  MoonImageLocation=                    => The full URL for the moon image, used when ''UseCMXMoonImage=true'', ignored otherwise
+  PwsfwiButtonInHeader=true             => When true the direct access pwsFWI button will show in the header, when false it shows in the menu bar
+All parameters starting with '''''Panel''''' affect what you actually see in that panel See [[Dashboard]] for more information.<br>
-The Type can be of :
+All parameters starting with '''''Color''''' affect the Bootstrap elements relevant for the interface and give the user the possibility to create a personal touch to the presentation.<br>
+All parameters starting with '''''Steelseries''''' affect the presentation of the gauges. You  may find examples [https://www.wilmslowastro.com/steelseries/demoRadial.html here]  and [http://www.boock.ch/meteo/gauges_stelserie_demoradial.php here] <ref> See the site of Mark Crossley if you wish to see more and create gauges yourself: [https://www.wilmslowastro.com/steelseries/demoLinear.html lineair], [https://www.wilmslowastro.com/steelseries/demoExtras.html extras], [https://www.wilmslowastro.com/steelseries/demoStopWatch.html stopwatch], [https://www.wilmslowastro.com/steelseries/demoLightBulb.html lightbulb], [https://www.wilmslowastro.com/steelseries/demoLcdSections.html LCD] and [https://www.wilmslowastro.com/steelseries/demoLcdSections.html trafficlight]</ref>. See also the [[SteelSeries_FAQ|SteelSeries FAQ]].<br>
+All parameters starting with '''''Threshold''''' give a definition in pairs for a red led within a gauge to start flashing when the given boundary has surpassed.<br>
+All parameters starting with '''''Home''''' apply to the Home page graphs and give the user the possibility to explicitly set non-default colours <ref>When use is made of the [[ChartsCompiler|CutilsCharts.def]] definition of charts for the [[ChartsCompiler]], then these colours have no meaning and either the colours from the [[ChartsCompiler|CutilsCharts.def]] or from the theme (if none specified) are used </ref>. <br>
+When colours go in three they are gradient colours. If only the first colour is used, no gradient effect is seen.
+<references />
-#'''External''': The URL given as destination will be opened in a new window or new tab besides CUtils
-#'''Internal''': The URL given as destination will be opened in the ReportView, the large viewport on the right side of the dashboard. It is implemented as an Iframe which is generated to the standard demands of Cutils
-#'''Report''': Any UserReport of Cutils or any other legitimate HTML/Javascript file similar to the standard reports and charts. The destination is a fully specified text file name : ''filename.txt'' (so including the extension)
-#'''Image''': The URL for the image (e.g. a satellite image) will be shown in the ReportView
-#'''Separator''': No further arguments. Creates a thin horizontal line below the last item
+=== Header Background Images ===
-<destination> is the URL of what you want to see. An URL can be a full specification or just a filename in which case the report must be present on the server in the webroot (produced by Cutils or by the user).
+(v6.8.4 and up)
+Special attention must be given to the Header Background Images parameters, meant to make user specific artwork to the site possible. The perception of the site changes dramatically when the header image changes in colour, brightness and what is actually depicted.
+ ColorTitleBackGroundImage=                 (this image represents the DAY, for historical reasons the name of the parameter has not been modified)
+ ColorTitleBackGroundImageCivil=
+ ColorTitleBackGroundImageNautical=
+ ColorTitleBackGroundImageAstronomical=
+ ColorTitleBackGroundImageNight=
+These parameters may contain the name of an imagefile which the user has placed on the website. The path must be relative to the webroot or a full URL specification. The images correspond to the respective phases of the day: DAY, CIVIL twilight, NAUTICAL twilight, ASTRONOMICAL twilight and NIGHT - see the solar disc in the [[dashboard]] - and are displayed when that corresponding phase starts. If an image is not specified, the image of the preceding phase is used where the order is: DAY, CIVIL, NAUTICAL, ASTRONOMICAL and NIGHT. So, when only DAY is specified, all phases have the DAY image displayed. When DAY and CIVIL are specified, DAY gets the DAY image and all other phases get the CIVIL image etc...
+=== Chart Background Images ===
-Example lines are shown at the bottom of this page and in the distribution file ''CutilsMenu-example-for-use.def''
+(v6.9.6 and up)
+It is possible to define a background image for the chart as a whole (so not only the plot area but also the axis and titles). For this a general parameter exists (general because it is valid for all modules carrying charts):
+ ChartBackgroundImage=
+If this parameter contains a filename, that file is used as background image of the charts. Note that the specification may also be a url which must be accessible by the user running the website.
+=== CumulusRealTimeLocation ===
-Files for System 2 are available in the distribution.
+The parameter ''CumulusRealTimeLocation'' gives the user the possibility to setup the CumulusUtils website beside a main website and share the realtime and datafiles with the other site.
+If there is a directory structure like:
-Error recovery in case of errors is present. System 2 however cannot validate against the real world so while developing your menu: be precise or be prepared to rerun if your menu looks garbled.
+  \                              as webroot
+  |
+  - cutils\                       as directory where the CumulusUtils site is located
+      |--- lib\
+      |--- css\
+      |--- CUicons\
+then, when CumulusMX sends the realtime and datafiles to the webroot, you can set the ''CumulusRealTimeLocation'' to '''..\''' and it will automatically find the realtime and datafiles it needs.
-Garbage in is garbage out.
-== Output ==
+=== CuserHead.def ===
+If that file (user created) exists in the utils directory, its contents replaces three HTML Meta tags in the generated HTML code. This should facilitate any HTML header tags e.g. <META ...> to be positioned in the HTML header as the user wishes. No checks are made on the contents of the ''CutilsHead.def'' file and its effect on the resulting ''index.html'', it is fully the users responsibility. No support on the contents and its effects will be given. The HTML tags replaced are:
-There is no output of the user menu, only a visible appearance on the website.
+#<meta name="description" content="CumulusMX Website, part of CumulusUtils" />
+#<meta name="keywords" content="CumulusMX, weather, data, private weather station, CumulusUtils" />
+#<meta name="robots" content="index, noarchive, follow, noimageindex, noimageclick" />
+=== Javascript libraries ===
-System 2 however may produce menufiles on the server of the form: ''<main menu item><subitem number>.txt''.
+When using the [[Website Generator]], all modules are used implicitly. Modules, with some exceptions, can be used standalone in any website by including the output of CumulusUtils in that website. When using the standalone mode you need to be aware of the [[cumulusutils.ini|inifile parameters]] (section general) ''GeneratejQueryInclude'' and ''DoLibraryIncludes''.
+#GeneratejQueryInclude will - if true - generate the required jQuery library reference line on top of the module.
-== Inifile parameters ==
+#DoLibraryIncludes will - if true - generate the required library references (e.g. HighCharts, Leaflet etc...) on top of the module.
-There are no inifile parameters involved
+If you manage these libraries in your website yourself set these parameter values to false.
-== Inner working ==
+If the modules don't work and you have no idea what this is about, set these values to true.
-The website is designed on the basis of the [https://getbootstrap.com/ Bootstrap Toolkit]. As a result, the menu is also within this toolkit.
-As the menu is not really very easy if you are not a HTML / Bootstrap programmer, System 2 for the menu is designed to deal with without knowledge of the Bootstrap menu system. On the basis of the  keywords in System 2 CumulusUtils generates the menu for  you.
+If you  use the [[Website Generator]], '''set both parameters to false'''.
-== Example of CuserMenu.def (System 2) ==
+On top of the above use of these parameters, if you wish to run the [[ChartsCompiler]] as a module i.e. [[ChartsCompiler#Explicit_activation|explicit activation]] (command CompileOnly) but for use '''inside''' the CUtils environment then both library parameters must be false.
-The lines below are examples
-Lines starting with a semicolon (;) are treated as comment
+== Other remarks ==
-;
+In this section some special subjects and questions and answers from the forum will be summarized
-; CumulusUtils Menu definitions for Website- Part of CumulusUtils
-;
+=== The Clocks ===
- Home
+The clocks panel of the website shows three clocks:
- Reports
+#Station which is the actual time at the location of the station corrected for DST of the station location
+#Browser which is the time on the computer of the viewer corrected for the browser location DST
- Graphs
+#UTC
-   Item Extra Report extrasensorscharts.txt EndItem
- Records
- Extra
- Misc
- Maps
- User
-   Item ./wu.png External https://www.wunderground.com/dashboard/pws/IWAGEN6?cm_ven=localwx_pwsdash EndItem
- NL
-   Item Waterstanden External https://waterinfo.rws.nl/#!/kaart/waterhoogte/ EndItem
-   Item TopoNL External https://topotijdreis.nl EndItem
-   Item Hoogtekaart External https://ahn.arcgisonline.nl/ahnviewer/ EndItem
-   Item CropMap External https://www.esa.int/ESA_Multimedia/Images/2018/05/Crop_map EndItem
-   Item Separator EndItem
-   Item Waterstanden (Int) Internal https://waterinfo.rws.nl/#!/kaart/waterhoogte/ EndItem
-   Item TopoNL (Int) Internal https://topotijdreis.nl EndItem
- ToggleDashboard
- About
+It  is  important for the automatic DST switch to understand that the generation of the daily website needs to take place after the switch time. So in spring that would be at 2 o'clock and in autumn that would be after 3 o'clock. If run before those hours the DST correction will obviously take place one day later.
 [[Category:CumulusUtils]]

User Defined Menu and Website Generator: Difference between pages

Revision as of 13:08, 9 September 2025

Contents

Introduction

Operation

Output

Inifile parameters

Header Background Images

Chart Background Images

CumulusRealTimeLocation

CuserHead.def

Javascript libraries

Other remarks

The Clocks

Navigation menu

Page actions

Page actions

Personal tools

Wiki navigation

Search

Cumulus

Tools