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

enlever le code mort, améliorer le formulaire d'ajout: autofocus, label

This commit is contained in:
Tykayn 2021-10-04 11:07:01 +02:00 committed by tykayn
parent 5c0a357cc8
commit 8913f6458a
3 changed files with 347 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
main.js
View File

@ -1,23 +1,34 @@
var personnes=[],nom=[],nomjf=[],prenom=[],annee=[],note=[],posx=[],posy=[],etx=[],ety=[], can_etiq=[];
/**
* définition des constantes
*/
var personnes = [], nom = [], nomjf = [], prenom = [], annee = [], note = [], posx = [], posy = [], etx = [], ety = [],
can_etiq = [];
var ibac = 0, tit = {}, titre = "", fond = [];
var mode_saisie = "true" // mode saisie true, mode modification false
var image = document.getElementById('ima_fond');
var cercle = document.getElementById("cirsvg");
var menu = document.getElementById("menu_modif");
var modif_titre = document.getElementById("nouveau_titre");
var cant = document.createElement("canvas");
document.body.appendChild(cant);
var canevas_photo = document.createElement("canvas");
document.body.appendChild(canevas_photo);
/**
* écoute du changement de l'input fichier pour charger la photo
* @type {HTMLElement}
*/
let inputElement = document.getElementById('fichiers');
inputElement.addEventListener('change', (e) => {
lecfic(e.target.files)
lecture_photo(e.target.files)
}, false);
function lecfic(fichier) {
function lecture_photo(fichier) {
nb_fichier = fichier.length
var i_xml = 1, i_img = 0;
if (fichier[0].name.split('.').pop()=="xml") {i_xml=0; i_img=1};
if (fichier[0].name.split('.').pop() == "xml") {
i_xml = 0;
i_img = 1
}
var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
enreg_xml = src + ".xml"
enreg_noms = src + "_noms.png"
@ -25,13 +36,25 @@ function lecfic(fichier) {
fond = fichier[i_img];
affiche_fond();
if (nb_fichier==1) {creation_data_xml(); lecture_xml(); return} // Un seul fichier sélectionné : l'image à traiter
// Un seul fichier sélectionné : l'image à traiter
if (nb_fichier == 1) {
creation_data_xml();
lecture_xml();
return
}
if (fichier_xml.name.startsWith("haar")) {creation_data_xml(); detection_de_visages();return} // deux fichiers selectionnés : l'image et haarcascade.xml
// deux fichiers selectionnés : l'image et haarcascade.xml
if (fichier_xml.name.startsWith("haar")) {
creation_data_xml();
detection_de_visages();
return
}
// deux fichiers selectionnés : l'image et le xml du même nom
var reader = new FileReader();
reader.onload = function(evt) {lecture(evt.target.result);};
reader.onload = function (evt) {
lecture(evt.target.result);
};
reader.readAsText(fichier_xml);
function lecture(text) {
@ -41,11 +64,15 @@ function lecfic(fichier) {
};
}
// Chargement et affichage de l'image background
/**
* Chargement et affichage de l'image background
*/
function affiche_fond() {
var read_fond = new FileReader();
read_fond.addEventListener("load", function (evt) {
image.src = evt.target.result;
console.log('image', image, image.offsetLeft, image.offsetTop);
}, false);
read_fond.readAsDataURL(fond);
}
@ -55,6 +82,9 @@ function lecture_xml() {
titre = tit.textContent
personnes = data_xml.documentElement.getElementsByTagName("personne");
nb_pers = personnes.length
console.log('image', image, image.offsetLeft, image.offsetTop);
for (var i = 0; i < nb_pers; i++) {
nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
@ -63,39 +93,42 @@ function lecture_xml() {
prenom[i] = personnes[i].getElementsByTagName("prenom")[0].textContent;
annee[i] = personnes[i].getElementsByTagName("annee_naiss")[0].textContent;
note[i] = personnes[i].getElementsByTagName("note")[0].textContent;
posx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posx'].value);
posy[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posy'].value);
etx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['etx'].value);
ety[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['ety'].value);
posx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posx'].value + image.offsetLeft);
posy[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posy'].value + image.offsetTop);
etx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['etx'].value + image.offsetLeft);
ety[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['ety'].value + image.offsetTop);
}
if (titre !== '') {
affiche_titre(titre)
}
if (titre!=='') {affiche_titre(titre)}
affiche_etiquette();
};
function affiche_titre(titre_photo) {
cant.className="tit";
cant.height=23;
canevas_photo.className = "titre";
canevas_photo.height = 23;
var taille = titre_photo.length;
cant.width=taille*12;
tx = parseFloat(tit.attributes['titx'].value);
ty = parseFloat(tit.attributes['tity'].value);
cant.style.left = tx + "px";
cant.style.top = ty + "px";
titre_ctx = cant.getContext("2d");
titre_ctx.font = '21px Arial';
titre_ctx.fillStyle = 'Maroon';
canevas_photo.width = taille * 12;
tx = parseFloat(tit.attributes['titx'].value + image.offsetLeft);
ty = parseFloat(tit.attributes['tity'].value + image.offsetTop);
canevas_photo.style.left = tx + "px";
canevas_photo.style.top = ty + "px";
titre_ctx = canevas_photo.getContext("2d");
titre_ctx.fillText(titre_photo, 20, 18);
affiche_etiquette();
}
/**
* affichage du texte nom/prénom dans des canvas etiquette
*/
function affiche_etiquette() {
// affichage du texte nom/prénom dans des canvas etiquette
rayon = 28
for (var i = 0; i < nb_pers; i++) {
var id = "can" + i;
if (document.getElementById(id)) continue;
var canv = document.createElement("canvas");
canv.id = id;
canv.setAttribute('class', 'people_label')
document.body.appendChild(canv);
can_etiq[i] = document.getElementById(canv.id);
can_etiq[i].className = "etiq";
@ -103,30 +136,49 @@ function affiche_etiquette() {
etiq_ctx = can_etiq[i].getContext("2d");
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
can_etiq[i].width = taille * 7 + 10
if (nomjf[i].replace(/\t/g, '').length>1) {can_etiq[i].height=45};
etiq_ctx.font = '13px Arial';
etiq_ctx.fillStyle = 'chocolate';
if (nomjf[i].replace(/\t/g, '').length > 1) {
can_etiq[i].height = 45
}
;
can_etiq[i].style.left = etx[i] + "px";
can_etiq[i].style.top = ety[i] + "px";
etiq_ctx.fillText(nom[i], 7, 12);
etiq_ctx.fillText(prenom[i], 7, 25);
if (nomjf[i].length>1) {etiq_ctx.fillText("née : "+nomjf[i], 7, 38)};
};
if (nomjf[i].length > 1) {
etiq_ctx.fillText("née : " + nomjf[i], 7, 38)
}
;
}
;
gestion_souris();
};
function gestion_souris() {
if (titre!=='') { // pour déplacer le titre
cant.addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
cant.addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
// pour déplacer le titre
if (titre !== '') {
canevas_photo.addEventListener("mousedown", function (e) {
this.addEventListener("mousemove", deplace_etiquette);
});
canevas_photo.addEventListener("mouseup", function (e) {
this.removeEventListener("mousemove", deplace_etiquette);
});
}
for (var i = 0; i < nb_pers; i++) { // pour déplacer les étiquettes nom,prénom ...
can_etiq[i].addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
can_etiq[i].addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
};
// pour déplacer les étiquettes nom,prénom ...
for (var i = 0; i < nb_pers; i++) {
can_etiq[i].addEventListener("mousedown", function (e) {
this.addEventListener("mousemove", deplace_etiquette);
});
can_etiq[i].addEventListener("mouseup", function (e) {
this.removeEventListener("mousemove", deplace_etiquette);
});
}
;
ima_fond.addEventListener('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle personne
cercle.addEventListener('contextmenu', function (e) { menu_modif(e); e.preventDefault();}, false); // menu modif personne
cercle.addEventListener('contextmenu', function (e) {
menu_modif(e);
e.preventDefault();
}, false); // menu modif personne
};
function deplace_etiquette(e) {
@ -147,10 +199,12 @@ function supprimer_personne() {
for (var i = 0; i < nb_pers; i++) {
x = can_etiq[i];
x.parentNode.removeChild(x);
};
}
;
cercle.style.visibility = "hidden";
lecture_xml();
}
function creation_data_xml() {
var x, i;
var txt = "";
@ -170,47 +224,12 @@ function creation_data_xml() {
}
};
function detection_de_visages() {
// alert pour temporiser
alert("Ok pour continuer")
src = cv.imread(ima_fond);
gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
chargement_haarcascade();
}
function chargement_haarcascade() {
var reader_haar = new FileReader();
reader_haar.onload = function(ev) {
function str2ab(text) {
return new TextEncoder().encode(text);
}
faceCascadeFile = fichier_xml.name;
let data=str2ab(reader_haar.result)
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
detect_faces();
};
reader_haar.readAsText(fichier_xml);
}
function envoi_formulaire_ajout() {
function detect_faces() {
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load(faceCascadeFile);
// detect faces
let msize = new cv.Size(0, 0);
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.log("Il y a "+ faces.size()+" visage(s)")
for (let i = 0; i < faces.size(); ++i) {
ajouter_personne_xml("nom_"+parseInt(i)+" ",faces.get(i).x,faces.get(i).y,faces.get(i).width,faces.get(i).height)
}
// cv.imshow('ima_fond', src);
src.delete(); gray.delete(); faceCascade.delete();
faces.delete();
ajouter_personne_xml("", souris_x, souris_y, "", "");
lecture_xml();
}
;}
function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
var nomform = nom_face
var nomjfform = ""
@ -300,32 +319,40 @@ function tracer_cercle(e) {
cercle.setAttribute("cy", posy[i]);
cercle.setAttribute("r", rayon);
cercle.style.visibility = "visible";
// grossir ou diminuer la taille du cercle
// cercle.addEventListener("wheel", function(e) {
// rayon=rayon + (e.deltaY>0 ? -1 : +1);
// cercle.setAttribute("r",rayon );
// } , false);
return
}
};
}
;
cercle.style.visibility = "hidden";
if (nb_pers!=0) {can_etiq[ibac].style.backgroundColor = "oldlace";}
if (nb_pers != 0) {
can_etiq[ibac].style.backgroundColor = "oldlace";
}
};
/**
* montre le formulaire là où l'on clique
* @param e
*/
function afficher_formulaire(e) {
var formul=document.getElementById('ajout')
var formulaire_ajout = document.getElementById('ajout')
var circle_svg = document.getElementById('circle_svg')
souris_x = position_souris(ima_fond, e).x;
souris_y = position_souris(ima_fond, e).y;
if (souris_y-document.getElementById('ajout').height<0) {sourisy=50};
formul.style.top=souris_y+40+"px";
formul.style.left=souris_x-80+"px";
setTimeout(function () { document.getElementById("nom").focus(); },10);
formul.className='visible';
// document.getElementById('ajout_personne').reset(); // ne fonctioone pas !
if (souris_y - document.getElementById('ajout').height < 0) {
sourisy = 50
}
;
formulaire_ajout.style.top = souris_y + 40 + "px";
formulaire_ajout.style.left = souris_x - (formulaire_ajout.offsetWidth /2) + "px";
setTimeout(function () {
document.getElementById("nom").focus();
}, 10);
formulaire_ajout.className = 'visible';
circle_svg.className = 'visible';
if (mode_saisie) {
document.getElementById('nom').setAttribute('value', "");
document.getElementById('nom').focus();
document.getElementById('nom_jeune_fille').setAttribute('value', "");
document.getElementById('prenom').setAttribute('value', "");
document.getElementById('annee').setAttribute('value', "");
@ -336,13 +363,14 @@ function afficher_formulaire(e) {
function misajour_xml() {
tit.setAttribute("titx",cant.style.left);
tit.setAttribute("tity",cant.style.top);
tit.setAttribute("titx", canevas_photo.style.left);
tit.setAttribute("tity", canevas_photo.style.top);
for (var i = 0; i < nb_pers; i++) {
position = data_xml.getElementsByTagName("position")[i];
position.setAttribute("etx", can_etiq[i].style.left);
position.setAttribute("ety", can_etiq[i].style.top);
};
}
;
lecture_xml();
};
@ -379,8 +407,8 @@ function formatXml(xml, tab) { // tab = optional indent value, default is tab (\
function image_finale() {
misajour_xml()
var decalx=5;
var decaly=29;
var decalx = 5 + image.offsetLeft;
var decaly = 29 + image.offsetTop;
var can_imf = document.createElement("canvas");
document.body.appendChild(can_imf);
imf_ctx = can_imf.getContext("2d");
@ -391,13 +419,15 @@ function image_finale() {
var taille = titre.length;
hauteur = 25
roundedRect(imf_ctx, tx - decalx, ty - decaly, taille * 11, hauteur, 5, 'lightyellow', 'yellow');
imf_ctx.drawImage(cant, tx-decalx, ty-decaly)
};
imf_ctx.drawImage(canevas_photo, tx - decalx, ty - decaly)
}
for (var i = 0; i < nb_pers; i++) {
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
hauteur = 30
if (nomjf[i].replace(/\t/g, '').length>1) {hauteur=45};
// if (!nomjf[i].charCodeAt(1)==9) {hauteur=45};
if (nomjf[i].replace(/\t/g, '').length > 1) {
hauteur = 45
}
roundedRect(imf_ctx, etx[i] - decalx, ety[i] - decaly, taille * 7 + 10, hauteur, 15, 'oldlace', 'blue');
imf_ctx.drawImage(can_etiq[i], etx[i] - decalx, ety[i] - decaly)
}
@ -430,7 +460,53 @@ function image_finale() {
}
}
/******************************************
* détection de visages avec openCV
******************************************/
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js est chargé !';
console.info('OpenCV.js est chargé !');
}
function detection_de_visages() {
src = cv.imread(ima_fond);
gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
chargement_haarcascade();
}
function chargement_haarcascade() {
var reader_haar = new FileReader();
reader_haar.onload = function (ev) {
function str2ab(text) {
return new TextEncoder().encode(text);
}
faceCascadeFile = fichier_xml.name;
let data = str2ab(reader_haar.result)
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
detect_faces();
};
reader_haar.readAsText(fichier_xml);
}
function detect_faces() {
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load(faceCascadeFile);
// detect faces
let msize = new cv.Size(0, 0);
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.log("Il y a " + faces.size() + " visage(s)")
for (let i = 0; i < faces.size(); ++i) {
ajouter_personne_xml("nom_" + parseInt(i) + " ", faces.get(i).x, faces.get(i).y, faces.get(i).width, faces.get(i).height)
}
src.delete();
gray.delete();
faceCascade.delete();
faces.delete();
lecture_xml();
;
}

36
photo_mem.html
View File

@ -22,40 +22,44 @@ Licence AGPL v3.0+
<main>
<div id="actions">
<input id="fichiers" multiple type="file" class="cotecote" style="display:none"/>
<input id="fichiers" multiple type="file" class="cotecote" value="zizou.png"/>
<button id="bouton_image" onclick="fichiers.click()" title="Charger une image et le XML associé">Choix de la
photo
</button>
<button id="detection" onclick="detection_de_visages()" title="Détecter les visages">détection visages
</button>
<input id="save_file" type="button" class=cotecote value="Enregistrer xml"
onclick="enregistrer_fichier(enreg_xml)"/>
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()"/>
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div>
<div style="position: relative; ">
<img src="" id="ima_fond" style="position: absolute; left: 0; top: 0; z-index: 0;">
</div>
<svg class="invisible" style="position: absolute" ;>
<!-- cercle indiquant la position où on a cliqué-->
<svg id="circle_svg" class="invisible" style="position: absolute" ;>
<circle id="cirsvg" cx="30" cy="30" r="28"/>
</svg>
<div id="ajout" class="invisible" style="position: relative; z-index: 1;">
<form name="ajout_personne" id="ajout_personne">
<!-- formulaire d'ajout ou de modification d'une personne-->
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
<form name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
<h2 class="title is-2">
NOUVELLE PERSONNE
</h2>
Nom : <input type="text" name="nom" id="nom" autofocus><BR>
Née : <input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
Prénom : <input type="text" name="prénom" id="prenom"><BR>
Année : <input type="text" name="année" id="annee"><BR>
Note : <input type="text" name="note" id="note"><BR>
Titre photo : <input type="text" name="titre" id="titre"><BR>
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
<label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
<label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
<input type="reset" id="enreg" value="Ajouter"
onClick=ajouter_personne_xml("",souris_x,souris_y,"","");lecture_xml();>
<input type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
<input id="enreg" type="reset"value="Ajouter"
onClick=envoi_formulaire_ajout()>
<input id="reset" type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
</form>
</div>
<!-- photo de fond-->
<img src="" id="ima_fond" >
<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>

52
style_photomem.css
View File

@ -1,10 +1,12 @@
body {
background: #ccc;
}
main {
width: 80%;
margin: 0 auto;
}
circle {
fill: transparent;
stroke: black;
@ -12,9 +14,8 @@ circle {
}
#bouton_image {
background-color: blue;
background-color: #2266cb;
color: white;
height: 30px;
}
#menu_modif {
@ -31,7 +32,7 @@ circle {
}
#ajout {
border: 2px solid red;
border: 2px solid #2266cb;
border-radius: 10px;
top: 100px;
left: 200px;
@ -39,17 +40,23 @@ circle {
padding-bottom: 0.5em;
padding-left: 1em;
background-color: Azure;
width: 230px;
width: 24em;
}
#ajout label {
width: 10em;
display: inline-block;
padding-right: 1em;
}
#ajout input[type=text] {
border: solid 1px cadetblue;
}
#ajout input:focus {
border: solid 2px green;
}
.cotecote {
display: inline;
}
.visible {
visibility: visible;
}
@ -60,16 +67,17 @@ circle {
.etiq {
background-color: oldlace;
border: 1px solid blue;
border: 1px solid #2266cb;
border-radius: 10px;
position: absolute;
font-family: Arial;
font-size: 13px;
left: -200px;
top: 100px;
padding: 1em;
}
.tit {
.titre {
background-color: LightYellow;
border: 2px solid Yellow;
border-radius: 5px;
@ -78,10 +86,32 @@ circle {
top: 100px;
}
#actions button, #actions input {
#actions button,
#actions input,
#ajout button,
#enreg, #reset {
background: cadetblue;
border-radius: 3px;
border: 0;
cursor: pointer;
padding: 1em 2em;
}
#actions button:hover,
#actions input:hover,
#ajout button:hover,
#enreg:hover, #reset:hover {
background: #275d5f;
cursor: pointer;
}
#fichiers {
display: none;
}
#ima_fond {
position: absolute;
left: 2em;
top: 11em;
z-index: -1;
}