mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Branding + Auth.

Browse Source
This commit is contained in:
Michael Mainguy 2024-08-30 14:57:29 -05:00
parent cdf59db5b6
commit 8c04b40d03
4 changed files with 98 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -7,9 +7,9 @@
name="description">
<meta content="width=device-width, initial-scale=1, height=device-height" name="viewport">
<!--<link href="/styles.css" rel="stylesheet"> -->
<link href="/assets/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/assets/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/assets/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="/assets/dasfad/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/assets/dasfad/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/assets/dasfad/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<title>Deep Diagram</title>
<!-- <link as="script" href="/newRelic.js" rel="preload">
<script defer src="/newRelic.js"></script> -->

53
src/react/pageHeader.tsx
View File

@ -1,12 +1,32 @@
import {Anchor, AppShell, Burger, Button, Group, Image} from "@mantine/core";
import {Anchor, AppShell, Box, Burger, Button, Group, Image, Menu, Stack} from "@mantine/core";
import React from "react";
import {Link} from "react-router-dom";
import {useAuth0} from "@auth0/auth0-react";
export default function PageHeader() {
const {user, isAuthenticated, loginWithRedirect, logout} = useAuth0();
const picture = () => {
if (user.picture) {
return <Image w="32" h="32" src={user.picture} alt="user"/>
} else {
return <></>
}
}
const userDisplay = () => {
if (isAuthenticated) {
return <Group>
<Box visibleFrom="sm" component="span">{picture()}</Box>
<Button onClick={() => logout({logoutParams: {returnTo: window.location.origin}})}>Logout</Button>
</Group>
} else {
return <Button key="login" onClick={() => loginWithRedirect()}>Login</Button>
}
}
return (
<AppShell.Header p={10}>
<AppShell.Header p={5} m={20}>
<Group justify="space-between">
<Image w={64} src="/assets/ddd.svg"/>
<Image w={64} src="/assets/dasfad-logo.svg"/>
<Group justify="flex-end">
<Group visibleFrom="sm">
@ -21,11 +41,34 @@ export default function PageHeader() {
<Anchor component={Link} key="vrexperience" to="/db/public/local" p={5} c="myColor" bg="none"
underline="hover">VR Experience</Anchor>
</Group>
<Menu trigger="click" openDelay={50} closeDelay={400}>
<Menu.Target>
<Burger hiddenFrom="sm"/>
<Button key="signup">Sign up for Free</Button>
<Button>Login</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item><Anchor size="xl" component={Link} key="examples" to="/examples" p={5}
c="myColor" bg="none"
underline="hover">Examples</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="about" to="/" p={5} c="myColor" bg="none"
underline="hover">About</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="documentation" to="/documentation" p={5}
c="myColor" bg="none"
underline="hover">Documentation</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="pricing" to="/pricing" p={5} c="myColor"
bg="none"
underline="hover">Pricing</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="vrexperience" to="/db/public/local" p={5}
c="myColor" bg="none"
underline="hover">VR Experience</Anchor></Menu.Item>
</Menu.Dropdown>
</Menu>
{userDisplay()}
</Group>
</Group>
<Stack>
</Stack>
</AppShell.Header>
)
}

8
src/react/webApp.tsx
View File

@ -3,6 +3,7 @@ import '@mantine/core/styles.css';
import React from "react";
import {RouterProvider} from "react-router-dom";
import {webRouter} from "./webRouter";
import {Auth0Provider} from "@auth0/auth0-react";
export default function WebApp() {
document.addEventListener('promptpassword', () => {
@ -13,6 +14,13 @@ export default function WebApp() {
});
return (
<Auth0Provider
domain="dev-g0lt18ndbcp6earr.us.auth0.com"
clientId="3l9HFxOIotk2QbJbdmLoI7lgCjsSUt2j"
authorizationParams={{
redirect_uri: window.location.origin
}}>
<RouterProvider router={webRouter}/>
</Auth0Provider>
)
}

38
src/vrApp.ts
View File

@ -1,4 +1,13 @@
import {Color3, Engine, FreeCamera, Observable, Scene, Vector3, WebGPUEngine} from "@babylonjs/core";
import {
Color3,
DeviceOrientationCamera,
Engine,
FreeCamera,
Observable,
Scene,
Vector3,
WebGPUEngine
} from "@babylonjs/core";
import '@babylonjs/loaders';
import {DiagramManager} from "./diagram/diagramManager";
import log, {Logger} from "loglevel";
@ -21,6 +30,7 @@ export default class VrApp {
private _db: PouchData;
private _dbName: string;
private _engine: Engine | WebGPUEngine;
private _mobileCamera: DeviceOrientationCamera;
constructor(canvas: HTMLCanvasElement, dbname: string) {
this._canvas = canvas;
@ -32,7 +42,7 @@ export default class VrApp {
}
public async initialize(scene: Scene) {
setMainCamera(scene);
this.setMainCamera(scene);
const spinner = new Spinner();
spinner.show();
const diagramReadyObservable = new Observable<boolean>();
@ -89,15 +99,35 @@ export default class VrApp {
scene.render();
});
}
}
function setMainCamera(scene: Scene) {
private setMainCamera(scene: Scene) {
const CAMERA_NAME = 'Main Camera';
const camera: FreeCamera = new FreeCamera(CAMERA_NAME,
new Vector3(0, 1.6, 0), scene);
scene.setActiveCameraByName(CAMERA_NAME);
/* if (!this._mobileCamera) {
window.addEventListener("devicemotion", (event) => {
if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma) {
console.log(this);
const camera: DeviceOrientationCamera = new DeviceOrientationCamera('Mobile Camera',
new Vector3(0, 1.6, 0), scene);
this._mobileCamera = camera;
scene.setActiveCameraByName('Mobile Camera');
}
});
}
*/
}
}
function initEnvironment(diagramManager: DiagramManager, spinner: Spinner) {
const environment = new CustomEnvironment("default", diagramManager.config);