Skip to main content

Status Recording

Previous chapter recalls: Change the perspective

  • You know what is State, and how to get and modify.
  • Autoring features via State.
This chapter can learn to
  • Record user operations via State.
  • Restore the user action picture with State.

Preparatory work​

Like the previous section, we create a new directory (src/3.recording-stateand corresponding html and js or ts files.

js or ts files can first copy the previous chapter.

src/3.recording-state/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>状态录制 | Recording state</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index"></script>
  </body>
</html>
src/3.recording-state/useWindowDimensions.js
import { ref, onBeforeUnmount } from "vue";

function useWindowDimensions() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);

  const listener = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  };

  window.addEventListener("resize", listener, false);
  onBeforeUnmount(() => {
    window.removeEventListener("resize", listener, false);
  });
  return { width, height };
}
export { useWindowDimensions };
src/3.recording-state/ModeController.vue
<template>
  <nav class="navbar fixed-bottom navbar-light bg-light">
    <div class="container-fluid justify-content-center">
      <div class="btn-group">
        <button
          :class="
            state.mode == 'Panorama'
              ? 'btn btn-primary active'
              : 'btn btn-primary'
          "
          @click="() => setState({ mode: Five.Mode.Panorama })"
        >
          Panorama roaming
        </button>
        <button
          :class="
            state.mode == 'Panorama'
              ? 'btn btn-primary'
              : 'btn btn-primary active'
          "
          @click="() => setState({ mode: Five.Mode.Floorplan })"
        >
          Space overview
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useFiveCurrentState } from "@realsee/five/vue";
import { Five } from "@realsee/five";

const [state, setState] = useFiveCurrentState();
</script>
src/3.recording-state/LookAroundController.vue
<template>
  <div class="card position-fixed m-2 top-0 end-0">
    <button class="btn btn-light" v-show="isShow" @click="startFunc">
      <i class="bi bi-arrow-repeat"></i>
    </button>
    <button class="btn btn-light" v-show="!isShow" @click="stopFunc">
      <i class="bi bi-pause"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useFiveCurrentState } from "@realsee/five/vue";

const [currentState, setState] = useFiveCurrentState();
const isShow = ref(true);
let timer;

const startFunc = () => {
  window.clearInterval(timer);
  isShow.value = false;
  timer = window.setInterval(() => {
    setState({ longitude: currentState.value.longitude + Math.PI / 360 });
  }, 16);
};

const stopFunc = () => {
  window.clearInterval(timer);
  isShow.value = true;
};
</script>
src/3.recording-state/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="width" :height="height" />
    <ModeController />
    <LookAroundController />
  </FiveProvider>
</template>

<script setup lang="ts">
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
import ModeController from "./ModeController.vue";
import LookAroundController from "./LookAroundController.vue";

const work = ref();
const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

fetch(workURL)
  .then((response) => response.text())
  .then((text) => (work.value = parseWork(text)));
const { width, height } = useWindowDimensions();
</script>
src/3.recording-state/index.js
import { createApp, h } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

Start service npm run dev and jump to the current page "http://localhost:3000/src/3.recording-state/index.html".

info

Please see your console. The port number will change due to your configuration and current port occupancy, please check the console output. If you use another development build tool, please start the service as required by your own development build tool.

Recording / Playback​

This chapter continues to complete an interesting app with State. This chapter will complete such an app, log users into Stateon the page and can replay these actions.

Write Recorder​

First, we need to write Recorder to support records and playbacks. Recorder category is not the content of Five , it is only written to achieve the effect of this chapter.

  1. Implement the startRecording / endRecording method to start recording and end recording.
  2. Implementing record(state: State) method, recording content.Record between startRecording / endRecording.
  3. Implement play(callback) method, for playbacks, after calling play, install record content, call callback method,play State.
src/3.recording-state/recorder.js
/**
 * Recording class
 */
class Recorder {
  constructor() {
    this.startTime = 0;
    this.records = null;
  }
  /**
   * Whether
   has been recorded */
  hasRecords() {
    return this.records !== null;
  }
  /**
   * Record keyframe
   * @param state five of state
   * @returns
   */
  record(state) {
    if (this.records === null) return;
    this.records.push({
      state: Object.assign({}, state),
      time: Date.now() - this.startTime,
    });
  }
  /**
   * start recording
   */
  startRecording() {
    this.startTime = Date.now();
    this.records = [];
  }
  /**
   * End recording
   */
  endRecording() {
    this.startTime = 0;
  }
  /**
   * Playback recording
   * @param callback key frame callback
   * @returns whether the current There are records
   */
  play(callback) {
    if (this.records === null || this.records.length === 0) return false;
    const records = this.records.slice();
    const keyframe = (keyIndex) => {
      const current = records[keyIndex];
      const next = records[keyIndex + 1];
      callback(current.state, next === undefined);
      if (next) {
        const delay = next.time - current.time;
        setTimeout(() => keyframe(keyIndex + 1), delay);
      }
    };
    keyframe(0);
    return true;
  }
}

export { Recorder };

Write Recording Component​

Put Recorder into a Vue component.

  1. Add a RecorderController file to write components.
  2. Component has status recording and playing.Separate status in recording/playback.
  3. useFiveEventCallback Gets the Built-in method callback.
    here we call stateChange event, when state changes, this event will be triggered, and then State calls recorder.record(state) method to record.

    More event descriptions see Five events list

  4. When the playback button is pressed, call the recorder.play(callback) method, then call the previously recorded state arc call callback method.
  5. The setState method to call the record and apply the replay content to change the picture.
src/3.recording-state/RecorderController.vue
<template>
  <div class="card position-fixed m-2 top-0 start-0">
    <div class="btn-group align-items-center">
      <button class="btn btn-light " v-show="recordStart" @click="startRecord">
        <i class="bi bi-record-fill"></i>
      </button>
      <button class="btn btn-light " v-show="recordEnd" @click="stopRecord">
        <i class="bi bi-stop-fill"></i>
      </button>
      <button class="btn btn-light " v-show="playingStart" @click="playRecord">
        <i class="bi bi-play-fill"></i>
      </button>
      <p class="badge bg-primary m-2 " v-show="recording" @click="">
        Recording
      </p>
      <p class="badge bg-primary m-2 " v-show="playing" @click="">Playing</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Recorder } from "./recorder";
import { useFiveState, useFiveEventCallback } from "@realsee/five/vue";
const recorder = new Recorder();
const [state, setState] = useFiveState();

const recordStart = ref(true);
const recordEnd = ref(false);
const playingStart = ref(true);
const recording = ref(false);
const playing = ref(false);

useFiveEventCallback("stateChange", (state) => {
  if (recording.value === true) {
    recorder.record(state);
  }
});

const startRecord = () => {
  recorder.startRecording();
  recordStart.value = false;
  recordEnd.value = true;
  recording.value = true;
  playingStart.value = false;
};

const stopRecord = () => {
  recorder.endRecording();
  recordStart.value = true;
  recordEnd.value = false;
  recording.value = false;
  playingStart.value = true;
};

const playRecord = () => {
  recordStart.value = false;
  recordEnd.value = false;
  recording.value = false;
  playingStart.value = false;
  playing.value = true;
  const hasRecrod = recorder.play((state, isFinal) => {
    setState(state);
    if (isFinal) {
      recordStart.value = true;
      recordEnd.value = false;
      recording.value = false;
      playingStart.value = true;
      playing.value = false;
    }
  });
  if (!hasRecrod) {
    recordStart.value = true;
    recordEnd.value = false;
    recording.value = false;
    playingStart.value = true;
    playing.value = false;
  }
};
</script>

Use Status Recording Component​

Insert into App file GiveProvider

src/3.recording-state/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="width" :height="height" />
    <ModeController />
    <LookAroundController />
    <RecorderController />
  </FiveProvider>
</template>

<script setup>
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
import ModeController from "./ModeController.vue";
import LookAroundController from "./LookAroundController.vue";
import RecorderController from "./RecorderController.vue";
const work = ref();
const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

fetch(workURL)
  .then((response) => response.text())
  .then((text) => (work.value = parseWork(text)));
const { width, height } = useWindowDimensions();
</script>

Back to your browser to view will find a record and play button in the upper left corner of your page.Try whether the trial function meets expectations.

Yes, you’re and can write what complex programs are🥳

The next section will be completed by you​

Next chapter we need to deal with the three-dimensional spatial model.
  • Learn about the Live SDK gesture interaction.
  • Gets a three-dimensional position to a point.
Last updated on by sansi.lcj