From a6475f2c3bd24834f5c1eeba63984b03b353517b Mon Sep 17 00:00:00 2001 From: Anne Mohr Date: Fri, 21 Apr 2023 10:56:52 +0200 Subject: [PATCH] tweak website design in html and css --- stylesheets/desktop.css | 14 +++++++++++- stylesheets/mobile.css | 12 ++++++++++- survBot.py | 7 +++--- utils.py | 47 +++++++++++++++++++++++++++++++++++------ write_utils.py | 9 ++++---- 5 files changed, 74 insertions(+), 15 deletions(-) diff --git a/stylesheets/desktop.css b/stylesheets/desktop.css index 7d0371a..aa23f6e 100644 --- a/stylesheets/desktop.css +++ b/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; diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css index dde8d87..1691271 100644 --- a/stylesheets/mobile.css +++ b/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; diff --git a/survBot.py b/survBot.py index 261965a..54d2160 100755 --- a/survBot.py +++ b/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') diff --git a/utils.py b/utils.py index 2168c01..600889a 100644 --- a/utils.py +++ b/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), - 'OK': (125, 255, 125, 255), - 'undefined': (230, 230, 230, 255), - 'disc': (255, 160, 40, 255),} + 'WARN': (249, 238, 139, 255), + 'OK': (179, 219, 153, 255), + 'undefined': (240, 240, 240, 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 """ diff --git a/write_utils.py b/write_utils.py index 58a6747..d595c06 100644 --- a/write_utils.py +++ b/write_utils.py @@ -40,11 +40,11 @@ def get_mail_html_header(): def init_html_table(): - return '\n' + return '
\n' def finish_html_table(): - return '
\n' + return '\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}'\ - + f'\n' + row_string += 2 * default_space + f'<{html_key}{class_str} bgcolor="{color}" title="{tooltip}"' \ + + f'style="color:{font_color}"> {text_str}\n' row_string += default_space + '\n' return row_string