Skip to content

Commit

Permalink
Merge pull request #9 from TFD1992/feature/TopbarFix
Browse files Browse the repository at this point in the history 
Feature/topbar fix
  • Loading branch information
@cioddi
cioddi committed Feb 27, 2024
2 parents 79d0a01 + 7c0d52a commit a53eb63
Show file tree
Hide file tree
Showing 6 changed files with 219 additions and 191 deletions.
4 changes: 4 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.css-tjahdp-MuiPaper-root-MuiAppBar-root{
background-color: #fafafa !important
}

/**
* #root {
background-color: #000;
Expand Down
28 changes: 14 additions & 14 deletions src/applications/MlLaermkarte/MlLaemkarte.meta.json
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"name": "MlLaermkarte",
"title": "Noise map of Bonn",
"description": "",
"i18n": {
"de": {
"title": "Lärmkarte von Bonn",
"description": ""
}
},
"tags": [],
"category": "",
"type": "application",
"components": ["MlFillExtrusionLayer", "MlCameraFollowPath"],
"price": 12000
"name": "MlLaermkarte",
"title": "Noise map of Bonn",
"description": "A WebGis application providing a detailed visualisation of the noise level within different parts of the former german capital",
"i18n": {
"de": {
"title": "Lärmkarte von Bonn",
"description": "Eine WebGis Anwendung, die den Lautstärkepegel in Bonn grafisch darstellt"
}
},
"tags": [],
"category": "",
"type": "application",
"components": ["MlFillExtrusionLayer", "MlCameraFollowPath"],
"price": 12000
}
26 changes: 13 additions & 13 deletions src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.meta.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"name": "MlDeckGlTerrainLayer",
"title": "3D topographical layer",
"description": "",
"i18n": {
"de": {
"title": "3D Topo Ebene",
"description": ""
}
},
"tags": ["Map add-on"],
"category": "add-ons",
"type": "component",
"price": 5000
"name": "MlDeckGlTerrainLayer",
"title": "3D topographical layer",
"description": "Move along a Camera path through a 3-dimensional Layer",
"i18n": {
"de": {
"title": "3D Topo Ebene",
"description": "Verfolgt eine Kameraroute in einer dreidimensionalen Ebene"
}
},
"tags": ["Map add-on"],
"category": "add-ons",
"type": "component",
"price": 5000
}
316 changes: 165 additions & 151 deletions src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,159 +113,173 @@ const Template = (args) => {
const [openSidebar, setOpenSidebar] = useState(true);

return (
<>
<ThemeProvider theme={theme}>
{showLayer ? <MlDeckGlTerrainLayer /> : null}
{showRoute ? (
<MlGeoJsonLayer
geojson={routeJson}
type="line"
paint={{
"line-width": 2,
"line-color": "blue",
}}
/>
) : null}
<TopToolbar
buttons={
<>
<Button
variant={showLayer ? "contained" : "outlined"}
onClick={() => setShowLayer(!showLayer)}
sx={{
marginRight: { xs: "0px", sm: "10px" },
marginBottom: { xs: "5px", sm: "00px" },
}}
<>
<ThemeProvider theme={theme}>
{showLayer ? <MlDeckGlTerrainLayer /> : null}
{showRoute ? (
<MlGeoJsonLayer
geojson={routeJson}
type="line"
paint={{
"line-width": 2,
"line-color": "blue",
}}
/>
) : null}
<TopToolbar
buttons={
<>
<Button
variant={showLayer ? "contained" : "outlined"}
onClick={() => setShowLayer(!showLayer)}
sx={{
marginRight: { xs: "0px", sm: "10px" },
marginBottom: { xs: "5px", sm: "00px" },
}}
>
Terrain Layer
</Button>
<Button
variant={openSidebar ? "contained" : "outlined"}
onClick={() => setOpenSidebar(!openSidebar)}
sx={{ marginRight: { xs: "0px", sm: "10px" } }}
>
Camera Settings
</Button>
</>
}
/>
<Sidebar
open={openSidebar}
setOpen={setOpenSidebar}
name={"Camera Settings"}
>
<MenuItem onClick={() => setShowRoute(!showRoute)}>
<Typography>
{showRoute ? "Hide Camera path" : "Show Camera path"}
</Typography>
</MenuItem>

<MenuItem
disabled={!state.pause}
onClick={() =>
setState((current) => {
return { ...current, pause: false };
})
}
>
Terrain Layer
</Button>
<Button
variant={openSidebar ? "contained" : "outlined"}
onClick={() => setOpenSidebar(!openSidebar)}
sx={{ marginRight: { xs: "0px", sm: "10px" } }}
<Typography>Start</Typography>
</MenuItem>
<MenuItem
disabled={state.pause}
onClick={() =>
setState((current) => {
return { ...current, pause: true };
})
}
>
Camera Settings
</Button>
</>
}
/>
<Sidebar
open={openSidebar}
setOpen={setOpenSidebar}
name={"Camera Settings"}
>
<MenuItem onClick={() => setShowRoute(!showRoute)}>
<Typography>
{showRoute ? "Route ausblenden" : "Route einblenden"}
</Typography>
</MenuItem>

<MenuItem
disabled={!state.pause}
onClick={() =>
setState((current) => {
return { ...current, pause: false };
})
}
>
<Typography>Start</Typography>
</MenuItem>
<MenuItem
disabled={state.pause}
onClick={() =>
setState((current) => {
return { ...current, pause: true };
})
}
>
<Typography>Pause</Typography>
</MenuItem>
<MenuItem
onClick={() => {
setState((current) => {
return { ...current, pause: true, pitch: 60, zoom: 11, speed: 20 };
});
setTimeout(() => {
CameraFollowPath.reset();
}, 50);
}}
>
<Typography>Reset</Typography>
</MenuItem>
<MenuItem>
<Typography
id="discrete-slider"
style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
>
Zoom:
</Typography>
<Slider
value={state.zoom}
onChange={(ev, value) => {
setState((current) => {
return { ...current, zoom: value };
});
}}
getAriaValueText={(value) => value}
aria-labelledby="discrete-slider"
//valueLabelDisplay="auto"
step={1}
marks={marks}
min={8}
max={13}
sx={{
marginTop: "20px",
paddingBottom: "20px",
marginRight: "10px",
maxWidth: "200px",
}}
/>
</MenuItem>
<MenuItem>
<Typography
id="discrete-slider2"
style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
>
Speed:
</Typography>
<Slider
value={state.speed}
onChange={(ev, value) => {
setState((current) => {
return { ...current, speed: value };
});
}}
getAriaValueText={(value) => value}
aria-labelledby="discrete-slider2"
//valueLabelDisplay="auto"
step={5}
marks
min={1}
max={60}
sx={{
marginRight: "10px",
maxWidth: "200px",
}}
/>
</MenuItem>
<MenuItem
onClick={() => {
if (state.pitch === 0) {
setState((current) => {
return { ...current, pitch: 60 };
});
} else {
setState((current) => {
return { ...current, pitch: 0 };
});
}
}}
>
{state.pitch === 0 ? "3D" : "2D"}
</MenuItem>
</Sidebar>
</ThemeProvider>
</>
<Typography>Pause</Typography>
</MenuItem>
<MenuItem
onClick={() => {
setState((current) => {
return {
...current,
pause: true,
pitch: 60,
zoom: 11,
speed: 20,
};
});
setTimeout(() => {
CameraFollowPath.reset();
}, 50);
}}
>
<Typography>Reset</Typography>
</MenuItem>
<MenuItem>
<Typography
id="discrete-slider"
style={{
color: "#121212",
marginLeft: "10px",
marginRight: "10px",
}}
>
Zoom:
</Typography>
<Slider
value={state.zoom}
onChange={(ev, value) => {
setState((current) => {
return { ...current, zoom: value };
});
}}
getAriaValueText={(value) => value}
aria-labelledby="discrete-slider"
//valueLabelDisplay="auto"
step={1}
marks={marks}
min={8}
max={13}
sx={{
marginTop: "20px",
paddingBottom: "20px",
marginRight: "10px",
maxWidth: "200px",
}}
/>
</MenuItem>
<MenuItem>
<Typography
id="discrete-slider2"
style={{
color: "#121212",
marginLeft: "10px",
marginRight: "10px",
}}
>
Speed:
</Typography>
<Slider
value={state.speed}
onChange={(ev, value) => {
setState((current) => {
return { ...current, speed: value };
});
}}
getAriaValueText={(value) => value}
aria-labelledby="discrete-slider2"
//valueLabelDisplay="auto"
step={5}
marks
min={1}
max={60}
sx={{
marginRight: "10px",
maxWidth: "200px",
}}
/>
</MenuItem>
<MenuItem
onClick={() => {
if (state.pitch === 0) {
setState((current) => {
return { ...current, pitch: 60 };
});
} else {
setState((current) => {
return { ...current, pitch: 0 };
});
}
}}
>
{state.pitch === 0 ? "3D" : "2D"}
</MenuItem>
</Sidebar>
</ThemeProvider>
</>
);
};

Expand Down
Loading

0 comments on commit a53eb63

Please sign in to comment.