sync pose with presenter

Author: devpaul

packages/client/src/external/aframe.ts

@@ -2,6 +2,9 @@ import Store from '@dojo/framework/stores/Store';
 import { State } from '../interfaces';
 import { Media } from 'present-core/api/websocket/screen';
 import { nextSlide, previousSlide } from 'present-core/api/websocket/revealjs';
+import { enterVrProcess, exitVrProcess } from '../processes/vr.process';
+import { startSharingPose, stopSharingPose } from './aframe/pose';
+import { snackbar } from './aframe/snackbar';
 
 export function initialize(store: Store<State>) {
 	const { get, path } = store;
@@ -14,8 +17,32 @@ export function initialize(store: Store<State>) {
 		setScreenMedia(get(path('space', 'screen', 'source')));
 	});
 
+	store.onChange(path('isPresenter'), () => {
+		const isPresenter = get(path('isPresenter'));
+		const isInVr = get(path('isInVr'));
+
+		if (isPresenter && isInVr) {
+			startSharingPose();
+		}
+		else {
+			stopSharingPose();
+		}
+	});
+
+	store.onChange(path('isInVr'), () => {
+		const isPresenter = get(path('isPresenter'));
+		const isInVr = get(path('isInVr'));
+
+		if (isPresenter && isInVr) {
+			startSharingPose();
+		}
+		else {
+			stopSharingPose();
+		}
+	});
+
 	// Attach event handlers to Aframe
-	initializeHandlers();
+	initializeHandlers(store);
 
 	// Wait for Aframe to load before continuing
 	const scene = document.querySelector('a-scene');
@@ -27,28 +54,24 @@ export function initialize(store: Store<State>) {
 	// TODO load the tracked initial values in to the store
 }
 
-function initializeHandlers() {
+function initializeHandlers(store: Store<State>) {
 	// const leftHand = document.getElementById('leftControl');
 	const rightHand = document.getElementById('rightControl');
+	const scene = document.querySelector('a-scene');
 
 	rightHand?.addEventListener('abuttondown', () => {
 		nextSlide({});
 	});
 	rightHand?.addEventListener('bbuttondown', () => {
 		previousSlide({});
 	});
-	// TODO track pose when connected && is presenter
-}
-
-export function snackbar(message: string, timeout: number = 3000) {
-	const textNode = document.querySelector('a-text');
-	textNode?.setAttribute('value', message);
-	setTimeout(() => {
-		const currentValue = textNode?.getAttribute('value');
-		if (currentValue === message) {
-			textNode?.removeAttribute('value');
-		}
-	}, timeout);
+	scene?.addEventListener('enter-vr', () => {
+		enterVrProcess(store)({});
+		snackbar('Welcome');
+	});
+	scene?.addEventListener('exit-vr', () => {
+		exitVrProcess(store)({});
+	});
 }
 
 function setSkyColor(color: string) {

packages/client/src/external/aframe/pose.ts

@@ -0,0 +1,67 @@
+import { Entity } from 'aframe';
+import { sharePose, CharacterPose, Pose } from 'present-core/api/websocket/presenter';
+import { Object3D } from 'three';
+
+let isSharingPose: boolean = false;
+
+function getPose(obj: Object3D) {
+	return {
+		pos: {
+			x: obj.position.x,
+			y: obj.position.y,
+			z: obj.position.z,
+		},
+		rot: {
+			x: obj.rotation.x,
+			y: obj.rotation.y,
+			z: obj.rotation.z,
+		}
+	}
+}
+
+export function startSharingPose() {
+	if (isSharingPose) {
+		return;
+	}
+
+	isSharingPose = true;
+
+	const leftHand = document.getElementById('leftControl') as Entity;
+	const rightHand = document.getElementById('rightControl') as Entity;
+
+	function updatePose() {
+		if (!isSharingPose) {
+			return;
+		}
+
+		const data = {
+			left: getPose(leftHand.object3D),
+			right: getPose(rightHand.object3D)
+		}
+
+		sharePose(data);
+		setTimeout(updatePose, 250);
+	}
+
+	updatePose();
+}
+
+export function stopSharingPose() {
+	isSharingPose = false;
+}
+
+function setPose(obj3d: Object3D, { pos, rot }: Pose) {
+	obj3d.position.set(pos.x, pos.y, pos.z);
+	obj3d.rotation.set(rot.x, rot.y, rot.z);
+}
+
+export function changePose(pose: CharacterPose) {
+	if (pose.left) {
+		const left = document.getElementById('leftPresenter') as Entity;
+		setPose(left.object3D, pose.left);
+	}
+	if (pose.right) {
+		const right = document.getElementById('rightPresenter') as Entity;
+		setPose(right.object3D, pose.right);
+	}
+}

packages/client/src/external/aframe/snackbar.ts

@@ -0,0 +1,15 @@
+export function snackbar(message: string, timeout: number = 3000) {
+	const textNode = document.querySelector('a-text');
+	textNode?.setAttribute('value', message);
+	setTimeout(() => {
+		const currentValue = textNode?.getAttribute('value');
+		if (currentValue === message) {
+			textNode?.removeAttribute('value');
+		}
+	}, timeout);
+}
+
+export function displayText(message?: string) {
+	const textNode = document.querySelector('a-text');
+	textNode?.setAttribute('value', message);
+}

packages/client/src/external/omnisockets.ts

@@ -1,12 +1,14 @@
 import Store from '@dojo/framework/stores/Store';
 import { handleStatus } from 'present-core/api/websocket/info';
 import { handleShowMedia } from 'present-core/api/websocket/screen';
+import { handlePose } from 'present-core/api/websocket/presenter';
 
 import { State } from '../interfaces';
 import { setSourceProcess } from '../processes/screen.process';
 import { handleAuthenticateError, handleAuthenticated, handleNotAuthenticated } from 'present-core/api/websocket/authenticate';
 import { setUnauthenticatedProcess, setAuthenticatedProcess } from '../processes/authenticate.process';
-import { snackbar } from './aframe';
+import { snackbar } from './aframe/snackbar';
+import { changePose } from './aframe/pose';
 
 let store: Store<State>
 
@@ -34,4 +36,8 @@ export function initialize(s: Store<State>) {
 		setUnauthenticatedProcess(store)({});
 		snackbar('Not Authenticated');
 	});
+
+	handlePose((pose) => {
+		changePose(pose);
+	});
 }

packages/client/src/index.html

@@ -13,13 +13,15 @@
 		<a-assets>
 			<video id="vrscreen" playsinline></video>
 		</a-assets>
-		<a-sky key="sky" color="#191a47"></a-sky>
-		<a-entity key="camera" camera look-controls position="0 1.6 0">
-			<a-text key="text" id="txt" value="" position="0 0 -1" scale="0.4 0.4 0.4" align="center" color="#FFF"></a-text>
+		<a-sky color="#191a47"></a-sky>
+		<a-entity camera look-controls position="0 1.6 0">
+			<a-text id="txt" value="" position="0 0 -1" scale="0.4 0.4 0.4" align="center" color="#FFF"></a-text>
 		</a-entity>
 		<a-plane position="0 2 -1.10276" geometry="width: 1.8" color="#000000"></a-plane>
 		<a-entity id="leftControl" laser-controls="hand: left"></a-entity>
 		<a-entity id="rightControl" laser-controls="hand: right"></a-entity>
+		<a-sphere id="leftPresenter" scale="0.2 0.2 0.2" color="red"></a-sphere>
+		<a-sphere id="rightPresenter" scale="0.2 0.2 0.2" color="green"></a-sphere>
 	</a-scene>
 </body>
 </html>

packages/client/src/interfaces.ts

@@ -1,11 +1,14 @@
 import { Media } from 'present-core/api/websocket/screen';
+import { CharacterPose } from 'present-core/api/websocket/presenter';
 
 export interface State {
 	auth: Authentication;
 	/** If the user is the presenter */
 	isPresenter: boolean;
 	/** If the user is connected to websockets */
 	isConnected: boolean;
+	/** If the user is in VR */
+	isInVr: boolean;
 	/** If the menu should be displayed */
 	openMenu: boolean;
 
@@ -31,6 +34,7 @@ export interface Presentation {
 export interface Space {
 	sky: Sky;
 	screen?: Screen;
+	presenter?: CharacterPose;
 }
 
 export interface Sky {

packages/client/src/processes/vr.process.ts

@@ -0,0 +1,28 @@
+import { createCommandFactory, createProcess } from '@dojo/framework/stores/process';
+import { replace } from '@dojo/framework/stores/state/operations';
+
+import { State } from '../interfaces';
+
+const commandFactory = createCommandFactory<State>();
+
+const setEnterVrCommand = commandFactory(({ path }) => {
+	return [
+		replace(path('isInVr'), true)
+	];
+});
+
+const setExitVrCommand = commandFactory(({ path }) => {
+	return [
+		replace(path('isInVr'), false)
+	];
+});
+
+const setPresentingCommand = commandFactory(({ path, payload: { value } }) => {
+	return [
+		replace(path('isPresenter'), value)
+	];
+});
+
+export const enterVrProcess = createProcess('enter-vr', [ setEnterVrCommand ]);
+export const exitVrProcess = createProcess('exit-vr', [ setExitVrCommand ]);
+export const startPresentingProcess = createProcess('start-presenting', [ setPresentingCommand ]);

packages/client/src/widgets/menu/index.tsx

@@ -1,14 +1,15 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
-import { store } from '../../middleware/store';
 import SlidePane from '@dojo/widgets/slide-pane';
-import Hamburger from '../hamburger';
-import { openMenuProcess, closeMenuProcess } from '../../processes/menu.process';
+
+import { store } from '../../middleware/store';
+import { connectProcess, disconnectProcess } from '../../processes/connection.process';
+import { closeMenuProcess, openMenuProcess } from '../../processes/menu.process';
+import { startPresentingProcess } from '../../processes/vr.process';
+import Authentication from '../authentication/Authentication';
 import { Card } from '../card/Card';
-import Status from '../status/Status';
 import Control from '../control/Control';
-import Authentication from '../authentication/Authentication';
-import { connectProcess, disconnectProcess } from '../../processes/connection.process';
-
+import Hamburger from '../hamburger';
+import Status from '../status/Status';
 import * as css from './menu.m.css';
 
 const factory = create({ store });
@@ -22,6 +23,7 @@ export default factory(function Menu({ middleware: { store: { get, path, executo
 	const closeMenu = executor(closeMenuProcess);
 	const connect = executor(connectProcess);
 	const disconnect = executor(disconnectProcess);
+	const presenting = executor(startPresentingProcess);
 
 	return <virtual>
 		{ !isMenuOpen && <Hamburger onClick={() => { openMenu({}) }}></Hamburger> }
@@ -50,7 +52,8 @@ export default factory(function Menu({ middleware: { store: { get, path, executo
 				</div>
 			</Card>
 			{ isAuthenticated && <Card title="Presenter">
-				<Control show={!isPresenter} title="Start Presenting" onClick={() => { }}/>
+				<Control show={!isPresenter} title="Start Presenting" onClick={() => { presenting({ value: true }) }}/>
+				<Control show={!!isPresenter} title="Stop Presenting" onClick={() => { presenting({ value: false }) }}/>
 			</Card> }
 			{ !isAuthenticated && <Card title="Authentication">
 				<Authentication />

packages/core/src/api/websocket/api.ts

@@ -6,6 +6,7 @@ export const enum Action {
 	GetStatus = 'getStatus',
 	HideLaser = 'hideLaser',
 	NextSlide = 'nextSlide',
+	Pose = 'pose',
 	PreviousSlide = 'previousSlide',
 	RoleConnected = 'roleConnected',
 	RoleLeft = 'roleLeft',

packages/core/src/api/websocket/presenter.ts

@@ -1,27 +1,13 @@
-/**
- * Stops showing pose data
- */
-export function stopPresenting(socket: WebSocket) {
-	// TODO implement
-}
+import { createRequest, Action, createHandler } from "./api";
 
-/**
- * Indicates that the presenter should be removed from the scene
- */
-export function handleStopPresenting(socket: WebSocket) {
-	// TODO implement
+export interface Pose {
+	pos: { x: number, y: number, z: number };
+	rot: { x: number, y: number, z: number };
 }
 
-/**
- * Describes the pose of the presenter
- */
-export function updatePose(socket: WebSocket) {
-	// TODO implement
+export interface CharacterPose {
+	[ key: string ]: Pose;
 }
 
-/**
- * Update the presenter in the scene
- */
-export function handleUpdatePose(socket: WebSocket) {
-	// TODO implement
-}
+export const sharePose = createRequest<CharacterPose>(Action.Pose);
+export const handlePose = createHandler<CharacterPose>(Action.Pose);