Liness/photo_mem
5
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

enable init function

Browse Source
This commit is contained in:
Tykayn 2021-10-04 12:43:54 +02:00 committed by tykayn
parent 7b17f7ad50
commit fcdd3b9191
3 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
photo_mem.html
View File

@ -15,11 +15,8 @@ Licence AGPL v3.0+
<link rel="stylesheet" type="text/css" href="styles/bulma.min.css"></link>
<link rel="stylesheet" type="text/css" href="styles/style_photomem.css"></link>
<script type="text/javascript" src="scripts/lib/opencv.js" onload="onOpenCvReady();"></script>
<script type="application/javascript" src="scripts/main.js"></script>
</head>
<body>
<body onload="init()">
<header>
<section class="hero">
<div class="hero-body">
@ -37,19 +34,17 @@ Licence AGPL v3.0+
Choix de la
photo
</button>
<button class="button is-secondary" id="detection" onclick="detection_de_visages()"
title="Détecter les visages">détection visages
</button>
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer xml"
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer le xml"
onclick="enregistrer_fichier(enreg_xml)"/>
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer image "
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer l'image "
onclick="image_finale()"/>
</div>
</div>
</section>
</header>
<main class="section is-medium">
<main class="section is-medium" id="main">
<!-- cercle indiquant la position où on a cliqué-->
@ -65,7 +60,8 @@ Licence AGPL v3.0+
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
</div>
<div class="field is-horizontal">
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf" id="nom_jeune_fille">
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf"
id="nom_jeune_fille">
</div>
<div class="field is-horizontal">
<label for="prenom">Prénom : </label><input class="input" type="text" name="prénom" id="prenom">
@ -81,10 +77,6 @@ Licence AGPL v3.0+
</div>
<div class="columns">
<div class="column">
<input class="button is-warning" id="reset" type="reset" value="Annuler"
@ -102,9 +94,17 @@ Licence AGPL v3.0+
<!-- photo de fond-->
<img src="assets/zizou.png" id="ima_fond"/>
<article class="message is-info">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
Sélectionnez une nouvelle photo pour la marquer. Vous pouvez aussi importer une photo et son fichier xml d'information en même temps. </div>
</article>
<div id="menu_modif" class="invisible">
<div id="modifier" onClick="modifier_personne();">modifier</div>
<div id="supprimer" onClick="supprimer_personne();menu.style.visibility='hidden';">supprimer</div>
<div id="supprimer" onClick="supprimer_personne()">supprimer</div>
<div id="annuler" onClick="menu.style.visibility='hidden';">annuler</div>
</div>
</main>
@ -114,8 +114,9 @@ Licence AGPL v3.0+
Photo mem - J plisson -
<a href="https://forge.chapril.org/Liness/photo_mem">
sources et documentation</a> - GULL liness
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div>
</footer>
<script type="application/javascript" src="scripts/main.js"></script>
</body>
</html>

2
scripts/detection_opencv.js
View File

@ -5,7 +5,7 @@
function onOpenCvReady() {
console.info('OpenCV.js est chargé !');
document.getElementById('status').remove()
gestion_souris();
}
function detection_de_visages() {

19
scripts/main.js
View File

@ -22,6 +22,10 @@ inputElement.addEventListener('change', (e) => {
lecture_photo(e.target.files)
}, false);
function init(){
console.log("lancement de l'initialisation");
gestion_souris();
}
function lecture_photo(fichier) {
nb_fichier = fichier.length
let i_xml = 1, i_img = 0;
@ -130,7 +134,7 @@ function affiche_etiquette() {
let canv = document.createElement("canvas");
canv.id = id;
canv.setAttribute('class', 'people_label')
document.body.appendChild(canv);
document.querySelector('#main').appendChild(canv);
can_etiq[i] = document.getElementById(canv.id);
can_etiq[i].className = "etiq";
can_etiq[i].height = 30;
@ -206,6 +210,7 @@ function supprimer_personne() {
}
cercle.style.visibility = "hidden";
lecture_xml();
menu.style.visibility='hidden';
}
function creation_data_xml() {
@ -401,9 +406,9 @@ function enregistrer_fichier(fichier) {
a.setAttribute('download', fichier);
a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml));
a.style.display = 'none';
document.body.appendChild(a);
document.querySelector('#main').appendChild(a);
a.click();
document.body.removeChild(a);
document.querySelector('#main').removeChild(a);
}
}
@ -423,7 +428,7 @@ function image_finale() {
let decalx = 5 + image.offsetLeft;
let decaly = 29 + image.offsetTop;
let can_imf = document.createElement("canvas");
document.body.appendChild(can_imf);
document.querySelector('#main').appendChild(can_imf);
imf_ctx = can_imf.getContext("2d");
can_imf.width = ima_fond.width;
can_imf.height = ima_fond.height;
@ -449,10 +454,10 @@ function image_finale() {
a.setAttribute('download', enreg_noms);
a.setAttribute('href', can_imf.toDataURL("image/png").replace("image/png", "image/octet-stream"));
a.style.display = 'none';
document.body.appendChild(a);
document.querySelector('#main').appendChild(a);
a.click();
document.body.removeChild(a);
document.body.removeChild(can_imf);
document.querySelector('#main').removeChild(a);
document.querySelector('#main').removeChild(can_imf);
function roundedRect(ctx, x, y, width, height, radius, couleur_fond, couleur_trait) {
ctx.beginPath();