initial commit
:)
This commit is contained in:
Nye Evans
parent
49b1c879e3
commit
7efcda8ee3
11 changed files with 8769 additions and 0 deletions
8354
package-lock.json
generated
Normal file
8354
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
42
package.json
Normal file
42
package.json
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "referenceimagevr",
|
||||
"version": "0.1.0",
|
||||
"description": "Source for referenceImageVR gadget",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --env=production",
|
||||
"start": "webpack --env=dev --watch --progress",
|
||||
"dev-server": "http-server ./dist -p 8080 -c-1 --cors"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "",
|
||||
"repository": "",
|
||||
"devDependencies": {
|
||||
"@types/color": "^3.0.0",
|
||||
"@types/express": "^4.17.0",
|
||||
"@types/react": "^16.8.22",
|
||||
"@types/react-dom": "^16.8.4",
|
||||
"@types/ws": "^6.0.2",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "^3.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"http-server": "^0.12.3",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"npm": "^6.12.0",
|
||||
"source-map-loader": "^0.2.4",
|
||||
"style-loader": "^1.2.1",
|
||||
"ts-loader": "^6.0.4",
|
||||
"tslib": "^1.10.0",
|
||||
"typescript": "^3.5.2",
|
||||
"webpack": "^4.34.0",
|
||||
"webpack-cli": "^3.3.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"@aardvarkxr/aardvark-react": "^1.5.1",
|
||||
"@aardvarkxr/aardvark-shared": "^1.5.1",
|
||||
"bind-decorator": "^1.0.11",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
}
|
||||
}
|
||||
13
src/index.html
Normal file
13
src/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>referenceImageVR</title>
|
||||
<link href="styles.css?<%= htmlWebpackPlugin.options.now %>" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="FullPage"></div>
|
||||
</body>
|
||||
</html>
|
||||
153
src/main.tsx
Normal file
153
src/main.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { AvGadget, AvPanel, AvStandardGrabbable, AvTransform, HighlightType, DefaultLanding, GrabbableStyle, renderAardvarkRoot } from '@aardvarkxr/aardvark-react';
|
||||
import { EAction, EHand, g_builtinModelBox, InitialInterfaceLock, Av } from '@aardvarkxr/aardvark-shared';
|
||||
import bind from 'bind-decorator';
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
|
||||
class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for items on the menu, basically just a button
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
displayImage: "https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png"
|
||||
}
|
||||
|
||||
public render()
|
||||
{
|
||||
return(
|
||||
<button className = "imageMenuButton" onClick = {this.props.onClick}>
|
||||
<img src = {this.props.displayImage} className = "imageMenuImage"/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ImageMenu extends React.Component< {}, {}> //class for the whole menu, basically just renders MenuItems according to list of images
|
||||
{
|
||||
imageList:string[];
|
||||
imageToDisplay: string;
|
||||
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.imageList = [
|
||||
"https://www.pfw.edu/microsites/native-trees/images/trees/g-n/full/kentucky-coffeetree-habit-original-01.jpg",
|
||||
"https://www.pencilkings.com/wp-content/uploads/2013/09/finishedfacedrawingproportionsexamples.jpg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/0/06/EnglishSpotRabbitChocolate1(cropped).jpg"
|
||||
]; //work out how to let the user put images here, use google drive or something?
|
||||
this.imageToDisplay = "";
|
||||
}
|
||||
|
||||
public displayImage(image: string) //given to buttons, by setting the image to display we stop drawing the menu and start drawing the image, remove image undoes this, we also force an update here since we dont use state
|
||||
{
|
||||
this.imageToDisplay = image;
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
public removeImage()
|
||||
{
|
||||
this.imageToDisplay = null;
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
public render()
|
||||
{
|
||||
if (this.imageToDisplay){ //if theres an image then show that, and also a back button
|
||||
return(
|
||||
<div>
|
||||
<button className = "imageDisplayButton" onClick = {() => this.removeImage()}>ᐊ</button>
|
||||
<div style = {{textAlign: "center"}}>
|
||||
<img className = "displayedImage" src = {this.imageToDisplay}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
else{ //if there isnt an image selected then show the menu
|
||||
if (this.imageList.length > 0){
|
||||
let itemList = this.imageList.map((image, step) => { //for each image the user has given us, add it to the menu, we use some maths to calculate their position on the grid then pop it in
|
||||
|
||||
let itemStyle = {
|
||||
gridColumnStart: ((step%4)+1).toString(),
|
||||
gridRowStart: ((Math.floor(step/4))+1).toString()
|
||||
};
|
||||
return(
|
||||
<div style = {itemStyle}>
|
||||
<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)}/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
var containerStyle:string = ""; //hopefully will return "15vw 15vw 15vw" with as many 15wvs as nessessary, sets how many rows menu has
|
||||
for (var i:number = 0; i < this.imageList.length/4; i++){
|
||||
containerStyle += "20vw ";
|
||||
}
|
||||
|
||||
return(
|
||||
<div className = "imageMenuContainer" style = {{gridTemplateRows: containerStyle}}>
|
||||
{itemList}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else{
|
||||
return(
|
||||
<div id = "noImageText">
|
||||
There are no images here, add some to start!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class MyGadget extends React.Component< {}, {} >
|
||||
{
|
||||
|
||||
constructor( props: any )
|
||||
{
|
||||
super( props );
|
||||
}
|
||||
|
||||
public openWindow(){
|
||||
window.open("https://www.bbc.co.uk/", "bbc")
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render()
|
||||
{
|
||||
return (
|
||||
<div className={ "FullPage" } >
|
||||
<div>
|
||||
<AvStandardGrabbable modelUri={ "models/HandleModel.glb" } modelScale={ 0.8 }
|
||||
style={ GrabbableStyle.Gadget }>
|
||||
<AvTransform translateY={ 0.21 } >
|
||||
<AvPanel interactive={true} widthInMeters={ 0.3 }/>
|
||||
</AvTransform>
|
||||
</AvStandardGrabbable>
|
||||
</div>
|
||||
<ImageMenu/>
|
||||
<button id = "uploadButton" onClick = {() => this.openWindow()}>🗅</button>
|
||||
</div> );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
renderAardvarkRoot( "root", <MyGadget/> );
|
||||
//DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT
|
||||
/*
|
||||
todo:
|
||||
it works!! just clean things up abit, make images fit screen size, make panel size changable maybe?
|
||||
sliders dont work, maybe use buttons?
|
||||
|
||||
useful links:
|
||||
http://localhost:23842/gadgets/aardvark_monitor/index.html
|
||||
http://localhost:8042/
|
||||
*/
|
||||
18
src/manifest.webmanifest
Normal file
18
src/manifest.webmanifest
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"xr_type": "aardvark-gadget@^1.5.1",
|
||||
"name": "referenceImageVR",
|
||||
"icons": [
|
||||
{
|
||||
"src": "models/Icon.glb",
|
||||
"type": "model/gltf-binary"
|
||||
}
|
||||
],
|
||||
"aardvark": {
|
||||
"permissions": [
|
||||
"scenegraph"
|
||||
],
|
||||
"browserWidth": 1024,
|
||||
"browserHeight": 1024,
|
||||
"startAutomatically": false
|
||||
}
|
||||
}
|
||||
BIN
src/models/HandleModel.glb
Normal file
BIN
src/models/HandleModel.glb
Normal file
Binary file not shown.
BIN
src/models/Icon.glb
Normal file
BIN
src/models/Icon.glb
Normal file
Binary file not shown.
BIN
src/models/placeholder.glb
Normal file
BIN
src/models/placeholder.glb
Normal file
Binary file not shown.
89
src/styles.css
Normal file
89
src/styles.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
body, html
|
||||
{
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
button{
|
||||
background-color: transparent;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
.Button
|
||||
{
|
||||
background-color: lightcoral;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.Label
|
||||
{
|
||||
font-size: 4rem;
|
||||
}
|
||||
.Button:hover
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.FullPage
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.NoGrabHighlight
|
||||
{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.InRangeHighlight
|
||||
{
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.GrabbedHighlight
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.imageMenuButton{
|
||||
height: 100%;
|
||||
width: 100%; /*things to try: max width?*/
|
||||
box-sizing:border-box;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.imageMenuImage{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageMenuContainer{
|
||||
display: grid;
|
||||
grid-template-columns: 20vw 20vw 20vw 20vw;
|
||||
gap: 4vw;
|
||||
margin-left: 4vw;
|
||||
}
|
||||
|
||||
.displayedImage{
|
||||
width: 90%;
|
||||
height: auto;
|
||||
bottom: 0px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.imageDisplayButton{
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#noImageText{
|
||||
font-size: 3rem;
|
||||
color: grey;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#uploadButton{
|
||||
font-size: 3rem;
|
||||
}
|
||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2015",
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"declaration": true,
|
||||
"jsx": "react",
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"strict": false,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"importHelpers": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
||||
75
webpack.config.js
Normal file
75
webpack.config.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
const path = require('path');
|
||||
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
module.exports =
|
||||
[
|
||||
{
|
||||
mode: "development",
|
||||
devtool: "inline-source-map",
|
||||
|
||||
entry: './src/main.tsx',
|
||||
|
||||
output:
|
||||
{
|
||||
filename: '[name].js',
|
||||
path: path.resolve( __dirname, './dist' ),
|
||||
},
|
||||
|
||||
plugins:
|
||||
[
|
||||
new HtmlWebpackPlugin(
|
||||
{
|
||||
hash: true,
|
||||
filename: "./index.html",
|
||||
template: "./src/index.html",
|
||||
now: Date.now()
|
||||
}
|
||||
),
|
||||
new CopyPlugin(
|
||||
[
|
||||
{ from: './src/styles.css', to: 'styles.css' },
|
||||
{ from: './src/manifest.webmanifest', to: 'manifest.webmanifest' },
|
||||
{ from: './src/models/placeholder.glb', to: 'models/placeholder.glb' },
|
||||
]
|
||||
),
|
||||
],
|
||||
|
||||
module:
|
||||
{
|
||||
rules:
|
||||
[
|
||||
{
|
||||
test: /.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /.css$/,
|
||||
use:
|
||||
[
|
||||
'style-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /.(png|svg|jpg|gif)$/,
|
||||
use:
|
||||
[
|
||||
'file-loader'
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
|
||||
resolve:
|
||||
{
|
||||
modules:[ path.resolve( __dirname, 'node_modules' ) ],
|
||||
extensions: [ '.ts', '.tsx', '.js' ]
|
||||
},
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
Loading…
Add table
Reference in a new issue