feat : Added new markers types and live alerts features

app/alerts.py

@@ -19,25 +19,28 @@
 # Various modules provided by Dash to build the page layout
 import dash_core_components as dcc
 import dash_html_components as html
+import dash_bootstrap_components as dbc
 import dash_leaflet as dl
 import dash_leaflet.express as dlx
 
 # From navbar.py to add the navigation bar at the top of the page
 from navbar import Navbar
 
 # Various imports from utils.py, useful for both Alerts and Risks dashboards
-from utils import map_style, build_info_object
+from utils import map_style, build_info_object, build_live_alerts_metadata
 
 
 # ------------------------------------------------------------------------------
+
 # Map layer
 # The following block is used to determine what layer we use for the map and enable the user to change it
 
 # This function creates the button that allows users to change the map layer (satellite or topographic)
 def build_layer_style_button():
 
     button = html.Button(children='Activer la vue satellite',
-                         id='layer_style_button')
+                         id='layer_style_button',
+                         className="btn btn-warning")
 
     return html.Center(button)
 
@@ -68,15 +71,15 @@ def choose_layer_style(n_clicks):
 # The following block is used to display the borders of the departments on the map
 
 # Fetching the departments GeoJSON and building the related map attribute
-def build_alerts_geojson():
+def build_departments_geojson():
 
     # We fetch the json file online and store it in the departments variable
     with open(Path(__file__).parent.joinpath('data', 'departements.geojson'), 'rb') as response:
         departments = json.load(response)
 
     # We plug departments in a Dash Leaflet GeoJSON object that will be added to the map
     geojson = dl.GeoJSON(data=departments,
-                         id='geojson_alerts',
+                         id='geojson_departments',
                          zoomToBoundsOnClick=True,
                          hoverStyle=dict(weight=3,
                                          color='#666',
@@ -88,50 +91,108 @@ def build_alerts_geojson():
 
 
 # ------------------------------------------------------------------------------
-# Cameras
-# The following block is dedicated to fetching information about cameras and displaying them on the map
-
+# Sites markers
 # Fetching the positions of detection units in a given department
-def get_camera_positions(dpt_code=None):
+def build_sites_markers(dpt_code=None):
 
     # As long as the user does not click on a department, dpt_code is None and we return no device
-    if not dpt_code:
-        return None
+    # if not dpt_code:
+    #     return None
 
     # We read the csv file that locates the cameras and filter for the department of interest
     camera_positions = pd.read_csv(Path(__file__).parent.joinpath('data', 'cameras.csv'), ';')
-    camera_positions = camera_positions[camera_positions['Département'] == int(dpt_code)].copy()
+    # camera_positions = camera_positions[camera_positions['Département'] == int(dpt_code)].copy()
 
-    # We build a list of dictionaries containing the info of each camera
+    # We build a list of markers containing the info of each site/camera
     markers = []
-    for _, row in camera_positions.iterrows():
+    for i, row in camera_positions.iterrows():
         lat = row['Latitude']
         lon = row['Longitude']
-        area = row['Tours']
-        alert_codis = row['Connexion Alerte CODIS']
+        site_name = row['Tours']
         nb_device = row['Nombres Devices']
-        popup = ["Ville: {} <br>\
-                 Connexion Alerte CODIS: {} <br>\
-                 Nombres Devices: {}".format(area, alert_codis, nb_device)]
-        markers.append(dict(lat=lat,
-                            lon=lon,
-                            area=area,
-                            alert_codis=alert_codis,
-                            nb_device=nb_device,
-                            popup=popup))
+        markers.append(dl.Marker(id=f'site_{i}',    # Necessary to set an id for each marker to reteive callbacks
+                                 position=(lat, lon),
+                                 children=[dl.Tooltip(site_name),
+                                           dl.Popup([html.H2(f'Site {site_name}'),
+                                                     html.P(f'Coordonnées : ({lat}, {lon})'),
+                                                     html.P(f'Nombre de caméras : {nb_device}')])]))
+
+    # We group all dl.Marker objects in a dl.LayerGroup object
+    markers_layer = dl.MarkerClusterGroup(children=markers, id='sites_markers')
 
-    # We convert it into geojson format (not a dl.GeoJSON object yet) and return it
-    markers = dlx.dicts_to_geojson(markers)
+    return markers_layer
 
-    return markers
 
+# ------------------------------------------------------------------------------
+# Fire alerts
+# The following block is dedicated to fetching information about fire alerts and displaying them on the map
+
+# This function creates alerts-related elements such as alert_button, alert_markers
+def build_alerts_elements(value):
+
+    # Fetching alert status and reusable metadata
+    alert_metadata = build_live_alerts_metadata()
+    alert_lat = alert_metadata["lat"]
+    alert_lon = alert_metadata["lon"]
+    alert_id = str(alert_metadata["id"])
+
+    # Building the button that allows users to zoom towards the alert marker
+    if value == 0:
+        alert_button = dbc.Button(
+            children="Départ de feu, cliquez-ici !",
+            color="danger",
+            block=True,
+            id='alert_button'
+        )
+    else:
+        alert_button = ""
+
+    # Building alerts_markers objects and wraps them in a dl.LayerGroup object
+    if value == 0:
+        icon = {
+            "iconUrl": 'https://marsfireengineers.com/assets/images/resources/firedetection.png',
+            "iconSize": [40, 40],       # Size of the icon
+            "iconAnchor": [20, 20]      # Point of the icon which will correspond to marker's location
+            # "popupAnchor": [-3, -76]  # Point from which the popup should open relative to the iconAnchor
+        }
+        alerts_markers = [dl.Marker(
+            id="marker_{}".format(alert_id),   # Setting a unique id for each alerts_markers
+            position=(alert_lat, alert_lon),
+            icon=icon,
+            children=[dl.Popup(
+                [
+                    html.H2("Alerte détectée"),
+                    html.P("Coordonées : {}, {} ".format(alert_lat, alert_lon)),
+                    html.Button("Afficher les données de détection",
+                                id=("display_alert_frame_btn{}".format(alert_id)),  # Setting a unique btn id
+                                n_clicks=0,
+                                className="btn btn-danger")
+                ])])]
+        alerts_markers_layer = dl.LayerGroup(children=alerts_markers, id='alerts_markers')
+    else:
+        alerts_markers_layer = ""
 
-# Once we have the positions of cameras, we output another GeoJSON object gathering these locations
-def build_alerts_markers():
-    markers = dl.GeoJSON(data=get_camera_positions(),
-                         id='markers')
+    return alert_button, alerts_markers_layer
+
+
+# This function either triggers a zoom towards the alert point each time the alert button is clicked
+# and sets the default zoom and center params for map_object
+def define_map_zoom_center(n_clicks):
+
+    # Fetching alert status and reusable metadata
+    alert_metadata = build_live_alerts_metadata()
+    alert_lat = alert_metadata["lat"]
+    alert_lon = alert_metadata["lon"]
+
+    # Defining center and zoom parameters for map_object
+    if n_clicks > 0:
+        center = [alert_lat, alert_lon]
+        zoom = 9
+    else:
+        center = [46.5, 2]
+        zoom = 6
 
-    return markers
+    return center, zoom
 
 
 # ------------------------------------------------------------------------------
@@ -145,9 +206,10 @@ def build_alerts_map():
                         zoom=6,               # Determines the initial level of zoom around the center point
                         children=[
                             dl.TileLayer(id='tile_layer'),
-                            build_alerts_geojson(),
+                            build_departments_geojson(),
                             build_info_object(app_page='alerts'),
-                            build_alerts_markers()],
+                            build_sites_markers(),
+                            html.Div(id="live_alerts_marker")],
                         style=map_style,      # Reminder: map_style is imported from utils.py
                         id='map')
 

app/homepage.py

@@ -23,16 +23,42 @@
 # Importing plotly fig objects from graphs.py
 from graphs import generate_meteo_fig
 
+# Importing utils fetched API data
+from utils import build_live_alerts_metadata
+
 
 # ------------------------------------------------------------------------------
 # Before moving to the app layout
 
+#Fetching reusable alert metadata
+alert_metadata = build_live_alerts_metadata()
+if alert_metadata:
+    frame_url = alert_metadata["media_url"]
+
+
+# This function creates a radio button in order to simulate an alert event that will be later catched through the API
+def build_alert_radio_button():
+
+    alert_radio_button = dcc.RadioItems(
+        options=[
+            {'label': 'no alert', 'value': 1},
+            {'label': 'alert', 'value': 0},
+        ],
+        value=1,
+        labelStyle={'display': 'inline-block'},
+        id='alert_radio_button'
+    )
+
+    return alert_radio_button
+
+
 # The following block is used to determine what map styles (risks or alerts) we use for and enable the user to change it
 # This function creates the button that allows users to change the map style
 def build_map_style_button():
 
     button = html.Button(children='Afficher les niveaux de risques',
-                         id='map_style_button')
+                         id='map_style_button',
+                         className='btn btn-warning')
 
     return html.Center(button)
 
@@ -57,6 +83,63 @@ def choose_map_style(n_clicks):
     return button_content_map, map_object, slider
 
 
+#This function returns the user selection area in the left side bar
+def user_selection_area():
+
+    return [build_alert_radio_button(),
+            dcc.Markdown('---'),
+            html.H5(("Filtres Carte"), style={'text-align': 'center'}),  # Map filters added here
+            html.P(build_layer_style_button()),                          # Changes layer view style btn
+            dcc.Markdown('---'),
+            html.P(build_map_style_button()),                            # Changes map style btn
+            html.P(id="hp_slider"),                                      # Opacity sliders for risks map
+            html.P(id="hp_alert_frame_metadata")                         # Displays alert_frame and alert_metadata
+            ]
+
+
+# Displays alert_frame and metadata related to a specific alert_markers after a click on display_alert_frame_btn
+def display_alerts_frames(feature=None):
+
+    # Fetching alert status and reusable metadata
+    alert_metadata = build_live_alerts_metadata()
+    alert_lat = str(alert_metadata["lat"])
+    alert_lon = str(alert_metadata["lon"])
+    alert_frame = alert_metadata["media_url"]
+    alert_device = str(alert_metadata["device_id"])
+    alert_site = alert_metadata["site_name"]
+    alert_azimuth = alert_metadata["azimuth"]
+
+    frame_style = {'width': '50vh',
+                   'height': '35vh',
+                   'margin': 'auto',
+                   'display': 'block',
+                   'text-align': 'center',
+                   }
+
+    if feature is not None:
+        separator1 = dcc.Markdown('---')
+        frame_title = html.H5("Image de détéction", style={'text-align': 'center'})
+        alert_frame = html.Img(
+            id='alert_frame',
+            src=frame_url,
+            style=frame_style,)
+        separator2 = dcc.Markdown('---')
+        alert_metadata_title = html.H5("Données de détéction", style={'text-align': 'center'})
+        alert_metadata = html.Div(
+            id="alert_metadata_user_selection",
+            children=[
+                "Tour: {}".format(alert_site), html.Br(),
+                "Coordonnées de la tour: {}, {}".format(alert_lat, alert_lon), html.Br(),
+                "Id de caméra: {}".format(alert_device), html.Br(),
+                "Azimuth: {}".format(alert_azimuth)])
+
+        alert_frame_metadata = html.Div(
+            children=[separator1, frame_title, alert_frame, separator2, alert_metadata_title, alert_metadata])
+
+        return html.Div(alert_frame_metadata)
+    return ""
+
+
 # This function either displays or hides meteo graphs from graphs.py
 def meteo_graphs(display=False):
     if display is True:
@@ -80,52 +163,57 @@ def meteo_graphs(display=False):
 # Content and App layout
 # The following function is used in the main.py file to instantiate the layout of the homepage
 
+# Body container
+body = dbc.Container([
+    dbc.Row(
+        [dbc.Col(html.H1('Plateforme de Monitoring', style={'text-align': 'center'}), className="pt-4"),
+         ]),
+    dbc.Row(
+        [dbc.Col(
+            #side bar for the user to apply filter
+            user_selection_area(),
+            id='user_selection_column',
+            md=3),
+         dbc.Col(
+            # map object added here
+            html.Div(build_alerts_map(), id='hp_map'),
+            md=9)]
+    ),
+    # Instantiating meteo graphs, set to True to display them under the map, False to hide them
+    meteo_graphs(display=False)
+],
+    fluid=True,
+)
+
+
+# Gathering all these elements in a HTML Div and having it returned by the Homepage function
 def Homepage():
 
     # Body container
     body = dbc.Container([
         dbc.Row(
             [dbc.Col(html.H1('Plateforme de Monitoring', style={'text-align': 'center'}), className="pt-4"),
              ]),
+        dbc.Row(
+            [dbc.Col(id='live_alert_header_btn'),
+             ]),
         dbc.Row(
             [
                 dbc.Col(
-                    dcc.Dropdown(
-                        id='user_department_input',
-                        options=[
-                            {'label': 'Ardèche', 'value': 'Ardèche'},
-                            {'label': 'Gard', 'value': 'Gard'},
-                            {'label': 'Landes', 'value': 'Landes'}],
-                        placeholder="Départements"),
+                    user_selection_area(),
+                    id='user_selection_column',
                     md=3),
+                dbc.Col(
+                    # map object added here
+                    html.Div(build_alerts_map(), id='hp_map'),
+                    md=9)
             ]
         ),
-        dbc.Row(
-            [dbc.Col(
-                [
-                    dcc.Markdown('---'),
-                    # Map filters added here
-                    html.H5(("Filtres Carte"), style={'text-align': 'center'}),
-                    # Instantiating map layers button object from alerts.py
-                    html.P(build_layer_style_button()),
-                    dcc.Markdown('---'),
-                    # Instantiating map style button object
-                    html.P(build_map_style_button()),
-                    html.P(id="hp_slider"),
-                ],
-                md=3),
-             dbc.Col(
-                # Instantiating the alerts map object from alerts.py and setting it as the default map object
-                html.Div(build_alerts_map(), id='hp_map'),
-                md=9)]
-        ),
-        # Instantiating meteo graphs, set to True to display them under the map, False to hide them
+        # meteo graphs added here
         meteo_graphs(display=False)
     ],
         fluid=True,
     )
-
-    layout = html.Div([Navbar(),   # Instantiating navbar object from navbar.py
-                       body])
-
+    # Instantiating navbar object from navbar.py
+    layout = html.Div([Navbar(), body])
     return layout