UserReports

From Cumulus Wiki
Jump to navigationJump to search

Introduction

CumulusUtils provides the module UserReports which is a bit similar to the processing feature of CumulusMX itself. This gives the possibility to create whatever report the user wishes from within the ecosystem of CumulusUtils. When a text file containing webtags is offered to CumulusUtils it is processed and the resulting text file is stored on the website.

Operation

The input to this module is/are text file(s) with the name CURPTfilename.txt

This module is included in the website. When needed as a single output the following command is given: 

   utils/bin/cumulusutils.exe UserReports

Output

The output of this module is/are reports with the names similar to the input but without the CURPT prefix: filename.txt.

Inifile parameters

This module has no inifile parameters.

Inner working

Any textfile with the prefix CURPT is read and processed. Any webtag within the file is replaced with it's current value. The resulting textfile is then stored locally and immediately uploaded after processing.

How to use - Layout advise

A short instruction is given on the forum. Read that first, it may suffice!

UserReports are especially useful if you wish to make reports for the printer or to store certain moments on file. Just create your template text and insert the Webtags where you want the values to appear. Only the <# is reserved as indicator of the Webtags. As long as the file is plain text it will be handled correctly. Other file formats may be tried but are not guaranteed to be parsed / substituted correctly.

If you wish to create HTML files to be displayed on its own or in another website outside the CumulusUtils website, then all HTML5 is permitted and you are on your own.

If you wish to create a page to be displayed in the ReportView (the right part of the website display where the charts are) you need to take into account the following:

  • The whole context of the website is 'As Is' and your HTML is inserted into the DIV that defines the right part, seven column (out of 12) Bootstrap block with a height of approximately 75vh (see the HTML/CSS units page).
  • You could analyse the HTML context yourself by editing index.html in an appropriate editor which is able to make the file readable (e.g. Visual Studio Code). Note thios is HTML which is generated with colours and other information from you cumulusutils.ini file. You are not supposed to change this, changes will inevitably disappear again.
  • The basic structure of the index.html is as follows:
   <!DOCTYPE HTML>
    <html lang='nl-NL'>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script defer src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
        <script defer src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'
        integrity='sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns' crossorigin='anonymous'>
    </script>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'
        integrity='sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l' crossorigin='anonymous'>
    <script src='https://unpkg.com/leaflet@1.5.1/dist/leaflet.js'
        integrity='sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=='
        crossorigin=''></script>
    <link rel='stylesheet' href='https://unpkg.com/leaflet@1.5.1/dist/leaflet.css'
        integrity='sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=='
        crossorigin='' />
    </head>
    
    <body style='background-color: white;'>
        <div class='container-fluid border' style='padding: 5px'>
            <div class='row' style='margin:auto'>
                <div class='col-xl-5 scrollable' id='NormalDashboard'>
                </div>
                <div class='col-xl-7 scrollable'>
                    <div id='CUReportView' class='scrollable CUReport'></div>
                </div>
            </div>
        </div>
        <div class='col-sm-12 CUFooter'>
            <table style='width:100%; margin:auto'>
                <tr>
                    <td style='text-align: left; font-size: smaller'></td>
                    <td style='text-align: right; font-size: smaller'></td>
                </tr>
            </table>
        </div>
        <script defer src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js'></script>
        <script defer src='https://code.highcharts.com/stock/highstock.js'></script>
        <script defer src="https://code.highcharts.com/stock/highcharts-more.js"></script>
        <script defer src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
        <script defer src="https://code.highcharts.com/stock/modules/exporting.js"></script>
        <script defer src="https://code.highcharts.com/stock/modules/heatmap.js"></script>
        <script defer src='https://code.highcharts.com/stock/modules/windbarb.js'></script>
        <script defer src="https://code.highcharts.com/stock/modules/boost.js"></script>
        <!--STEELSERIES-->
        <link href='css/gauges-ss.css' rel='stylesheet' />
        <script defer src='lib/suncalc.js'></script>
        <script defer src='lib/tween.min.js'></script>
        <script defer src='lib/steelseries.min.js'></script>
        <script defer src='lib/RGraph.common.core.js'></script>
        <script defer src='lib/RGraph.rose.js'></script>
        <script defer src='lib/language.js'></script>
        <!--- Other utility includes of my own making -->
        <script defer src='lib/HighchartsDefaults.js'></script>
        <script defer src='lib/HighchartsLanguage.js'></script>
        <script defer src='lib/cumulusutils.js'></script>
    </body>
    </html>

And your UserReport will be inserted in the <div id='CUReportView' class='scrollable CUReport'></div> DIV. This means you have all libraries which are included at your disposal (especially Bootstrap, jQuery, Leaflet and HighCharts) if you wish to used them. Experiment freely.

  • The important thing here is that you can freely use CSS to give your HTML colouring and size attributes. If you wish to make your own CSS UserReport style you could put it into a file.
  • Formatting the alignment of lists and values is best done with the TABLE html tag which also gives the possibility for more than one column.
  • Size of the font may increase/decrease information density
  • You may use overflow to get a scrollbar on a table or div. Note that the usage of overflow may require some additional study.
  • If you wish to adhere to the CumulusUtils de facto standard of the thin line around the report (see e.g. Reports on your site) then the standard CSS used for the DIV containing the report is:
   #report{
      font-family: arial;
      border-radius: 15px;
      border-spacing: 0;
      border: 1px solid #b0b0b0;
    }

That is it. If you think more information is needed, please let me know or just add it to the Wiki.

Retrieved from "https://www.cumuluswiki.org/index.php?title=UserReports&oldid=10134"