dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

OCR Scan Design (fast) fertig und funktioniert

Browse Source
This commit is contained in:
LukasNowy 2019-01-29 16:55:05 +01:00
parent 65ed6c932c
commit ea512efee4
4 changed files with 103 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
express-server/public/ocrscan/fileuploads.js
View File

@ -4,9 +4,11 @@ function readURL(input) {
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result).attr('width', "650px")
.attr('src', e.target.result).css('height', "80vmin")
};
$(".btn-analyze").removeClass("disabled");
reader.readAsDataURL(input.files[0]);
}
}

34
express-server/public/ocrscan/ocrscan.js
View File

@ -23,7 +23,7 @@ $(document).ready(function() {
$("#modal1").modal("open");
$(".btnanalyze").click(function() {
$(".btn-analyze").click(function() {
analyzeUploaded();
});
@ -55,6 +55,7 @@ function movePurchases(text) {
},
success(result){
console.log(result);
alert("Done");
},
error(err){
console.error("Error: " + err);
@ -68,6 +69,12 @@ $(".test").click(function() {
getAllShoppinglists();
});
$(document).on("click", ".btndash", function() {
firebase.auth().onAuthStateChanged(function(user){if(user){firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idtoken) {
window.location.href = "/dash/" + idtoken
}).catch((error) => console.error("Get id token client error: ", error));}else{console.log("Check Auth error", user)}});
});
function analyzeUploaded() {
var img = document.getElementById("blah");
@ -78,8 +85,7 @@ function analyzeUploaded() {
}
}).then((result) => {
loading = false;
$(".output").text(result.text);
$('#modal1').modal("open");
console.log(result.text);
movePurchases(result.text);
$(".determinate").css("width", "0%");
});
@ -124,12 +130,28 @@ $(document).on("click", ".collection-item", function() {
});
$(".btncont").click(function() {
$('.r1').animate({'margin-top': '0'}, 1000);
run([{y:100}, {y:0}], $(".r1"));
});
function run(v, elem){
//Reverse the array
var reversed = JSON.parse(JSON.stringify(v)).reverse();
$(v[0]).animate(v[1], {
//The speed the element moves - lower is faster
duration: 500,
step: function(val) {
//Adding the transform to your element
elem.css("transform", `translateY(${val}%)`);
}
})
};
$(".opt1").click(function() {
$('.r1').animate({'margin-top': '-100%'}, 1000);
$(".r2").css("display", "block");
run([{y:0}, {y:-100}], $(".r1"))
run([{y:0}, {y:-100}], $(".r2"));
//$("#modal2").modal("open");
});
$(".opt2").click(function() {

31
express-server/public/ocrscan/style.css
View File

@ -23,15 +23,24 @@
.r1 {
height: 100%;
max-height: 100%;
margin-top: 100%;
transform: translateY(100%);
}
.r2 {
height: 100%;
max-height: 100%;
background-color: forestgreen;
display: none;
margin-top: 50%;
transform: translateY(100%);
background-color: #242424;
}
.row {
margin-bottom: 0px !important;
margin-top: 0px !important;
}
.container {
margin-bottom: 0px !important;
margin-top: 0px !important;
}
html, body {
@ -39,7 +48,7 @@ html, body {
margin: 0;
max-height: 100%;
overflow: hidden;
background-color: #161616;
background-color: #242424;
}
.ico {
@ -51,5 +60,15 @@ html, body {
.collection .collection-item.active {
/* background-color: #00c853; */
background-color: rgb(0, 195, 255);
color: rgb(24, 24, 24);
}
.collection-item {
/* background-color: #00c853; */
color: rgb(24, 24, 24) !important;
}
.btn-choose {
width: 100%;
}

50
express-server/views/ocrscan.ejs
View File

@ -44,16 +44,35 @@
<center><i class="material-icons ico">camera</i></center>
</div>
</div>
<div class="row r2">
<div class="container">
<div class="file-field input-field">
<div class="btn deep-orange darken-1 btn-choose waves-effect waves-light">
<span>Choose Image</span>
<input type='file' onchange="readURL(this);" />
</div>
<div class="file-path-wrapper">
</div>
</div>
<center><img id="blah" src="#" alt="your image" /></center>
</div>
<center><button class="btn waves-effect waves-light deep-orange darken-1 disabled btn-analyze " type="submit" name="action">Continue<i class="material-icons right">send</i></button></center>
</div>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<a class="btn-floating btn-large red btndash">
<i class="large material-icons blue-grey darken-4">arrow_back</i>
</a>
</div>
<!-- Modal Structure -->
<!-- Modal Structure PRE -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Choose Shoppinglist</h4>
@ -62,11 +81,36 @@
</div>
<div class="modal-footer">
<a href="/dash" class="modal-close waves-effect waves-red btn-flat">Return to Dashboard</a>
<a class="modal-close waves-effect waves-red btn-flat btndash">Return to Dashboard</a>
<a href="#!" class="modal-close waves-effect waves-green btn-flat btncont">Continue</a>
</div>
</div>
<!-- Modal Structure IMPORT -->
<div id="modal2" class="modal">
<div class="modal-content">
<h4>Import Image</h4>
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type='file' onchange="readURL(this);" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
<img class="materialboxed" id="blah" src="#" alt="your image" />
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-red btn-flat btndash">Return to Dashboard</a>
<a href="#!" class="modal-close waves-effect waves-green btn-flat btnanalyze">Remove Items</a>
</div>
</div>
<script src="/ocrscan/cam.js"></script>
<script src="/ocrscan/ocrscan.js"></script>
<script src="/ocrscan/fileuploads.js"></script>