filmout_manager/browser/index.ts

enum SequenceStatus {
  IDLE,
  RUNNING,
  PAUSED
}

class Display {
  private parentElement : HTMLUListElement;
  private canvas : HTMLCanvasElement;
  private ctx : CanvasRenderingContext2D;
  private screen : any;
  private sequence : boolean = false;

  private offsetX : number = 0;
  private offsetY : number = 0;
  private width : number = 0;
  private height : number = 0;

  private canvasScale : number = 0;
  private canvasWidth : number = 0;
  private canvasHeight : number = 0;
  private canvasOffsetX : number = 0;
  private canvasOffsetY : number = 0;

  private screenWidth : number = 0;
  private screenHeight : number = 0;
  private screenOffsetX : number = 0;
  private screenOffsetY : number = 0;

  private displayWidth : number = 0;
  private displayHeight : number = 0;
  private displayOffsetX : number = 0;
  private displayOffsetY : number = 0;

  constructor () {
    this.parentElement = document.getElementById('display') as HTMLUListElement;
    this.create();
    window.onresize = this.onResize.bind(this);
  }
  private create () {
    this.canvas = this.parentElement.getElementsByTagName('canvas')[0];
    this.ctx = this.canvas.getContext('2d');
    this.screen = {
      width : parseInt((document.getElementById('width') as HTMLInputElement).value),
      height : parseInt((document.getElementById('height') as HTMLInputElement).value)
    }
    this.updateSize();
    this.clear();
    this.updateScreen();
    this.updateDisplay();
  }

  private updateSize () {
    this.canvasScale = window.devicePixelRatio;
    this.canvasWidth = this.parentElement.clientWidth - 12;
    this.canvasHeight = this.parentElement.clientHeight - 12;
    console.log(`${this.canvasWidth},${this.canvasHeight}`);
    this.canvas.width = this.canvasWidth;
    this.canvas.height = this.canvasHeight;
  }

  private clear () {
    this.ctx.fillStyle = 'rgb(0, 0, 0)';
    this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
  }

  private updateScreen () {
    const clientRatio : number = this.canvasWidth / this.canvasHeight;
    const screenRatio : number = this.screen.width / this.screen.height;

    if (screenRatio > clientRatio) {
      this.screenWidth = this.canvasWidth - 2;
      this.screenHeight = Math.floor(this.canvasWidth / screenRatio);
      this.screenOffsetX = 1;
      this.screenOffsetY = Math.round((this.canvasHeight - this.screenHeight) / 2);
    } else {
      this.screenWidth = Math.round(this.canvasHeight * screenRatio);
      this.screenHeight = this.canvasHeight - 2;
      this.screenOffsetY = 1;
      this.screenOffsetX = Math.round((this.canvasWidth - this.screenWidth) / 2);
    }
    this.ctx.strokeStyle = 'rgb(0, 0, 255)';
    this.ctx.rect(this.screenOffsetX, this.screenOffsetY, this.screenWidth, this.screenHeight);
    this.ctx.stroke();
  }

  private updateDisplay () {
    if (!this.sequence) {
      return;
    }
    console.log(this.sequence)
    const screenScaleX : number =  this.screenWidth / this.screen.width;
    const screenScaleY : number =  this.screenHeight / this.screen.height;
    this.displayWidth = Math.round(this.width * screenScaleX);
    this.displayHeight = Math.round(this.height * screenScaleY);
    this.displayOffsetX = this.screenOffsetX + Math.round(this.offsetX * screenScaleX);
    this.displayOffsetY = this.screenOffsetY + Math.round(this.offsetY * screenScaleY);
  
    this.ctx.fillStyle = 'rgb(125, 125, 125)';
    this.ctx.fillRect(this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
    console.log(`${this.displayOffsetX}, ${this.displayOffsetY}, ${this.displayWidth}, ${this.displayHeight}`);
    this.updateImage();
  }

  private updateImage() {
    const img : any = new Image;
    img.onload = function () {
      this.ctx.drawImage(img, this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
    }.bind(this);
    img.src = `/${this.displayWidth}/${this.displayHeight}/image.jpg`;
  }

  public update (msg : Message) {

  }

  public set (state : State) {
    this.sequence = true;
    this.offsetX = state.offset.x;
    this.offsetY = state.offset.y;
    this.width = state.display.width;
    this.height = state.display.height;
    this.updateDisplay();
  }

  private onResize (event : any) {
    this.updateSize();
    this.clear();
    this.updateScreen();
    this.updateDisplay();
  }
}

class Client {
  private display : Display;
  private client : WebSocket;
  private connected : boolean = false;
  private progress : HTMLProgressElement;

  constructor () {
    let uri : string = 'ws://localhost:8082';
    this.progress = document.getElementById('progress') as HTMLProgressElement;
    this.client = new WebSocket(uri);
    this.display = new Display();
    this.client.onopen = this.onOpen.bind(this);
    this.client.onclose = this.onClose.bind(this);
    this.client.onmessage = this.onMessage.bind(this);
    (document.getElementById('sequenceForm') as HTMLFormElement ).reset();
    (document.getElementById('sequenceCtrlForm') as HTMLFormElement ).reset();
    (document.getElementById('manualCtrlForm') as HTMLFormElement ).reset();
    this.disableClass('sequenceCtrl');
    this.disableClass('manualCtrl');
  }

  private onMessage (event : any) {
    const msg : Message = JSON.parse(event.data) as Message;
    if (typeof msg.cmd !== 'undefined' && msg.cmd !== null) {
      this.cmd(msg);
    }
  }

  private onOpen (event : any) {
    console.log('Connected');
    this.connected = true;
    this.active();
    this.enableClass('manualCtrl');
  }

  private onClose (event : any) {
    console.log('Disconnected');
    this.connected = false;
    this.inactive();
  }

  private setSequence(state : State) {
    this.setProgress(state.sequence);
    this.setStatus(state.sequence);
    this.setDisplay(state);
    (document.getElementById('sequence') as HTMLSelectElement ).value = state.sequence.hash;
  }

  private setStatus (sequence : SequenceState) {
    let status : string;
    switch (sequence.status) {
      case SequenceStatus.IDLE :
        status = 'Idle';
        break;
      case SequenceStatus.RUNNING :
        status = 'Running';
        break;
      case SequenceStatus.PAUSED :
        status = 'Paused';
        break;
      default :
        status = 'Unknown State';
    }
    document.getElementById('sequenceStatus').innerText = status;
    document.getElementById('sequenceName').innerText = sequence.name;
    document.getElementById('sequenceLength').innerText = `Sequence Length: ${sequence.frames}`;
  }

  private setProgress (sequence : SequenceState) {
    const percent : number = sequence.progress * 100.0;
    if (this.progress !== null) {
      this.progress.value = percent;
      this.progress.innerText = `${Math.floor(percent)}%`;
    }
    document.getElementById('sequenceProgress').innerText = `Progress: ${Math.round(sequence.progress)}%`;
  }

  private setDisplay (state : State) {
    const widthEl : HTMLInputElement = document.getElementById('displayWidth') as HTMLInputElement;
    const heightEl : HTMLInputElement = document.getElementById('displayHeight') as HTMLInputElement;

    widthEl.value = state.display.width as any;
    heightEl.value = state.display.height as any;

    widthEl.readOnly = false;
    heightEl.readOnly = false;
    //console.dir(state);
    this.display.set(state);

  }

  private cmd (msg : Message) {
    switch (msg.cmd) {
      case 'open' :
        this.receiveCameraOpen();
        break;
      case 'close' :
        this.receiveCameraClose();
        break;
      case 'select' :
        this.receiveSelect(msg);
        break;
      default:
        console.warn(`No command "${msg.cmd}"`);
        break;
    }
  }

  public disableClass (className : string) {
    console.log(`Disabling class: ${className}`);
    document.querySelectorAll(`.${className}`).forEach((el : HTMLButtonElement) => {
      el.disabled = true;
    });
  }

  public enableClass (className : string) {
    console.log(`Enabling class: ${className}`);
    document.querySelectorAll(`.${className}`).forEach((el : HTMLButtonElement) => {
      el.disabled = false;
    });
  }

  public sendCameraOpen () {
    console.log('send camera open');
    this.disableClass('manualCtrl');
    this.client.send(JSON.stringify({ cmd : 'open' }));
  }

  private receiveCameraOpen () {
    console.log('got camera open');
    this.enableClass('manualCtrl');
  }

  public sendCameraClose () {
    console.log('send camera close');
    this.disableClass('manualCtrl');
    this.client.send(JSON.stringify({ cmd : 'close' }));
  }

  private receiveCameraClose () {
    console.log('got camera close');
    this.enableClass('manualCtrl');
  }

  public sendSelect () {
    const hash : string = (document.getElementById('sequence') as HTMLSelectElement ).value;
    let msg : Message;
    if (hash === '- Select Image Sequence -') {
      return;
    }
    msg = { cmd : 'select', state : { sequence : { hash } } };
    console.log('send select');
    console.log(hash)
    this.client.send(JSON.stringify(msg));
  }

  private receiveSelect (msg : Message) {
    console.log('got select');
    console.dir(msg);
    this.enableClass('sequenceCtrl');
    this.setSequence(msg.state);
  }

  private receiveUpdate (msg : Message) {

  }

  public fullscreen () {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      this.exitFullscreen();
    }
  }

  public exitFullscreen () {
    if (document.fullscreenElement) {
      document.exitFullscreen()
    }
  }

  private active () {
    document.getElementById('overlay').classList.add('active');
  }
  private inactive () {
    document.getElementById('overlay').classList.remove('active');
  }
}

const client : Client = new Client();