show fps..

3 files changed, 20 insertions, 1 deletions

diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index bb2ec04..844e1ef 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -4,12 +4,13 @@ import { connect } from 'react-redux'
 function Header(props) {
   return (
     <header>
-      live cortex
+      live cortex | {props.fps} fps
     </header>
   )
 }
 
 const mapStateToProps = state => ({
+  fps: state.live.fps
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index f774d3e..df227e4 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -7,6 +7,7 @@ const liveInitialState = {
   checkpoints: [],
   checkpoint_dir: ['latest'],
   sequences: [],
+  fps: 0,
 }
 
 const liveReducer = (state = liveInitialState, action) => {
@@ -54,6 +55,12 @@ const liveReducer = (state = liveInitialState, action) => {
         sequences: action.sequences,
       }
 
+    case 'SET_FPS':
+      return {
+        ...state,
+        fps: action.fps,
+      }
+
     default:
       return state
   }
diff --git a/app/client/socket.js b/app/client/socket.js
index 992d714..aaff41c 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -44,6 +44,8 @@ socket.on('res', (data) => {
   console.log(data)
 })
 
+let fps = 0;
+
 socket.on('frame', (data) => {
   const blob = new Blob([data.frame], { type: 'image/jpg' })
   const url = URL.createObjectURL(blob)
@@ -55,10 +57,19 @@ socket.on('frame', (data) => {
     ctx.drawImage(img, 0, 0, player.width, player.height)
     // player.innerHTML = ''
     // player.appendChild(img)
+    fps += 1
   }
   img.src = url
 })
 
+setInterval(() => {
+  store.dispatch({
+    type: 'SET_FPS',
+    fps: fps,
+  })
+  fps = 0
+}, 1000)
+
 export function list_checkpoints() {
   socket.emit('cmd', {
     cmd: 'list_checkpoints',