From e867ac1d3aa4f6b5df67596bdcf563a2ab4e4f1f Mon Sep 17 00:00:00 2001 From: Samuel ORTION Date: Mon, 3 May 2021 12:00:09 +0200 Subject: [PATCH] Initial webapp --- index.html | 65 ++++++++ photo_mem.html | 419 ------------------------------------------------- script.js | 373 +++++++++++++++++++++++++++++++++++++++++++ style.css | 66 ++++++++ 4 files changed, 504 insertions(+), 419 deletions(-) create mode 100644 index.html delete mode 100644 photo_mem.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..79932ef --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + + + + photo_mem v1.0.0 + + + + + +
+

photo_mem v1.0.0

+
+
+ + + + +
+ +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/photo_mem.html b/photo_mem.html deleted file mode 100644 index 0d31102..0000000 --- a/photo_mem.html +++ /dev/null @@ -1,419 +0,0 @@ - - - - - - - - - - - - - -
- -
- - - - - - - - - diff --git a/script.js b/script.js new file mode 100644 index 0000000..636c9ec --- /dev/null +++ b/script.js @@ -0,0 +1,373 @@ +// Make sure that photo_mem titles displays right version +let version = '1.6.1'; +version_spans = document.getElementsByClassName('version'); +title = document.getElementsByTagName('title')[0]; +title.innerHTML = title.innerHTML.replace('1.0.0', version) +for (span of version_spans) { + span.innerHTML = version +} + + +// Photo_mem script: + +var personnes = [], + nom = [], + nomjf = [], + prenom = [], + posx = [], + posy = [], + etx = [], + ety = [], + can_etiq = []; +var ibac = 0, + tit = {}, + titre = ""; +var image = document.getElementById('ima_fond'); +var cercle = document.getElementById("cirsvg"); +var menu = document.getElementById("menu_modif"); +var cant = document.createElement("canvas"); +document.body.appendChild(cant); + +function lecfic(fichier) { + i_xml = 0; + if (fichier.length == 2) { + for (var i = 0; i < fichier.length; i++) { + var ext = fichier[i].name.split('.').pop(); + if (ext == "xml") { + i_xml = i + }; + }; + } else { + alert("Choisissez deux fichiers : un .xml et un fichier image"); + return; + } + i_img = ((i_xml - 1) < 0 ? 1 : 0); + var 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" + + var reader = new FileReader(); + reader.onload = function(evt) { + lecture(evt.target.result); + }; + reader.readAsText(fichier_xml); + + function lecture(text) { + var parser = new DOMParser(); + data_xml = parser.parseFromString(text, "text/xml"); + affiche_fond(); + lecture_xml(); + }; +} + +function lecture_xml() { + personnes = data_xml.documentElement.getElementsByTagName("personne"); + tit = data_xml.documentElement.getElementsByTagName("titre")[0]; + titre = tit.textContent + nb_pers = personnes.length + for (var i = 0; i < nb_pers; i++) { + nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent; + if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) { + nomjf[i] = personnes[i].getElementsByTagName("nom_jeune_fille")[0].textContent + }; + prenom[i] = personnes[i].getElementsByTagName("prenom")[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); + } + if (titre !== '') { + affiche_titre() + } else { + affiche_etiquette() + }; +}; +// Chargement et dessin de l'image background +function affiche_fond() { + var read_fond = new FileReader(); + read_fond.addEventListener("load", function(evt) { + image.src = evt.target.result; + }, false); + read_fond.readAsDataURL(fond); +} + +function affiche_titre() { + cant.className = "tit"; + cant.height = 23; + var taille = titre.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'; + titre_ctx.fillText(titre, 20, 18); + + affiche_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; + document.body.appendChild(canv); + can_etiq[i] = document.getElementById(canv.id); + can_etiq[i].className = "etiq"; + can_etiq[i].height = 30; + 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].length > 1) { + can_etiq[i].height = 45 + }; + etiq_ctx.font = '13px Arial'; + etiq_ctx.fillStyle = 'chocolate'; + 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) + }; + }; + gestion_souris(); // enregistre la position de l'étiquette +}; + +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); + }); + } + 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); + }); + }; + 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 +}; + +function deplace_etiquette(e) { + e.target.style.top = e.pageY - 15 + "px"; + e.target.style.left = e.pageX - 30 + "px"; +}; + +function menu_modif() { + menu.style.left = parseFloat(cercle.getAttribute("cx")) + 10 + "px"; + menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "px"; + menu.style.visibility = "visible"; +} + +function supprimer_personne() { + misajour_xml(); + x = data_xml.getElementsByTagName("personne")[ibac]; + x.parentNode.removeChild(x); + for (var i = 0; i < nb_pers; i++) { + x = can_etiq[i]; + x.parentNode.removeChild(x); + }; + cercle.style.visibility = "hidden"; + lecture_xml(); +} + +function position_souris(canvas, evt) { + var rect = canvas.getBoundingClientRect(); + return { + x: evt.clientX - rect.left, + y: evt.clientY - rect.top + }; +}; + +function tracer_cercle(e) { + document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight); + document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth); + var pos_x = position_souris(ima_fond, e).x; + var pos_y = position_souris(ima_fond, e).y; + for (var i = 0; i < nb_pers; i++) { + var dx = posx[i] - pos_x; + var dy = posy[i] - pos_y; + var dist2 = dx * dx + dy * dy; + var rayon2 = rayon * rayon; + + if (dist2 < rayon2) { + ibac = i + bac = can_etiq[i].style.backgroundColor; + can_etiq[i].style.background = "palegreen" + cercle.setAttribute("cx", posx[i]); + 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"; + can_etiq[ibac].style.backgroundColor = "oldlace"; +}; + + +function afficher_formulaire(e) { + 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; + document.getElementById('ajout').style.top = souris_y + 40 + "px"; + document.getElementById('ajout').style.left = souris_x - 80 + "px"; + setTimeout(function() { + document.getElementById("nom").focus(); + }, 10); + document.getElementById('ajout').className = 'visible'; +}; + +function ajouter_personne_xml() { + // création d'un nouvel élément dans data_xml + var nomform = document.getElementById("nom").value + var nomjfform = document.getElementById("nom_jeune_fille").value + var prenomform = document.getElementById("prenom").value + var surnomform = "" + var anneeform = document.getElementById("annee").value + var noteform = document.getElementById("note").value + document.getElementById('ajout').className = 'invisible'; + console.log(nomform + " " + prenomform + " " + anneeform) + var personne_ = data_xml.createElement("personne"); + var nom_ = data_xml.createElement("nom"); + nom_.appendChild(data_xml.createTextNode(nomform)); + var nom_jf_ = data_xml.createElement("nom_jeune_fille"); + nom_jf_.appendChild(data_xml.createTextNode(nomjfform)); + var prenom_ = data_xml.createElement("prenom"); + prenom_.appendChild(data_xml.createTextNode(prenomform)); + var surnom_ = data_xml.createElement("surnom"); + surnom_.appendChild(data_xml.createTextNode(surnomform)); + var annee_ = data_xml.createElement("annee_naiss"); + annee_.appendChild(data_xml.createTextNode(anneeform)); + var note_ = data_xml.createElement("note"); + note_.appendChild(data_xml.createTextNode(noteform)); + var position_ = data_xml.createElement("position"); + position_.setAttribute("posx", souris_x); + position_.setAttribute("posy", souris_y); + position_.setAttribute("etx", souris_x - 30); + position_.setAttribute("ety", souris_y + 60); + personne_.appendChild(nom_); + personne_.appendChild(nom_jf_); + personne_.appendChild(prenom_); + personne_.appendChild(surnom_); + personne_.appendChild(annee_); + personne_.appendChild(note_); + personne_.appendChild(position_); + data_xml.getElementsByTagName("photo")[0].appendChild(personne_) + lecture_xml(); +}; + +function misajour_xml() { + tit.setAttribute("titx", cant.style.left); + tit.setAttribute("tity", cant.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(); +}; + + +function enregistrer_fichier(fichier) { + misajour_xml() + var texte_xml = (new XMLSerializer()).serializeToString(data_xml) + var reg = /(>)\s*(<)(\/*)/g; + // règle pour enlever id="etiqnn" dans les versions précédentes du fichier xml + var rex = //g; + texte_xml = texte_xml.replace(rex, ''); + texte_xml = texte_xml.replace(/\r|\n/g, ''); + texte_xml = texte_xml.replace(reg, '$1\r\n$2$3'); + var blob = new Blob([texte_xml], { + type: "text/plain;charset=utf-8" + }); + if (navigator.msSaveBlob) { + navigator.msSaveBlob(blob, fichier); + } else { + var a = document.createElement('a'); + if (a.download === ''); + a.setAttribute('download', fichier); + a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml)); + a.style.display = 'none'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } +} + +function image_finale() { + misajour_xml() + var decalx = 5; + var decaly = 29; + var can_imf = document.createElement("canvas"); + document.body.appendChild(can_imf); + imf_ctx = can_imf.getContext("2d"); + can_imf.width = ima_fond.width; + can_imf.height = ima_fond.height; + imf_ctx.drawImage(ima_fond, 0, 0) + if (titre !== '') { + 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) + }; + 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].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) + } + var a = document.createElement('a'); + if (a.download === ''); + 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); + a.click(); + document.body.removeChild(a); + document.body.removeChild(can_imf); + + function roundedRect(ctx, x, y, width, height, radius, couleur_fond, couleur_trait) { + ctx.beginPath(); + ctx.strokeStyle = couleur_trait; + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.quadraticCurveTo(x, y + height, x + radius, y + height); + ctx.lineTo(x + width - radius, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); + ctx.lineTo(x + width, y + radius); + ctx.quadraticCurveTo(x + width, y, x + width - radius, y); + ctx.lineTo(x + radius, y); + ctx.quadraticCurveTo(x, y, x, y + radius); + ctx.closePath(); + ctx.fillStyle = couleur_fond; + ctx.fill(); + ctx.stroke(); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..19c0ef7 --- /dev/null +++ b/style.css @@ -0,0 +1,66 @@ +circle { + fill: transparent; + stroke: black; + stroke-width: 2; +} + +#ajout { + border: 2px solid red; + border-radius: 10px; + top: 100px; + left: 200px; + padding-top: 0.5em; + padding-bottom: 0.5em; + padding-left: 1em; + background-color: Azure; + width: 230px; +} + +#ajout input:focus { + border: solid 2px green; +} + +.cotecote { + display: inline; +} + +.visible { + visibility: visible; +} + +.invisible { + visibility: hidden; +} + +.etiq { + background-color: oldlace; + border: 1px solid blue; + border-radius: 10px; + position: absolute; + font-family: Arial; + font-size: 13px; + left: -200px; + top: 100px; +} + +.tit { + background-color: LightYellow; + border: 2px solid Yellow; + border-radius: 5px; + position: absolute; + left: -200px; + top: 100px; +} + +#menu_modif { + display: block; + color: black; + background-color: gainsboro; + cursor: pointer; + border: 2px solid; + border-radius: 6px; + text-align: center; + position: absolute; + width: 80px; + z-index: 10; +} \ No newline at end of file