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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>referenceImageVR</title> <title>referenceImageVR</title>
<link href="styles.css?1612804227625" rel="stylesheet"> <link href="styles.css?1612951302669" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root" class="FullPage"></div> <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> </html>

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

35
src/main.tsx
View file

@ -4,7 +4,7 @@ import bind from 'bind-decorator';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; 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) constructor(props)
{ {
@ -18,9 +18,12 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
public render() public render()
{ {
return( return(
<div className = "imageMenuButtonContainer">
<button className = "imageMenuButton" onClick = {this.props.onClick}> <button className = "imageMenuButton" onClick = {this.props.onClick}>
<img src = {this.props.displayImage} className = "imageMenuImage"/> <img src = {this.props.displayImage} className = "imageMenuImage"/>
</button> </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(); 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() public render()
{ {
if (this.imageToDisplay){ //if theres an image then show that, and also a back button 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( return(
<div style = {itemStyle}> <div style = {itemStyle}>
<MenuItem displayImage = {image} onClick = {() => this.displayImage(image)}/> <MenuItem displayImage = {image} onClick = {() => this.displayImage(image)} deleteSelfCallback = {() => this.deleteListItem(image)}/>
</div> </div>
); );
}); });
@ -204,17 +214,22 @@ class MyGadget extends React.Component< {}, {} >
private addImagePopup: Window = null; private addImagePopup: Window = null;
private imageMenuRef = React.createRef<ImageMenu>(); private imageMenuRef = React.createRef<ImageMenu>();
constructor( props: any ) constructor( props: any )
{ {
super( props ); super( props );
} }
public openWindow(){ public openWindow(){
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}/>, if (!this.addImagePopup || this.addImagePopup.closed)
this.addImagePopup.document.getElementById( "root" ) ); {
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" ) );
}
} }
@ -241,16 +256,8 @@ renderAardvarkRoot( "root", <MyGadget/> );
//DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT //DONT FORGET TO RUN NPM START AAAAAAAAAAAAAAAAAAAA YOU ALWAYS FORGETTT
/* /*
todo: 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 ipfs for this^^
look into using avmodel to create pop-up images 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: useful links:
http://localhost:23842/gadgets/aardvark_monitor/index.html http://localhost:23842/gadgets/aardvark_monitor/index.html

19
src/styles.css
View file

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