Merge pull request #129 from brewster76/4.2

Resolve 4.2

README.md

@@ -5,12 +5,14 @@ Gauge and Chart graphics showing current conditions.
 English example             |  German example with combined line/bar chart and scatter chart
 :-------------------------:|:-------------------------:
 ![image](https://github.com/brewster76/fuzzy-archer/assets/58649043/d3d948ff-763e-42cd-a653-e40f3e6fdacb)  |  ![image](https://github.com/brewster76/fuzzy-archer/assets/58649043/aefe0b81-742a-453a-9e1f-3859330cc414)
+![mobile_en](https://github.com/brewster76/fuzzy-archer/assets/58649043/2b445b5c-250b-47ff-b80d-53e9c73b52d8) | ![mobile_de](https://github.com/brewster76/fuzzy-archer/assets/58649043/60abda1b-27b0-43ad-bff2-56881455f8b9)
+
 
 See it in action with live data (10s. refresh interval):
 
 [Example page english](https://www.kainzbauer.net/weather/Rif/en)
 
-[Example Testseite Deutsch](https://www.kainzbauer.net/weather/Rif)
+[Example page Deutsch](https://www.kainzbauer.net/weather/Rif)
 
 Interactive charts showing conditions over a timespan
 
@@ -37,6 +39,20 @@ Available in multiple languages. Help wanted! We need help with translations for
 
 Read the upgrading guides in the wiki, if you already have an older version installed: https://github.com/brewster76/fuzzy-archer/wiki
 
+New in v4.2:
+
+- Upgraded dependencies
+- Overhaul of the UI, optimizations for mobile devices, more compact on mobile devices
+- Navbar is fixed on top, faster and easier navigation especially on mobile devices
+- Introduced Bootstrap Icons (https://icons.getbootstrap.com/)
+- History: redundant specification of maxvalues for colors was removed, remove them from your custom configs (leaving them will still work, but is of no use)
+- Support for customizing report data JSON in front end
+- Fixed async refresh for sum aggregation in live charts
+- Config option for axis intervals
+- Config option for station info items
+- Moon phase, sunrise/set, rain summaries, uptime is now updated asyncronously every archive_interval
+- Added rain summaries in station info
+
 New in v4.1:
 
 - Mixed charts: you can now mix "line" series with "bar" series. A mixed radiation/UV chart is already in the configs, you can enable it by adding it to live_chart_items

bin/user/historygenerator.py

@@ -59,6 +59,7 @@ def __init__(self, generator):
         self.cache_time = 0
 
         self.search_list_extension = {}
+        self.search_list_extension['fuzzy_archer_version'] = generator.config_dict['fuzzy_archer_version']
 
         # Make some config available to templates
         self.add_to_extension_list('Navigation', generator.skin_dict)
@@ -69,6 +70,7 @@ def __init__(self, generator):
         self.add_to_extension_list('BootstrapLabels', generator.skin_dict)
         self.add_to_extension_list('Labels', generator.skin_dict)
         self.add_to_extension_list('Units', generator.skin_dict)
+        self.add_to_extension_list('JSONGenerator', generator.skin_dict)
         self.add_to_extension_list('LiveGauges', generator.skin_dict)
         self.add_to_extension_list('Stats', generator.skin_dict)
         self.add_to_extension_list('News', generator.skin_dict)
@@ -173,14 +175,14 @@ def _parseTableOptions(self, table_options, table_name):
             table_colors = self.color_dict[colors_key][unit]
         else:
             log.info("No colors defined for %s" % table_name)
-            table_colors = {"minvalues": [0], "maxvalues": [0], "colors": ["#ffffff"]}
+            table_colors = {"minvalues": [0], "colors": ["#ffffff"]}
 
         # Check everything's the same length
         l = len(table_colors['minvalues'])
 
-        for i in [table_colors['maxvalues'], table_colors['colors']]:
+        for i in [table_colors['minvalues'], table_colors['colors']]:
             if len(i) != l:
-                log.info("%s: minvalues, maxvalues and colors must have the same number of elements in table: %s"
+                log.info("%s: minvalues and colors must have the same number of elements in table: %s"
                          % (os.path.basename(__file__), table_name))
                 return None, None
 
@@ -191,19 +193,19 @@ def _parseTableOptions(self, table_options, table_name):
             # Check everything's the same length
             l = len(summary_colors['minvalues'])
 
-            for i in [summary_colors['maxvalues'], summary_colors['colors']]:
+            for i in [summary_colors['minvalues'], summary_colors['colors']]:
                 if len(i) != l:
-                    log.info("%s: minvalues, maxvalues and colors must have the same number of elements in table: %s[summary]"
+                    log.info("%s: minvalues and colors must have the same number of elements in table: %s[summary]"
                              % (os.path.basename(__file__), table_name))
                     return None, None
 
         font_color_list = table_colors['fontColors'] if 'fontColors' in table_colors else ['#000000'] * l
-        cell_colors = list(zip(table_colors['minvalues'], table_colors['maxvalues'], table_colors['colors'], font_color_list))
+        cell_colors = list(zip(table_colors['minvalues'], table_colors['colors'], font_color_list))
 
         summary_cell_colors = None
         if None is not summary_colors:
             font_color_list = summary_colors['fontColors'] if 'fontColors' in summary_colors else ['#000000'] * l
-            summary_cell_colors = list(zip(summary_colors['minvalues'], summary_colors['maxvalues'], summary_colors['colors'], font_color_list))
+            summary_cell_colors = list(zip(summary_colors['minvalues'], summary_colors['colors'], font_color_list))
 
         return cell_colors, summary_cell_colors
 
@@ -355,15 +357,15 @@ def _colorCell(self, value, format_string, cell_colors):
 
         value: Numeric value for the observation
         format_string: How the numberic value should be represented in the table cell.
-        cellColors: An array containing 4 lists. [minvalues], [maxvalues], [background color], [foreground color]
+        cellColors: An array containing 3 lists. [minvalues], [background color], [foreground color]
         """
         cell = {"value": "", "bgcolor": "", "fontcolor": ""}
         if value[0] is not None:
             vh = weewx.units.ValueHelper(value)
-            for c in cell_colors:
-                if (value[0] >= float(c[0])) and (value[0] < float(c[1])):
-                    cell["bgcolor"] = c[2]
-                    cell["fontcolor"] = c[3]
+            for index, c in enumerate(cell_colors):
+                if (value[0] >= float(c[0])) and ((index + 1) >= len(cell_colors) or value[0] < float(cell_colors[index + 1][0])):
+                    cell["bgcolor"] = c[1]
+                    cell["fontcolor"] = c[2]
                     break
             cell["value"] = vh.format(format_string, None, False, True)
         return cell

install.py

@@ -38,6 +38,9 @@ def __init__(self):
              'skins/Bootstrap/uptime.html.inc',
              'skins/Bootstrap/week.html.tmpl',
              'skins/Bootstrap/year.html.tmpl',
+             'skins/Bootstrap/reportData.json.tmpl',
+             'skins/Bootstrap/rain.html.inc',
+             'skins/Bootstrap/stationInfo.json.inc',
              'skins/Bootstrap/skin.conf']),
            ('skins/Bootstrap/NOAA',
             ['skins/Bootstrap/NOAA/NOAA-YYYY.txt.tmpl',
@@ -55,12 +58,16 @@ def __init__(self):
              'bin/user/sunevents.py']),
            ('skins/Bootstrap/css',
             ['skins/Bootstrap/css/bootstrap.min.css',
+             'skins/Bootstrap/css/bootstrap-icons.min.css',
              'skins/Bootstrap/css/live.css']),
+           ('skins/Bootstrap/css/fonts',
+            ['skins/Bootstrap/css/fonts/bootstrap-icons.woff',
+             'skins/Bootstrap/css/fonts/bootstrap-icons.woff2']),
            ('skins/Bootstrap/js',
             ['skins/Bootstrap/js/bootstrap.bundle.min.js',
             'skins/Bootstrap/js/charts.js',
             'skins/Bootstrap/js/echarts.min.js',
-             'skins/Bootstrap/js/jquery-3.6.3.min.js',
+             'skins/Bootstrap/js/jquery.min.js',
             'skins/Bootstrap/js/gauges.js',
             'skins/Bootstrap/js/lang.js',
             'skins/Bootstrap/js/mqtt.min.js',
@@ -79,13 +86,15 @@ def __init__(self):
              'skins/Bootstrap/lang/no.conf',
              'skins/Bootstrap/lang/th.conf'])]
 
+        version="4.2"
         super(BootstrapInstaller, self).__init__(
-            version="4.1.1",
+            version=version,
             name='bootstrap',
             description='A skin based around the bootstrap framework',
             author="Nick Dajda, Michael Kainzbauer and other contributors",
             author_email="[email protected]",
             config={
+                'fuzzy_archer_version':version,
                 'StdReport': {
                     'Bootstrap': {
                         'skin':'Bootstrap',

skins/Bootstrap/about.html.tmpl

@@ -6,12 +6,12 @@
 <!-- Menu navbar -->
 #include "nav.html.inc"
 <!-- Main container -->
-<div class="container-fluid">
+<div class="$global_main_container_classes">
     <div class="row">
         <!-- Gauge panel -->
         #include "livegauges.html.inc"
-        <!-- Graph panel -->
-        <div class="col-md-9 main">
+        <!-- Main panel -->
+        <div id="${global_main_panel_id}" class="${global_main_panel_classes}">
             <!-- About content goes here-->
             <h2>How it's done</h2>
             <p>This website summarizes weather data logged by a weather station using the polished and highly
@@ -88,7 +88,7 @@
             </pre>
 
             <h3>Custom pages:</h3>
-            <p>Let's say, you want to exchange this about page with your own. Create a template files <code>extra.html.tmpl</code>
+            <p>Let's say, you want to exchange this about page with your own. Create a template file <code>extra.html.tmpl</code>
              and tell CheetahGenerator to handle it. Then exchange <code>about</code> with <code>extra</code> in the <code>navigation_items</code>. 
              Then configure your new page in the <code>[[[[extra]]]]</code> stanza as below.</p>
             <pre>
@@ -101,6 +101,7 @@
             [[[[extra]]]]
                 text = About
                 href = extra.html
+                icon = bi-question-square # insert bootstrap icon here: bi-{icon} see <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a>
             </pre>
         </div>
     </div>

skins/Bootstrap/chartimages.html.inc

@@ -5,13 +5,12 @@
 <!-- Menu navbar -->
 #include "nav.html.inc"
 <!-- Main container -->
-<div class="container-fluid">
+<div class="$global_main_container_classes">
     <div class="row">
         <!-- Gauge panel -->
         #include "livegauges.html.inc"
-        <!-- Graph panel -->
-        <div class="col-md-9 main">
-            <p></p>
+        <!-- Main panel -->
+        <div id="${global_main_panel_id}" class="${global_main_panel_classes}">
             #include "graphMenu.html.inc"
             <div class="row" id="modalRow">
                     #for $imageName in $image_items

skins/Bootstrap/css/live.css

@@ -15,22 +15,30 @@ body {
 .gauge {
   width: 160px;
   height:160px;
+  min-width: 140px;
+  min-height:140px;
 }
-.gaugecol {
-  min-width: 175px;
-  min-height:175px;
-}
+
 .chart {
-  width: 400px;
-  height:250px;
+  width: 475px;
+  height:275px;
   margin-top: 3px;
   margin-bottom: 3px;
   float: left;
 }
-.stationInfo td {
-   color: #555;
-   font-family: sans-serif;
-   font-size: smaller;
+
+.stationInfo {
+  background-color: #f6f6f6;
+  color: #555;
+  margin: 1px;
+  font-family: sans-serif;
+  font-size: small;
+}
+
+.footer {
+  color: #555;
+  font-family: sans-serif;
+  font-size: xx-small;
 }
 .primaryLive, .primaryLive:active, .primaryLive:focus, .primaryLive:checked {
   background-color: #428bca;
@@ -67,7 +75,7 @@ body {
 
 thead.table-light th {
   color: #333;
-  background-color: #f3f3f3;
+  background-color: #f6f6f6;
 }
 
 .table {
@@ -84,7 +92,7 @@ thead.table-light th {
   font-size: 12px;
 }
 
-.statsTime {
+.statsTime, .stationInfoRainHeader {
   color: #777;
   font-size: smaller;
 }
@@ -110,3 +118,7 @@ h3 small {
   font-size: 0.6em;
   margin-left: 0.5em;
 }
+
+section {
+  scroll-margin-top: 74px;
+}

skins/Bootstrap/foot.html.inc

@@ -1,4 +1,8 @@
     <hr>
     <footer>
-        <p>$gettext("Footer Text")</p>
+        #if $gettext("Footer text") == "Footer text"
+        <p class="footer"><a href='https://github.com/brewster76/fuzzy-archer'>fuzzy-archer</a> version $fuzzy_archer_version, powered by <a href='https://weewx.com'>WeeWX</a></p>
+        #else
+        <p>$gettext("Footer text")</p>
+        #end if
     </footer>

skins/Bootstrap/graphMenu.html.inc

@@ -1,5 +1,6 @@
 #set $graphMenuItems = [{'href': 'index.html', 'text': 'Live'}, {'href': 'day.html', 'text': '24 Hours'}, {'href': 'week.html', 'text': 'Week'}, {'href': 'month.html', 'text': 'Month'}, {'href': 'year.html', 'text': 'Year'}]
-<p id="graphMenu">
+<section id="menu"></section>
+<p id="graphMenu" class="my-1 mt-md-0">
     #for $graphMenuItem in $graphMenuItems
     #set $classlist = ' btn-light primaryLight'
     #set $href = $graphMenuItem['href']
@@ -14,13 +15,14 @@
 ## 'raw' makes Cheetah skip this section so it doesn't get confused by the dollar characters in the js
 #raw
     let graphMenu = document.getElementById("graphMenu");
-    if(graphMenu != null) {
+    if(graphMenu !== null && graphMenu !== undefined) {
       document.getElementById("indexHtml").classList.add("active");
       let listItems = document.evaluate("a", graphMenu, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
       for(let i = 0; i < listItems.snapshotLength; i++) {
         let item = listItems.snapshotItem(i);
         if(window.innerWidth < 768) {
-          item.href += "#graphMenu";
+          let hash = item.href.endsWith('#') ? '' : '#';
+          item.href += hash + "menu";
         }
       }
     }

skins/Bootstrap/head.html.inc

@@ -1,9 +1,15 @@
+#set global $global_main_panel_classes = 'col-md-6 col-lg-7 col-xl-8 col-xxl-9 mt-1'
+#set global $global_main_panel_id = 'mainPanel'
+#set global $global_main_container_classes = 'container-fluid'
+#set global $global_station_info_classes = 'd-flex align-items-center stationInfo my-1'
+#set global $display_gauge_panel = 'd-none'
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>$gettext("Page Title") $station.location</title>
     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/bootstrap-icons.min.css" rel="stylesheet">
     <link href="css/live.css" rel="stylesheet">
     #set $extra_css = $to_list($Extras.get('extra_css', []))
     #for $css in $extra_css
@@ -30,5 +36,6 @@
             //not ready
         }
     }
+    let updateFunctions = [];
     </script>
 </head>

skins/Bootstrap/history.html.tmpl

@@ -7,12 +7,12 @@
 <!-- Menu navbar -->
 #include "nav.html.inc"
 <!-- Main container -->
-<div class="container-fluid">
+<div class="$global_main_container_classes">
     <div class="row">
         <!-- Gauge panel -->
         #include "livegauges.html.inc"
-        <!-- Graph panel -->
-        <div class="col-md-9 main">
+        <!-- Main panel -->
+        <div id="${global_main_panel_id}" class="${global_main_panel_classes}">
             #for $history_item in $history_items
             #set $table = $history_tables[$history_item]
             <h3 class="historyHeader">$gettext($table.header_text)</h3>

skins/Bootstrap/index.html.tmpl

@@ -7,13 +7,13 @@
 <!-- Menu navbar -->
 #include "nav.html.inc"
 <!-- Main container -->
-<div class="container-fluid">
+<div class="$global_main_container_classes">
     <div class="row">
         <!-- Gauge panel -->
+        #set global $display_gauge_panel = 'd-block'
         #include "livegauges.html.inc"
-        <!-- Graph panel -->
-        <div class="col-md-9 main">
-            <p></p>
+        <!-- Main panel -->
+        <div id="${global_main_panel_id}" class="${global_main_panel_classes}">
             #include "graphMenu.html.inc"
             <div class="row">
                 #for $chartName in $live_chart_items