groupe1cir1n/groupe1CIR1Njs
1
0
Fork 0
mirror of https://github.com/groupe1cir1n/groupe1CIR1Njs.git synced 2026-01-18 16:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11 from groupe1cir1n/Felix

Browse Source 
Little fix to the ticket effet, rework of the platforme technologique page, finish of the entier js part for this page (hope that the wifi from the TGV will be enought to commit and push)
This commit is contained in:
Félix MARQUET
2023-05-26 18:34:07 +02:00
committed by GitHub
parent 80e22aae54 605ddde51c
commit 33bdec3ec1
7 changed files with 163 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
membres.html
View File

@@ -49,7 +49,7 @@
<div class="BigCard Card Ayoub">
<div class="image-container">
<div class="container" id="js-container">
<canvas class="canvas" id="js-canvas" width="175" height="175"></canvas>
<canvas class="canvas" id="js-canvas" width="160" height="160"></canvas>
</div>
<img src="src/img/card/ayoub.png" alt="Ayoub Karine" class="cardImg">
</div>

65
platoformetecho.html
View File

@@ -5,6 +5,7 @@
<title> Platformes technologiques </title>
<link rel="icon" href="/src/img/icon.png" type="image/x-icon">
<script src="/src/js/navbarAndFooter.js" defer></script>
<script src="/src/js/recherche/platformetechno/platformetechno.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/5b8b37978c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/loader.css">
@@ -43,22 +44,56 @@
<div id="chrono"></div>
<div id="hour"></div>
</nav>
<div class="main_techno">
<div class="img_techno">
<img src="src/img/plateforme_techno/laptop_meeting.jpg" alt="laptop meeting" id="img_techno_item1">
<img src="src/img/plateforme_techno/server_and_wires.jpg" alt="server and wires" id="img_techno_item2">
<div id="main_techno">
<h3>Les travaux de l’équipe débouchent souvent sur une preuve de concept, une réalisation de prototypes ou un déploiement de plateformes technologiques. Ces plateformes sont à la fois un outil interne pour mener des expérimentations et aussi un moyen de communication vers nos partenaires.</h3>
<div class="content_techno Modal_Selector">
<div class="img_techno">
<img src="/src/img/plateforme_techno/laptop_meeting.jpg" alt="laptop meeting">
</div>
<div class="text_techno">
<p class="PlatformeTitle">Chambre connectée (Living Lab)</p>
<p id="LivingLabText">Le living Lab est le fruit de collaboration avec l’entreprise de mutuelle santé Malakoff Médéric. Initialement, ce Living Lab avait pour but de détecter la chute des personnes âgées sans utiliser de capteurs portés (bracelet, médaillon...). Une solution a été proposée en utilisant un capteur de type Kinect permettant de garantir le respect de la vie privée et de connaitre à chaque instant la position de la personne dans le studio. Afin d'étendre les possibilités du studio, un ensemble de capteurs ont été ajoutés : prises connectées, capteurs d'environnements, température, lumière, humidité, gaz...), capteurs de consommation (électricité, eau), Caméras, micro et haut parleurs.Plusieurs scénarios ont été mis en place pour utiliser les données des différents capteurs et envoyer une alarme (sms, mail) en cas de chute ou si la personne reste trop longtemps allongée sur le sol, en cas de détection d'anomalie (pas suffisamment de consommation d'eau en fonction d'une température trop élevée...). Ce démonstrateur permet également de visualiser les données des différents capteurs en temps réel et à distance, en se connectant sur un site web.Les travaux futurs en lien avec cette plateforme à développer de scénarios en conditions "réelles" dans des EPHAD par exemple pour contribuer dans la prise en charge des risques liés aux personnes en situation de dépendance (déshydratation, comportement, chutes...).</p>
</div>
</div>
<div class="modal" id="LivingLab">
<div class="modal-content">
<span class="close">&times;</span>
<div class="content_techno">
<div class="img_techno">
<img src="/src/img/plateforme_techno/laptop_meeting.jpg" alt="laptop meeting">
</div>
<div class="text_techno">
<h2>Chambre connectée (Living Lab)</h2>
<p id="LivingLabTextModal"></p>
</div>
</div>
</div>
</div>
<div class="content_techno Modal_Selector">
<div class="img_techno">
<img src="/src/img/plateforme_techno/server_and_wires.jpg" alt="server and wires">
</div>
<div class="text_techno">
<p class="PlatformeTitle">Environnement hybrides connectés</p>
<p id="EnvironnementHybridesConnectésText">Cette plateforme est en cours de développement et vise à offrir des services à la personne dans des environnements indoor (bureau connecté, école connectée, usine connectée, ...). Parmi les services, nous envisageons l’étude du comportement des personnes, ladétection d’anomalies et la sécurité de l’environnement. Deux enjeux majeurs sont traités : (1) l’application des algorithmes d’intelligence artificielle qui prend tout son sens pour la prédiction d’évènements à risque ; (2) la mise en place de moyens numériques interopérables comme une architecture réseau dédiée et des technologies d’acquisition et de communications standards permettant l’accès aux données et la centralisation/distribution de la prise de décision.Pour cette plateforme nous disposons de moyens de calcul intensif comme le serveur GPU pour faire du FoG computing qui présente une alternative intéressante par rapport au cloud pour des raisons de sécurité de données et de coût.</p>
</div>
</div>
</div>
<div class="modal" id="EnvironnementHybridesConnectés">
<div class="modal-content">
<span class="close">&times;</span>
<div class="content_techno">
<div class="img_techno">
<img src="/src/img/plateforme_techno/server_and_wires.jpg" alt="server and wires">
</div>
<div class="text_techno">
<h2 id="EnvironnementHybridesConnectésTitle">Environnement hybrides connectés</h2>
<p id="EnvironnementHybridesConnectésTextModal">Cette plateforme est en cours de développement et vise à offrir des services à la personne dans des environnements indoor (bureau connecté, école connectée, usine connectée, ...). Parmi les services, nous envisageons l’étude du comportement des personnes, ladétection d’anomalies et la sécurité de l’environnement. Deux enjeux majeurs sont traités : (1) l’application des algorithmes d’intelligence artificielle qui prend tout son sens pour la prédiction d’évènements à risque ; (2) la mise en place de moyens numériques interopérables comme une architecture réseau dédiée et des technologies d’acquisition et de communications standards permettant l’accès aux données et la centralisation/distribution de la prise de décision.Pour cette plateforme nous disposons de moyens de calcul intensif comme le serveur GPU pour faire du FoG computing qui présente une alternative intéressante par rapport au cloud pour des raisons de sécurité de données et de coût.</p>
</div>
</div>
</div>
</div>
</div>
<div class="text_techno">
Les travaux de l’équipe débouchent souvent sur une preuve de concept, une réalisation de prototypes ou un déploiement de plateformes technologiques. Ces plateformes sont à la fois un outil interne pour mener des expérimentations et aussi un moyen de communication vers nos partenaires.
<p><strong>- Chambre connectée (Living Lab)</strong> Le living Lab est le fruit de collaboration avec l’entreprise de mutuelle santé Malakoff Médéric. Initialement, ce Living Lab avait pour but de détecter la chute des personnes âgées sans utiliser de capteurs portés (bracelet, médaillon...). Une solution a été proposée en utilisant un capteur de type Kinect permettant de garantir le respect de la vie privée et de connaitre à chaque instant la position de la personne dans le studio. Afin d'étendre les possibilités du studio, un ensemble de capteurs ont été ajoutés : prises connectées, capteurs d'environnements, température, lumière, humidité, gaz...), capteurs de consommation (électricité, eau), Caméras, micro et haut parleurs.Plusieurs scénarios ont été mis en place pour utiliser les données des différents capteurs et envoyer une alarme (sms, mail) en cas de chute ou si la personne reste trop longtemps allongée sur le sol, en cas de détection d'anomalie (pas suffisamment de consommation d'eau en fonction d'une température trop élevée...). Ce démonstrateur permet également de visualiser les données des différents capteurs en temps réel et à distance, en se connectant sur un site web.Les travaux futurs en lien avec cette plateforme à développer de scénarios en conditions "réelles" dans des EPHAD par exemple pour contribuer dans la prise en charge des risques liés aux personnes en situation de dépendance (déshydratation, comportement, chutes...).</p>
<p><strong>- Environnement hybrides connectés</strong> Cette plateforme est en cours de développement et vise à offrir des services à la personne dans des environnements indoor (bureau connecté, école connectée, usine connectée, ...). Parmi les services, nous envisageons l’étude du comportement des personnes, ladétection d’anomalies et la sécurité de l’environnement. Deux enjeux majeurs sont traités : (1) l’application des algorithmes d’intelligence artificielle qui prend tout son sens pour la prédiction d’évènements à risque ; (2) la mise en place de moyens numériques interopérables comme une architecture réseau dédiée et des technologies d’acquisition et de communications standards permettant l’accès aux données et la centralisation/distribution de la prise de décision.Pour cette plateforme nous disposons de moyens de calcul intensif comme le serveur GPU pour faire du FoG computing qui présente une alternative intéressante par rapport au cloud pour des raisons de sécurité de données et de coût.</p>
</div>
</div>
<footer>
<div class="foot">
<p>

6
src/css/style_membres.css
View File

@@ -143,7 +143,7 @@ h2{
}
.modal-content {
background-color: #fff; /* Modifier la couleur de fond en blanc (#fff) ou une autre couleur de votre choix */
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
@@ -172,7 +172,7 @@ h2{
.image-container canvas {
position: absolute;
top: 10px;
left: 75px;
top: 15px;
left: 80px;
border-radius: 50%;
}

100
src/css/style_techno.css
View File

@@ -7,45 +7,75 @@ img{
height: 100px;
}
.main_techno{
display: flex;
padding-left: 10px;
align-content: center;
justify-content: center;
flex-direction: row;
h2{
color: #2f68bf;
text-decoration: underline;
}
.img_techno{
display: flex;
align-items: center;
flex-direction: column;
margin-top: 35px;
padding-right: 10px;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.text_techno{
display: flex;
flex-direction: column;
margin-top: 20px;
}
#img_techno_item1{
width: 225px;
height: 150px;
h3{
text-align: center;
font-weight: normal;
border-bottom: solid 1px black;
padding-bottom: 10px;
}
#img_techno_item2{
width: 225px;
height: 150px;
#main_techno{
display: flex;
flex-direction: column;
}
@media (max-width: 1200px) {
.main_techno{
flex-direction: column;
flex-wrap: wrap;
}
.content_techno{
padding-top: 10px;
display: flex;
flex-direction: row;
border-bottom: solid 1px black;
}
.img_techno{
padding-left: 1%;
padding-right: 1%;
padding-top: 2%;
}
.PlatformeTitle{
font-weight: bold;
cursor: pointer ;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: auto;
max-width: 75%;
padding-top: 0px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff0000;
text-decoration: none;
cursor: pointer;
}

2
src/js/membres/membres.js
View File

@@ -221,7 +221,7 @@ function addMember() {
newCard.appendChild(CardHover);
//Ajoout du bouton supprimer
//Ajout du bouton supprimer
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Supprimer';
deleteButton.id = 'deleteButton';

43
src/js/recherche/platformetechno/platformetechno.js Normal file
View File

@@ -0,0 +1,43 @@
document.addEventListener('DOMContentLoaded', function() {
const platfTech = document.querySelectorAll('.Modal_Selector');
const modals = document.querySelectorAll('.modal');
const closeBtns = document.querySelectorAll('.close');
function displayModal(event) {
const platfTechIndex = Array.from(platfTech).findIndex((platforme) => platforme === event.currentTarget);
modals[platfTechIndex].style.display = 'block';
//Verification de l'id, si il correspond a LivingLab affiche les 150 premiers élément du text LivingLabText
if(modals[platfTechIndex].id === 'LivingLab'){
document.getElementById("LivingLabTextModal").innerHTML = truncateText("LivingLabText", 150);
}
if(modals[platfTechIndex].id === "EnvironnementHybridesConnectés"){
document.getElementById("EnvironnementHybridesConnectésTextModal").innerHTML = truncateText("EnvironnementHybridesConnectésText", 150);
}
}
function closeModal(event) {
const modal = event.currentTarget.closest('.modal');
modal.style.display = 'none';
}
platfTech.forEach(function (card) {
card.addEventListener('click', displayModal);
});
closeBtns.forEach(function (btn) {
btn.addEventListener('click', closeModal);
});
function truncateText(elementId, maxLength) {
var element = document.getElementById(elementId);
if (element) {
var text = element.textContent.trim();
if (text.length > maxLength) {
return text.substring(0, maxLength) + "...";
} else {
return text;
}
}
return "";
}
});

0
src/js/script.js
View File