This commit is contained in:
Senad Uka
2019-11-17 16:30:47 +01:00
parent 3b873da872
commit ce3e9d8c44
11 changed files with 1981 additions and 9 deletions

27
create-react-app/.gitignore vendored Normal file
View File

@@ -0,0 +1,27 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Environment Variables
.env
.env.build

View File

@@ -0,0 +1,2 @@
README.md
yarn.lock

View File

@@ -0,0 +1,29 @@
![React Logo](../.github/images/react.svg)
# Create-React-App Example
This directory is a brief example of a [React](https://reactjs.org/) app that can be deployed with ZEIT Now and zero configuration.
## Deploy Your Own
Deploy your own React project with ZEIT Now.
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/now-examples/tree/master/create-react-app)
_Live Example: https://create-react-app.now-examples.now.sh_
### How We Created This Example
To get started with React, you can use the [Create-React-App CLI](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) to initialize the project:
```shell
$ npx create-react-app my-app
```
### Deploying From Your Terminal
You can deploy your new React project with a single command from your terminal using [Now CLI](https://zeit.co/download):
```shell
$ now
```

1646
create-react-app/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-canvas-draw": "^1.0.2",
"react-dom": "^16.12.0",
"react-file-reader-input": "^2.0.0",
"react-scripts": "3.2.0"
@@ -28,5 +29,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"proxy": "https://parking-koncept.herokuapp.com"
}

View File

@@ -20,3 +20,7 @@
.App-link {
color: #09d3ac;
}
.hidden {
display: none;
}

52
src/upload/CarCanvas.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
class CarCanvas extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.canvas = React.createRef();
}
componentDidMount() {
const canvas = this.canvas.current;
const ctx = canvas.getContext("2d");
this.context = ctx;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
const img = this.refs.image
img.onload = () => {
ctx.drawImage(img, 0, 0, window.innerWidth,window.innerHeight)
}
}
drawRectangles(instances) {
const ctx = this.context;
for(const instance of instances) {
console.log("Car at ", instance);
let box = instance.BoundingBox;
let cbox = {
}
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle= "green";
ctx.rect(20, 20, 150, 100);
ctx.stroke();
}
}
render() {
this.drawRectangles(this.props.instances);
return(
<div>
<canvas ref={this.canvas} width={window.innerWidth} height={window.innerHeight} style={{position: "fixed", top: 0, left: 0, zIndex: -1000}} />
<img ref="image" src={this.props.src} className="hidden" />
</div>
)
}
}
export default CarCanvas;

View File

@@ -0,0 +1,12 @@
.car_border {
border-style: solid;
border-size: 3px;
border-color: green;
color: white;
}
.topleft {
position: fixed;
top: 0;
left: 0;
}

View File

@@ -0,0 +1,44 @@
import React from 'react';
import './CarVisualisation.css';
class CarVisualisation extends React.Component {
componentDidMount() {
this.state = {}
const img = this.refs.image
img.onload = () => {
this.setState({...this.state, imageSize: {
width: img.width,
height: img.height
}
});
}
}
drawRectangle(instance) {
const top = parseFloat(instance.BoundingBox.Top) * this.state.imageSize.height;
const left = parseFloat(instance.BoundingBox.Left) * this.state.imageSize.width;
const width = parseFloat(instance.BoundingBox.Width) * this.state.imageSize.width;
const height = parseFloat(instance.BoundingBox.Height) * this.state.imageSize.height;
const style = {position: "fixed", top , left, width, height};
console.log("Style is", style);
return (
<div style={style} className="car_border" key={JSON.stringify(style)}>
{ instance.Confidence.toFixed(2) }%
</div>
)
}
render() {
return(
<div >
<img ref="image" src={this.props.src} className="topleft" />
{this.props.instances.map(this.drawRectangle.bind(this))}
</div>
)
}
}
export default CarVisualisation;

View File

@@ -1,13 +1,14 @@
import React from 'react';
import FileReaderInput from 'react-file-reader-input';
import CarVisualisation from './CarVisualisation';
export class Upload extends React.Component {
constructor() {
super();
this.state = {
url: ''
url: '',
instances: []
}
}
@@ -15,22 +16,59 @@ export class Upload extends React.Component {
var file = e.target.files[0],
reader = new FileReader();
if (!file) return;
const filename = file.name
let last_dot = filename.lastIndexOf('.')
let ext = filename.slice(last_dot + 1)
let name = filename.slice(0, last_dot)
reader.onloadend = (function () {
// Since it contains the Data URI, we should remove the prefix and keep only Base64 string
this.setState({url: reader.result})
var b64 = reader.result.replace(/^data:.+;base64,/, '');
console.log(b64); //-> "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
this.getCars(b64, ext);
}).bind(this);
reader.readAsDataURL(file);
}
getCars(picture, extension) {
// const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
// The data we are going to send in our request
let data = {
picture_base64: picture,
extension: extension
}
// The parameters we are gonna pass to the fetch function
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
fetch(url, fetchData)
.then(response => {
response.json().then( data => {
this.setState({...this.state, instances: data})
})
});
}
render() {
return (
<form>
<form style={{backgroundColor: "white"}}>
<label htmlFor="my-file-input">Upload a File:</label>
<input type="file" name="file" onChange={this.handleChange}/>
<img src={this.state.url} />
<CarVisualisation src={this.state.url} instances={this.state.instances} />
<input type="file" name="file" onChange={this.handleChange} style={{zIndex: 200}}/>
</form>
);
}

120
yarn.lock
View File

@@ -1548,6 +1548,13 @@ adjust-sourcemap-loader@2.0.0:
object-path "0.11.4"
regex-parser "2.2.10"
agent-base@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
dependencies:
es6-promisify "^5.0.0"
ajv-errors@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -1650,6 +1657,11 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
argv@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/argv/-/argv-0.0.2.tgz#ecbd16f8949b157183711b1bda334f37840185ab"
integrity sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=
aria-query@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
@@ -2347,6 +2359,11 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
catenary-curve@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/catenary-curve/-/catenary-curve-1.0.1.tgz#57c3061992735bfd34b274c401a96806fe30a21f"
integrity sha512-vSHQtYFjItV4wxUH5OkicA3Kmln6thBBWlJLiw2f4apfvkKw4BVe8bTbG6lnbJe60CIr8PyHzjSX27blSJ07Ww==
chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2502,6 +2519,17 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
codecov@^3.5.0:
version "3.6.1"
resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.6.1.tgz#f39fc49413445555f81f8e3ca5730992843b4517"
integrity sha512-IUJB6WG47nWK7o50etF8jBadxdMw7DmoQg05yIljstXFBGB6clOZsIj6iD4P82T2YaIU3qq+FFu8K9pxgkCJDQ==
dependencies:
argv "^0.0.2"
ignore-walk "^3.0.1"
js-yaml "^3.13.1"
teeny-request "^3.11.3"
urlgrey "^0.4.4"
collection-visit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2738,6 +2766,18 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
js-yaml "^3.13.1"
parse-json "^4.0.0"
coveralls@^3.0.4:
version "3.0.7"
resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.7.tgz#1eca48e47976e9573d6a2f18b97c2fea4026f34a"
integrity sha512-mUuH2MFOYB2oBaA4D4Ykqi9LaEYpMMlsiOMJOrv358yAjP6enPIk55fod2fNJ8AvwoYXStWQls37rA+s5e7boA==
dependencies:
growl "~> 1.10.0"
js-yaml "^3.13.1"
lcov-parse "^0.0.10"
log-driver "^1.2.7"
minimist "^1.2.0"
request "^2.86.0"
create-ecdh@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -3058,7 +3098,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
dependencies:
ms "2.0.0"
debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
debug@^3.0.0, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3496,6 +3536,18 @@ es6-iterator@2.0.3, es6-iterator@~2.0.3:
es5-ext "^0.10.35"
es6-symbol "^3.1.1"
es6-promise@^4.0.3:
version "4.2.8"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
es6-promisify@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
dependencies:
es6-promise "^4.0.3"
es6-symbol@^3.1.1, es6-symbol@~3.1.1:
version "3.1.2"
resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.2.tgz#859fdd34f32e905ff06d752e7171ddd4444a7ed1"
@@ -4349,6 +4401,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
"growl@~> 1.10.0":
version "1.10.5"
resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4645,6 +4702,14 @@ https-browserify@^1.0.0:
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
https-proxy-agent@^2.2.1:
version "2.2.4"
resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
dependencies:
agent-base "^4.3.0"
debug "^3.1.0"
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5805,6 +5870,11 @@ last-call-webpack-plugin@^3.0.0:
lodash "^4.17.5"
webpack-sources "^1.1.0"
lazy-brush@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/lazy-brush/-/lazy-brush-1.0.1.tgz#5bf099073237294d2f6fc9d6c5d1d705e891c5bf"
integrity sha512-xT/iSClTVi7vLoF8dCWTBhCuOWqsLXCMPa6ucVmVAk6hyNCM5JeS1NLhXqIrJktUg+caEYKlqSOUU4u3cpXzKg==
lazy-cache@^0.2.3:
version "0.2.7"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
@@ -5822,6 +5892,11 @@ lcid@^2.0.0:
dependencies:
invert-kv "^2.0.0"
lcov-parse@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM=
left-pad@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
@@ -5943,6 +6018,11 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
log-driver@^1.2.7:
version "1.2.7"
resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
loglevel@^1.4.1:
version "1.6.4"
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56"
@@ -6349,6 +6429,11 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-fetch@^2.2.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
node-forge@0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -7966,6 +8051,18 @@ react-app-polyfill@^1.0.4:
regenerator-runtime "0.13.3"
whatwg-fetch "3.0.0"
react-canvas-draw@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-canvas-draw/-/react-canvas-draw-1.0.2.tgz#36db1490e9b97633bc63c1672fb88fd6104f581f"
integrity sha512-SRn8mxcMCBYyJjwTqjpYJqTm9mqkAnOSNK0MFNw3lB9LZhykiFgir9iebjDKL+ECeFUwM7n7RQyhtmzqX2mllg==
dependencies:
catenary-curve "^1.0.1"
codecov "^3.5.0"
coveralls "^3.0.4"
lazy-brush "^1.0.1"
prop-types "^15.6.2"
resize-observer-polyfill "^1.5.0"
react-dev-utils@^9.1.0:
version "9.1.0"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -8296,7 +8393,7 @@ request-promise-native@^1.0.5:
stealthy-require "^1.1.1"
tough-cookie "^2.3.3"
request@^2.87.0, request@^2.88.0:
request@^2.86.0, request@^2.87.0, request@^2.88.0:
version "2.88.0"
resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -8342,6 +8439,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
resize-observer-polyfill@^1.5.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9227,6 +9329,15 @@ tar@^4:
safe-buffer "^5.1.2"
yallist "^3.0.3"
teeny-request@^3.11.3:
version "3.11.3"
resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-3.11.3.tgz#335c629f7645e5d6599362df2f3230c4cbc23a55"
integrity sha512-CKncqSF7sH6p4rzCgkb/z/Pcos5efl0DmolzvlqRQUNcpRIruOhY9+T1FsIlyEbfWd7MsFpodROOwHYh2BaXzw==
dependencies:
https-proxy-agent "^2.2.1"
node-fetch "^2.2.0"
uuid "^3.3.2"
terser-webpack-plugin@1.4.1, terser-webpack-plugin@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
@@ -9583,6 +9694,11 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
urlgrey@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/urlgrey/-/urlgrey-0.4.4.tgz#892fe95960805e85519f1cd4389f2cb4cbb7652f"
integrity sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"