DressOrc/imageReferenceVR
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quality of life fixes

Browse source 
-images can now be removed from the menu as-well as added
-ensured only one upload window can be open at once

some other things have been done but these are one second branch
This commit is contained in:
Nye Evans 2021-02-10 12:06:57 +00:00
parent fade7c08e2
commit 3648a29d71
6 changed files with 69 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/index.html vendored
View file

@ -4,10 +4,10 @@
<head>
<meta charset="UTF-8">
<title>referenceImageVR</title>
<link href="styles.css?1612804227625" rel="stylesheet">
<link href="styles.css?1612951302669" rel="stylesheet">
</head>
<body>
<div id="root" class="FullPage"></div>
<script type="text/javascript" src="main.js?8e2397bb303d99818ad8"></script></body>
<script type="text/javascript" src="main.js?68dbbfe09f76aed88278"></script></body>
</html>

25
dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

1
dist/src/main.d.ts vendored Normal file
View file

@ -0,0 +1 @@
export {};

19
dist/styles.css vendored
View file

@ -11,7 +11,7 @@ button{
.Button
{
background-color: lightcoral;
background-color: lightgray;
font-size: 4rem;
}
@ -21,7 +21,7 @@ button{
}
.Button:hover
{
background-color: red;
background-color: gray;
}
.FullPage
@ -49,8 +49,16 @@ button{
height: 100%;
width: 100%; /*things to try: max width?*/
box-sizing:border-box;
min-width: 100%;
max-width: 100%;
}
.imageMenuButtonContainer{
width : 100%;
height: 100%;
}
.imageMenuDeleteButton{
font-size: 2rem;
}
.imageMenuImage{
@ -81,10 +89,11 @@ button{
#noImageText{
font-size: 3rem;
color: grey;
background-color: white;
margin: 0 auto;
}
#uploadButton{
font-size: 3rem;
margin-top: 2vh;
margin-top: 5vh;
}

27
src/main.tsx
View file

@ -4,7 +4,7 @@ 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
class MenuItem extends React.Component< {displayImage, onClick, deleteSelfCallback}, {}> //class for items on the menu, basically just a button
{
constructor(props)
{
@ -18,9 +18,12 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
public render()
{
return(
<div className = "imageMenuButtonContainer">
<button className = "imageMenuButton" onClick = {this.props.onClick}>
<img src = {this.props.displayImage} className = "imageMenuImage"/>
</button>
<button className = "imageMenuDeleteButton" onClick = {this.props.deleteSelfCallback}>X</button>
</div>
);
}
}
@ -75,6 +78,13 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
this.forceUpdate();
}
public deleteListItem(item: string)
{
this.state.imageUrls.splice(this.state.imageUrls.indexOf(item), 1);
this.forceUpdate();
console.log(this.state.imageUrls)
}
public render()
{
if (this.imageToDisplay){ //if theres an image then show that, and also a back button
@ -97,7 +107,7 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
};
return(
<div style = {itemStyle}>
<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)}/>
<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)} deleteSelfCallback = {() => this.deleteListItem(image)}/>
</div>
);
});
@ -204,18 +214,23 @@ class MyGadget extends React.Component< {}, {} >
private addImagePopup: Window = null;
private imageMenuRef = React.createRef<ImageMenu>();
constructor( props: any )
{
super( props );
}
public openWindow(){
if (!this.addImagePopup || this.addImagePopup.closed)
{
this.addImagePopup = window.open("", "popup", "", true );
this.addImagePopup.document.write( k_popupHtml );
ReactDOM.render( <ImageAdder addImageCallback={ this.imageMenuRef?.current.onAddImage } validateUrlCallback={this.imageMenuRef.current.validateUrl}/>,
this.addImagePopup.document.getElementById( "root" ) );
}
}
public render()
@ -241,16 +256,8 @@ renderAardvarkRoot( "root", <MyGadget/> );
//DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT
/*
todo:
look into using URL.CreateObjectUrl() to let users 'upload' images as well as giving URLs
look into using ipfs for this^^
look into using avmodel to create pop-up images
make pop-up text box clear itself after submittion
theres two options for validation and both have issues:
-we validate inside onAddImage(), this would mean we'd have to control the pop-up from that function to warn the user
-we validate inside the pop-up, that means we dont have access to the url list so dealing with duplicates would be harder
-oh, a third option, we could create a validate function within ImageMenu that we call from the pop-up. This is just the second solution but instead of passing a list or a copy of the list we just reference a function.
^thats encapsulated too, you'd avoid so many errors
useful links:
http://localhost:23842/gadgets/aardvark_monitor/index.html

19
src/styles.css
View file

@ -11,7 +11,7 @@ button{
.Button
{
background-color: lightcoral;
background-color: lightgray;
font-size: 4rem;
}
@ -21,7 +21,7 @@ button{
}
.Button:hover
{
background-color: red;
background-color: gray;
}
.FullPage
@ -49,8 +49,16 @@ button{
height: 100%;
width: 100%; /*things to try: max width?*/
box-sizing:border-box;
min-width: 100%;
max-width: 100%;
}
.imageMenuButtonContainer{
width : 100%;
height: 100%;
}
.imageMenuDeleteButton{
font-size: 2rem;
}
.imageMenuImage{
@ -81,10 +89,11 @@ button{
#noImageText{
font-size: 3rem;
color: grey;
background-color: white;
margin: 0 auto;
}
#uploadButton{
font-size: 3rem;
margin-top: 2vh;
margin-top: 5vh;
}