Add Script Tuner

package.json

@@ -62,6 +62,7 @@
     "@types/react-color": "^2.14.0",
     "@types/react-dom": "^16.0.11",
     "@types/react-hot-loader": "^4.1.0",
+    "@types/react-outside-click-handler": "^1.2.0",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",
     "@types/seedrandom": "^2.4.27",

src/client/components/app/install.tsx

@@ -4,6 +4,7 @@ import { installChart } from '../chart/install'
 import { installDashboard } from '../dashboard/install'
 import { installLocalisation } from '../localisation/install'
 import { withRobotSelectorMenuBar } from '../menu_bar/view'
+import { installScriptTuner } from '../script_tuner/install'
 import { installVision } from '../vision/install'
 import { installVisualMesh } from '../visual_mesh/install'
 
@@ -23,6 +24,7 @@ export function installNav() {
 
   installDashboard({ nav, appModel, nusightNetwork, menu })
   installLocalisation({ nav, appModel, nusightNetwork, menu })
+  installScriptTuner({ nav, appModel, nusightNetwork, menu })
   installChart({ nav, appModel, nusightNetwork, menu })
   installVision({ nav, appModel, nusightNetwork, Menu: menu })
   installVisualMesh({ nav, appModel, nusightNetwork, Menu: menu })

src/client/components/dropdown/style.css

@@ -4,7 +4,6 @@
 
 .dropdownMenu {
   position: absolute;
-  top: 100%;
   z-index: 1;
 }
 
@@ -15,3 +14,11 @@
 .dropdownMenuRight {
   right: 0;
 }
+
+.dropdownMenuUp {
+  bottom: 100%;
+}
+
+.dropdownMenuDown {
+  top: 100%;
+}

src/client/components/dropdown/view.tsx

@@ -13,14 +13,16 @@ export interface DropdownProps {
   isOpen: boolean
   isFullwidth?: boolean
   dropdownPosition?: 'left' | 'right'
+  dropDirection?: 'up' | 'down'
   onRef?(dropdown: HTMLDivElement): void
   onToggleClick?(event: MouseEvent<HTMLSpanElement>): void
 }
 
 export const Dropdown: StatelessComponent<DropdownProps> = (props: DropdownProps) => {
   const fullwidth = props.isFullwidth ? style.dropdownMenuFullwidth : ''
   const position = props.dropdownPosition === 'right' ? style.dropdownMenuRight : ''
-  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position)
+  const direction = props.dropDirection === 'up' ? style.dropdownMenuUp : style.dropdownMenuDown
+  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position, direction)
 
   return (
     <div className={classNames([style.dropdown, props.className])} ref={props.onRef}>

src/client/components/script_tuner/balance/style.css

@@ -0,0 +1,23 @@
+.balance {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.balanceHeader {
+  background-color: #777;
+  padding: 0 4px;
+  color: white;
+  font-size: 14px;
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+}
+
+.balanceBody {
+  padding: 0 4px;
+  flex-grow: 1;
+  overflow: hidden;
+  position: relative;
+}

src/client/components/script_tuner/balance/view.tsx

@@ -0,0 +1,22 @@
+import * as classNames from 'classnames'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import * as style from './style.css'
+
+type BalanceProps = {
+  className?: string
+}
+
+@observer
+export class Balance extends React.Component<BalanceProps> {
+  render() {
+    return <div className={classNames([this.props.className, style.balance])}>
+      <div className={style.balanceHeader}>
+        <div className={style.balanceTitle}>Balance</div>
+      </div>
+
+      <div className={style.balanceBody}></div>
+    </div>
+  }
+}

src/client/components/script_tuner/controller.ts

@@ -0,0 +1,109 @@
+import { action, autorun, IReactionDisposer } from 'mobx'
+
+import { RobotModel } from '../robot/model'
+
+import { Script, ScriptTunerModel } from './model'
+import { ScriptTunerNetwork } from './network'
+import { createViewModel } from './utils'
+
+interface ScriptTunerOpts {
+  network: ScriptTunerNetwork
+  model: ScriptTunerModel
+}
+
+export class ScriptTunerController {
+  network: ScriptTunerNetwork
+  model: ScriptTunerModel
+  stopPlaytimeAutorun?: IReactionDisposer
+
+  constructor(opts: ScriptTunerOpts) {
+    this.network = opts.network
+    this.model = opts.model
+
+    this.stopPlaytimeAutorun = autorun(() => {
+      if (this.model.playTime >= this.model.endTime) {
+        this.togglePlayback(false)
+      }
+    })
+
+    // TODO need to add an autorunner that if we are connected to the robot we need to send it update packets
+  }
+
+  static of(opts: ScriptTunerOpts) {
+    return new ScriptTunerController(opts)
+  }
+
+  @action
+  selectSourceRobot(robot: RobotModel) {
+    const isInitialSelect = this.model.sourceRobot === undefined
+    this.model.sourceRobot = robot
+
+    if (isInitialSelect) {
+      this.network.requestScripts(robot)
+    }
+
+    // Select the robot as target too
+    this.selectTargetRobot(robot)
+  }
+
+  @action
+  selectTargetRobot(robot: RobotModel) {
+    this.model.targetRobot = robot
+  }
+
+  @action
+  selectScript(script: Script) {
+    // Do nothing if the script is already selected
+    if (this.model.selectedScript && this.model.selectedScript.model === script) {
+      return
+    }
+
+    // Prompt to confirm switch if the current script has unsaved changes
+    if (this.model.selectedScript && this.model.selectedScript.isDirty) {
+      const discardChanges = confirm(`${this.model.selectedScript.data.path} has unsaved changes. Discard?`)
+
+      if (discardChanges) {
+        this.model.selectedScript.reset()
+      } else {
+        return
+      }
+    }
+
+    // Reset the editor state
+    this.model.isPlaying = false
+    this.model.currentTime = 0
+    this.model.previousTimelineLength = 0
+
+    // Select the script
+    this.model.selectedScript = createViewModel(script)
+  }
+
+  @action
+  saveScript() {
+    if (this.model.selectedScript && this.model.targetRobot) {
+      this.network.saveScript(this.model.targetRobot)
+    }
+  }
+
+  @action
+  setPlayTime(time: number) {
+    this.model.currentTime = Math.min(Math.max(time, this.model.startTime), this.model.endTime)
+    this.model.playStartedAt = Date.now()
+  }
+
+  @action
+  togglePlayback(isPlaying: boolean = !this.model.isPlaying) {
+    if (isPlaying) {
+      // Reset to start if we want to play but are at the end of the time
+      if (this.model.playTime >= this.model.endTime) {
+        this.model.currentTime = 0
+      }
+
+      this.model.playStartedAt = Date.now()
+    } else {
+      this.model.currentTime = this.model.playTime
+    }
+
+    this.model.isPlaying = isPlaying
+  }
+}

src/client/components/script_tuner/controls/style.css

@@ -0,0 +1,23 @@
+.controls {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.controlsHeader {
+  background-color: #777;
+  padding: 0 4px;
+  color: white;
+  font-size: 14px;
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+}
+
+.controlsBody {
+  padding: 0 4px;
+  flex-grow: 1;
+  overflow: hidden;
+  position: relative;
+}

src/client/components/script_tuner/controls/view.tsx

@@ -0,0 +1,22 @@
+import * as classNames from 'classnames'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import * as style from './style.css'
+
+type ControlsProps = {
+  className?: string
+}
+
+@observer
+export class Controls extends React.Component<ControlsProps> {
+  render() {
+    return <div className={classNames([this.props.className, style.controls])}>
+      <div className={style.controlsHeader}>
+        <div className={style.controlsTitle}>Controls</div>
+      </div>
+
+      <div className={style.controlsBody}></div>
+    </div>
+  }
+}

src/client/components/script_tuner/editor/controller.ts

@@ -0,0 +1,67 @@
+import { action, computed, observable } from 'mobx'
+import { createTransformer } from 'mobx-utils'
+
+import { ScriptTunerController } from '../controller'
+
+import { EditorViewModel } from './view_model'
+
+interface EditorControllerOpts {
+  viewModel: EditorViewModel,
+  controller: ScriptTunerController
+}
+
+export class EditorController {
+  viewModel: EditorViewModel
+  controller: ScriptTunerController
+
+  constructor(opts: EditorControllerOpts) {
+    this.viewModel = opts.viewModel
+    this.controller = opts.controller
+  }
+
+  static of = createTransformer((opts: EditorControllerOpts) => {
+    return new EditorController(opts)
+  })
+
+  setPlayTime = (time: number) => {
+    this.controller.setPlayTime(time)
+  }
+
+  play = () => {
+    if (this.viewModel.isPlaying) {
+      return
+    }
+
+    this.controller.togglePlayback(true)
+  }
+
+  pause = () => {
+    if (!this.viewModel.isPlaying) {
+      return
+    }
+
+    this.controller.togglePlayback(false)
+  }
+
+  togglePlayback = () => {
+    this.controller.togglePlayback()
+  }
+
+  jumpToStart = () => {
+    this.controller.setPlayTime(this.viewModel.startTime)
+  }
+
+  jumpToEnd = () => {
+    this.controller.setPlayTime(this.viewModel.endTime)
+  }
+
+  @action
+  zoomIn = () => {
+    this.viewModel.scaleX = Math.min(this.viewModel.scaleX + 1, 10)
+  }
+
+  @action
+  zoomOut = () => {
+    this.viewModel.scaleX = Math.max(this.viewModel.scaleX - 1, 1)
+  }
+}

src/client/components/script_tuner/editor/line/controller.ts

@@ -0,0 +1,51 @@
+import * as bounds from 'binary-search-bounds'
+import { action } from 'mobx'
+
+import { Frame, ScriptTunerModel, Servo } from '../../model'
+
+export class LineEditorController {
+  constructor(private model: Servo) {
+    this.model = model
+  }
+
+  static of(model: Servo) {
+    return new LineEditorController(model)
+  }
+
+  @action
+  addFrame = (data: { time: number, angle: number }) => {
+    const frame = {
+      time: data.time,
+      angle: data.angle,
+      pGain: 0,
+      iGain: 0,
+      dGain: 0,
+      torque: 0,
+    }
+
+    const index = findNextIndexForTime(data.time, this.model.frames)
+
+    if (index > 0) {
+      this.model.frames.splice(index, 0, frame)
+    } else {
+      this.model.frames.unshift(frame)
+    }
+  }
+
+  @action
+  updateFrame = (frameIndex: number, data: { time: number, angle: number }) => {
+    this.model.frames[frameIndex].time = data.time
+    this.model.frames[frameIndex].angle = data.angle
+  }
+
+  @action
+  removeFrame = (frameIndex: number) => {
+    this.model.frames.splice(frameIndex, 1)
+  }
+}
+
+function findNextIndexForTime(time: number, frames: Frame[]) {
+  return bounds.gt(frames, frames[0], (frame: Frame) => {
+    return frame.time - time
+  })
+}