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

Browse Source
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

492
main.js
View File

@ -1,143 +1,195 @@
/**
var personnes=[],nom=[],nomjf=[],prenom=[],annee=[],note=[],posx=[],posy=[],etx=[],ety=[], can_etiq=[]; * définition des constantes
var ibac=0, tit={}, titre="", fond=[]; */
var mode_saisie="true" // mode saisie true, mode modification false 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 image = document.getElementById('ima_fond');
var cercle = document.getElementById("cirsvg"); var cercle = document.getElementById("cirsvg");
var menu = document.getElementById("menu_modif"); var menu = document.getElementById("menu_modif");
var modif_titre = document.getElementById("nouveau_titre"); var modif_titre = document.getElementById("nouveau_titre");
var cant = document.createElement("canvas"); var canevas_photo = document.createElement("canvas");
document.body.appendChild(cant); document.body.appendChild(canevas_photo);
/**
* écoute du changement de l'input fichier pour charger la photo
* @type {HTMLElement}
*/
let inputElement = document.getElementById('fichiers'); let inputElement = document.getElementById('fichiers');
inputElement.addEventListener('change', (e) => { inputElement.addEventListener('change', (e) => {
lecfic(e.target.files) lecture_photo(e.target.files)
}, false); }, false);
function lecfic(fichier) { function lecture_photo(fichier) {
nb_fichier=fichier.length nb_fichier = fichier.length
var i_xml=1, i_img=0; 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") {
var src=fichier[i_img].name.substring(0,fichier[i_img].name.indexOf(".")); i_xml = 0;
enreg_xml=src+".xml" i_img = 1
enreg_noms=src+"_noms.png" }
fichier_xml=fichier[i_xml];
fond=fichier[i_img]; var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
enreg_xml = src + ".xml"
enreg_noms = src + "_noms.png"
fichier_xml = fichier[i_xml];
fond = fichier[i_img];
affiche_fond(); 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 // deux fichiers selectionnés : l'image et le xml du même nom
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function(evt) {lecture(evt.target.result);}; reader.onload = function (evt) {
lecture(evt.target.result);
};
reader.readAsText(fichier_xml); reader.readAsText(fichier_xml);
function lecture(text) { function lecture(text) {
var parser = new DOMParser(); var parser = new DOMParser();
data_xml = parser.parseFromString(text,"text/xml"); data_xml = parser.parseFromString(text, "text/xml");
lecture_xml(); lecture_xml();
}; };
} }
// Chargement et affichage de l'image background /**
* Chargement et affichage de l'image background
*/
function affiche_fond() { function affiche_fond() {
var read_fond = new FileReader(); var read_fond = new FileReader();
read_fond.addEventListener("load", function (evt) { read_fond.addEventListener("load", function (evt) {
image.src = evt.target.result; image.src = evt.target.result;
console.log('image', image, image.offsetLeft, image.offsetTop);
}, false); }, false);
read_fond.readAsDataURL(fond); read_fond.readAsDataURL(fond);
} }
function lecture_xml() { function lecture_xml() {
tit = data_xml.documentElement.getElementsByTagName("titre")[0]; tit = data_xml.documentElement.getElementsByTagName("titre")[0];
titre=tit.textContent titre = tit.textContent
personnes = data_xml.documentElement.getElementsByTagName("personne"); personnes = data_xml.documentElement.getElementsByTagName("personne");
nb_pers=personnes.length nb_pers = personnes.length
console.log('image', image, image.offsetLeft, image.offsetTop);
for (var i = 0; i < nb_pers; i++) { for (var i = 0; i < nb_pers; i++) {
nom[i] = personnes[i].getElementsByTagName( "nom")[0].textContent; nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
if (personnes[i].getElementsByTagName( "nom_jeune_fille")[0]) { if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
nomjf[i] = personnes[i].getElementsByTagName( "nom_jeune_fille")[0].textContent; nomjf[i] = personnes[i].getElementsByTagName("nom_jeune_fille")[0].textContent;
} }
prenom[i] = personnes[i].getElementsByTagName( "prenom")[0].textContent; prenom[i] = personnes[i].getElementsByTagName("prenom")[0].textContent;
annee[i] = personnes[i].getElementsByTagName( "annee_naiss")[0].textContent; annee[i] = personnes[i].getElementsByTagName("annee_naiss")[0].textContent;
note[i] = personnes[i].getElementsByTagName( "note")[0].textContent; note[i] = personnes[i].getElementsByTagName("note")[0].textContent;
posx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posx'].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); posy[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posy'].value + image.offsetTop);
etx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['etx'].value); etx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['etx'].value + image.offsetLeft);
ety[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['ety'].value); ety[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['ety'].value + image.offsetTop);
} }
if (titre!=='') {affiche_titre(titre)} if (titre !== '') {
affiche_etiquette() ; affiche_titre(titre)
}
affiche_etiquette();
}; };
function affiche_titre(titre_photo) { function affiche_titre(titre_photo) {
cant.className="tit"; canevas_photo.className = "titre";
cant.height=23; canevas_photo.height = 23;
var taille=titre_photo.length; var taille = titre_photo.length;
cant.width=taille*12; canevas_photo.width = taille * 12;
tx = parseFloat(tit.attributes['titx'].value); tx = parseFloat(tit.attributes['titx'].value + image.offsetLeft);
ty = parseFloat(tit.attributes['tity'].value); ty = parseFloat(tit.attributes['tity'].value + image.offsetTop);
cant.style.left = tx + "px"; canevas_photo.style.left = tx + "px";
cant.style.top = ty + "px"; canevas_photo.style.top = ty + "px";
titre_ctx = cant.getContext("2d"); titre_ctx = canevas_photo.getContext("2d");
titre_ctx.font = '21px Arial';
titre_ctx.fillStyle = 'Maroon';
titre_ctx.fillText(titre_photo, 20, 18); titre_ctx.fillText(titre_photo, 20, 18);
affiche_etiquette() ; affiche_etiquette();
} }
/**
* affichage du texte nom/prénom dans des canvas etiquette
*/
function affiche_etiquette() { function affiche_etiquette() {
// affichage du texte nom/prénom dans des canvas etiquette rayon = 28
rayon=28
for (var i = 0; i < nb_pers; i++) { for (var i = 0; i < nb_pers; i++) {
var id="can"+i; var id = "can" + i;
if (document.getElementById(id)) continue ; if (document.getElementById(id)) continue;
var canv = document.createElement("canvas"); var canv = document.createElement("canvas");
canv.id=id; canv.id = id;
canv.setAttribute('class', 'people_label')
document.body.appendChild(canv); document.body.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;
etiq_ctx = can_etiq[i].getContext("2d"); etiq_ctx = can_etiq[i].getContext("2d");
var taille=Math.max(nom[i].length,prenom[i].length,nomjf[i].length+5); var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
can_etiq[i].width=taille*7+10 can_etiq[i].width = taille * 7 + 10
if (nomjf[i].replace(/\t/g, '').length>1) {can_etiq[i].height=45}; if (nomjf[i].replace(/\t/g, '').length > 1) {
etiq_ctx.font = '13px Arial'; can_etiq[i].height = 45
etiq_ctx.fillStyle = 'chocolate'; }
;
can_etiq[i].style.left = etx[i] + "px"; can_etiq[i].style.left = etx[i] + "px";
can_etiq[i].style.top = ety[i] + "px"; can_etiq[i].style.top = ety[i] + "px";
etiq_ctx.fillText(nom[i], 7, 12); etiq_ctx.fillText(nom[i], 7, 12);
etiq_ctx.fillText(prenom[i], 7, 25); 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(); gestion_souris();
}; };
function gestion_souris() { function gestion_souris() {
if (titre!=='') { // pour déplacer le titre // pour déplacer le titre
cant.addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);}); if (titre !== '') {
cant.addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);}); 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 ... // pour déplacer les étiquettes nom,prénom ...
can_etiq[i].addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);}); for (var i = 0; i < nb_pers; i++) {
can_etiq[i].addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);}); 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('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle 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){ function deplace_etiquette(e) {
e.target.style.top = e.pageY-15+"px"; e.target.style.top = e.pageY - 15 + "px";
e.target.style.left = e.pageX-30+"px"; e.target.style.left = e.pageX - 30 + "px";
}; };
function menu_modif(){ function menu_modif() {
menu.style.left = parseFloat(cercle.getAttribute("cx"))+10 +"px"; menu.style.left = parseFloat(cercle.getAttribute("cx")) + 10 + "px";
menu.style.top = parseFloat(cercle.getAttribute("cy"))+40 +"px"; menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "px";
menu.style.visibility="visible"; menu.style.visibility = "visible";
} }
function supprimer_personne() { function supprimer_personne() {
@ -147,92 +199,59 @@ function supprimer_personne() {
for (var i = 0; i < nb_pers; i++) { for (var i = 0; i < nb_pers; i++) {
x = can_etiq[i]; x = can_etiq[i];
x.parentNode.removeChild(x); x.parentNode.removeChild(x);
}; }
cercle.style.visibility="hidden"; ;
cercle.style.visibility = "hidden";
lecture_xml(); lecture_xml();
} }
function creation_data_xml() { function creation_data_xml() {
var x, i; var x, i;
var txt = ""; var txt = "";
var text = "<photo>" + var text = "<photo>" +
"<titre titx='50px' tity='50px'>Titre "+ fond.name + "</titre>" + "<titre titx='50px' tity='50px'>Titre " + fond.name + "</titre>" +
"<date> </date>" + "<date> </date>" +
"<lieu> </lieu>" + "<lieu> </lieu>" +
"<commentaire> </commentaire>" + "<commentaire> </commentaire>" +
"</photo>"; "</photo>";
var parser_face = new DOMParser(); var parser_face = new DOMParser();
data_xml = parser_face.parseFromString(text,"text/xml"); data_xml = parser_face.parseFromString(text, "text/xml");
// documentElement always represents the root node // documentElement always represents the root node
x = data_xml.documentElement.childNodes; x = data_xml.documentElement.childNodes;
for (i = 0; i < x.length ;i++) { for (i = 0; i < x.length; i++) {
txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>"; txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
} }
}; };
function detection_de_visages() { function envoi_formulaire_ajout() {
// 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 detect_faces() { ajouter_personne_xml("", souris_x, souris_y, "", "");
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();
lecture_xml(); lecture_xml();
}
;} function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
function ajouter_personne_xml(nom_face,fx,fy,fw,fh) { var nomform = nom_face
var nomform=nom_face var nomjfform = ""
var nomjfform="" var prenomform = ""
var prenomform="" var anneeform = ""
var anneeform="" var noteform = ""
var noteform="" var posxx = fx + fw / 2
var posxx=fx+fw/2 var posyy = fy + fh / 2
var posyy=fy+fh/2 var etxx = fx + 10
var etxx=fx+10 var etyy = fy + fh * 2
var etyy=fy+fh*2 document.getElementById('ajout').className = 'invisible';
document.getElementById('ajout').className='invisible';
if (!nom_face) { if (!nom_face) {
posxx=fx posxx = fx
posyy=fy posyy = fy
etxx=fx-30 etxx = fx - 30
etyy=fy+80 etyy = fy + 80
nomform=document.getElementById("nom").value nomform = document.getElementById("nom").value
nomjfform=document.getElementById("nom_jeune_fille").value nomjfform = document.getElementById("nom_jeune_fille").value
prenomform=document.getElementById("prenom").value prenomform = document.getElementById("prenom").value
anneeform=document.getElementById("annee").value anneeform = document.getElementById("annee").value
noteform=document.getElementById("note").value noteform = document.getElementById("note").value
} }
// création d'un nouvel élément <personne> dans data_xml // création d'un nouvel élément <personne> dans data_xml
var personne_ = data_xml.createElement("personne"); var personne_ = data_xml.createElement("personne");
@ -261,7 +280,7 @@ function ajouter_personne_xml(nom_face,fx,fy,fw,fh) {
}; };
function modifier_personne() { function modifier_personne() {
mode_saisie="false"; mode_saisie = "false";
afficher_formulaire(this); afficher_formulaire(this);
document.getElementById('nom').setAttribute('value', nom[ibac]); document.getElementById('nom').setAttribute('value', nom[ibac]);
document.getElementById('nom_jeune_fille').setAttribute('value', nomjf[ibac]); document.getElementById('nom_jeune_fille').setAttribute('value', nomjf[ibac]);
@ -269,8 +288,8 @@ function modifier_personne() {
document.getElementById('annee').setAttribute('value', annee[ibac]); document.getElementById('annee').setAttribute('value', annee[ibac]);
document.getElementById('note').setAttribute('value', note[ibac]); document.getElementById('note').setAttribute('value', note[ibac]);
document.getElementById('titre').setAttribute('value', titre); document.getElementById('titre').setAttribute('value', titre);
menu.style.visibility='hidden'; menu.style.visibility = 'hidden';
document.getElementById("enreg").style.visibility="hidden"; document.getElementById("enreg").style.visibility = "hidden";
alert("Fonction en cours de développement") alert("Fonction en cours de développement")
}; };
@ -284,9 +303,9 @@ function position_souris(canvas, evt) {
function tracer_cercle(e) { function tracer_cercle(e) {
document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight); document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
document.getElementsByTagName("svg")[0].setAttribute('width',image.naturalWidth); document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
var pos_x=position_souris(ima_fond, e).x; var pos_x = position_souris(ima_fond, e).x;
var pos_y=position_souris(ima_fond, e).y; var pos_y = position_souris(ima_fond, e).y;
for (var i = 0; i < nb_pers; i++) { for (var i = 0; i < nb_pers; i++) {
var dx = posx[i] - pos_x; var dx = posx[i] - pos_x;
var dy = posy[i] - pos_y; var dy = posy[i] - pos_y;
@ -294,69 +313,78 @@ function tracer_cercle(e) {
var rayon2 = rayon * rayon; var rayon2 = rayon * rayon;
if (dist2 < rayon2) { if (dist2 < rayon2) {
ibac=i ibac = i
can_etiq[i].style.background = "palegreen" can_etiq[i].style.background = "palegreen"
cercle.setAttribute("cx",posx[i]); cercle.setAttribute("cx", posx[i]);
cercle.setAttribute("cy",posy[i]); cercle.setAttribute("cy", posy[i]);
cercle.setAttribute("r",rayon); cercle.setAttribute("r", rayon);
cercle.style.visibility="visible"; 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 return
} }
}; }
cercle.style.visibility="hidden"; ;
if (nb_pers!=0) {can_etiq[ibac].style.backgroundColor = "oldlace";} cercle.style.visibility = "hidden";
if (nb_pers != 0) {
can_etiq[ibac].style.backgroundColor = "oldlace";
}
}; };
/**
* montre le formulaire là où l'on clique
* @param e
*/
function afficher_formulaire(e) { function afficher_formulaire(e) {
var formul=document.getElementById('ajout') var formulaire_ajout = document.getElementById('ajout')
souris_x = position_souris(ima_fond, e).x ; var circle_svg = document.getElementById('circle_svg')
souris_x = position_souris(ima_fond, e).x;
souris_y = position_souris(ima_fond, e).y; souris_y = position_souris(ima_fond, e).y;
if (souris_y-document.getElementById('ajout').height<0) {sourisy=50}; if (souris_y - document.getElementById('ajout').height < 0) {
formul.style.top=souris_y+40+"px"; sourisy = 50
formul.style.left=souris_x-80+"px"; }
setTimeout(function () { document.getElementById("nom").focus(); },10); ;
formul.className='visible'; formulaire_ajout.style.top = souris_y + 40 + "px";
formulaire_ajout.style.left = souris_x - (formulaire_ajout.offsetWidth /2) + "px";
// document.getElementById('ajout_personne').reset(); // ne fonctioone pas ! setTimeout(function () {
document.getElementById("nom").focus();
}, 10);
formulaire_ajout.className = 'visible';
circle_svg.className = 'visible';
if (mode_saisie) { if (mode_saisie) {
document.getElementById('nom').setAttribute('value', ""); document.getElementById('nom').setAttribute('value', "");
document.getElementById('nom').focus();
document.getElementById('nom_jeune_fille').setAttribute('value', ""); document.getElementById('nom_jeune_fille').setAttribute('value', "");
document.getElementById('prenom').setAttribute('value', ""); document.getElementById('prenom').setAttribute('value', "");
document.getElementById('annee').setAttribute('value', ""); document.getElementById('annee').setAttribute('value', "");
document.getElementById('note').setAttribute('value', ""); document.getElementById('note').setAttribute('value', "");
} }
mode_saisie="true"; mode_saisie = "true";
}; };
function misajour_xml(){ function misajour_xml() {
tit.setAttribute("titx",cant.style.left); tit.setAttribute("titx", canevas_photo.style.left);
tit.setAttribute("tity",cant.style.top); tit.setAttribute("tity", canevas_photo.style.top);
for (var i = 0; i < nb_pers; i++) { for (var i = 0; i < nb_pers; i++) {
position=data_xml.getElementsByTagName( "position")[i]; position = data_xml.getElementsByTagName("position")[i];
position.setAttribute("etx",can_etiq[i].style.left); position.setAttribute("etx", can_etiq[i].style.left);
position.setAttribute("ety",can_etiq[i].style.top); position.setAttribute("ety", can_etiq[i].style.top);
}; }
;
lecture_xml(); lecture_xml();
} ; };
function enregistrer_fichier(fichier) { function enregistrer_fichier(fichier) {
misajour_xml() misajour_xml()
var texte_xml=(new XMLSerializer()).serializeToString(data_xml) var texte_xml = (new XMLSerializer()).serializeToString(data_xml)
texte_xml=formatXml(texte_xml) texte_xml = formatXml(texte_xml)
var blob = new Blob([texte_xml], {type: "text/plain;charset=utf-8"}); var blob = new Blob([texte_xml], {type: "text/plain;charset=utf-8"});
if (navigator.msSaveBlob) { if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fichier); navigator.msSaveBlob(blob, fichier);
} else { } else {
var a = document.createElement('a'); var a = document.createElement('a');
if (a.download === ''); if (a.download === '') ;
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';
@ -367,42 +395,44 @@ function enregistrer_fichier(fichier) {
} }
function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t) function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
var formatted = '', indent= ''; var formatted = '', indent = '';
tab = tab || '\t'; tab = tab || '\t';
xml.split(/>\s*</).forEach(function(node) { xml.split(/>\s*</).forEach(function (node) {
if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab' if (node.match(/^\/\w/)) indent = indent.substring(tab.length); // decrease indent by one 'tab'
formatted += indent + '<' + node + '>\r\n'; formatted += indent + '<' + node + '>\r\n';
if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab; // increase indent if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab; // increase indent
}); });
return formatted.substring(1, formatted.length-3); return formatted.substring(1, formatted.length - 3);
} }
function image_finale() { function image_finale() {
misajour_xml() misajour_xml()
var decalx=5; var decalx = 5 + image.offsetLeft;
var decaly=29; var decaly = 29 + image.offsetTop;
var can_imf = document.createElement("canvas"); var can_imf = document.createElement("canvas");
document.body.appendChild(can_imf); document.body.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;
imf_ctx.drawImage(ima_fond,0,0) imf_ctx.drawImage(ima_fond, 0, 0)
if (titre!=='') { if (titre !== '') {
var taille=titre.length; var taille = titre.length;
hauteur=25 hauteur = 25
roundedRect(imf_ctx,tx-decalx,ty-decaly,taille*11,hauteur,5,'lightyellow','yellow'); 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++) { for (var i = 0; i < nb_pers; i++) {
var taille=Math.max(nom[i].length,prenom[i].length,nomjf[i].length+5); var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
hauteur=30 hauteur = 30
if (nomjf[i].replace(/\t/g, '').length>1) {hauteur=45}; if (nomjf[i].replace(/\t/g, '').length > 1) {
// if (!nomjf[i].charCodeAt(1)==9) {hauteur=45}; 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) 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)
} }
var a = document.createElement('a'); var a = document.createElement('a');
if (a.download === ''); if (a.download === '') ;
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';
@ -411,7 +441,7 @@ function image_finale() {
document.body.removeChild(a); document.body.removeChild(a);
document.body.removeChild(can_imf); document.body.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();
ctx.strokeStyle = couleur_trait; ctx.strokeStyle = couleur_trait;
ctx.moveTo(x, y + radius); ctx.moveTo(x, y + radius);
@ -430,7 +460,53 @@ function image_finale() {
} }
} }
/******************************************
* détection de visages avec openCV
******************************************/
function onOpenCvReady() { 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> <main>
<div id="actions"> <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 <button id="bouton_image" onclick="fichiers.click()" title="Charger une image et le XML associé">Choix de la
photo photo
</button> </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" <input id="save_file" type="button" class=cotecote value="Enregistrer xml"
onclick="enregistrer_fichier(enreg_xml)"/> onclick="enregistrer_fichier(enreg_xml)"/>
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()"/> <input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()"/>
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p> <p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div> </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"/> <circle id="cirsvg" cx="30" cy="30" r="28"/>
</svg> </svg>
<div id="ajout" class="invisible" style="position: relative; z-index: 1;"> <!-- formulaire d'ajout ou de modification d'une personne-->
<form name="ajout_personne" id="ajout_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"> <h2 class="title is-2">
NOUVELLE PERSONNE NOUVELLE PERSONNE
</h2> </h2>
Nom : <input type="text" name="nom" id="nom" autofocus><BR> <label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
Née : <input type="text" name="nom_jf" id="nom_jeune_fille"><BR> <label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
Prénom : <input type="text" name="prénom" id="prenom"><BR> <label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
Année : <input type="text" name="année" id="annee"><BR> <label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
Note : <input type="text" name="note" id="note"><BR> <label for="note">Note : </label><input type="text" name="note" id="note"><BR>
Titre photo : <input type="text" name="titre" id="titre"><BR> <label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
<input type="reset" id="enreg" value="Ajouter" <input id="enreg" type="reset"value="Ajouter"
onClick=ajouter_personne_xml("",souris_x,souris_y,"","");lecture_xml();> onClick=envoi_formulaire_ajout()>
<input type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";> <input id="reset" type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
</form> </form>
</div> </div>
<!-- photo de fond-->
<img src="" id="ima_fond" >
<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();menu.style.visibility='hidden';">supprimer</div>

56
style_photomem.css
View File

@ -1,10 +1,12 @@
body{ body {
background: #ccc; background: #ccc;
} }
main{
main {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
circle { circle {
fill: transparent; fill: transparent;
stroke: black; stroke: black;
@ -12,9 +14,8 @@ circle {
} }
#bouton_image { #bouton_image {
background-color: blue; background-color: #2266cb;
color: white; color: white;
height: 30px;
} }
#menu_modif { #menu_modif {
@ -31,7 +32,7 @@ circle {
} }
#ajout { #ajout {
border: 2px solid red; border: 2px solid #2266cb;
border-radius: 10px; border-radius: 10px;
top: 100px; top: 100px;
left: 200px; left: 200px;
@ -39,17 +40,23 @@ circle {
padding-bottom: 0.5em; padding-bottom: 0.5em;
padding-left: 1em; padding-left: 1em;
background-color: Azure; 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 { #ajout input:focus {
border: solid 2px green; border: solid 2px green;
} }
.cotecote {
display: inline;
}
.visible { .visible {
visibility: visible; visibility: visible;
} }
@ -60,16 +67,17 @@ circle {
.etiq { .etiq {
background-color: oldlace; background-color: oldlace;
border: 1px solid blue; border: 1px solid #2266cb;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
font-family: Arial; font-family: Arial;
font-size: 13px; font-size: 13px;
left: -200px; left: -200px;
top: 100px; top: 100px;
padding: 1em;
} }
.tit { .titre {
background-color: LightYellow; background-color: LightYellow;
border: 2px solid Yellow; border: 2px solid Yellow;
border-radius: 5px; border-radius: 5px;
@ -78,10 +86,32 @@ circle {
top: 100px; top: 100px;
} }
#actions button, #actions input { #actions button,
#actions input,
#ajout button,
#enreg, #reset {
background: cadetblue; background: cadetblue;
border-radius: 3px; border-radius: 3px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
padding: 1em 2em; 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;
} }