Merge pull request #14 from CodeLabs-Hubble-gl/hubble-example

Hubble example

examples/camera/app.js

@@ -7,6 +7,9 @@ import {layers} from './layers';
 import {vignette, fxaa} from '@luma.gl/shadertools';
 import {PostProcessEffect} from '@deck.gl/core';
 
+import {CameraKeyframes} from '@hubble.gl/core';
+import {easing} from 'popmotion';
+
 const INITIAL_VIEW_STATE = {
   longitude: -122.4,
   latitude: 37.74,
@@ -38,8 +41,37 @@ export default function App() {
   const deckgl = useRef(null);
   const [ready, setReady] = useState(false);
   const [busy, setBusy] = useState(false);
+
+  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE); //Added to maintain user's interactions with viewState
+
   const nextFrame = useNextFrame();
 
+  const updateCamera = (prevCamera) => {
+    // Set by User
+  prevCamera = new CameraKeyframes({
+        timings: [0, 5000],
+        keyframes: [
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            pitch: viewState.pitch,
+            bearing: viewState.bearing
+          },
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            bearing: viewState.bearing + 92,
+            pitch: viewState.pitch
+          }
+        ],
+        easings: [easing.easeInOut]
+      });
+
+    return prevCamera;
+  }
+
   return (
     <div style={{position: 'relative'}}>
       <div style={{position: 'absolute'}}>
@@ -51,10 +83,14 @@ export default function App() {
         parameters={{
           depthTest: false,
           clearColor: [61 / 255, 20 / 255, 76 / 255, 1]
-          // blend: true,
-          // blendEquation: GL.FUNC_ADD,
-          // blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA]
         }}
+
+        viewState={viewState}
+        onViewStateChange={({viewState}) => {
+          setViewState(viewState);
+        }}
+        controller={true}
+
         effects={[vignetteEffect, aaEffect]}
         layers={layers}
         {...adapter.getProps(deckgl, setReady, nextFrame)}
@@ -66,6 +102,7 @@ export default function App() {
             busy={busy}
             setBusy={setBusy}
             encoderSettings={encoderSettings}
+            updateCamera={updateCamera}
           />
         )}
       </div>

examples/camera/scene.js

@@ -24,13 +24,15 @@ export async function sceneBuilder(animationLoop) {
       easings: [easing.easeInOut]
     })
   };
-  animationLoop.timeline.attachAnimation(keyframes.camera);
+
+  const currentCamera = animationLoop.timeline.attachAnimation(keyframes.camera);
 
   return new DeckScene({
     animationLoop,
     keyframes,
     lengthMs: 5000,
     width: 640,
-    height: 480
+    height: 480,
+    currentCamera
   });
 }

examples/terrain/app.js

@@ -1,10 +1,13 @@
 import React, {useState, useRef} from 'react';
 import DeckGL from '@deck.gl/react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {DeckAdapter} from 'hubble.gl';
 import {useNextFrame, BasicControls, ResolutionGuide} from '@hubble.gl/react';
 import {sceneBuilder} from './scene';
 
+import {CameraKeyframes} from '@hubble.gl/core';
+import {easing} from 'popmotion';
+
+
 const INITIAL_VIEW_STATE = {
   latitude: 46.24,
   longitude: -122.18,
@@ -33,8 +36,36 @@ export default function App() {
   const deckgl = useRef(null);
   const [ready, setReady] = useState(false);
   const [busy, setBusy] = useState(false);
+  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
+
   const nextFrame = useNextFrame();
 
+  const updateCamera = (prevCamera) => {
+    // Set by User
+  prevCamera = new CameraKeyframes({
+        timings: [0, 5000],
+        keyframes: [
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            pitch: viewState.pitch,
+            bearing: viewState.bearing
+          },
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            bearing: viewState.bearing + 92,
+            pitch: viewState.pitch
+          }
+        ],
+        easings: [easing.easeInOut]
+      });
+
+    return prevCamera;
+  }
+
   return (
     <div style={{position: 'relative'}}>
       <div style={{position: 'absolute'}}>
@@ -43,6 +74,13 @@ export default function App() {
       <DeckGL
         ref={deckgl}
         initialViewState={INITIAL_VIEW_STATE}
+
+        viewState={viewState}
+        onViewStateChange={({viewState}) => {
+          setViewState(viewState);
+        }}
+        controller={true}
+
         {...adapter.getProps(deckgl, setReady, nextFrame)}
       />
       <div style={{position: 'absolute'}}>
@@ -52,6 +90,7 @@ export default function App() {
             busy={busy}
             setBusy={setBusy}
             encoderSettings={encoderSettings}
+            updateCamera={updateCamera}
           />
         )}
       </div>

examples/terrain/scene.js

@@ -85,7 +85,6 @@ function getKeyframes(animationLoop, data) {
 export const sceneBuilder = animationLoop => {
   const lengthMs = 15000;
   const data = {};
-  // set up keyframes
   const keyframes = getKeyframes(animationLoop, data);
   return new DeckScene({
     animationLoop,

examples/trips/README.md

@@ -0,0 +1,123 @@
+This is a minimal standalone version of the [TripsLayer example](https://deck.gl/examples/trips-layer/)
+on [deck.gl](http://deck.gl) website.
+
+### Purpose
+
+Users can drag, zoom in and zoom out, change pitch and bearing from within the deckgl canvas. The camera will start at the last position (viewState) the user was at, improving the experience of exporting the camera movements.
+
+![](https://user-images.githubusercontent.com/26909101/92542712-25c01d00-f20f-11ea-9aee-1bc2806685dc.gif)
+
+### Usage
+
+Copy the content of this folder to your project. 
+
+To see the base map, you need a [Mapbox access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). You can either set an environment variable:
+
+```bash
+export MapboxAccessToken=<mapbox_access_token>
+```
+
+Or set `MAPBOX_TOKEN` directly in `app.js`.
+
+Other options can be found at [using with Mapbox GL](../../../docs/get-started/using-with-mapbox-gl.md).
+
+### Installation
+
+```bash
+# install dependencies within hubble.gl root
+npm install
+# or
+yarn
+yarn bootstrap
+# To install example go to the folder 
+cd examples/trips
+# do this once per example
+yarn 
+# To run the example
+yarn start-local
+```
+
+### Data format
+Sample data is stored in [deck.gl Example Data](https://github.com/visgl/deck.gl-data/tree/master/examples/trips). To use your own data, check out
+the [documentation of TripsLayer](../../../docs/layers/trips-layer.md).
+
+### How to add this feature to a hubble.gl example
+
+1. Add to props of the `DeckGl `component
+
+
+```
+        viewState={viewState}
+        onViewStateChange={({viewState}) => {
+          setViewState(viewState);
+        }}
+        controller={true}
+```
+
+1.1 Add the `viewState` state to App.js
+
+```
+    	  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
+```
+
+2. Add the prop method `updateCamera` to `BasicControls `component (optional)
+
+```
+updateCamera={updateCamera}
+```
+
+3. Add the optional method to start the camera from the current `viewState `(optional)
+
+```
+const updateCamera = (prevCamera) => {
+    // Set by User
+  prevCamera = new CameraKeyframes({
+        timings: [0, 5000],
+        keyframes: [
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            pitch: viewState.pitch,
+            bearing: viewState.bearing
+          },
+          {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom,
+            bearing: viewState.bearing + 92,
+            pitch: viewState.pitch // up to 45/50
+          }
+        ],
+        easings: [easing.easeInOut]
+      });
+   
+    return prevCamera;
+  }
+```
+3.1. Imports
+
+```
+     import {CameraKeyframes} from '@hubble.gl/core';
+     import {easing} from 'popmotion';
+```
+
+4. Fix this line when attaching the camera to the timeline
+
+```
+const currentCamera = animationLoop.timeline.attachAnimation(keyframes.camera);
+```
+
+4.1. Add as prop to `DeckScene`
+
+```
+return new DeckScene({
+     animationLoop,
+     keyframes,
+     lengthMs: 5000,
+     width: 1280,
+     height: 720,
+     currentCamera  // Here
+});
+```
+