User Defined Menu: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search
654 bytes added ,  10:30, 3 September 2022
m
(Initial edit)
 
Line 28: Line 28:


   <nowiki><li class='nav-item dropdown'>
   <nowiki><li class='nav-item dropdown'>
    <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
  <!-- Just put a link on the UserMenu text                                                  -->
      NL
   <!-- a class='nav-link' href='http://google.com'>Google</a                                 -->
    </a>
    <div class='dropdown-menu' aria-labelledby='navbarDropdown'>
      <a class='nav-link' href="https://topotijdreis.nl" target="_blank">Topo NL</a>
      <a class='nav-link' href="https://waterinfo.rws.nl/#!/kaart/waterhoogte-t-o-v-nap/" target="_blank">Waterstanden NL</a>
      <a class='nav-link' href="https://vaarweginformatie.nl/frp/main/#/home" target="_blank">Waterwegen NL</a>
      <span class='nav-link' onclick="LoadUtilsReport('Ahn.txt');">Hoogtekaart NL</span>
      <!-- div class='dropdown-divider'></div -->
    </div>
   </li>
 
  <li class='nav-item dropdown'>
    <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
      Extra
    </a>
    <div class='dropdown-menu' aria-labelledby='navbarDropdown'>
      <span class='nav-link' onclick="LoadUtilsReport('Sat24-zonwolken.txt');">Sateliet</span>
      <span class='nav-link' onclick="LoadUtilsReport('Sat24-infrarood.txt');">Infrarood</span>
      <span class='nav-link' onclick="LoadUtilsReport('Radar-regen.txt');">Radar</span>
      <span class='nav-link' onclick="LoadUtilsReport('Blitzortnung.txt');">Blitzortnung</span>
      <span class='nav-link' onclick="LoadUtilsReport('MeteoAlarm.txt');">Meteo Alarm</span>
      <a class='nav-link' href='https://effis.jrc.ec.europa.eu/static/effis_current_situation/public/index.html' target="_blank">Effis</a>


      <div class='dropdown-divider'></div>
  <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
    NL
  </a>
  <ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
    <li class='nav-link' onclick="LoadUtilsReport('Waterstanden.txt');">Waterstanden</li>
    <li class='nav-link' onclick="LoadUtilsReport('TopoNL.txt');">TopoNL</li>
    <li class='nav-link' onclick="LoadUtilsReport('Ahn.txt');">Hoogtekaart</li>
    <li class='nav-link' onclick="LoadUtilsReport('Cropmap.txt');">Crop map</li>
    <!-- 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>
    <div class='dropdown-divider'></div>
  </ul>
</li>


      <span class='nav-link' onclick="LoadUtilsReport('GlobalWinds.txt');">Global Winds</span>
<li class='nav-item dropdown'>
      <span class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</span>
  <!-- Just put a link on the UserMenu text                                                  -->
      <span class='nav-link' onclick="LoadUtilsReport('WXcharts.txt');">WXcharts</span>
  <!-- a class='nav-link' href='http://google.com'>Google</a                                -->


      <div class='dropdown-divider'></div>
  <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
 
    Maps
      <a class='nav-link' href="https://cumulus.hosiene.co.uk/viewforum.php?f=44" target="_blank">Forum</a>
  </a>
      <a class='nav-link' href="https://meteo-wagenborgen.nl/wp/" target="_blank">The Blog</a>
  <ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
    </div>
    <li class='nav-link' onclick="LoadUtilsReport('Effis.txt');">European Forest Fire Information System</li>
  </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>
</nowiki>


=== User report shown in the Report View Area ===
=== 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 span-tag as below:
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><span class='nav-link' onclick="LoadUtilsReport('User report name.txt');">Sateliet</span></nowiki>
   <nowiki><li class='nav-link' onclick="LoadUtilsReport('User report name.txt');">Sateliet</li></nowiki>


=== URL shown in the Report View Area ===
=== 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:
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><span class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</span></nowiki>
   <nowiki><li class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</li></nowiki>


Where Windy.txt is a plain text file containg the following:
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>
   <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!
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.


[[Category:CumulusUtils]]
[[Category:CumulusUtils]]

Navigation menu