✨ wo #43: added ability to switch the animation on and off

cismet · Jul 5, 2020 · 961d778 · 961d778
1 parent 395b13f
commit 961d778
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 18 deletions.
diff --git a/src/components/starkregen/ControlInfoBox.js b/src/components/starkregen/ControlInfoBox.js
@@ -1,5 +1,7 @@
 import Icon from 'components/commons/Icon';
 import PropTypes from 'prop-types';
+import { Alert, Button, Label } from 'react-bootstrap';
+
 import React from 'react';
 import CollapsibleWell from '../commons/CollapsibleWell';
 import Legend from './Legend';
@@ -22,7 +24,9 @@ const InfoBox = ({
 	showModalMenu,
 	mapClickListener,
 	mapRef,
-	mapCursor
+	mapCursor,
+	animationEnabled,
+	setAnimationEnabled
 }) => {
 	const legend = <Legend legendObjects={legendObject} />;
 
@@ -94,6 +98,23 @@ const InfoBox = ({
 								<b>Karte</b>
 							</h5>
 						</td>
+						<td
+							style={{
+								textAlign: 'center',
+								paddingLeft: '0px',
+								paddingTop: '0px',
+								paddingBottom: '5px'
+							}}
+						>
+							<h5
+								style={{
+									textAlign: 'center',
+									margin: '4px'
+								}}
+							>
+								<b>Animation</b>
+							</h5>
+						</td>
 					</tr>
 					<tr>
 						<td
@@ -170,6 +191,55 @@ const InfoBox = ({
 								);
 							})}
 						</td>
+						<td
+							style={{
+								textAlign: 'center',
+								verticalAlign: 'top',
+
+								paddingLeft: '0px',
+								paddingTop: '0px',
+								paddingBottom: '0px'
+							}}
+						>
+							<table
+								border={0}
+								style={{
+									width: '100%'
+								}}
+							>
+								<tbody>
+									<tr>
+										<td
+											style={{
+												textAlign: 'center',
+												verticalAlign: 'center'
+											}}
+										>
+											<a
+												style={{ textDecoration: 'none' }}
+												onClick={() => {
+													setAnimationEnabled(
+														!(animationEnabled === true)
+													);
+												}}
+											>
+												<Label
+													bsStyle={
+														animationEnabled === true ? (
+															'primary'
+														) : (
+															'default'
+														)
+													}
+												>
+													Geschwindigkeit
+												</Label>
+											</a>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</td>
 					</tr>
 				</tbody>
 			</table>

diff --git a/src/components/starkregen/VectorFieldAnimation.js b/src/components/starkregen/VectorFieldAnimation.js
@@ -34,10 +34,10 @@ class VectorFieldAnimation extends MapLayer {
 	loadAndVis(didMount = false) {}
 
 	componentDidMount() {
-		// const bounds = this.context.map.getBounds();
-		// const bbox = getBBoxForBounds(bounds);
+		const bounds = this.context.map.getBounds();
+		const bbox = getBBoxForBounds(bounds);
 
-		const bbox = this.props.bbox;
+		// const bbox = this.props.bbox;
 		//BBOX=7.1954778,51.2743996,7.2046701,51.2703213
 		let url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&LAYERS=docs/regen/${this
 			.props.layerPrefix}u84.tif&FORMAT=text/raster.asc`;

diff --git a/src/containers/Starkregen.js b/src/containers/Starkregen.js
@@ -18,12 +18,13 @@ import { actions as StarkregenActions } from '../redux/modules/starkregen';
 import { actions as UIStateActions } from '../redux/modules/uiState';
 import { modifyQueryPart } from '../utils/routingHelper';
 import VectorFieldAnimation from '../components/starkregen/VectorFieldAnimation';
+import AnimationModeButton from '../components/starkregen/AnimationModeButton';
 import bboxPolygon from '@turf/bbox-polygon';
 import area from '@turf/area';
 /* eslint-disable jsx-a11y/anchor-is-valid */
 // const service="http://127.0.0.1:8881";
-const service = 'https://rasterfari.cismet.de';
-
+const ANIMATION_RASTERFARI_SERVICE = 'https://rasterfari.cismet.de';
+const MIN_ANIMATION_ZOOM = 13;
 function mapStateToProps(state) {
 	return {
 		uiState: state.uiState,
@@ -182,6 +183,9 @@ export class Starkregen_ extends React.Component {
 		const mapRef = this.getMapRef();
 		let url_u, url_v, vectorFieldAnimationSettings, currentBBox, currentMapArea;
 		console.log('mapRef', mapRef);
+		if (mapRef !== undefined) {
+			console.log('mapRef.getZoom()', mapRef.getZoom());
+		}
 		const settingsForZoom = {
 			13: { paths: 3000, velocityScale: 1 / 200, fade: 80 / 100, age: 50 },
 			14: { paths: 2560, velocityScale: 1 / 400, fade: 83 / 100, age: 80 },
@@ -192,13 +196,8 @@ export class Starkregen_ extends React.Component {
 		};
 		if (mapRef !== undefined) {
 			const bounds = mapRef.getBounds();
-			// url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-			// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-			// 	._southWest.lat}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
-			// url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-			// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-			// 	._southWest.lat}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
-			if (currentZoom >= 13) {
+
+			if (currentZoom >= MIN_ANIMATION_ZOOM) {
 				currentBBox = [
 					bounds._southWest.lng,
 					bounds._northEast.lat,
@@ -224,9 +223,24 @@ export class Starkregen_ extends React.Component {
 			}
 		}
 
+		const setAnimationEnabled = (enabled) => {
+			if (currentZoom < MIN_ANIMATION_ZOOM) {
+				this.props.routingActions.push(
+					this.props.routing.location.pathname +
+						modifyQueryPart(this.props.routing.location.search, {
+							zoom: MIN_ANIMATION_ZOOM
+						})
+				);
+				setTimeout(() => {
+					this.props.starkregenActions.setAnimationEnabled(true);
+				}, 50);
+			} else {
+				this.props.starkregenActions.setAnimationEnabled(enabled);
+			}
+		};
 		let info = (
 			<InfoBox
-				pixelwidth={340}
+				pixelwidth={370}
 				selectedSimulation={selSim}
 				simulationLabels={simulationLabels}
 				backgrounds={this.props.starkregen.backgrounds}
@@ -244,6 +258,10 @@ export class Starkregen_ extends React.Component {
 				mapClickListener={this.getFeatureInfo}
 				mapRef={mapRef}
 				mapCursor={cursor}
+				animationEnabled={
+					this.props.starkregen.animationEnabled && currentZoom >= MIN_ANIMATION_ZOOM
+				}
+				setAnimationEnabled={setAnimationEnabled}
 			/>
 		);
 
@@ -421,11 +439,14 @@ export class Starkregen_ extends React.Component {
 					caching={this.state.caching}
 				/>
 				{featureInfoLayer}
-				{currentZoom >= 13 && (
+				{mapRef !== undefined &&
+				this.props.starkregen.animationEnabled === true &&
+				mapRef.getZoom() >= MIN_ANIMATION_ZOOM && ( //use mapRef.getZoom() to avoid rasie conditions due to animations
 					<VectorFieldAnimation
+						mapRef={mapRef}
 						key={
 							'VFA:' +
-							currentZoom +
+							mapRef.getZoom() +
 							'.' +
 							// JSON.stringify(currentBBox) +
 							// '.' +

diff --git a/src/redux/modules/starkregen.js b/src/redux/modules/starkregen.js
@@ -13,7 +13,8 @@ export const types = {
 	SET_FEATUREOINFO_VALUE: 'STARKREGEN/SET_FEATUREOINFO_VALUE',
 	SET_FEATUREOINFO_POSITION: 'STARKREGEN/SET_FEATUREOINFO_POSITION',
 	SET_FEATUREOINFO_SIMULATION: 'STARKREGEN/SET_FEATUREOINFO_SIMULATION',
-	SET_MODELLAYERPROBLEM_STATUS: 'STARKREGEN/SET_MODELLAYERPROBLEM_STATUS'
+	SET_MODELLAYERPROBLEM_STATUS: 'STARKREGEN/SET_MODELLAYERPROBLEM_STATUS',
+	SET_ANIMATION_ENABLED: 'STARKREGEN/SET_ANIMATION_ENABLED'
 };
 
 export const constants = {};
@@ -29,6 +30,7 @@ export const initialState = {
 	selectedSimulation: 0,
 	backgroundLayer: undefined,
 	selectedBackground: 0,
+	animationEnabled: true,
 	simulations: [
 		{
 			layer: 'R102:50md',
@@ -157,6 +159,11 @@ export default function starkregenReducer(state = initialState, action) {
 			newState.modelLayerProblem = action.modelLayerProblem;
 			return newState;
 		}
+		case types.SET_ANIMATION_ENABLED: {
+			newState = objectAssign({}, state);
+			newState.animationEnabled = action.animationEnabled;
+			return newState;
+		}
 		default:
 			return state;
 	}
@@ -190,6 +197,9 @@ function setCurrentFeaturSelectedSimulation(simulation) {
 function setModelLayerProblemStatus(modelLayerProblem) {
 	return { type: types.SET_MODELLAYERPROBLEM_STATUS, modelLayerProblem };
 }
+function setAnimationEnabled(animationEnabled) {
+	return { type: types.SET_ANIMATION_ENABLED, animationEnabled };
+}
 //COMPLEXACTIONS
 
 function setSimulation(simulation) {
@@ -275,7 +285,8 @@ export const actions = {
 	setCurrentFeatureInfoValue,
 	setCurrentFeatureInfoPosition,
 	getFeatureInfo,
-	setModelLayerProblemStatus
+	setModelLayerProblemStatus,
+	setAnimationEnabled
 };
 
 //HELPER FUNCTIONS