Cumulus Wiki

User Defined Menu: Difference between revisions

Page Discussion

User Defined Menu (view source)

Revision as of 02:48, 19 September 2025

4,043 bytes removed ,  19 September
m
→‎System 1
 
(9 intermediate revisions by the same user not shown)
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.
 
The system in use is for historical reasons still called ''System 2''.
There are two ways for modifying the menu:
#A user defined menu containing all user defined items. This part of the menu is displayed next to the standard menu (system 1).
#A user defined menu where items are added to standard menu and new items are created next to the standard menu (system 2).
 
== Operation ==
=== System 1 ===
System 1 has been deprecated and is removed from use in version 8.0.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 2 ===
In the utils directory there must be a file ''CutilsMenu.def''. If this file is not present you get the default menu. The default contents of this file as delivered in the distribution is :shown at the end of this page.
 
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.
Home
 
==== Items ====
About
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.
Item Test1 External <nowiki>https://waterinfo.rws.nl/#!/kaart/waterhoogte-t-o-v-nap/</nowiki> EndItem
Item Test2 Internal <nowiki>https://embed.windy.com/embed2.html?lat=53.2589&lon=6.9314&detailLat=47.339&detailLon=6.812&width=1000&height=700&zoom=5&level=surface&overlay=temp&product=ecmwf&menu=&message=true&marker=true&calendar=now&pressure=true&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1</nowiki> EndItem
Item Test3 Report tagtest EndItem
 
The following holds:
Reports
#Tab is a valid separator of fields within ''CutilsMenu.def''
Graphs
#Requires ''About'' as last item and ''Home'' as first
Records
#Requires the following Top Level items in the CutilsMenu.def (Note that Print is optional): <code>Home, ToggleDashboard, Reports, Graphs, Records, Extra, Misc, About</code>
Extra
#The order of items between Home and About is arbitrary
Misc
ToggleDashboard
 
<br/>For all drop downs ''items'' can be defined as follows:
You recognize the standard menu of CumulusUtils.
From version 6.12 the menu runs from left to right (as before it went from right to left).
 
Item <name> <type> <destination> EndItem
User items can be added to the standard menu as is indicated above. While generating the website this menu will be incorporated. The System 1 menu will be generated in addition to System 2 (i.e. those items will be on the rightmost side of the menu)
 
This Item definition line has space separated words.
==== Items ====
Any menu topic named other than the standard item will create a new, user defined, main menu dropdown. For all drop downs ''items'' can be defined as follows:
 
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).
Item <name> <type> <destination> EndItem
 
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:
THis Item definition line has space separated words.
 
#<name> starts with <code>'./' OR '../'</code>
The <name> is what you will see in the menu and may consist of one or more words.
#<name> starts with <code>'http' OR 'https'</code>
 
In which cases the <name> is interpreted as an URL.
 
The Type can be of :
#'''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 textfilefully 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
#'''Image''': Not implemented yet
#'''Separator''': No further arguments. Creates a thin horizontal line below the last item
 
<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 (asproduced alwaysby Cutils or by the user).
 
TheExample examplelines are shown at the bottom of this page and in the distribution contains threefile ''CutilsMenu-example lines-for-use.def''
 
Errors are shown in the logfile. 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.
Both files for System 1 & 2 are available in the distribution.
 
Both System 1 & 2 can be used concurrently.
Garbage in is garbage out.
 
== Output ==
There is no output of the user menu, only a visible appearance on the website.
 
System 2 however may produce menufiles on the server of the form: ''<main menu item><subitem number>.txt''.
 
== Inifile parameters ==
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.
 
== Example of CUsermenuCuserMenu.txtdef (System 12) ==
Below is the contents of CUsermenu.txt of HansR. All possibilities are used in that file and you can copy the basic principle replacing the links by your own.
 
The lines below are examples
NOTE: Sub-menu within a drop down is not possible.
Lines starting with a semicolon (;) are treated as comment
 
;
You can use the following possibilities:
; CumulusUtils Menu definitions for Website- Part of CumulusUtils
#Create a direct link with a <a> tag. Use ''target="_blank"'' for a new tab or window otherwise your site will be overwritten
;
#Loading a site or report of yourself into the Report View Area using the CumulusUtils function LoadUtilsReport()
#Create a divider between menu items
 
Home
<nowiki><li class='nav-item dropdown'>
Reports
<!-- Just put a link on the UserMenu text -->
<!-- a class='nav-link' href='http://google.com'>Google</a -->
Graphs
 
Item Extra Report extrasensorscharts.txt EndItem
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
NL
Records
</a>
Extra
<ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
Misc
<li class='nav-link' onclick="LoadUtilsReport('Waterstanden.txt');">Waterstanden</li>
Maps
<li class='nav-link' onclick="LoadUtilsReport('TopoNL.txt');">TopoNL</li>
<li class='nav-link' onclick="LoadUtilsReport('Ahn.txt');">Hoogtekaart</li>
User
<li class='nav-link' onclick="LoadUtilsReport('Cropmap.txt');">Crop map</li>
Item ./wu.png External https://www.wunderground.com/dashboard/pws/IWAGEN6?cm_ven=localwx_pwsdash EndItem
<!-- a class='nav-link' href="https://topotijdreis.nl" target="_blank">Topo NL</a -->
<li><a class='nav-link' href="https://waterinfo.rws.nl/#!/kaart/waterhoogte-t-o-v-nap/">Waterstanden</a></li>
NL
<div class='dropdown-divider'></div>
Item Waterstanden External https://waterinfo.rws.nl/#!/kaart/waterhoogte/ EndItem
</ul>
Item TopoNL External https://topotijdreis.nl EndItem
</li>
Item Hoogtekaart External https://ahn.arcgisonline.nl/ahnviewer/ EndItem
 
Item CropMap External https://www.esa.int/ESA_Multimedia/Images/2018/05/Crop_map EndItem
<li class='nav-item dropdown'>
Item Separator EndItem
<!-- Just put a link on the UserMenu text -->
Item Waterstanden (Int) Internal https://waterinfo.rws.nl/#!/kaart/waterhoogte/ EndItem
<!-- a class='nav-link' href='http://google.com'>Google</a -->
Item TopoNL (Int) Internal https://topotijdreis.nl EndItem
 
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
ToggleDashboard
Maps
About
</a>
<ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
<li class='nav-link' onclick="LoadUtilsReport('Effis.txt');">European Forest Fire Information System</li>
<div class='dropdown-divider'></div>
<!-- li> <a class='nav-link' href="https://www.windy.com/station/pws-f06f5696?53.259,6.932,8" target="_blank">Windy (excl)</a> </li -->
<li class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</span>
<li class='nav-link' onclick="LoadUtilsReport('GlobalWinds.txt');">Global Winds</li>
<li class='nav-link' onclick="LoadUtilsReport('Sat24-infrarood.txt');">Sat24 IR</li>
<li class='nav-link' onclick="LoadUtilsReport('Sat24-zonwolken.txt');">Sat24 Visual</li>
<div class='dropdown-divider'></div>
<li class='nav-link' onclick="LoadUtilsReport('Radar-regen.txt');">Radar-regen</span>
<li class='nav-link' onclick="LoadUtilsReport('Blitzortnung.txt');">Blitzortnung</span>
<li class='nav-link' onclick="LoadUtilsReport('MeteoAlarm.txt');">Meteo Alarm</span>
<div class='dropdown-divider'></div>
<li><a class='nav-link' href="https://wow.knmi.nl/#1211bb08-6c93-e911-80e7-0003ff59889d" target="_blank">KNMI WOW</a></li>
<li><a class='nav-link' href="https://www.wunderground.com/dashboard/pws/IWAGEN6" target="_blank">WU iwagen6</a></li>
</ul>
</li>
</nowiki>
 
=== User report shown in the Report View Area ===
Any user report or external website can be shown in the Report View Area by simply loading the User Report in that area with the LoadUtilsReport function with a li-tag as below:
 
<nowiki><li class='nav-link' onclick="LoadUtilsReport('User report name.txt');">Sateliet</li></nowiki>
 
=== URL shown in the Report View Area ===
The Report View Area can contain reports but maybe you would like to see a website in that area. That can be accomplished by putting that URL in an IFrame text file and to load that IFrame with a call to the LoadUtilsReport function like e.g. for Windy below:
 
<nowiki><li class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</li></nowiki>
 
Where Windy.txt is a plain text file containing the following:
 
<iframe src="The Embedded URL given by Windy" width="100%" frameborder="0" style="border:0;height:75vh;"></iframe>
 
The width definition of the iFrame guarantees it won't fall beside the window, the height definition keeps most URLs within the given viewport. Some may get higher which happens often when you are using a tablet. Creating dynamic sizing within the available viewport is however a bit beyond the scope of this exercise as most site work fine like this. Of course you could experiment yourself with the IFrame parameters. Look on the map for examples how users create their menu's, some really do great things!
 
You need to read [https://cumulus.hosiene.co.uk/viewtopic.php?t=20357 this post] when wanting to use iFrame.
 
== Example of CuserMenu.def (System 2) ==
 
Lines starting with a semicolon (;) are treated as comment
 
Home;<br/>
About;<br/>
Reports;<br/>
Records;<br/>
Graphs;<br/>
Extra;<br/>
Misc;<br/>
<nowiki>;</nowiki>Toggle Dashboard;<br/>
 
[[Category:CumulusUtils]]
Retrieved from "https://www.cumuluswiki.org/a/Special:MobileDiff/10952...12182"