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

added image validation

Browse source 
very basic at the moment
This commit is contained in:
Nye Evans 2021-02-08 17:16:30 +00:00
parent a7b483db4a
commit fade7c08e2
5 changed files with 26496 additions and 29 deletions
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?1611926700607" rel="stylesheet"> <link href="styles.css?1612804227625" 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?89559f33c3f79470edff"></script></body> <script type="text/javascript" src="main.js?8e2397bb303d99818ad8"></script></body>
</html> </html>

26473
dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

1
dist/styles.css vendored
View file

@ -86,4 +86,5 @@ button{
#uploadButton{ #uploadButton{
font-size: 3rem; font-size: 3rem;
margin-top: 2vh;
} }

38
src/main.tsx
View file

@ -40,12 +40,7 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
this.state = this.state =
{ {
imageUrls: imageUrls: [],
[
"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"
],
} }
this.imageToDisplay = ""; this.imageToDisplay = "";
@ -61,6 +56,12 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
); );
} }
@bind
public validateUrl(url:string)
{
return(url && !this.state.imageUrls.includes(url) ? true : false)
}
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 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
{ {
@ -128,6 +129,7 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
interface ImageAddedProps interface ImageAddedProps
{ {
addImageCallback: ( url: string ) => void; addImageCallback: ( url: string ) => void;
validateUrlCallback: ( url: string ) => boolean;
} }
interface ImageAdderState interface ImageAdderState
@ -152,10 +154,19 @@ class ImageAdder extends React.Component< ImageAddedProps, ImageAdderState >
@bind @bind
private handleSubmit(event: React.FormEvent< HTMLFormElement > ) private handleSubmit(event: React.FormEvent< HTMLFormElement > )
{
if (this.props.validateUrlCallback(this.state.url))
{ {
this.props.addImageCallback( this.state.url ); this.props.addImageCallback( this.state.url );
event.preventDefault(); event.preventDefault();
} }
else
{
alert("given image is invalid"); //could eventually replace this with something on the render
event.preventDefault();
}
}
render() render()
{ {
@ -202,7 +213,7 @@ class MyGadget extends React.Component< {}, {} >
this.addImagePopup = window.open("", "popup", "", true ); this.addImagePopup = window.open("", "popup", "", true );
this.addImagePopup.document.write( k_popupHtml ); this.addImagePopup.document.write( k_popupHtml );
ReactDOM.render( <ImageAdder addImageCallback={ this.imageMenuRef?.current.onAddImage }/>, ReactDOM.render( <ImageAdder addImageCallback={ this.imageMenuRef?.current.onAddImage } validateUrlCallback={this.imageMenuRef.current.validateUrl}/>,
this.addImagePopup.document.getElementById( "root" ) ); this.addImagePopup.document.getElementById( "root" ) );
} }
@ -230,9 +241,16 @@ 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:
it works!! just clean things up abit, make images fit screen size, make panel size changable maybe? look into using URL.CreateObjectUrl() to let users 'upload' images as well as giving URLs
sliders dont work, maybe use buttons? look into using ipfs for this^^
make an upload button that pops up 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

1
src/styles.css
View file

@ -86,4 +86,5 @@ button{
#uploadButton{ #uploadButton{
font-size: 3rem; font-size: 3rem;
margin-top: 2vh;
} }