Styling additions

CaSSAndRA/app.py

@@ -11,6 +11,7 @@
 frontend_logger.setLevel(logging.ERROR)
 
 # package imports
+import os
 import dash
 from dash import html, dcc
 import dash_bootstrap_components as dbc
@@ -29,29 +30,33 @@ def serve_layout():
             modalinfo.info,
             dash.page_container
             #footer
-        ]
-    )
+        ], className='d-flex flex-column h-100 w-100 fixed-top')
 
 def main() -> None:
     backendserver.start()
+    assets_path = os.getcwd() +'/src/assets'
 
     app = dash.Dash(
         __name__,
         use_pages=True,    # turn on Dash pages
         pages_folder='src/pages',
-        external_stylesheets=[
-            dbc.themes.MINTY,
-            dbc.icons.BOOTSTRAP
-        ],  # fetch the proper css items we want
         meta_tags=[
             {   # check if device is a mobile device. This is a must if you do any mobile styling
                 'name': 'viewport',
                 'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5' 
+            },{
+                'name':"apple-mobile-web-app-capable",
+                'content':"yes",
+            },{
+                'name':'theme-color' ,
+                'content':'#78c2ad'
             }
         ],
         suppress_callback_exceptions=True,
         prevent_initial_callbacks='initial_duplicate',
-        title='CASSANDRA'
+        title='CASSANDRA',
+        update_title = 'CASSANDRA updating...',
+        assets_folder=assets_path
     )
     app.layout = serve_layout   # set the layout to the serve_layout function
 

CaSSAndRA/src/assets/manifest.json

@@ -0,0 +1,14 @@
+{
+    "name": "CaSSAndRA",
+    "short_name": "CaSSAndRA",
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#78c2ad",
+    "description": "Cascaded Sunray Server And Rover Application",
+    "icons": [
+        {
+          "src": "/assets/favicon.ico",
+          "sizes": "512x512"
+        }
+    ]
+}

CaSSAndRA/src/assets/script.js

@@ -0,0 +1,4 @@
+var linkTag=document.createElement('link');
+linkTag.rel = "manifest"
+linkTag.href = "/assets/manifest.json"
+document.getElementsByTagName('head')[0].appendChild(linkTag);

CaSSAndRA/src/assets/style.css

@@ -48,3 +48,50 @@
 .button-group {
   margin-left: 10px;
 }
+
+
+/* necessary to be able to fill remaining space with map */
+#_pages_content,
+nav ~ div {
+  display: contents;
+}
+
+.user-select-none.svg-container {
+  height: unset !important;
+}
+
+/* keep buttons in navbar to the right */
+.navbar-collapse {
+  flex-grow: 0;
+}
+
+
+/* montserrat-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* montserrat-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  src: url('fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('fonts/montserrat-v25-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* montserrat-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+       url('fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

CaSSAndRA/src/components/mapping/buttons.py

@@ -3,19 +3,19 @@
 
 from .. import ids
 
-uploadsunrayfile = dbc.Button(size='lg', class_name='mt-1 bi bi-filetype-txt')
+uploadsunrayfile = dbc.Button(size='lg', class_name='mt-1 bi bi-filetype-txt', title="Upload Sunray File")
 
 okbuttonsunrayimport = dbc.Button('OK', id=ids.OKBUTTONSUNRAYIMPORT, class_name='ms-auto', n_clicks=0)
 
-saveimportedperimeter = dbc.Button(id=ids.BUTTONSAVEIMPORTEDPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-plus', n_clicks=0)
+saveimportedperimeter = dbc.Button(id=ids.BUTTONSAVEIMPORTEDPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-plus', n_clicks=0, title="Save imported Perimeter")
 
 okbuttonoverwriteperimter= dbc.Button('OK', id=ids.OKBUTTONOVERWRITEPERIMTER, class_name='ms-auto', n_clicks=0)
 
 okbuttonfigurefinished = dbc.Button('OK', id=ids.OKBUTTONFIGUREFINISHED, class_name='ms-auto', n_clicks=0)
 
-selectperimeter = dbc.Button(id=ids.BUTTONSELECTPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-download', n_clicks=0)
+selectperimeter = dbc.Button(id=ids.BUTTONSELECTPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-download', n_clicks=0, title="Use selected Perimeter")
 
-removeperimeter = dbc.Button(id=ids.BUTTONREMOVEPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-minus', n_clicks=0)
+removeperimeter = dbc.Button(id=ids.BUTTONREMOVEPERIMETER, size='lg', class_name='mt-1 bi bi-cloud-minus', n_clicks=0, title="Remove Perimeter")
 
 okbuttonselectedperimeter = dbc.Button('OK', id=ids.OKBUTTONSELECTEDPERIMETER, class_name='ms-auto', n_clicks=0)
 

CaSSAndRA/src/components/mapping/chooseperimeter.py

@@ -16,8 +16,8 @@
                                 dbc.Col(buttons.removeperimeter)   
                             ], justify='center'),                      
                         ]), 
-                    ], className='text-center m-1 w-90')
-                ])
+                    ], className='text-center my-2')
+                ],xs=12, sm=6)
 
 @callback(Output(ids.DROPDOWNCHOOSEPERIMETER, 'options'),
           Output(ids.DROPDOWNCHOOSEPERIMETER, 'value'),

CaSSAndRA/src/components/mapping/uploadsunray.py

@@ -18,8 +18,8 @@
                             ], justify='center'),
 
                         ]), 
-                    ], className='text-center m-1 w-90')
-                ])
+                    ], className='text-center my-2')
+                ],xs=12, sm=6)
 
 
 @callback(Output(ids.MODALSUNRAYIMPORT, 'is_open'),

CaSSAndRA/src/components/modalinfo.py

@@ -24,8 +24,7 @@ def toggle_modal(n_clicks_bmi: int, modal_is_open: bool) -> bool:
 @callback(Output(ids.MODALINFOBODY, 'children'),
           [Input(ids.INTERVAL, 'n_intervals')])
 def update_modal_body(n_intervals: int) -> html.Div:
-
-    return html.Div([
+    return dbc.Container([
             dbc.Row([
                 dbc.Col([
                     dbc.Card([
@@ -68,6 +67,6 @@ def update_modal_body(n_intervals: int) -> html.Div:
 
                 )
             ]),
-        ])
+        ],fluid=True)
 
 

CaSSAndRA/src/components/navbar.py

@@ -6,26 +6,40 @@
 from . import ids
 
 # component
-navbar = dbc.NavbarSimple(
-        children=[
-            dbc.NavItem(dbc.NavLink('Home', href='/')),
-            dbc.DropdownMenu(
-                children=[
-                    #dbc.DropdownMenuItem('More pages', header=True),
-                    #dbc.DropdownMenuItem('Taskplanner', href='/taskplanner'),
-                    #dbc.DropdownMenuItem('Statistik', href='/stats'),
-                    dbc.DropdownMenuItem('Mapping', href='/mapping'),
-                    dbc.DropdownMenuItem('Settings', href='/settings'),
-                ],
-                nav=True,
-                in_navbar=True,
-                label="More",
+navbar = dbc.Navbar(
+    dbc.Container(
+        [
+            dbc.NavbarBrand("CaSSAndRA",href="/"),
+            dbc.Nav(dbc.NavItem([
+                dbc.Button(id=ids.OPEN_OFFCANVAS, n_clicks=0, size='lg',class_name='bi bi-joystick', title='Open Remote Control'),
+                dbc.Button(id=ids.BUTTONOPENMODALINFO, n_clicks=0, size='lg',class_name='bi bi-info-square ms-3 me-5', title='Open Infobox')
+            ]), className="ms-auto"),
+
+            dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
+            dbc.Collapse(
+                dbc.Nav([
+                    dbc.NavItem(dbc.NavLink('Mapping', href='/mapping')),
+                    dbc.NavItem(dbc.NavLink('Settings', href='/settings')),
+                    #dbc.NavItem(dbc.NavLink('Taskplanner', href='/taskplanner')),
+                    #dbc.NavItem(dbc.NavLink('Statistik', href='/stats')),
+                ]),
+            id="navbar-collapse",
+            is_open=False,
+            navbar=True,
             ),
-            dbc.Button(id=ids.OPEN_OFFCANVAS, n_clicks=0, size='lg',class_name='bi bi-joystick ms-3'),
-            dbc.Button(id=ids.BUTTONOPENMODALINFO, n_clicks=0, size='lg',class_name='bi bi-info-square ms-3')
-        ],
-        brand="CaSSAndRA",
-        brand_href="/",
-        color="primary",
-        dark=True,
-    )
+        ]),
+    className="mb-2",
+    color="primary",
+    dark=True,
+)
+
+# add callback for toggling the collapse on small screens
+@callback(
+    Output("navbar-collapse", "is_open"),
+    [Input("navbar-toggler", "n_clicks")],
+    [State("navbar-collapse", "is_open")],
+)
+def toggle_navbar_collapse(n, is_open):
+    if n:
+        return not is_open
+    return False

CaSSAndRA/src/components/offcanvas.py

@@ -28,7 +28,8 @@
                         dbc.Button(id=ids.BUTTONFAN, 
                                    class_name='bi bi-fan mt-4', 
                                    color='info', 
-                                   size='lg'
+                                   size='lg',
+                                   title="Start mowing"
                         ), class_name='text-center'
                     ),
                 ),
@@ -37,21 +38,24 @@
                         dbc.Button(id=ids.BUTTONSUNRAYOFF, 
                                    class_name='bi bi-lightbulb-off mt-4', 
                                    color='danger', 
-                                   size='lg'
+                                   size='lg',
+                                   title="Shutdown Sunray"
                         ), class_name='text-center'
                     ),
                     dbc.Col(
                         dbc.Button(id=ids.BUTTONSUNRAYREBOOT, 
                                    class_name='bi bi-bootstrap-reboot mt-4', 
                                    color='warning', 
-                                   size='lg'
+                                   size='lg',
+                                   title="Reboot Sunray"
                         ), class_name='text-center'
                     ),
                     dbc.Col(
                         dbc.Button(id=ids.BUTTONGPSREBOOT, 
                                    class_name='bi bi-stars mt-4', 
                                    color='info', 
-                                   size='lg'
+                                   size='lg',
+                                   title="Reboot GPS"
                         ), class_name='text-center'
                     ),
                     #html.Div(id='offcanvas-hidden')

CaSSAndRA/src/components/state/buttongroupcontrol.py

@@ -7,21 +7,21 @@
 from src.backend.data.roverdata import robot
 from src.backend.data.mapdata import current_map
 
-buttonhome = dbc.Button(id=ids.BUTTONHOME, size='lg',class_name='mx-1 mt-1 bi bi-house', disabled=False)
+buttonhome = dbc.Button(id=ids.BUTTONHOME, size='lg',class_name='mx-1 mt-1 bi bi-house', title='Go Home (dock)', disabled=False)
 
-buttonmowall = dbc.Button(id=ids.BUTTONMOWALL, size='lg', class_name='me-1 mt-1 bi bi-map-fill', disabled=False)
+buttonmowall = dbc.Button(id=ids.BUTTONMOWALL, size='lg', class_name='me-1 mt-1 bi bi-map-fill', title='Mow All', disabled=False)
 
-buttongoto = dbc.Button(id=ids.BUTTONGOTO, size='lg', class_name='me-1 mt-1 bi bi-geo-alt-fill', disabled=False)
+buttongoto = dbc.Button(id=ids.BUTTONGOTO, size='lg', class_name='me-1 mt-1 bi bi-geo-alt-fill', title='Select GoTo', disabled=False)
 
-buttonzoneselect = dbc.Button(id=ids.BUTTONZONESELECT, size='lg', class_name='me-1 mt-1 bi bi-pin-map-fill', disabled=False)
+buttonzoneselect = dbc.Button(id=ids.BUTTONZONESELECT, size='lg', class_name='me-1 mt-1 bi bi-pin-map-fill', title='Select Zone to mow', disabled=False)
 
-buttoncancel = dbc.Button(id=ids.BUTTONCANCEL, size='lg', class_name='me-1 mt-1 bi bi-x-square-fill', disabled=False)
+buttoncancel = dbc.Button(id=ids.BUTTONCANCEL, size='lg', class_name='me-1 mt-1 bi bi-x-square-fill', title='Cancel', disabled=False)
 
-buttonmowsettings = dbc.Button(id=ids.BUTTONMOWSETTINGS, size='lg', class_name='me-1 mt-1 bi bi-gear-fill', disabled=False)
+buttonmowsettings = dbc.Button(id=ids.BUTTONMOWSETTINGS, size='lg', class_name='me-1 mt-1 bi bi-gear-fill',title='Mower Settings', disabled=False)
 
-buttongo = dbc.Button(id=ids.BUTTONGO, size='lg', class_name='mx-1 mt-1 bi bi-play-fill', disabled=False)
+buttongo = dbc.Button(id=ids.BUTTONGO, size='lg', class_name='mx-1 mt-1 bi bi-play-fill', title='Start Mowing', disabled=False)
 
-buttonstop = dbc.Button(id=ids.BUTTONSTOP, size='lg', class_name='mx-1 mt-1 bi bi-stop-fill', color='danger', disabled=False)
+buttonstop = dbc.Button(id=ids.BUTTONSTOP, size='lg', class_name='mx-1 mt-1 bi bi-stop-fill', color='danger', title='STOP', disabled=False)
 
 #Create state of buttons
 @callback(Output(ids.BUTTONHOME, 'active'),

CaSSAndRA/src/pages/mapping.py

@@ -14,39 +14,27 @@
 )
 
 def update_layout() -> html.Div:
-    return html.Div([
+    return dbc.Container([
+            dbc.Row([dcc.Graph(ids.MAPPINGMAP)], className='map-graph flex-fill'),
             dbc.Row([
                 dbc.Col([
-                    html.Div([dcc.Graph(ids.MAPPINGMAP)], className='map-graph'),
-                    dbc.Row([
-                        html.Div([
-                            buttongroupcontrol.buttonperimeteradd,
-                            buttongroupcontrol.buttonperimeterdiff,
-                            buttongroupcontrol.buttonhomeadd,
-                            buttongroupcontrol.buttonaddnewpoint,
-                            buttongroupcontrol.buttondeletelastpoint,
-                            buttongroupcontrol.buttonfinishfigure,
-                            ], className='text-center'),    
-                    ]),
-                    dbc.Row([
-                        dbc.Col([
-                            html.Div([
-                                chooseperimeter.chooseperimeter,
-                        ], className='text-center'),
-                        ]),
-                        dbc.Col([
-                            html.Div([
-                                uploadsunray.uploadsunray,
-                            ], className='text-center'),
-                        ]),
-                    ], justify='evenly'),
-                ], xs=12, sm=6, lg=6),
-                modal.sunrayimportstatus,
-                modal.overwriteperimter,
-                modal.figurefinished,
-                modal.selectperimeter,
-                html.Div(id=ids.MAPPINGHIDDEN, style={'display': 'none'}),
-                ])
-            ])
+                        buttongroupcontrol.buttonperimeteradd,
+                        buttongroupcontrol.buttonperimeterdiff,
+                        buttongroupcontrol.buttonhomeadd,
+                        buttongroupcontrol.buttonaddnewpoint,
+                        buttongroupcontrol.buttondeletelastpoint,
+                        buttongroupcontrol.buttonfinishfigure,
+                        ], className='text-center d-flex justify-content-between', xs=12, md=6, lg=6),
+            ]),
+            dbc.Row([
+                chooseperimeter.chooseperimeter,
+                uploadsunray.uploadsunray,
+            ], ),
+            modal.sunrayimportstatus,
+            modal.overwriteperimter,
+            modal.figurefinished,
+            modal.selectperimeter,
+            html.Div(id=ids.MAPPINGHIDDEN, style={'display': 'none'}),
+            ],fluid=True,className="mb-2 d-flex h-100 flex-column")
 
-layout = update_layout()
+layout = update_layout()