augustin64/tipe
1
1
Fork 0
mirror of https://github.com/augustin64/projet-tipe synced 2025-01-24 07:36:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add partial mobile support

Browse Source
This commit is contained in:
augustin64 2022-05-14 18:19:00 +02:00
parent f0dda69d9d
commit 890db11772
2 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/webserver/static/script.js
View File

@ -13,12 +13,24 @@ var mouseX;
var mouseY; var mouseY;
var mouseDown = 0; var mouseDown = 0;
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var canvasSize;
function init() { function init() {
if (vw <= 1024) {
canvasSize = vw * 0.95;
} else {
canvasSize = 280;
}
canvas = document.getElementById('digit-canvas'); canvas = document.getElementById('digit-canvas');
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
ctx.fillStyle = "black"; ctx.fillStyle = "black";
// Créer une zone de dessin // Créer une zone de dessin
canvas.width = canvasSize;
canvas.height = canvasSize;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
if(ctx) if(ctx)
@ -133,19 +145,20 @@ function sendJSON(data,callback){
function getPrediction() { function getPrediction() {
let totalWidth = 280; let imageSize = 28;
let totalHeight = 280; let totalWidth = canvasSize;
let totalHeight = canvasSize;
let curWidth = 0; let curWidth = 0;
let curHeight = 0; let curHeight = 0;
let stepSize = 10; let stepSize = totalWidth / imageSize;
let tableau = []; let tableau = [];
let tmp_tableau = []; let tmp_tableau = [];
while (curHeight < totalHeight) { while (curHeight < totalHeight && tableau.length < imageSize) {
curWidth = 0; curWidth = 0;
tmp_tableau = []; tmp_tableau = [];
while (curWidth < totalWidth) { while (curWidth < totalWidth && tmp_tableau.length < imageSize) {
data = ctx.getImageData(curWidth, curHeight, stepSize, stepSize); data = ctx.getImageData(curWidth, curHeight, stepSize, stepSize);
size = data.width * data.height; size = data.width * data.height;
density = 0; density = 0;
@ -171,14 +184,22 @@ function getPrediction() {
if (data["status"] != 200) { if (data["status"] != 200) {
document.getElementById("result").innerHTML = "500 Internal Server Error"; document.getElementById("result").innerHTML = "500 Internal Server Error";
} else { } else {
let resultat = document.getElementById("result"); let result = document.getElementById("result");
resultat.innerHTML = "Résultat:"; result.innerHTML = "Résultat:";
let dict = {}; var elements = [];
let i = 0;
data["data"].map((e) => { dict[e] = i; i++; }); for (let i=0; i < data["data"].length; i++) elements.push([data["data"][i], i]);
let res = Object.keys(dict).sort().reverse();
elements.sort(function(a, b) {
a = a[1];
b = b[1];
return a < b ? -1 : (a > b ? 1 : 0);
});
let res = elements.sort().reverse();
for (let j=0; j < res.length; j++) { for (let j=0; j < res.length; j++) {
resultat.innerHTML += "<br/>"+dict[res[j]]+" : "+res[j]; result .innerHTML += "<br/>"+res[j][1]+" : "+res[j][0];
} }
} }
}) })

22
src/webserver/static/style.css
View File

@ -1,4 +1,26 @@
body {
flex-direction: row;
display: flex;
overflow: hidden;
position: fixed;
}
#digit-canvas { #digit-canvas {
border: 2px solid #e0e0e0; border: 2px solid #e0e0e0;
border-radius: 5px; border-radius: 5px;
} }
#result {
margin: 3%;
}
/* For mobile devices */
@media (max-width: 1024px) {
body {
display: inline;
}
#digit-canvas {
width: 95vw;
height: 95vw;
}
}