tweak website design in html and css

stylesheets/desktop.css

@@ -3,6 +3,16 @@ body {
     place-items: center;
     text-align: center;
     padding-bottom: 30px;
+    font-family: "Helvetica", "sans-serif"
+}
+
+table {
+    position: relative
+}
+
+#managerTable {
+    max-height: 800px;
+    overflow: auto;
 }
 
 td {
@@ -15,10 +25,12 @@ th {
     background-color: #999;
     border-radius: 4px;
     padding: 3px 1px;
+    position: sticky;
+    top: 0;
 }
 
 a:link, a:visited {
-    background-color: #ccc;
+    background-color: #e8e8e8;
     color: #000;
     text-decoration: none;
     display: block;

stylesheets/mobile.css

@@ -3,6 +3,16 @@ body {
     place-items: center;
     text-align: center;
     padding-bottom: 30px;
+    font-family: "Helvetica", "sans-serif"
+}
+
+table {
+    position: relative
+}
+
+#managerTable {
+    max-height: 800px;
+    overflow: auto;
 }
 
 td {
@@ -18,7 +28,7 @@ th {
 }
 
 a:link {
-    background-color: #ccc;
+    background-color: #e8e8e8;
     color: #000;
     text-decoration: none;
     display: block;

survBot.py

@@ -22,7 +22,7 @@ from obspy.clients.filesystem.sds import Client
 
 from write_utils import get_html_text, get_html_link, get_html_row, html_footer, get_html_header, get_print_title_str, \
     init_html_table, finish_html_table, get_mail_html_header, add_html_image
-from utils import get_bg_color, modify_stream_for_plot, set_axis_yticks, set_axis_color, plot_axis_thresholds
+from utils import get_bg_color, get_font_color, modify_stream_for_plot, set_axis_yticks, set_axis_color, plot_axis_thresholds
 
 try:
     import smtplib
@@ -441,7 +441,7 @@ class SurveillanceBot(object):
         fig_name = self.get_fig_path_rel(nwst_id)
         nwst_id_str = nwst_id.rstrip('.')
         col_items = [dict(text=nwst_id_str, color=default_color, hyperlink=fig_name if hyperlinks else None,
-                          bold=True, tooltip=f'Show plot of {nwst_id_str}')]
+                          bold=True, tooltip=f'Show plot of {nwst_id_str}', font_color='#000000')]
 
         for check_key in header:
             if check_key in self.keys:
@@ -453,6 +453,7 @@ class SurveillanceBot(object):
                 bg_color = get_bg_color(check_key, status, dt_thresh, hex=True)
                 if not bg_color:
                     bg_color = default_color
+                font_color = get_font_color(bg_color, hex=True)
 
                 # add degree sign for temp
                 if check_key == 'temp':
@@ -461,7 +462,7 @@ class SurveillanceBot(object):
 
                 html_class = self.get_html_class(hide_keys_mobile, status=status, check_key=check_key)
                 item = dict(text=str(message), tooltip=str(detailed_message), color=bg_color,
-                            html_class=html_class)
+                            html_class=html_class, font_color=font_color)
             elif check_key in self.add_links:
                 value = self.add_links.get(check_key).get('URL')
                 link_text = self.add_links.get(check_key).get('text')

utils.py

@@ -1,6 +1,8 @@
 #!/usr/bin/env python
 # -*- coding: utf-8 -*-
 
+from functools import partial
+
 import matplotlib
 import numpy as np
 
@@ -35,12 +37,18 @@ def get_bg_color(check_key, status, dt_thresh=None, hex=False):
 
 def get_color(key):
     # some GUI default colors
-    colors_dict = {'FAIL': (255, 50, 0, 255),
+    # colors_dict = {'FAIL': (255, 50, 0, 255),
+    #                'NO DATA': (255, 255, 125, 255),
+    #                'WARN': (255, 255, 80, 255),
+    #                'OK': (125, 255, 125, 255),
+    #                'undefined': (230, 230, 230, 255),
+    #                'disc': (255, 160, 40, 255),}
+    colors_dict = {'FAIL': (195, 29, 14, 255),
                    'NO DATA': (255, 255, 125, 255),
-                   'WARN': (255, 255, 80, 255),
+                   'WARN': (249, 238, 139, 255),
-                   'OK': (125, 255, 125, 255),
+                   'OK': (179, 219, 153, 255),
-                   'undefined': (230, 230, 230, 255),
+                   'undefined': (240, 240, 240, 255),
-                   'disc': (255, 160, 40, 255),}
+                   'disc': (126, 127, 131, 255), }
     return colors_dict.get(key)
 
 
@@ -60,7 +68,16 @@ def get_time_delay_color(dt, dt_thresh):
 
 
 def get_warn_color(count):
-    color = (min([255, 200 + count ** 2]), 255, 80, 255)
+    n_colors = 20
+    # r = np.linspace(158, 255, n_colors, dtype=int)
+    # g = np.linspace(255, 255, n_colors, dtype=int)
+    # b = np.linspace(114, 80, n_colors, dtype=int)
+    r = np.linspace(204, 249, n_colors, dtype=int)
+    g = np.linspace(226, 238, n_colors, dtype=int)
+    b = np.linspace(149, 139, n_colors, dtype=int)
+    pad = partial(np.pad, pad_width=(0, 100), mode='edge')
+    r, g, b = map(pad, [r, g, b])
+    color = (r[count], g[count], b[count], 255)
     return color
 
 
@@ -81,6 +98,24 @@ def get_temp_color(temp, vmin=-10, vmax=60, cmap='coolwarm'):
     return rgba
 
 
+def get_font_color(bg_color, hex=False):
+    if hex:
+        bg_color = matplotlib.colors.to_rgb(bg_color)
+    bg_color_hsv = matplotlib.colors.rgb_to_hsv(bg_color)
+    bg_color_hsl = hsv_to_hsl(bg_color_hsv)
+    font_color = (255, 255, 255, 255) if bg_color_hsl[2] < 0.6 else (0, 0, 0, 255)
+    if hex:
+        font_color = '#{:02x}{:02x}{:02x}'.format(*font_color[:3])
+    return font_color
+
+
+def hsv_to_hsl(hsv):
+    hue, saturation, value = hsv
+    lightness = value * (1 - saturation / 2)
+    saturation = 0 if lightness in (0, 1) else (value - lightness) / min(lightness, 1 - lightness)
+    return hue, saturation, lightness
+
+
 def modify_stream_for_plot(input_stream, parameters):
     """ copy (if necessary) and modify stream for plotting """
 

write_utils.py

@@ -40,11 +40,11 @@ def get_mail_html_header():
 
 
 def init_html_table():
-    return '<table style="width:100%">\n'
+    return '<div id="managerTable" ><table style="width:100%">\n'
 
 
 def finish_html_table():
-    return '</table>\n'
+    return '</table></div>\n'
 
 
 def html_footer(footer_logo=None):
@@ -82,12 +82,13 @@ def get_html_row(items, html_key='td'):
         color = item.get('color')
         # check for black background of headers (shouldnt happen anymore)
         color = '#e6e6e6' if color == '#000000' else color
+        font_color = item.get('font_color')
         hyperlink = item.get('hyperlink')
         text_str = get_html_link(text, hyperlink) if hyperlink else text
         html_class = item.get('html_class')
         class_str = f' class="{html_class}"' if html_class else ''
-        row_string += 2 * default_space + f'<{html_key}{class_str} bgcolor="{color}" title="{tooltip}"> {text_str}'\
+        row_string += 2 * default_space + f'<{html_key}{class_str} bgcolor="{color}" title="{tooltip}"' \
-                    + f'</{html_key}>\n'
+                      + f'style="color:{font_color}"> {text_str}</{html_key}>\n'
     row_string += default_space + '</tr>\n'
     return row_string