[WIP] Buffered playback

README.md

@@ -9,12 +9,6 @@ Visualizes up to three 3D keypoint sequences that can be uploaded as a json file
 addMinVal: bool </br>
 <i>Adds the small y-position per frame to all keypoints so that the figure is always above the ground. </i>
 
-slowMo: bool</br>
-<i>True: 25 fps</i></br>
-<i>False: 50 fps</i>
-
-
-
 isPublicMode: bool</br>
 <i>False: UI for JSON file upload for three figures. Upload for the red figure is necessary. </i></br>
 <i>True: Default sequence is used. </i>

scripts/np_to_json_seq.py

@@ -0,0 +1,108 @@
+# This file is part of deep.dance.
+
+# deep.dance is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+
+# deep.dance is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+
+# You should have received a copy of the GNU General Public License
+# along with deep.dance.  If not, see <https://www.gnu.org/licenses/>.
+
+import os
+import argparse
+import numpy as np
+import random
+import json
+
+import matplotlib.pyplot as plt
+from mpl_toolkits.mplot3d import Axes3D
+
+
+def get_parser():
+    parser = argparse.ArgumentParser(
+        description="Export generated keypoint sequence as JSON file.")
+
+    parser.add_argument('file',
+        help='Input file containing keypoint sequence as serialized numpy array.')
+
+    return parser
+
+def load_data(file):
+    input = np.load(file)
+    for item in input.files:
+        print("Found \"{}\" with shape {}".format(
+            item, input[item].shape))   
+    return input 
+
+def init_data():
+    data = {}
+    data['frames'] = {}
+    data['positions'] = {}
+    return data
+
+def add_bones(data):
+    data['bones'] = {
+        'rightLeg': [0,1,2,3],
+        'leftLeg' : [0,4,5,6],
+        'spine': [0,7,8],
+        'rightArm':[8,14,15,16],
+        'leftArm':[8,11,12,13],
+        'head':[8,9,10]
+    }
+    return data
+
+def add_keypoints(data, keypoints, frame):
+    data['frames'][frame] = []
+    for point in keypoints:
+        data['frames'][frame].append([point[0].astype(float), point[1].astype(float), point[2].astype(float)])
+    return data
+
+def add_mapped_positions(data, frame):
+    """
+    Currently we have a combined LED strip containing 120 LEDs,
+    6 strips with 20 LEDs each. Since the DMX animation will be
+    implemented in the "view" component, we'll only update the position
+    every second.
+    """
+    point = data['frames'][frame][6]
+    if frame % 25 == 0:
+        y = round(abs(point[1].astype(float) * 120))
+        data['positions'][frame] = []
+        data['positions'][frame].append(y)
+    return data
+
+def write_json(data, dir, base):
+    output = dir + '/' + base + '.json'
+    with open(output, 'w') as outfile:
+        print("Writing JSON output to", output)
+        json.dump(data, outfile)
+
+if __name__ == '__main__':
+    args = get_parser().parse_args()
+
+    if args.file:
+        file = os.path.abspath(args.file)
+        dir = os.path.dirname(file)
+        name = os.path.basename(file)
+        base = os.path.splitext(name)[0]
+        currentFrame = 0;
+
+        print("Reading numpy array from file", file)
+        input = load_data(file)['arr_0']
+
+        data = init_data()
+        data = add_bones(data)
+
+        for keypoints in input:
+            data = add_keypoints(data, keypoints, currentFrame)
+
+            # Calculate 1D position mapping for LED control via DMX on stage.
+            data = add_mapped_positions(data, currentFrame)
+            currentFrame += 1
+
+        write_json(data, dir, base)

scripts/split_seq.py

@@ -54,7 +54,7 @@ def read_json(files):
     return input
 
 def write_json(data, dir, filename):
-    with open(filename, 'w') as outfile:
+    with open(dir + '/' + filename, 'w') as outfile:
         json.dump(data, outfile)
 
 if __name__ == '__main__':
@@ -64,7 +64,8 @@ def write_json(data, dir, filename):
         (dir, base) = get_base(args.files[0])
         input = read_json(args.files)
 
-        slices = 6
+        slices = 240
+        current_slice = 0
         frames = input[0]['frames']
         bones = input[0]['bones']
         max_frames = len(frames)
@@ -83,14 +84,16 @@ def write_json(data, dir, filename):
 
                 data['bones'] = bones
 
-                filename = base + '_' + str(index_begin) + '_' + str(index) + '.json'
+                # filename = base + '_' + str(index_begin) + '_' + str(index) + '.json'
+                filename = base + '_' + str(current_slice) + '.json'
                 print('Writing', len(data['frames']), 'frames to JSON file', dir + '/' + filename)
                 write_json(data, dir, filename)
 
                 # Reset for next slice
                 data = init_data()
                 index_in_slice = 0
                 index_begin = index + 1
+                current_slice = current_slice + 1
                 write = True
             if (not write):
                 index_in_slice += 1

src/App.vue

@@ -36,42 +36,115 @@ export default {
     // DMXSender
   },
   methods: {
+    publicPath: function() {
+      var publicPath = process.env.NODE_ENV === 'production'
+        ? '/deep-dance-visualizer/'
+        : '/';
+      return publicPath;
+    },
     toogleSlowMo: function () {
       this.$store.commit("SetSlowMo", !this.$store.state.slowMo);
     },
     loadJSON: function(figure, key) {
-      var publicPath = process.env.NODE_ENV === 'production'
-        ? '/deep-dance-visualizer/'
-        : '/';
-      axios.get(publicPath + 'deepdance_170421_' + figure + '_0_15001.json').then(response => {
+      axios.get(this.publicPath() + 'deepdance_170421_' + figure + '_0_15001.json').then(response => {
         this.$store.commit("SetJSONData", { data: response.data, key: key });
       });
-    }
+    },
+    initSlice: function(figure, key) {
+      var id = 'deepdance_170421_' + figure;
+      axios.get(this.publicPath() + id + '/' + id + '_0.json').then(response => {
+        this.$store.commit("SetJSONData", { data: response.data, key: key });
+        console.log("Buffer size:", this.$store.getters.bufferSize);
+      });
+    },
+    loadSlice: function(figure, key, seq) {
+      var id = 'deepdance_170421_' + figure;
+      axios.get(this.publicPath() + id + '/' + id + '_' + seq + '.json').then(response => {
+        this.$store.commit("UpdateNextBuffer", { data: response.data, key: key });
+      });
+    },
+    onCurrentFrame: function(oldFrame, newFrame) {
+      var bufferIdx = newFrame % this.$store.getters.bufferSize;
+      // console.log("Frame in buffer:", bufferIdx);
+      // console.log("Slice:", this.$store.state.currentSlice);
+
+      if (bufferIdx == 1) {
+        // load next buffer
+        this.loadSlice('red', 'red', this.$store.state.currentSlice + 1);
+        this.loadSlice('blue', 'blue', this.$store.state.currentSlice + 1);
+        this.loadSlice('green', 'green', this.$store.state.currentSlice + 1);
+      }
+      if (bufferIdx == this.$store.getters.bufferSize - 1) {
+        this.$store.commit("UpdateCurrentBuffer", { data: this.$store.state.nextBuffer['red'], key: 'red' });
+        this.$store.commit("UpdateCurrentBuffer", { data: this.$store.state.nextBuffer['blue'], key: 'blue' });
+        this.$store.commit("UpdateCurrentBuffer", { data: this.$store.state.nextBuffer['green'], key: 'green' });
+
+        var nextSlice = this.$store.state.currentSlice + 1;
+        this.$store.commit("SetCurrentSlice", nextSlice);
+      }
+    },
+    togglePlay(event) {
+      if (event.code == "Space") {
+        this.$store.commit("SetAnimationStatus", !this.$store.state.isPlaying);
+      } 
+    },
   },
   mounted() {
     if (this.$store.state.isPublicMode) {
       console.log(this.$route.params);
       switch (this.$route.params.figureIdx) {
         case "0":
-          this.loadJSON('red', 'red');
+          if (this.$store.state.isBufferedMode)
+            this.initSlice('red', 'red');
+          else
+            this.loadJSON('red', 'red');
           break;
         case "1":
-          this.loadJSON('blue', 'red');
+          if (this.$store.state.isBufferedMode)
+            this.initSlice('blue', 'red');
+          else
+            this.loadJSON('blue', 'red');
           break;
         case "2":
-          this.loadJSON('green', 'red');
+          if (this.$store.state.isBufferedMode)
+            this.initSlice('green', 'red');
+          else
+            this.loadJSON('green', 'red');
           break;
         case "3":
-          this.loadJSON('red', 'red');
-          this.loadJSON('blue', 'blue');
-          this.loadJSON('green', 'green');
+          if (this.$store.state.isBufferedMode) {
+            this.initSlice('red', 'red');
+            this.initSlice('blue', 'blue');
+            this.initSlice('green', 'green');
+          } else {
+            this.loadJSON('red', 'red');
+            this.loadJSON('blue', 'blue');
+            this.loadJSON('green', 'green');
+          }
+
           break;
         default:
-          this.loadJSON('red', 'red');
+          if (this.$store.state.isBufferedMode)
+            this.initSlice('red', 'red');
+          else
+            this.loadJSON('red', 'red');
           break;
       }
     }
+
+    this.$store.watch(
+      (state) => state.currentFrame,
+      (newFrame, oldFrame) => {
+        this.onCurrentFrame(oldFrame, newFrame);
+      }
+    );
+  },    
+  created() {
+    window.addEventListener('keypress', this.togglePlay);
   },
+  destroyed() {
+    window.removeEventListener('keypress', this.togglePlay);
+  }
 };
 </script>
 

src/components/ControlBar.vue

@@ -1,7 +1,8 @@
 <template>
-  <div id="playhead" v-if="this.$store.state.currentJSONData['red'] != null">
+  <!-- <div id="playhead" v-if="this.$store.getters.canPlay"> -->
+    <div id="playhead" v-if="false">
     <div
-      v-if="this.$store.state.currentJSONData['red'] != null"
+      v-if="this.$store.getters.canPlay"
       id="controlBar"
     >
       <PlayIcon
@@ -20,14 +21,13 @@
         <div class="minutes">
           {{ this.convertFrameToTime(this.$store.state.currentFrame) }}
           /
-          {{ this.convertFrameToTime(
-            Object.keys(this.$store.state.currentJSONData["red"].frames).length) 
+          {{ this.convertFrameToTime(this.$store.getters.maxFrames) 
           }}
           <span v-if="!this.$store.state.isPublicMode">
             ({{ this.$store.state.currentFrame }}
               /
             {{
-              Object.keys(this.$store.state.currentJSONData["red"].frames).length
+              this.$store.getters.maxFrames
             }})
           </span>
 
@@ -90,11 +90,15 @@ export default {
         else {
           var timestamp = (minutes * 60) + seconds;
           var frame = timestamp * this.$store.state.fps;
-          var maxFrames = Object.keys(this.$store.state.currentJSONData["red"].frames).length;
-          if (frame > maxFrames)
+          if (frame > this.$store.getters.maxFrames) {
             this.alertOutOfRange();
-          else
+          } else {
             this.$store.commit("SetCurrentFrame", frame);
+
+            var slice = 0;
+            alert("Slice implementation missing.");
+            this.$store.commit("SetCurrentSlice", this.$store.state.currentSlice + 1);
+          }
         }
 
       }

src/components/DanceScene.vue

@@ -198,8 +198,7 @@ export default {
         this.renderer.render(this.scene, this.camera);
         return;
       }
-      var slowMo = this.$store.state.slowMo;
-      var interval = 1 / (slowMo ? 25 : 50);
+      var interval = 1 / this.$store.state.fps;
 
       this.delta += this.clock.getDelta();
       if (this.delta > interval) {
@@ -212,7 +211,7 @@ export default {
         //Reset Animation on End
         if (
           this.$store.state.currentFrame >=
-          Object.keys(this.$store.state.currentJSONData["red"].frames).length
+          this.$store.maxFrames
         ) {
           this.$store.commit("SetAnimationStatus", false);
           this.$store.commit("SetCurrentFrame", 0);
@@ -256,21 +255,21 @@ export default {
     this.animate();
 
     this.$store.watch(
-      (state) => state.currentJSONData["red"],
+      (state) => state.bufferLoaded['red'],
       (newValue, oldValue) => {
         this.onDataChanged();
       }
     );
 
     this.$store.watch(
-      (state) => state.currentJSONData["green"],
+      (state) => state.bufferLoaded['blue'],
       (newValue, oldValue) => {
         this.onDataChanged();
       }
     );
 
     this.$store.watch(
-      (state) => state.currentJSONData["blue"],
+      (state) => state.bufferLoaded['green'],
       (newValue, oldValue) => {
         this.onDataChanged();
       }