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

Updated config page.

Browse Source
This commit is contained in:
Michael Mainguy 2024-08-30 12:43:08 -05:00
parent 4e6c3a63d0
commit f2b9e78e45
9 changed files with 106 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/controllers/functions/snapAll.ts
View File

@ -1,15 +1,24 @@
import {TransformNode, Vector3} from "@babylonjs/core";
import {AppConfig} from "../../util/appConfig";
import {getAppConfig} from "../../util/appConfig";
import {snapRotateVal} from "../../util/functions/snapRotateVal";
import {snapGridVal} from "../../util/functions/snapGridVal";
export function snapAll(node: TransformNode, config: AppConfig, pickPoint: Vector3) {
export function snapAll(node: TransformNode, pickPoint: Vector3) {
const config = getAppConfig();
const transform = new TransformNode('temp', node.getScene());
transform.position = pickPoint;
node.setParent(transform);
node.rotation = snapRotateVal(node.absoluteRotationQuaternion.toEulerAngles(), config.current.rotateSnap);
transform.position = snapGridVal(transform.absolutePosition, config.current.gridSnap);
if (config.rotationSnapEnabled) {
node.rotation = snapRotateVal(node.absoluteRotationQuaternion.toEulerAngles(), parseFloat(config.rotationSnap));
}
if (config.locationSnapEnabled) {
transform.position = snapGridVal(transform.absolutePosition, parseFloat(config.locationSnap));
}
node.setParent(null);
node.position = snapGridVal(node.absolutePosition, config.current.gridSnap);
if (config.locationSnapEnabled) {
node.position = snapGridVal(node.absolutePosition, parseFloat(config.locationSnap));
}
transform.dispose();
}

4
src/diagram/functions/dropMesh.ts
View File

@ -21,7 +21,7 @@ export function dropMesh(mesh: AbstractMesh,
case MeshTypeEnum.ENTITY:
if (diagramObject) {
diagramObject.baseTransform.setParent(null);
snapAll(grabbedObject.baseTransform, diagramManager.config, pickPoint);
snapAll(grabbedObject.baseTransform, pickPoint);
diagramObject.mesh.computeWorldMatrix(true);
const event: DiagramEvent =
{
@ -36,7 +36,7 @@ export function dropMesh(mesh: AbstractMesh,
break;
case MeshTypeEnum.TOOL:
grabbedObject.baseTransform.setParent(null);
snapAll(grabbedObject.baseTransform, diagramManager.config, pickPoint);
snapAll(grabbedObject.baseTransform, pickPoint);
diagramObject.mesh.computeWorldMatrix(true);
const event: DiagramEvent =
{

2
src/integration/database/pouchdbPersistenceManager.ts
View File

@ -93,7 +93,7 @@ export class PouchdbPersistenceManager {
this.onDBEntityUpdateObservable.add((evt) => {
this._logger.debug(evt);
if (evt.id != 'metadata' && evt.type != 'user') {
if (evt.id != 'metadata' && evt.type = 'user') {
diagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.ADD,
entity: evt

112
src/react/marketing/about.tsx
View File

@ -1,82 +1,50 @@
import {Accordion, Card, Center} from "@mantine/core";
import {Card} from "@mantine/core";
import PageTemplate from "../pageTemplate";
export default function About() {
return (
<PageTemplate>
<Card m={64}>
<Card.Section>
<Center>
<h1>VisuaLab VR: Unleash the Power of Immersive Diagramming</h1>
</Center>
</Card.Section>
<Card.Section>
<h3>Diagram complex systems effortlessly with VisuaLab VR – fast, intuitive, and 40x more
effective.</h3>
</Card.Section>
<Card.Section>
<Accordion defaultValue="1">
<Accordion.Item key="1" value="1">
<Accordion.Control>What is VisuaLab VR?</Accordion.Control>
<Accordion.Panel>
Step into a world where complex ideas come to life in 3D. With VisuaLab VR, you’re not
just
creating diagrams – you’re immersing yourself in them. Our cutting-edge VR technology
transforms the
way you visualize, understand, and communicate complex systems. Whether you’re mapping
out intricate
workflows, designing sophisticated models, or explaining multifaceted processes,
VisuaLab VR makes
it easy.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item key="2" value="2">
<Accordion.Control>Why Choose VisuaLab VR?</Accordion.Control>
<Accordion.Panel>
Immersive Experience: Traditional 2D diagrams can’t compare to the power of full
immersion. When you
step into VisuaLab VR, you interact with your diagrams in three dimensions, making it 40
times more
effective at explaining complex systems. See every connection, understand every
relationship, and
explore every detail as if you’re inside the system itself.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item key="3" value="3">
<Accordion.Control>Fast and Intuitive</Accordion.Control>
<Accordion.Panel>
No steep learning curve here. VisuaLab VR is designed for speed and simplicity.
Drag, drop, and connect elements with ease, all in a visually rich environment. Create
stunning
diagrams in minutes, not hours.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item key="4" value="4">
<Accordion.Control>Affordable Innovation</Accordion.Control>
<Accordion.Panel>
High-quality VR doesn’t have to break the bank. VisuaLab VR offers premium
features at a fraction of the cost, making it accessible for everyone from solo creators
to large
</Accordion.Panel>
</Accordion.Item>
<p>
Introducing Das Fad: Your Creative Hub for Digital Architecture and Collaboration
</p>
<p>
Das Fad is a groundbreaking platform designed to enable collaboration between software architects,
security professionals, software development teams, and risk management teams.
</p>
<p>
Combining cutting-edge technology with a user-friendly interface,
Das Fad empowers professionals to push the boundaries of creativity
while ensuring robust security and seamless collaboration.
</p>
<p>
With our intuitive tools, you can quickly build and share designs for new
software platforms and instantly get feedback from different
stakeholders. Whether you are working on a simple layout or an intricate global network,
you can quickly vet, change, and share your system designs with your team.
</p>
<p>
Our solution is secure by design, ensuring that your
intellectual property and sensitive data are protected at all times.
Das Fad employs advanced encryption and secure access protocols
to ensure that your information remains confidential and secure.
</p>
<p>
Dive deep into your projects with our forensic analysis tools.
Identify potential design flaws, assess structural integrity,
and integrate with your incident tracking tools to quickly
assess and mitigate risks.
</p>
<p>
Our model is collaboration first and all aspects are designed to be used
with multiple users while retaining all audit history of changes.
<Accordion.Item key="5" value="5">
<Accordion.Control>The Science Behind It</Accordion.Control>
<Accordion.Panel>
Studies show that immersive environments increase the ability to
comprehension and retention by up to 40 times compared to traditional 2D methods. By
engaging
multiple senses and providing a spatial understanding, VisuaLab VR allows you to grasp
complex
systems faster and with greater clarity. You’re not just looking at a diagram; you’re
experiencing
it. This deep engagement leads to quicker insights, more efficient problem-solving, and
better
decision-making.
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Card.Section>
</p>
<p>
Designed by software professionals for software professionals,
the experience is tailored to your needs.
</p>
</Card>
</PageTemplate>
)

4
src/react/pages/configModal.tsx
View File

@ -1,5 +1,6 @@
import {Group, Modal, SegmentedControl, Stack, Switch} from "@mantine/core";
import {useEffect, useState} from "react";
import {setAppConfig} from "../../util/appConfig";
const locationSnaps = [
{value: ".01", label: '1cm'},
@ -51,7 +52,8 @@ export default function ConfigModal({configOpened, closeConfig}) {
snapTurnSnapEnabled: snapTurnSnapEnabled,
flyModeEnabled: flyModeEnabled
}
localStorage.setItem('config', JSON.stringify(config))
setAppConfig(config);
}, [locationSnap, locationSnapEnabled, rotationSnap, rotationSnapEnabled, snapTurnSnap, snapTurnSnapEnabled, flyModeEnabled]);
return (
<Modal onClose={closeConfig} opened={configOpened}>

36
src/util/appConfig.ts
View File

@ -79,3 +79,39 @@ export class AppConfig {
this.onConfigChangedObservable.notifyObservers(this._currentConfig, -1);
}
}
let defaultConfig: ConfigType =
{
locationSnap: '.1',
locationSnapEnabled: true,
rotationSnap: '90',
rotationSnapEnabled: true,
flyModeEnabled: true,
snapTurnSnap: '45',
snapTurnSnapEnabled: false
}
try {
const newConfig = JSON.parse(localStorage.getItem('config'));
defaultConfig = {...defaultConfig, ...newConfig};
} catch (e) {
}
export type ConfigType = {
locationSnap: string,
locationSnapEnabled: boolean,
rotationSnap: string,
rotationSnapEnabled: boolean,
flyModeEnabled: boolean,
snapTurnSnap: string,
snapTurnSnapEnabled: boolean
}
export function getAppConfig(): ConfigType {
return defaultConfig;
}
export function setAppConfig(config: ConfigType) {
localStorage.setItem('config', JSON.stringify(config));
}

9
src/util/customEnvironment.ts
View File

@ -29,19 +29,12 @@ export class CustomEnvironment {
constructor(name: string = "default", config: AppConfig) {
this.scene = DefaultScene.Scene;
this.name = name;
const loading = document.querySelector('#loadingGrid');
if (loading) {
loading.remove();
}
this.scene.ambientColor = new Color3(.1, .1, .1);
const light = new HemisphericLight("light1", new Vector3(.5, 1, 1).normalize(), this.scene);
light.groundColor = new Color3(0, 0, 0);
light.diffuse = new Color3(1, 1, 1);
light.intensity = .8;
//light.setDirectionToTarget(new Vector3(.4, .5, .5).normalize());
//light.intensity = .7;
//const light = new PointLight("light1", new Vector3(0, 10, 10), this.scene);
//const light2 = new PointLight("light1", new Vector3(0, 10, -10), this.scene);
const physics = new CustomPhysics(this.scene, config);
physics
.initializeAsync()

11
src/util/customPhysics.ts
View File

@ -1,17 +1,16 @@
import {HavokPlugin, Quaternion, Scene, Vector3} from "@babylonjs/core";
import HavokPhysics from "@babylonjs/havok";
import {AppConfig} from "./appConfig";
import {snapGridVal} from "./functions/snapGridVal";
import {snapRotateVal} from "./functions/snapRotateVal";
import {isDiagramEntity} from "../diagram/functions/isDiagramEntity";
import {getAppConfig} from "./appConfig";
export class CustomPhysics {
private readonly scene: Scene;
private config: AppConfig;
constructor(scene: Scene, config: AppConfig) {
constructor(scene: Scene) {
this.scene = scene;
this.config = config;
}
public async initializeAsync() {
@ -32,12 +31,12 @@ export class CustomPhysics {
body.disablePreStep = false;
const pos: Vector3 = body.getObjectCenterWorld();
const val: Vector3 = snapGridVal(pos,
this.config.current.gridSnap);
parseFloat(getAppConfig().locationSnap));
body.transformNode.position.set(val.x, val.y, val.z);
const rot: Quaternion =
Quaternion.FromEulerVector(
snapRotateVal(body.transformNode.rotationQuaternion.toEulerAngles(),
this.config.current.rotateSnap))
parseFloat(getAppConfig().rotationSnap)))
body.transformNode.rotationQuaternion.set(
rot.x, rot.y, rot.z, rot.w

12
src/util/functions/groundMeshObserver.ts
View File

@ -4,6 +4,7 @@ import {WebController} from "../../controllers/webController";
import {Rigplatform} from "../../controllers/rigplatform";
import {DiagramManager} from "../../diagram/diagramManager";
import {Spinner} from "../../objects/spinner";
import {getAppConfig} from "../appConfig";
export async function groundMeshObserver(ground: AbstractMesh,
@ -70,14 +71,9 @@ export async function groundMeshObserver(ground: AbstractMesh,
});
const rig = new Rigplatform(xr, diagramManager);
const currentConfig = diagramManager.config.current;
rig.flyMode = currentConfig.flyMode;
rig.turnSnap = currentConfig.turnSnap;
diagramManager.config.onConfigChangedObservable.add((config) => {
rig.flyMode = config.flyMode;
rig.turnSnap = config.turnSnap;
}, -1, false, this);
const config = getAppConfig();
rig.flyMode = config.flyModeEnabled;
rig.turnSnap = parseFloat(config.snapTurnSnap);
const webController = new WebController(ground.getScene(), rig, diagramManager);
}