Tablet and Phone Interface Improvements

.prettierrc

@@ -5,5 +5,6 @@
     "printWidth": 80,
     "trailingComma": "es5",
     "semi": true,
-    "endOfLine": "lf"
+    "endOfLine": "lf",
+    "insertFinalNewline": true
 }

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "prettier.requireConfig": true
+    "prettier.requireConfig": true,
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

documentation/development.md

@@ -372,7 +372,7 @@ export const HomeTheRobot = (props: { hideLabels: boolean }) => {
         <React.Fragment>
             <div id="home-the-robot-container">
                 <p>Robot is not homed. Please drive the robot to a safe position and press the home button.</p>
-                <button onClick={() => { functions.Home(); }}>
+                <button onPointerDown={() => { functions.Home(); }}>
                     <span hidden={props.hideLabels}>Home</span>
                     <HomeIcon />
                 </button>
@@ -382,7 +382,7 @@ export const HomeTheRobot = (props: { hideLabels: boolean }) => {
 };
 ```
 
-Notice that we import the instance of `homeTheRobotFunctionProvider` that was created in [`index.tsx`](#indextsx-1). Further notice that we define the set of functions required for the component in an enum called `HomeTheRobotFunction`. This enables us to map the button's `onClick` callback to the `HomeTheRobotFunction.Home` method. The function provider uses the same enum to map a method that gets called when the button is clicked. The function provider is defined in [`HomeTheRobotFunctionProvider`](#function_providers).
+Notice that we import the instance of `homeTheRobotFunctionProvider` that was created in [`index.tsx`](#indextsx-1). Further notice that we define the set of functions required for the component in an enum called `HomeTheRobotFunction`. This enables us to map the button's `onPointerDown` callback to the `HomeTheRobotFunction.Home` method. The function provider uses the same enum to map a method that gets called when the button is clicked. The function provider is defined in [`HomeTheRobotFunctionProvider`](#function_providers).
 
 We dress up the HTML in this component with a stylesheet defined in `src/pages/operator/css/HomeTheRobot.css`.
 

eslint.config.mjs

@@ -51,6 +51,7 @@ export default defineConfig([
         },
 
         rules: {
+            "eol-last": ["error", "always"],
             "prettier/prettier": [
                 "error",
                 {},

launch/web_interface.launch.py

@@ -487,20 +487,20 @@ def generate_launch_description():
     )
     ld.add_action(navigation_bringup_launch)
 
-    ld.add_action(
-        ExecuteProcess(
-            cmd=[
-                [
-                    FindExecutable(name="ros2"),
-                    " service call ",
-                    "/reinitialize_global_localization ",
-                    "std_srvs/srv/Empty ",
-                    '"{}"',
-                ]
-            ],
-            shell=True,
-        ),
-    )
+    # ld.add_action(
+    #     ExecuteProcess(
+    #         cmd=[
+    #             [
+    #                 FindExecutable(name="ros2"),
+    #                 " service call ",
+    #                 "/reinitialize_global_localization ",
+    #                 "std_srvs/srv/Empty ",
+    #                 '"{}"',
+    #             ]
+    #         ],
+    #         shell=True,
+    #     ),
+    # )
 
     ld.add_action(
         ExecuteProcess(

src/pages/home/tsx/components/ForgotPassword.tsx

@@ -49,7 +49,7 @@ export const ForgotPassword = (props: {
                 />
             </DialogContent>
             <DialogActions sx={{ pb: 3, px: 3 }}>
-                <Button onClick={props.handleClose}>Cancel</Button>
+                <Button onPointerDown={props.handleClose}>Cancel</Button>
                 <Button variant="contained" type="submit">
                     Continue
                 </Button>

src/pages/home/tsx/components/LoginView.tsx

@@ -213,7 +213,7 @@ export const LoginView = (props) => {
                             <Link
                                 component="button"
                                 type="button"
-                                onClick={handleClickOpen}
+                                onPointerDown={handleClickOpen}
                                 variant="body2"
                                 sx={{ alignSelf: "baseline" }}
                             >
@@ -254,7 +254,7 @@ export const LoginView = (props) => {
                         type="submit"
                         fullWidth
                         variant="contained"
-                        onClick={validateInputs}
+                        onPointerDown={validateInputs}
                     >
                         Sign in
                     </Button>

src/pages/home/tsx/components/SideBySideView.tsx

@@ -36,7 +36,7 @@ export const SideBySideView = (props) => {
                     >
                         Stretch Web Teleop
                     </Typography>
-                    <Button color="inherit" onClick={handleLogout}>
+                    <Button color="inherit" onPointerDown={handleLogout}>
                         Logout
                     </Button>
                 </Toolbar>
@@ -80,7 +80,7 @@ export const SideBySideView = (props) => {
                     >
                         Stretch Web Teleop
                     </Typography>
-                    <Button color="inherit" onClick={handleLogout}>
+                    <Button color="inherit" onPointerDown={handleLogout}>
                         Logout
                     </Button>
                 </Toolbar>

src/pages/operator/css/BatteryBar.css

@@ -0,0 +1,37 @@
+.bar {
+    width: 100%;
+    height: 0.5rem;
+    background-color: #436fb7;
+    display: flex;
+    margin-top: 3px;
+}
+
+.barsContainer {
+    width: 2rem;
+    height: 4rem;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+}
+
+.batteryBar {
+    height: 4rem;
+    position: absolute;
+}
+
+.batteryBarContainer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 1200px) {
+    .barsContainer {
+        width: 1.5rem;
+        height: 3rem;
+    }
+
+    .batteryBar {
+        height: 3rem;
+    }
+}

src/pages/operator/css/BatteryGuage.css

@@ -1,3 +1,11 @@
+.batteryGaugeContainer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 1rem 1rem 0.5rem;
+}
+
 .bar {
     width: 100%;
     height: 15px;
@@ -15,45 +23,38 @@
 }
 
 .batteryGauge {
-    height: 100px;
-    /* position: absolute; */
+    padding: 0.9rem 0 0;
     width: 100%;
-    padding: 0px 10px 10px 10px;
+    height: 50px;
 }
 
 .green {
-    filter: invert(17%) sepia(15%) saturate(6070%) hue-rotate(89deg)
-        brightness(75%) contrast(108%);
+    filter: invert(17%) sepia(15%) saturate(6070%) hue-rotate(89deg) brightness(75%) contrast(108%);
 }
 
 .yellow-green {
-    filter: brightness(70%) saturate(100%) invert(0%) sepia(28%) saturate(4155%)
-        hue-rotate(56deg) contrast(119%);
+    filter: brightness(70%) saturate(100%) invert(0%) sepia(28%) saturate(4155%) hue-rotate(56deg) contrast(119%);
 }
 
 .yellow {
-    filter: brightness(90%) saturate(100%) invert(0%) sepia(28%) saturate(4155%)
-        hue-rotate(6deg) contrast(119%);
+    filter: brightness(90%) saturate(100%) invert(0%) sepia(28%) saturate(4155%) hue-rotate(6deg) contrast(119%);
 }
 
 .orange {
-    filter: brightness(70%) saturate(100%) invert(10%) sepia(28%)
-        saturate(4155%) hue-rotate(6deg) contrast(119%);
+    filter: brightness(70%) saturate(100%) invert(10%) sepia(28%) saturate(4155%) hue-rotate(6deg) contrast(119%);
 }
 
 .orange-red {
-    filter: brightness(50%) saturate(100%) invert(10%) sepia(28%)
-        saturate(4155%) hue-rotate(6deg) contrast(119%);
+    filter: brightness(50%) saturate(100%) invert(10%) sepia(28%) saturate(4155%) hue-rotate(6deg) contrast(119%);
 }
 
 .red {
-    filter: brightness(30%) saturate(100%) invert(10%) sepia(28%)
-        saturate(4155%) hue-rotate(346deg) contrast(119%);
+    filter: brightness(30%) saturate(100%) invert(10%) sepia(28%) saturate(4155%) hue-rotate(346deg) contrast(119%);
 }
 
-.batteryGaugeContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    max-height: 90%;
+.text-battery-gauge {
+    padding: 1rem 0 0;
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-align: center;;
 }

src/pages/operator/css/ButtonGrid.css

@@ -1,43 +1,77 @@
 .button-grid {
-    flex: 2;
+    flex: 1;
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(4, auto 1fr);
+    row-gap: 0.15rem;
+    column-gap: 0.15rem;
+    /* grid-template-columns: repeat(4, 1fr); */
+    /* grid-template-rows: repeat(3, 0fr); */
     grid-template-areas:
-        "header0 header0 header0 header0 header0 header0"
-        ". b0 b1 b2 b3 ."
-        "header1 header1 header1 header1 header1 header1"
-        ". b4 b5 b6 b7 ."
-        "header2 header2 header2 header2 header2 header2"
-        "b8 b9 b10 b11 b12 b13"
-        "header3 header3 header3 header3 header3 header3"
-        ". . b14 b15 . .";
-
-    padding: 0.4rem;
+        "b0 b0 b0 b0"
+        "b2 b2 b3 b3"
+        "b1 b1 b1 b1"
+        "a0 a0 a0 a0"
+        "b4 b4 b4 b4"
+        "b6 b6 b7 b7"
+        "b5 b5 b5 b5"
+        "a1 a1 a1 a1"
+        "b12 b10 b10 b13"
+        "b12 b14 b15 b13"
+        "b8 b14 b15 b9"
+        "b8 b11 b11 b9";
+    /*
+         "header0 header0 header0 header0 header0 header0"
+         "b0 b0 b1 b1 b2 b3"
+         "header1 header1 header1 header1 header1 header1"
+         "b4 b5 b6 b6 b7 b7"
+         "header2 header2 header2 header2 header2 header2"
+         "b8 b9 b10 b11 b12 b13"
+         "header3 header3 header3 header3 header3 header3"
+         "b14 b14 b14 b15 b15 b15" */
+    padding: 0.6rem;
     position: relative;
     z-index: 1;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); */
+}
+
+@media screen and (orientation: landscape) and (max-device-width: 1200px) {
+    .button-grid button {
+        min-width: fit-content;
+        padding: 0rem 0.5rem 0rem 0.5rem;
+    }
 }
 
+
 .button-grid::after {
     border-radius: var(--radius);
 }
 
 .button-grid p {
+    font-size: x-large;
     text-align: center;
-    margin: 1.5rem 0 0.5rem 0;
+    margin: 0rem;
 }
 
 .button-grid p:first-of-type {
     text-align: center;
-    margin-top: 0.5rem;
+    margin-bottom: 0.4rem;
+}
+
+.button-grid p:last-of-type {
+    text-align: center;
+    margin-top: 0.4rem;
 }
 
 .button-grid button {
-    width: 90%;
-    height: 4rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+    width: 100%;
+    border-radius: 0px;
+    min-height: 2.8rem;
+    height: 100%;
     justify-self: center;
     align-self: center;
+    background-color: gray;
+    color: white;
 }
 
 .button-grid button.active {
@@ -49,10 +83,12 @@
 }
 
 .button-grid button.limit {
-    background-color: red;
+    background-color: #fc9696;
+    color: black;
 }
 
 .button-grid-bkg-color {
     grid-column: 1 / 7;
     height: 5rem;
+    border: 2px solid black;
 }

src/pages/operator/css/ButtonPad.css

@@ -42,22 +42,24 @@
 /* Settings for the buttons on the button pad *********************************/
 
 /*When hovering over a child element of an svg*/
-.button-pads path:hover {
-    fill-opacity: 30%;
+@media (hover: hover) {
+    .button-pads path:hover {
+        fill-opacity: 30%;
+    }
 }
 
 @media (hover: none) {
-    .button-pads path.inactive:hover + image {
+    .button-pads path.inactive:hover+image {
         filter: none !important;
     }
 }
 
 .button-pads image {
     pointer-events: none;
+    touch-action: none;
 }
 
-/* Button pad <image> gets saturated while hovering */
-.button-pads path.inactive:hover + image {
+.button-pads path.inactive:hover+image {
     filter: brightness(50%) sepia(100%) saturate(10000%) hue-rotate(194deg);
 }
 
@@ -98,6 +100,7 @@
 /* Disable hover actions */
 .button-pads.customizing path {
     pointer-events: none;
+    touch-action: none;
 }
 
 .button-pads.selected {