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

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 ibac = 0, tit = {}, titre = "", fond = [];
var mode_saisie = "true" // mode saisie true, mode modification false 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") {
i_xml = 0;
i_img = 1
}
var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf(".")); var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
enreg_xml = src + ".xml" enreg_xml = src + ".xml"
enreg_noms = src + "_noms.png" enreg_noms = src + "_noms.png"
@ -25,13 +36,25 @@ function lecfic(fichier) {
fond = fichier[i_img]; 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) {
@ -41,11 +64,15 @@ function lecfic(fichier) {
}; };
} }
// 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);
} }
@ -55,6 +82,9 @@ function lecture_xml() {
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]) {
@ -63,39 +93,42 @@ function lecture_xml() {
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_titre(titre)}
affiche_etiquette(); 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";
@ -103,30 +136,49 @@ function affiche_etiquette() {
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) {
@ -147,10 +199,12 @@ 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 = "";
@ -170,47 +224,12 @@ function creation_data_xml() {
} }
}; };
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 = ""
@ -300,32 +319,40 @@ function tracer_cercle(e) {
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"; 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) { 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_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', "");
@ -336,13 +363,14 @@ function afficher_formulaire(e) {
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();
}; };
@ -379,8 +407,8 @@ function formatXml(xml, tab) { // tab = optional indent value, default is tab (\
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");
@ -391,13 +419,15 @@ function image_finale() {
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'); 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) 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() { 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>

52
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;
}