add stubs for examples from auduno/gh-pages

auduno · Sep 19, 2016 · c5f8e27 · c5f8e27
1 parent 7dee40f
commit c5f8e27
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 18 deletions.
diff --git a/examples/components/App.js b/examples/components/App.js
@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 
+import { getExample } from 'clmtrackr/examples/reducers/examples';
+
 import MenuDrawer from './MenuDrawer';
 import SimpleExample from './SimpleExample';
 import ClmImageExample from './ClmImageExample';
@@ -15,7 +17,7 @@ const EXAMPLE_TO_CMPT = {
   simple: SimpleExample,
   clmImage: ClmImageExample,
   clmVideo: ClmVideoExample,
-  faceDeformationVideo: FaceDeformationVideoExample,
+  faceDeformStill: FaceDeformationVideoExample,
   faceMask: FaceMaskExample
 }
 
@@ -27,7 +29,14 @@ class App extends React.Component {
     if (exampleCtor) {
       example = React.createElement(exampleCtor);
     } else {
-      example = <h1>Coming Soon!</h1>;
+      const curExample = getExample(this.props.activeExample);
+      example = (
+        <div className='coming-soon-wrapper'>
+          <h1>Coming Soon!</h1>
+          <p>The <a href={curExample.original}>original demo</a> is presented below:</p>
+          <iframe src={curExample.original} />
+        </div>
+      );
     }
 
     return (

diff --git a/examples/components/App.styl b/examples/components/App.styl
@@ -1,6 +1,12 @@
 @import 'nib'
 
 
+html
+body
+#main
+.app-cmpt
+  height 100%
+
 body
   font-family Roboto, sans-serif
 
@@ -19,7 +25,17 @@ body
 
     display flex
     justify-content center
-    align-items center
+
+  .coming-soon-wrapper
+    width 100%
+    height 100%
+    display flex
+    flex-direction column
+    justify-content center
+
+    iframe
+      width 100%
+      height 100%
 
   .menu-drawer-cmpt
     width 256px

diff --git a/examples/components/MenuDrawer.js b/examples/components/MenuDrawer.js
@@ -1,33 +1,55 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import _ from 'lodash';
 
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 
-import { EXAMPLES, setExample } from 'clmtrackr/examples/reducers/examples';
+import {
+  HEADER_TITLES,
+  EXAMPLES,
+  setExample
+} from 'clmtrackr/examples/reducers/examples';
 
 import './MenuDrawer.styl';
 
 
 class MenuDrawer extends React.Component {
   render () {
-    const menuItems = EXAMPLES.map((example, i) =>
-      <MenuItem
-        className={classNames({
-          selected: example.id === this.props.selectedExample
-        })}
-        onClick={() => this.props.setExample(example)}
-        key={i}
-      >
-        {example.name}
-      </MenuItem>
-    );
+    const sections = {};
+    _.forEach(EXAMPLES, (example, i) => {
+      const exampleType = example.type || 'example';
+      if (!sections[exampleType]) {
+        sections[exampleType] = [];
+      }
+
+      sections[exampleType].push(
+        <MenuItem
+          className={classNames({
+            selected: example.id === this.props.selectedExample
+          })}
+          onClick={() => this.props.setExample(example)}
+          key={example.id}
+        >
+          {example.name}
+        </MenuItem>
+      );
+    });
+
+    const menuItems = [];
+    _.forEach(sections, (values, section) => {
+      menuItems.push(
+        <div className='section-header' key={section}>
+          {HEADER_TITLES[section] || section}
+        </div>
+      );
+      _.forEach(values, sectionEntry => menuItems.push(sectionEntry));
+    })
 
     return (
       <div className='menu-drawer-cmpt'>
         <Drawer open={true}>
-          <div className='section-header'>Examples</div>
           {menuItems}
         </Drawer>
       </div>

diff --git a/examples/reducers/examples.js b/examples/reducers/examples.js
@@ -1,6 +1,11 @@
 // Action types
 export const SET_EXAMPLE = 'examples/SET_EXAMPLE';
 
+export const HEADER_TITLES = {
+  example: 'Examples',
+  tool: 'Tools'
+};
+
 export const EXAMPLES = [
   {
     id: 'simple',
@@ -15,12 +20,61 @@ export const EXAMPLES = [
     name: 'Clm Video'
   },
   {
-    id: 'faceDeformationVideo',
-    name: 'Face Deformation Video'
+    id: 'clmVideoResponses',
+    name: 'Clm Video Responses',
+    original: 'https://auduno.github.io/clmtrackr/clm_video_responses.html'
+  },
+  {
+    id: 'clmEmotionDetection',
+    name: 'Emotion Detection',
+    original: 'https://auduno.github.io/clmtrackr/examples/clm_emotiondetection.html'
+  },
+  {
+    id: 'clmGenderDetection',
+    name: 'Gender Detection',
+    original: 'https://auduno.github.io/clmtrackr/examples/clm_genderdetection.html'
+  },
+  {
+    id: 'faceDeformStill',
+    name: 'Face Deformation Still'
   },
   {
     id: 'faceMask',
     name: 'Face Mask'
+  },
+  {
+    id: 'caricature',
+    name: 'Caricature',
+    original: 'https://auduno.github.io/clmtrackr/examples/caricature.html'
+  },
+  {
+    id: 'faceDeformVideo',
+    name: 'Face Deformation Video',
+    original: 'https://auduno.github.io/clmtrackr/examples/facedeform.html'
+  },
+  {
+    id: 'classViewer',
+    name: 'Class Viewer',
+    type: 'tool',
+    original: 'https://auduno.github.io/clmtrackr/examples/classviewer.html'
+  },
+  {
+    id: 'modelViewerPca',
+    name: 'Model Viewer: pca',
+    type: 'tool',
+    original: 'https://auduno.github.io/clmtrackr/examples/modelviewer_pca.html'
+  },
+  {
+    id: 'modelViewerSpca',
+    name: 'Model Viewer: spca',
+    type: 'tool',
+    original: 'https://auduno.github.io/clmtrackr/examples/modelviewer_spca.html'
+  },
+  {
+    id: 'paramModel',
+    name: 'Model Preview: clm pca',
+    type: 'tool',
+    original: 'https://auduno.github.io/clmtrackr/docs/param_model/clm_pca.html'
   }
 ];