show fps..

1 files changed, 24 insertions, 3 deletions

diff --git a/public/bundle.js b/public/bundle.js
index 8d9b0e7..bf0a0ee 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -93,12 +93,16 @@ function Header(props) {
   return (0, _preact.h)(
     'header',
     null,
-    'live cortex'
+    'live cortex | ',
+    props.fps,
+    ' fps'
   );
 }
 
 var mapStateToProps = function mapStateToProps(state) {
-  return {};
+  return {
+    fps: state.live.fps
+  };
 };
 
 var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
@@ -960,7 +964,8 @@ var liveInitialState = {
   opt: {},
   checkpoints: [],
   checkpoint_dir: ['latest'],
-  sequences: []
+  sequences: [],
+  fps: 0
 };
 
 var liveReducer = function liveReducer() {
@@ -1007,6 +1012,11 @@ var liveReducer = function liveReducer() {
         sequences: action.sequences
       });
 
+    case 'SET_FPS':
+      return _extends({}, state, {
+        fps: action.fps
+      });
+
     default:
       return state;
   }
@@ -1084,6 +1094,8 @@ socket.on('res', function (data) {
   console.log(data);
 });
 
+var fps = 0;
+
 socket.on('frame', function (data) {
   var blob = new Blob([data.frame], { type: 'image/jpg' });
   var url = URL.createObjectURL(blob);
@@ -1095,10 +1107,19 @@ socket.on('frame', function (data) {
     ctx.drawImage(img, 0, 0, player.width, player.height);
     // player.innerHTML = ''
     // player.appendChild(img)
+    fps += 1;
   };
   img.src = url;
 });
 
+setInterval(function () {
+  _store.store.dispatch({
+    type: 'SET_FPS',
+    fps: fps
+  });
+  fps = 0;
+}, 1000);
+
 function list_checkpoints() {
   socket.emit('cmd', {
     cmd: 'list_checkpoints'