From a896eb13bfc4da16ba899f7bc44b6aaf4f652ddb Mon Sep 17 00:00:00 2001 From: Johan Gyllenspetz Date: Mon, 4 Jan 2016 18:20:58 -0800 Subject: [PATCH] Add experimental EventUI --- debug/index.html | 4 ++++ src/UI.ts | 1 + src/state/StateService.ts | 10 ++++++++++ src/ui/EventUI.ts | 37 +++++++++++++++++++++++++++++++++++++ src/ui/SimpleUI.ts | 14 +++----------- src/viewer/Viewer.ts | 10 +++++++++- 6 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 src/ui/EventUI.ts diff --git a/debug/index.html b/debug/index.html index 0a04c645..ed9b6c81 100644 --- a/debug/index.html +++ b/debug/index.html @@ -27,6 +27,10 @@ var simplePlayBot = new Mapillary.SimplePlayBot(); viewerSimple.activateBot(simplePlayBot); + + viewerSimple.eventUI.on("moveend", function (node) { + console.log(node.key); + }); diff --git a/src/UI.ts b/src/UI.ts index 1a4319b2..a0be0a12 100644 --- a/src/UI.ts +++ b/src/UI.ts @@ -1,4 +1,5 @@ export {CoverUI} from "./ui/CoverUI" +export {EventUI} from "./ui/EventUI" export {NoneUI} from "./ui/NoneUI" export {SimpleUI} from "./ui/SimpleUI" export {GlUI} from "./ui/GlUI" diff --git a/src/state/StateService.ts b/src/state/StateService.ts index 5f95d428..94f0a74f 100644 --- a/src/state/StateService.ts +++ b/src/state/StateService.ts @@ -23,6 +23,7 @@ export class StateService { public updateCurrentState: rx.Subject = new rx.Subject(); public currentState: rx.Observable; + public currentNode: rx.Observable; private animationSpeed: number = 0.20; @@ -74,6 +75,15 @@ export class StateService { }); }).subscribe(this.updateCurrentState); + this.currentNode = this.currentState.map((currentState: ICurrentState): Node => { + if (currentState != null && currentState.currentNode != null) { + return currentState.currentNode; + } + return null; + }).filter((node: Node): boolean => { + return node != null; + }).distinctUntilChanged(); + this.tick.map((i: number): ICurrentStateOperation => { return ((currentState: ICurrentState) => { return currentState; diff --git a/src/ui/EventUI.ts b/src/ui/EventUI.ts new file mode 100644 index 00000000..e77b2ebf --- /dev/null +++ b/src/ui/EventUI.ts @@ -0,0 +1,37 @@ +/// + +import * as _ from "underscore"; +import * as rx from "rx"; + +import {Node} from "../Graph"; +import {Navigator} from "../Viewer"; +import {IUI} from "../UI"; + +export class EventUI implements IUI { + private disposable: rx.IDisposable; + private navigator: Navigator; + private cbs: any[]; + + constructor(navigator: Navigator) { + this.navigator = navigator; + this.cbs = []; + } + + public activate(): void { + this.disposable = this.navigator.stateService.currentNode.subscribe((node: Node): void => { + _.map(this.cbs, (cb: any) => { + cb(node); + }); + }); + } + + public deactivate(): void { + this.disposable.dispose(); + } + + public on(event: string, cb: any): void { + this.cbs.push(cb); + } +} + +export default EventUI; diff --git a/src/ui/SimpleUI.ts b/src/ui/SimpleUI.ts index aabdeeb7..91b7d794 100644 --- a/src/ui/SimpleUI.ts +++ b/src/ui/SimpleUI.ts @@ -2,14 +2,11 @@ import * as rx from "rx"; -import {Node} from "../Graph"; import {ICurrentState} from "../State"; import {Navigator} from "../Viewer"; import {IUI} from "../UI"; export class SimpleUI implements IUI { - public graphSupport: boolean = true; - private canvas: HTMLCanvasElement; private disposable: rx.IDisposable; private navigator: Navigator; @@ -18,8 +15,8 @@ export class SimpleUI implements IUI { this.navigator = navigator; this.canvas = document.createElement("canvas"); - this.canvas.style.width = "100%"; - this.canvas.style.height = "100%"; + this.canvas.style.width = "320px"; + this.canvas.style.height = "240px"; container.appendChild(this.canvas); } @@ -27,7 +24,7 @@ export class SimpleUI implements IUI { this.disposable = this.navigator.stateService.currentState.subscribe((currentState: ICurrentState) => { if (currentState != null && currentState.currentNode != null) { let ctx: any = this.canvas.getContext("2d"); - ctx.drawImage(currentState.currentNode.image, 0, 0); + ctx.drawImage(currentState.currentNode.image, 0, 0, 300, 225); } }); } @@ -36,11 +33,6 @@ export class SimpleUI implements IUI { this.disposable.dispose(); // remove canvas from DOM here } - - public display(node: Node): void { - let i: number = 0; - i++; - } } export default SimpleUI; diff --git a/src/viewer/Viewer.ts b/src/viewer/Viewer.ts index 623d34fc..25d2cade 100644 --- a/src/viewer/Viewer.ts +++ b/src/viewer/Viewer.ts @@ -7,7 +7,7 @@ import {InitializationMapillaryError, ParameterMapillaryError} from "../Error"; import {Node} from "../Graph"; import {EdgeConstants} from "../Edge"; import {IViewerOptions, Navigator, OptionsParser} from "../Viewer"; -import {CoverUI, IUI, NoneUI, SimpleUI, GlUI, SimpleNavUI} from "../UI"; +import {CoverUI, EventUI, IUI, NoneUI, SimpleUI, GlUI, SimpleNavUI} from "../UI"; import {CacheBot, IBot} from "../Bot"; export class Viewer { @@ -28,6 +28,9 @@ export class Viewer { */ public navigator: Navigator; + // fixme ugly eventui test + public eventUI: EventUI; + /** * HTML element containing the Mapillary viewer * @member Mapillary.Viewer#container @@ -102,6 +105,11 @@ export class Viewer { } this.activeUis = {}; + + this.eventUI = new EventUI(this.navigator); + this.addUI("event", this.eventUI); + this.activateUI("event"); + _.map(this.options.uis, (ui: string) => { this.activateUI(ui); });