Commit a3a75828 authored by Scott Ames's avatar Scott Ames
Browse files

GUI done

parent 0b255a82

package.json

+1 −0
Original line number Diff line number Diff line
@@ -69,6 +69,7 @@ 
  "dependencies": {

    "@material-ui/core": "^4.9.0",

    "@material-ui/icons": "^4.5.1",

    "@material-ui/lab": "^4.0.0-alpha.41",

    "leaflet": "^1.6.0",

    "proj4": "^2.6.0",

    "proj4leaflet": "^1.0.2",

src/components/container/ConsoleContainer.jsx

+10 −57
Original line number Diff line number Diff line 
import React from "react";

import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";

import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";

import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";

import Grid from "@material-ui/core/Grid";

import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

import { makeStyles } from "@material-ui/core/styles";

import Paper from "@material-ui/core/Paper";

import Container from "@material-ui/core/Container";



const useStyles = makeStyles(theme => ({

  root: {

    width: 800,

    maxWidth: 800,

    height: 100,

    padding: theme.spacing(0.75)

    width: "100%"

  },

  paper: {

    maxWidth: "100%",

    maxHeight: 100,

    background: "#DCEED1",

    background: "linear-gradient(to right, #E2E2E2, #DCEED1)",

    background: "linear-gradient(to right, #E2E2E2, #DCEED1)"

  },

  grid: {

    maxHeight: 100,

    width: "inherit"

  consappbar: {

    maxWidth: 800,

    height: 100,

    width: "auto"

  }

}));



export default function ConsoleContainer(props) {

  const classes = useStyles();

  return (

    <Container className={classes.root}>

      <Paper elevation={10} className={classes.paper}>

        <Grid container justify="space-evenly" spacing={1}>

          <Grid

            className={classes.grid}

            container

            item

            xs={1}

            justify="space-evenly"

            direction="column"

            alignItems="flex-start"

          >

            <ConsoleProjectionButtons />

          </Grid>

          <Grid

            container

            item

            justify="space-evenly"

            direction="column"

            className={classes.grid}

            xs={3}

            alignItems="center"

          >

            <ConsoleTargetInfo targetName="Mars" />

          </Grid>

          <Grid

            container

            item

            className={classes.grid}

            xs={7}

            justify="space-evenly"

            alignItems="flex-end"

            spacing={1}

          >

            <ConsoleLonLatSelects />

          </Grid>

        </Grid>

      </Paper>

    </Container>

    <div className={classes.root}>

      <ConsoleAppBar className={classes.consappbar} />

    </div>

  );

}

src/components/presentational/ConsoleAppBar.jsx

0 → 100644
+48 −0
Original line number Diff line number Diff line 
import React from "react";

import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";

import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";

import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";

import AppBar from "@material-ui/core/AppBar";

import Toolbar from "@material-ui/core/Toolbar";

import Grid from "@material-ui/core/Grid";

import { fade, makeStyles } from "@material-ui/core/styles";



const useStyles = makeStyles(theme => ({

  root: {

    height: 100,

    width: "100%"

  },

  appbar: {

    background: "#d6ddbc",

    background: "-webkit-linear-gradient(to right, #d6ddbc, #bcddca)",

    background: "linear-gradient(to right, #d6ddbc, #bcddca)"

  },

  toolbar: {

    height: "100%",

    maxWidth: 800,

    width: "auto",

    padding: 0

  },

  grid: {

    maxWidth: 800,

    height: 100

  }

}));



export default function ConsoleAppBar(props) {

  const classes = useStyles();



  return (

    <div className={classes.root}>

      <AppBar className={classes.appbar} position="static" color="inherit">

        <Toolbar className={classes.toolbar}>

          <Grid className={classes.grid} container>

            <ConsoleProjectionButtons />

            <ConsoleTargetInfo targetName="Mars" />

            <ConsoleLonLatSelects />

          </Grid>

        </Toolbar>

      </AppBar>

    </div>

  );

}

src/components/presentational/ConsoleLonLatSelects.jsx

+189 −33
Original line number Diff line number Diff line 
import React from "react";

import Grid from "@material-ui/core/Grid";

import { makeStyles } from "@material-ui/core/styles";

import FormControl from "@material-ui/core/FormControl";

import Select from "@material-ui/core/Select";

import MenuItem from "@material-ui/core/MenuItem";

import { fade, makeStyles, withStyles } from "@material-ui/core/styles";

import AutorenewIcon from "@material-ui/icons/Autorenew";

import AddBoxIcon from "@material-ui/icons/AddBoxOutlined";

import ExposureIcon from "@material-ui/icons/Exposure";

import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";

import ToggleButton from "@material-ui/lab/ToggleButton";

import Typography from "@material-ui/core/Typography";

import Tooltip from "@material-ui/core/Tooltip";

import Zoom from "@material-ui/core/Zoom";



const useStyles = makeStyles({

const useStyles = makeStyles(theme => ({

  grid: {

    maxHeight: "100%",

    width: "inherit",

    margin: "auto"

  },

  buttons: {

    backgroundColor: "#afafef",

    width: 120

  flip: {

    transform: "scaleY(-1)"

  },

  oval: {

    width: 21,

    height: 15,

    borderRadius: "50%",

    border: "2px solid",

    background: "transparent",

    marginRight: 1,

    marginBottom: 3

  },

  circle: {

    width: 15,

    height: 15,

    borderRadius: "50%",

    border: "2px solid",

    background: "transparent",

    marginRight: 1,

    marginBottom: 3

  }

}));



const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

});

}))(Tooltip);



const StyledToggleButton = withStyles(theme => ({

  root: {

    color: fade("#022", 0.5),

    background: fade("#EFE6EE", 0.5),

    "&:hover": {

      backgroundColor: fade("#dce7b2", 0.99)

    },

    "&$selected": {

      color: "#022",

      backgroundColor: "#bcd6dd",

      "&:hover": {

        backgroundColor: "#bcd6dd",

        border: `1px solid ${fade(theme.palette.action.active, 0.12)}`

      }

    }

  },

  selected: {

    color: "#022",

    backgroundColor: "#bcd6dd"

  }

}))(ToggleButton);



export default function ConsoleLonLatSelects(props) {

  const [posEastWest, setPosEastWest] = React.useState("east");

  const [coordSystem, setCoordSystem] = React.useState("ocentric");

  const [lonRange, setLonRange] = React.useState(180);



  const handlePosEastWest = (event, newPosEastWest) => {

    if (newPosEastWest != null) {

      setPosEastWest(newPosEastWest);

    }

  };



  const handleCoordSystem = (event, newCoordSystem) => {

    if (newCoordSystem != null) {

      setCoordSystem(newCoordSystem);

    }

  };



  const handleLonRange = (event, newLonRange) => {

    if (newLonRange != null) {

      setLonRange(newLonRange);

    }

  };



  const classes = useStyles();



  return (

    <React.Fragment>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-ocentric-ographic-select" defaultValue="ocentric">

            <MenuItem value="ocentric">Planetocentric</MenuItem>

            <MenuItem value="ographic">Planetographic</MenuItem>

          </Select>

        </FormControl>

    <Grid

      container

      item

      className={classes.grid}

      justify="space-evenly"

      alignItems="flex-end"

      wrap="nowrap"

      xs={9}

    >

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either positive east or positive west longitude

              reporting.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={posEastWest}

              onChange={handlePosEastWest}

            >

              <StyledToggleButton value="east">

                <AutorenewIcon className={classes.flip} />

                <Typography>East</Typography>

              </StyledToggleButton>

              <StyledToggleButton value="west">

                <AutorenewIcon />

                <Typography>West</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-latititude-select" defaultValue="180">

            <MenuItem value={180}>-180&deg; to 180&deg;</MenuItem>

            <MenuItem value={360}>0&deg; to 360&deg;</MenuItem>

          </Select>

        </FormControl>

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either a planetocentric or planetographic coordinate

              system.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={coordSystem}

              onChange={handleCoordSystem}

            >

              <StyledToggleButton value="ocentric">

                <span className={classes.circle} />

                <Typography>centric</Typography>

              </StyledToggleButton>

              <StyledToggleButton value="ographic">

                <span className={classes.oval} />

                <Typography>graphic</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either -180&deg; to 180&deg; or 0&deg; to 360&deg;

              longitude range.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={lonRange}

              onChange={handleLonRange}

            >

              <StyledToggleButton value={180}>

                <ExposureIcon />

                <Typography>180&deg;</Typography>

              </StyledToggleButton>

              <StyledToggleButton value={360}>

                <AddBoxIcon />

                <Typography>360&deg;</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

      <Grid className={classes.grid} item xs>

        <FormControl>

          <Select id="console-ocentric-ographic-select" defaultValue="east">

            <MenuItem value="east">Positive East</MenuItem>

            <MenuItem value="west">Positive West</MenuItem>

          </Select>

        </FormControl>

    </Grid>

    </React.Fragment>

  );

}

src/components/presentational/ConsoleProjectionButtons.jsx

+55 −28
Original line number Diff line number Diff line 
import React from "react";

import Grid from "@material-ui/core/Grid";

import ButtonBase from "@material-ui/core/ButtonBase";

import ButtonGroup from "@material-ui/core/ButtonGroup";

import { makeStyles } from "@material-ui/core/styles";

import northPolar from "../../assets/img/NorthPolar.png";

import simpleCylindrical from "../../assets/img/SimpleCylindrical.png";
@@ -8,42 +9,68 @@ import southPolar from "../../assets/img/SouthPolar.png"; 


const useStyles = makeStyles({

  img: {

    maxWidth: "100%",

    maxHeight: "auto",

    margin: "auto",

    display: "block"

    width: 31,

    height: 31,

    paddingBottom: 3

  },

  image: {

    width: 28,

    height: 28

  button: {

    width: 32,

    height: 32,

    "&:active": {

      background: "yellow"

    },

    "&:hover, &$focusVisible": {

      border: "2px orange solid",

      borderRadius: "15%",

      borderStyle: "outset"

    }

  },

  grid: {

    maxWidth: 40,

    width: "100%",

    height: "100%"

  },

  focusVisible: {}

});



export default function ConsoleProjectionButtons(props) {

  const classes = useStyles();



  return (

    <React.Fragment>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

    <Grid

      className={classes.grid}

      container

      item

      direction="column"

      justify="center"

    >

      <Grid item>

        <ButtonBase

          focusRipple

          className={classes.button}

          focusVisibleClassName={classes.focusVisible}

        >

          <img className={classes.img} src={northPolar} />

        </ButtonBase>

        </div>

      </Grid>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

      <Grid item>

        <ButtonBase

          focusRipple

          className={classes.button}

          focusVisibleClassName={classes.focusVisible}

        >

          <img className={classes.img} src={simpleCylindrical} />

        </ButtonBase>

        </div>

      </Grid>

      <Grid item xs>

        <div className={classes.image}>

          <ButtonBase>

      <Grid item>

        <ButtonBase

          focusRipple

          className={classes.button}

          focusVisibleClassName={classes.focusVisible}

        >

          <img className={classes.img} src={southPolar} />

        </ButtonBase>

        </div>

      </Grid>

    </React.Fragment>

    </Grid>

  );

}