enable init function
This commit is contained in:
tykayn
parent
7b17f7ad50
commit
fcdd3b9191
|
|
@ -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/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>
|
||||
<body onload="init()">
|
||||
<header>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
|
|
@ -31,25 +28,23 @@ Licence AGPL v3.0+
|
|||
</p>
|
||||
<div id="actions">
|
||||
|
||||
<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
|
||||
photo
|
||||
</button>
|
||||
<button class="button is-secondary" id="detection" onclick="detection_de_visages()"
|
||||
title="Détecter les visages">détection visages
|
||||
</button>
|
||||
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer xml"
|
||||
onclick="enregistrer_fichier(enreg_xml)"/>
|
||||
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer image "
|
||||
onclick="image_finale()"/>
|
||||
<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
|
||||
photo
|
||||
</button>
|
||||
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer le xml"
|
||||
onclick="enregistrer_fichier(enreg_xml)"/>
|
||||
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer l'image "
|
||||
onclick="image_finale()"/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<main class="section is-medium">
|
||||
<main class="section is-medium" id="main">
|
||||
|
||||
|
||||
<!-- cercle indiquant la position où on a cliqué-->
|
||||
|
|
@ -62,13 +57,14 @@ Licence AGPL v3.0+
|
|||
NOUVELLE PERSONNE
|
||||
</h2>
|
||||
<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 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 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 class="field is-horizontal">
|
||||
<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 class="columns">
|
||||
<div class="column">
|
||||
<input class="button is-warning" id="reset" type="reset" value="Annuler"
|
||||
onClick=document.getElementById("ajout").className="invisible";>
|
||||
</div>
|
||||
<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()>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,21 +93,30 @@ Licence AGPL v3.0+
|
|||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
|
||||
Photo mem - J plisson -
|
||||
<a href="https://forge.chapril.org/Liness/photo_mem">
|
||||
sources et documentation</a> - GULL liness
|
||||
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
|
||||
Photo mem - J plisson -
|
||||
<a href="https://forge.chapril.org/Liness/photo_mem">
|
||||
sources et documentation</a> - GULL liness
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="application/javascript" src="scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
function onOpenCvReady() {
|
||||
console.info('OpenCV.js est chargé !');
|
||||
document.getElementById('status').remove()
|
||||
gestion_souris();
|
||||
|
||||
}
|
||||
|
||||
function detection_de_visages() {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ inputElement.addEventListener('change', (e) => {
|
|||
lecture_photo(e.target.files)
|
||||
}, false);
|
||||
|
||||
function init(){
|
||||
console.log("lancement de l'initialisation");
|
||||
gestion_souris();
|
||||
}
|
||||
function lecture_photo(fichier) {
|
||||
nb_fichier = fichier.length
|
||||
let i_xml = 1, i_img = 0;
|
||||
|
|
@ -130,7 +134,7 @@ function affiche_etiquette() {
|
|||
let canv = document.createElement("canvas");
|
||||
canv.id = id;
|
||||
canv.setAttribute('class', 'people_label')
|
||||
document.body.appendChild(canv);
|
||||
document.querySelector('#main').appendChild(canv);
|
||||
can_etiq[i] = document.getElementById(canv.id);
|
||||
can_etiq[i].className = "etiq";
|
||||
can_etiq[i].height = 30;
|
||||
|
|
@ -206,6 +210,7 @@ function supprimer_personne() {
|
|||
}
|
||||
cercle.style.visibility = "hidden";
|
||||
lecture_xml();
|
||||
menu.style.visibility='hidden';
|
||||
}
|
||||
|
||||
function creation_data_xml() {
|
||||
|
|
@ -401,9 +406,9 @@ function enregistrer_fichier(fichier) {
|
|||
a.setAttribute('download', fichier);
|
||||
a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml));
|
||||
a.style.display = 'none';
|
||||
document.body.appendChild(a);
|
||||
document.querySelector('#main').appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
document.querySelector('#main').removeChild(a);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -423,7 +428,7 @@ function image_finale() {
|
|||
let decalx = 5 + image.offsetLeft;
|
||||
let decaly = 29 + image.offsetTop;
|
||||
let can_imf = document.createElement("canvas");
|
||||
document.body.appendChild(can_imf);
|
||||
document.querySelector('#main').appendChild(can_imf);
|
||||
imf_ctx = can_imf.getContext("2d");
|
||||
can_imf.width = ima_fond.width;
|
||||
can_imf.height = ima_fond.height;
|
||||
|
|
@ -449,10 +454,10 @@ function image_finale() {
|
|||
a.setAttribute('download', enreg_noms);
|
||||
a.setAttribute('href', can_imf.toDataURL("image/png").replace("image/png", "image/octet-stream"));
|
||||
a.style.display = 'none';
|
||||
document.body.appendChild(a);
|
||||
document.querySelector('#main').appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
document.body.removeChild(can_imf);
|
||||
document.querySelector('#main').removeChild(a);
|
||||
document.querySelector('#main').removeChild(can_imf);
|
||||
|
||||
function roundedRect(ctx, x, y, width, height, radius, couleur_fond, couleur_trait) {
|
||||
ctx.beginPath();
|
||||
|
|
|
|||
Loading…
Reference in New Issue