diff --git a/src/Images/bottomLeft.png b/src/Images/bottomLeft.png new file mode 100644 index 0000000..11e1766 Binary files /dev/null and b/src/Images/bottomLeft.png differ diff --git a/src/Images/bottomRight.png b/src/Images/bottomRight.png new file mode 100644 index 0000000..d7b7409 Binary files /dev/null and b/src/Images/bottomRight.png differ diff --git a/src/Images/topLeft.png b/src/Images/topLeft.png new file mode 100644 index 0000000..3fef9e4 Binary files /dev/null and b/src/Images/topLeft.png differ diff --git a/src/Images/topRight.png b/src/Images/topRight.png new file mode 100644 index 0000000..0745c84 Binary files /dev/null and b/src/Images/topRight.png differ diff --git a/src/main.tsx b/src/main.tsx index 55a47cf..9712735 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,19 +1,120 @@ -import { AvGadget, AvPanel, AvStandardGrabbable, AvTransform, HighlightType, DefaultLanding, GrabbableStyle, renderAardvarkRoot, AvOrigin, AvInterfaceEntity, AvModel, InterfaceProp, ActiveInterface, InterfaceRole} from '@aardvarkxr/aardvark-react'; -import { EAction, EHand, g_builtinModelBox, InitialInterfaceLock, Av, EVolumeType, AvVolume } from '@aardvarkxr/aardvark-shared'; +import { AvGadget, AvPanel, AvStandardGrabbable, AvTransform, AvHeadFacingTransform, HighlightType, DefaultLanding, GrabbableStyle, renderAardvarkRoot, AvOrigin, AvInterfaceEntity, AvModel, InterfaceProp, ActiveInterface, InterfaceRole} from '@aardvarkxr/aardvark-react'; +import { EAction, EHand, g_builtinModelBox, InitialInterfaceLock, Av, EVolumeType, AvVolume, AvVector } from '@aardvarkxr/aardvark-shared'; import bind from 'bind-decorator'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; +interface VolumeTransforms +{ + leftTopTransform?: AvVector, + leftBottomTransform?: AvVector, + rightTopTransform?: AvVector, + rightBottomTransform?: AvVector, +} + +function addVolumeTransforms(transform1: VolumeTransforms, transform2: VolumeTransforms): VolumeTransforms +{ + var finalProduct:VolumeTransforms = + { + leftTopTransform:{ + x: transform1.leftTopTransform.x ?? 0 + transform2.leftTopTransform.x ?? 0, + y: transform1.leftTopTransform.y ?? 0 + transform2.leftTopTransform.y ?? 0, + z: transform1.leftTopTransform.z ?? 0 + transform2.leftTopTransform.z ?? 0 + }, + leftBottomTransform:{ + x: transform1.leftBottomTransform.x ?? 0 + transform2.leftBottomTransform.x ?? 0, + y: transform1.leftBottomTransform.y ?? 0 + transform2.leftBottomTransform.y ?? 0, + z: transform1.leftBottomTransform.z ?? 0 + transform2.leftBottomTransform.z ?? 0 + }, + rightTopTransform:{ + x: transform1.rightTopTransform.x ?? 0 + transform2.rightTopTransform.x ?? 0, + y: transform1.rightTopTransform.y ?? 0 + transform2.rightTopTransform.y ?? 0, + z: transform1.rightTopTransform.z ?? 0 + transform2.rightTopTransform.z ?? 0 + }, + rightBottomTransform:{ + x: transform1.rightBottomTransform.x ?? 0 + transform2.rightBottomTransform.x ?? 0, + y: transform1.rightBottomTransform.y ?? 0 + transform2.rightBottomTransform.y ?? 0, + z: transform1.rightBottomTransform.z ?? 0 + transform2.rightBottomTransform.z ?? 0 + }, + } + + + return(finalProduct); +} + + + + + +interface TransformControlProps +{ + name: string, + transform: AvVector, + alterVector: Function, + delta: number, + imageUrl: string, +} + +class TransformControl extends React.Component +{ + constructor(props) + { + super(props); + } + + public render() + { + return( +
+
+
+ {this.props.name} "x" + {this.props.transform.x}{/*the functions in the onclick might be running before clicked because theres brackets in there */} + + +
+
+ {this.props.name} "y" + {this.props.transform.y} + + +
+
+ {this.props.name} "z" + {this.props.transform.z} + + +
+ +
+ +
+ ); + } +} + + + + interface menuProps { - isOpen: boolean + isOpen: boolean, + controllerTransforms: VolumeTransforms, + setTransform: Function, + setDelta: Function, + resetTransforms: Function, + toggleAxis: Function, + + delta: number, + + } class Menu extends React.Component { constructor(props) { - super(props) + super(props); } public render() @@ -21,9 +122,27 @@ class Menu extends React.Component if (this.props.isOpen) { return( + <> - + + + + + + + + + + + + + + + + + + ); } else @@ -41,11 +160,23 @@ interface gadgetState { collideDetectionMain: boolean, collideDetectionSecondary: boolean, + + delta: number, + + displayAxis: boolean, + //controllerTransforms: VolumeTransforms, } class MyGadget extends React.Component< {}, gadgetState > { - private drawMenu:boolean; // we store this outside of state to avoid uncescessary re-renders and a possible infinite loop + private drawMenu:boolean = true; // we store this outside of state to avoid uncescessary re-renders and a possible infinite loop + private coolDownCounter: number; // this is just used to cooldown the toggle to stop it triggering too often + private displayIntro: boolean = true; + private controllerTransforms:VolumeTransforms; + //private delta: number; // this is how much the user changes the number by + + + constructor( props: any ) { super( props ); @@ -53,13 +184,66 @@ class MyGadget extends React.Component< {}, gadgetState > { collideDetectionMain: false, collideDetectionSecondary: false, + delta: 0.1, + displayAxis: true, }; + + this.controllerTransforms = { // an average default setup for the user to edit + leftTopTransform: {x: 0, y:-0.13, z:0.13}, + leftBottomTransform: {x: 0, y:-0.24, z:0.23}, + rightTopTransform: {x: 0, y:-0.13, z:0.13}, + rightBottomTransform: {x: 0, y:0, z:0.13}, + } + + //this.delta = 0.1 + } + + @bind + public setTransform(toChange: AvVector, toChangeBy: AvVector) // we need this because props are read-only + { + toChange.x += toChangeBy.x; + toChange.y += toChangeBy.y; + toChange.z += toChangeBy.z; + + toChange.x = Number(toChange.x.toFixed(3)); // fix up numbers because janky floating point maths + toChange.y = Number(toChange.y.toFixed(3)); + toChange.z = Number(toChange.z.toFixed(3)); + + this.forceUpdate(); + } + + @bind + public setDelta(value:number) // used to set delta + { + this.setState({delta: value}); + } + + @bind + public resetTransforms() + { + this.controllerTransforms = { // an average default setup for the user to edit + leftTopTransform: {x: 0, y:-0.13, z:0.13}, + leftBottomTransform: {x: 0, y:-0.24, z:0.23}, + rightTopTransform: {x: 0, y:-0.13, z:0.13}, + rightBottomTransform: {x: 0, y:0, z:0.13}, + } + this.forceUpdate(); + } + + @bind + public toggleAxis() + { + this.setState({displayAxis: !this.state.displayAxis}) } private updateDrawMenu() { - if(this.state.collideDetectionMain && this.state.collideDetectionSecondary) - this.drawMenu = !this.drawMenu + if(this.state.collideDetectionMain && this.state.collideDetectionSecondary && Date.now() >= this.coolDownCounter + 1000) + { + this.drawMenu = !this.drawMenu; + this.coolDownCounter = Date.now(); + this.displayIntro = false; + } } @bind @@ -86,14 +270,14 @@ class MyGadget extends React.Component< {}, gadgetState > { type: EVolumeType.Sphere, radius: 0.8, - visualize: false + visualize: true }; private handVolumeLarger:AvVolume = { type: EVolumeType.Sphere, radius: 1.5, - visualize: false + visualize: true }; private handInterfaceMain:InterfaceProp[] = @@ -110,37 +294,97 @@ class MyGadget extends React.Component< {}, gadgetState > public render() { - this.updateDrawMenu(); - + // THIS SYSTEM CANOT HANDL NUMBSERSDF return (
- + - + - + - + + + { this.state.displayAxis && + + + + + + + + + + + + + + + + + + + + + + + } + - + - + + + { this.state.displayAxis && + + + + + + + + + + + + + + + + + + + + + + + } + +
); @@ -159,6 +403,7 @@ Secondary ensures the two are pointing away from each other, the bigger the lowe todo: -mess around with volume positions --half second cooldown on toggle? + +use an intro video to walk the user through howto use stufgFD?G */ renderAardvarkRoot( "root", ); diff --git a/src/models/axis.glb b/src/models/axis.glb new file mode 100644 index 0000000..4b16d3a Binary files /dev/null and b/src/models/axis.glb differ diff --git a/src/models/controller_Infographic.glb b/src/models/controller_Infographic.glb new file mode 100644 index 0000000..b021c3f Binary files /dev/null and b/src/models/controller_Infographic.glb differ diff --git a/src/models/letterX.glb b/src/models/letterX.glb new file mode 100644 index 0000000..27c1e52 Binary files /dev/null and b/src/models/letterX.glb differ diff --git a/src/models/letterY.glb b/src/models/letterY.glb new file mode 100644 index 0000000..4e2bfc2 Binary files /dev/null and b/src/models/letterY.glb differ diff --git a/src/models/letterZ.glb b/src/models/letterZ.glb new file mode 100644 index 0000000..689be7d Binary files /dev/null and b/src/models/letterZ.glb differ diff --git a/src/styles.css b/src/styles.css index 4401ac6..3b66878 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,7 +1,20 @@ body, html { - background-color: lightskyblue; + background-color: transparent; height: 100%; + + font-size: 2rem; + touch-action: manipulation; + + overflow: hidden; +} + +button{ + background-color: white; + border: none; + border-radius: 4px; + + margin-left:5px; } .Button @@ -39,3 +52,26 @@ body, html { background-color: blue; } + +.TransformButton{ + font-size: 1.2rem; +} + + +.TransformControlContainer{ + display: flex; + justify-content: space-between; + + background-color: gray; + padding: 5px; + border-radius: 15px; + + font-size: 1.4rem; + + margin-bottom: 10px; +} + +.TransformControlImage{ + width: 200px; + height: auto; +}