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

67
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/bulma.min.css"></link>
<link rel="stylesheet" type="text/css" href="styles/style_photomem.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> </head>
<body> <body onload="init()">
<header> <header>
<section class="hero"> <section class="hero">
<div class="hero-body"> <div class="hero-body">
@ -31,25 +28,23 @@ Licence AGPL v3.0+
</p> </p>
<div id="actions"> <div id="actions">
<input id="fichiers" multiple type="file" class="cotecote button is-primary" value="assets/zizou.png"/> <input id="fichiers" multiple type="file" class="cotecote button is-primary" value="assets/zizou.png"/>
<button class="button is-secondary" id="bouton_image" onclick="fichiers.click()" <button class="button is-secondary" id="bouton_image" onclick="fichiers.click()"
title="Charger une image et le XML associé"> title="Charger une image et le XML associé">
Choix de la Choix de la
photo photo
</button> </button>
<button class="button is-secondary" id="detection" onclick="detection_de_visages()" <input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer le xml"
title="Détecter les visages">détection visages onclick="enregistrer_fichier(enreg_xml)"/>
</button> <input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer l'image "
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer xml" onclick="image_finale()"/>
onclick="enregistrer_fichier(enreg_xml)"/>
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer image " </div>
onclick="image_finale()"/>
</div>
</div> </div>
</section> </section>
</header> </header>
<main class="section is-medium"> <main class="section is-medium" id="main">
<!-- cercle indiquant la position où on a cliqué--> <!-- cercle indiquant la position où on a cliqué-->
@ -62,13 +57,14 @@ Licence AGPL v3.0+
NOUVELLE PERSONNE NOUVELLE PERSONNE
</h2> </h2>
<div class="field is-horizontal"> <div class="field is-horizontal">
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus> <label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
</div> </div>
<div class="field is-horizontal"> <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>
<div class="field is-horizontal"> <div class="field is-horizontal">
<label for="prenom">Prénom : </label><input class="input"type="text" name="prénom" id="prenom"> <label for="prenom">Prénom : </label><input class="input" type="text" name="prénom" id="prenom">
</div> </div>
<div class="field is-horizontal"> <div class="field is-horizontal">
<label for="annee">Année : </label><input class="input" type="text" name="année" id="annee"> <label for="annee">Année : </label><input class="input" type="text" name="année" id="annee">
@ -81,17 +77,13 @@ Licence AGPL v3.0+
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<input class="button is-warning" id="reset" type="reset" value="Annuler" <input class="button is-warning" id="reset" type="reset" value="Annuler"
onClick=document.getElementById("ajout").className="invisible";> onClick=document.getElementById("ajout").className="invisible";>
</div> </div>
<div class="column has-text-right"> <div class="column has-text-right">
<input class="button is-primary" id="enreg" type="reset" value="Ajouter" <input class="button is-primary" id="enreg" type="reset" value="Ajouter"
onClick=envoi_formulaire_ajout()> onClick=envoi_formulaire_ajout()>
</div> </div>
</div> </div>
@ -101,21 +93,30 @@ Licence AGPL v3.0+
</div> </div>
<!-- photo de fond--> <!-- photo de fond-->
<img src="assets/zizou.png" id="ima_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="menu_modif" class="invisible">
<div id="modifier" onClick="modifier_personne();">modifier</div> <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 id="annuler" onClick="menu.style.visibility='hidden';">annuler</div>
</div> </div>
</main> </main>
<footer> <footer>
<div class="container"> <div class="container">
Photo mem - J plisson - Photo mem - J plisson -
<a href="https://forge.chapril.org/Liness/photo_mem"> <a href="https://forge.chapril.org/Liness/photo_mem">
sources et documentation</a> - GULL liness sources et documentation</a> - GULL liness
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div> </div>
</footer> </footer>
<script type="application/javascript" src="scripts/main.js"></script>
</body> </body>
</html> </html>

2
scripts/detection_opencv.js
View File

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

19
scripts/main.js
View File

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