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

dispatch files in folders, split opencv, documentation

Browse Source
This commit is contained in:
Tykayn 2021-10-04 12:26:35 +02:00 committed by tykayn
parent 4d87064a79
commit 7b17f7ad50
12 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -25,15 +25,25 @@ Quand vous avez terminé de remplir et de positionner vos étiquettes, n'oubliez
Attention, il n'y a pas de sauvegarde automatique, et si vous oubliez de sauvegarder, tout est perdu !
## Reste à faire :
modifier une personne - en cours ...
saisir / modifier le titre - en cours ...
adapter la taille des étiquettes et du cercle à la résolution de l'image
modifier la couleur des étiquettes et du texte
paramétrer un peu mieux toutes les valeurs de positionnement qui sont en dur.
éviter d'avoir à re-saisir les noms que l'on retrouve sur plusieurs photos - pas facile simplement
reconnaissance faciale pour retrouver les mêmes personnages sur plusieurs photos
barre d'outils ??
...... etc et sans compliquer le programme !!!
* TODO modifier une personne - en cours ...
* TODO saisir / modifier le titre - en cours ...
- autofocus sur le premier champ
- changer l'entrée dans le XML correspondant
* TODO adapter la taille des étiquettes et du cercle à la résolution de l'image
* TODO modifier la couleur des étiquettes et du texte
- avoir un input de type color
* TODO éviter d'avoir à re-saisir les noms que l'on retrouve sur plusieurs photos - pas facile simplement
- utiliser le localstorage pour stocker nos entrées et une library d'autocomplétion à la saisie
* TODO reconnaissance faciale pour retrouver les mêmes personnages sur plusieurs photos
* TODO barre d'outils ??
- à définir
...... etc et sans compliquer le programme !!! (ha ha!)
Désolé si le code n'est pas très aux normes, mais je ne connaissais pas javascript avant ce programme!
## Fait
* ajouter des personnes dans le xml
* télécharger un export des données en xml
* importer un xml
* paramétrer un peu mieux toutes les valeurs de positionnement, qui sont maintenant relatives à la place de l'image, qui n'est plus obligée d'être absolue à 0, 0.

0
zizou.png → assets/zizou.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 898 KiB

After

Width:  |  Height:  |  Size: 898 KiB

0
zizou.xml → assets/zizou.xml
View File

13
photo_mem.html
View File

@ -13,8 +13,11 @@ Licence AGPL v3.0+
<meta charset="utf-8"/>
<title>Photo mem</title>
<link rel="stylesheet" type="text/css" href="bulma.min.css"></link>
<link rel="stylesheet" type="text/css" href="style_photomem.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>
<script type="text/javascript" src="scripts/lib/opencv.js" onload="onOpenCvReady();"></script>
<script type="application/javascript" src="scripts/main.js"></script>
</head>
<body>
<header>
@ -28,7 +31,7 @@ Licence AGPL v3.0+
</p>
<div id="actions">
<input id="fichiers" multiple type="file" class="cotecote button is-primary" value="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()"
title="Charger une image et le XML associé">
Choix de la
@ -98,7 +101,7 @@ Licence AGPL v3.0+
</div>
<!-- photo de fond-->
<img src="zizou.png" id="ima_fond" />
<img src="assets/zizou.png" 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>
@ -114,7 +117,5 @@ Licence AGPL v3.0+
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
</div>
</footer>
<script type="application/javascript" src="main.js"></script>
<script src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>

53
scripts/detection_opencv.js Normal file
View File

@ -0,0 +1,53 @@
/******************************************
* détection de visages avec openCV
******************************************/
function onOpenCvReady() {
console.info('OpenCV.js est chargé !');
document.getElementById('status').remove()
gestion_souris();
}
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() {
let 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();
;
}

0
haarcascade_frontalface_alt.xml → scripts/haarcascade_frontalface_alt.xml
View File

0
haarcascade_frontalface_alt2.xml → scripts/haarcascade_frontalface_alt2.xml
View File

0
haarcascade_frontalface_default.xml → scripts/haarcascade_frontalface_default.xml
View File

0
opencv.js → scripts/lib/opencv.js
View File

54
main.js → scripts/main.js
View File

@ -344,7 +344,6 @@ function afficher_formulaire(e) {
let highlight_circle = document.getElementById('circle_svg')
souris_x = e.clientX ;
souris_y = e.clientY + document.documentElement.scrollTop;
console.log('souris_x, souris_y, document.body.scrollTop', souris_x, souris_y, document.documentElement.scrollTop);
if (souris_y - document.getElementById('ajout').height < 0) {
sourisy = 50
}
@ -473,56 +472,3 @@ function image_finale() {
ctx.stroke();
}
}
/******************************************
* détection de visages avec openCV
******************************************/
function onOpenCvReady() {
console.info('OpenCV.js est chargé !');
document.getElementById('status').remove()
gestion_souris();
}
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() {
let 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();
;
}

0
bulma.min.css → styles/bulma.min.css vendored
View File

0
style_photomem.css → styles/style_photomem.css
View File