diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4c8aa1e..2260748 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
-{
-   "liveServer.settings.port": 5500
+{
+   "liveServer.settings.port": 5500
 }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 010f2f0..63942fa 100644
--- a/css/style.css
+++ b/css/style.css
@@ -257,3 +257,19 @@ footer{
   font-size: 18px;
   text-align: center;
 }
+
+.buttons-container2{
+  float: left; 
+  width:20%;
+}
+
+.frequency-control label {
+  margin-right: 10px;
+}
+.frequency-control input[type="number"] {
+  width: 50px;
+  text-align: center;
+}
+.frequency-control button {
+  margin: 0 5px;
+}
diff --git a/html/projet_detail.html b/html/projet_detail.html
index 75ec867..b0b01cd 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -1,168 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Détails</title>
-    <link rel="stylesheet" href="../css/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
-      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-      crossorigin="anonymous"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <!-- Select2 CSS -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="customAlert" class="modal">
-      <div class="modal-content">
-          <p id="alertMessage">This is a custom alert!</p>
-          <div class="modal-buttons">
-              <button class="btn btn-danger"id="cancelBtn">Cancel</button>
-              <button class="btn btn-primary"id="okBtn">OK</button>
-          </div>
-      </div>
-  </div>
-    <!-- formulaire -->
-    <div id="form-container" class="form-container" style="display: none">
-      <div class="form-content">
-        <button id="close-form-button" class="close-button">&times;</button>
-        <h1>Formulaire</h1>
-        <div id="my-form">
-          <label for="name">Nom :</label>
-          <input type="text" id="name" name="name" required />
-          <br /><br />
-          <label for="resolution">Résolution :</label>
-          <select id="resolution" name="resolution" required>
-            <option value="1920x1080">1920x1080</option>
-            <option value="1280x720">1280x720</option>
-          </select>
-          <br /><br />
-          <label for="duration">Durée (en secondes) :</label>
-          <div class="duration-input">
-            <button type="button" id="decrement-button">-</button>
-            <input
-              type="number"
-              id="duration"
-              name="duration"
-              value="0"
-              min="0"
-              required
-            />
-            <button type="button" id="increment-button">+</button>
-          </div>
-          <label for="choice">Options :</label>
-          <select id="choice" name="choice">
-            <option value="firstLast">première et dernière image</option>
-            <option value="oneByOne">
-              sélectionner les images une par une
-            </option>
-          </select>
-          <br /><br />
-          <div id="first-last-container" style="display: block">
-            <label for="first">First:</label>
-            <input type="number" id="first" name="first" value="1" min="1" />
-            <br /><br />
-            <label for="last">Last:</label>
-            <input type="number" id="last" name="last" />
-            <br /><br />
-            <label for="fraction">Fraction:</label>
-            <div class="fraction-input">
-              <span>1/</span>
-              <input
-                type="number"
-                id="denominator"
-                name="denominator"
-                value="1"
-                min="1"
-              />
-            </div>
-          </div>
-          <div id="one-by-one-container" style="display: none">
-            <div id="number-board"></div>
-          </div>
-          <br /><br />
-          <div id="result-container"></div>
-          <br /><br />
-          <button class="btn btn-primary" id="submit">Soumettre</button>
-        </div>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Détails</title>
+  <link rel="stylesheet" href="../css/style.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+  <!-- Select2 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
+</head>
+
+<body>
+  <div id="customAlert" class="modal">
+    <div class="modal-content">
+      <p id="alertMessage">This is a custom alert!</p>
+      <div class="modal-buttons">
+        <button class="btn btn-danger" id="cancelBtn">Cancel</button>
+        <button class="btn btn-primary" id="okBtn">OK</button>
       </div>
     </div>
-    <!-- page classique -->
-    <div id="section" class="container mt-5">
-      <div class="row">
-        <div class="col-md-12">
-          <div class="buttons-container" style="float: left; width: 10%">
-            <button class="btn btn-primary" id="projets">
-              <span> Home </span>
+  </div>
+  <!-- formulaire nouveau projet -->
+  <div id="form-container-project" class="form-container" style="display: none">
+    <div class="form-content">
+      <button id="close-form-button-project" class="close-button">&times;</button>
+      <h1>Formulaire</h1>
+      <div id="my-form">
+        <label for="name">Nom :</label>
+        <input type="text" id="name" name="name" required />
+        <br /><br />
+        <label for="resolution">Résolution :</label>
+        <select id="resolution" name="resolution" required>
+          <option value="1920x1080">1920x1080</option>
+          <option value="1280x720">1280x720</option>
+        </select>
+        <br /><br />
+        <label for="duration">Durée (en secondes) :</label>
+        <div class="duration-input">
+          <button type="button" id="decrement-button">-</button>
+          <input type="number" id="duration" name="duration" value="0" min="0" required />
+          <button type="button" id="increment-button">+</button>
+        </div>
+        <label for="choice">Options :</label>
+        <select id="choice" name="choice">
+          <option value="firstLast">première et dernière image</option>
+          <option value="oneByOne">
+            sélectionner les images une par une
+          </option>
+        </select>
+        <br /><br />
+        <div id="first-last-container" style="display: block">
+          <label for="first">First:</label>
+          <input type="number" id="first" name="first" value="1" min="1" />
+          <br /><br />
+          <label for="last">Last:</label>
+          <input type="number" id="last" name="last" />
+          <br /><br />
+          <label for="fraction">Fraction:</label>
+          <div class="fraction-input">
+            <span>1/</span>
+            <input type="number" id="denominator" name="denominator" value="1" min="1" />
+          </div>
+        </div>
+        <div id="one-by-one-container" style="display: none">
+          <div id="number-board"></div>
+        </div>
+        <br /><br />
+        <div id="result-container"></div>
+        <br /><br />
+        <button class="btn btn-primary" id="submit">Soumettre</button>
+      </div>
+    </div>
+  </div>
+  <!-- Formulaire configuration de la caméra -->
+  <div id="form-container-camera" class="form-container" style="display: none">
+    <div class="form-content">
+      <button id="close-form-button-camera" class="close-button">&times;</button>
+      <h1>Formulaire</h1>
+      <div class="frequency-control">
+        <label for="days">Days:</label>
+        <button type="button" onclick="decrement('days')">-</button>
+        <input type="number" id="days" name="days" value="0" min="0" oninput="updateFrequencyText()">
+        <button type="button" onclick="increment('days')">+</button>
+      </div>
+      <div class="frequency-control">
+        <label for="hours">Hours:</label>
+        <button type="button" onclick="decrement('hours')">-</button>
+        <input type="number" id="hours" name="hours" value="0" min="0" oninput="updateFrequencyText()">
+        <button type="button" onclick="increment('hours')">+</button>
+      </div>
+      <div class="frequency-control">
+        <label for="minutes">Minutes:</label>
+        <button type="button" onclick="decrement('minutes')">-</button>
+        <input type="number" id="minutes" name="minutes" value="0" min="0" oninput="updateFrequencyText()">
+        <button type="button" onclick="increment('minutes')">+</button>
+      </div>
+      <div class="frequency-control">
+        <label for="seconds">Seconds:</label>
+        <button type="button" onclick="decrement('seconds')">-</button>
+        <input type="number" id="seconds" name="seconds" value="0" min="0" oninput="updateFrequencyText()">
+        <button type="button" onclick="increment('seconds')">+</button>
+      </div>
+      <span id="frequency-text">une image sera prise toutes les 0 jours 0 heures 0 minutes 0 secondes</span>
+  <br>
+      <button id="commencer" class="btn btn-primary">Lancer</button>
+    </div>
+  </div>
+  <!-- page classique -->
+  <div id="section" class="container mt-5">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="buttons-container" style="float: left; width: 10%">
+          <button class="btn btn-primary" id="projets">
+            <span> Menu Principal</span>
+          </button>
+        </div>
+        <div class="buttons-container buttons-container2 " id="delete-placeholder">
+        </div>
+        <div class="buttons-container buttons-container2" id="start-timelapse"></div>
+        <h3 id="name_project" class="text-black" style="float: right; width: 50%"></h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <div id="addVideoHandler">
+          <select name="videos" id="video_selector" class="select2"></select>
+          <div class="buttons-container">
+            <button class="btn btn-primary" id="show-form-button-camera">
+              <span> + </span>
             </button>
           </div>
-          <div class="buttons-container" id="delete-placeholder" style="float: left; width: 20%">
-          </div>
-          <h3
-            id="name_project"
-            class="text-black"
-            style="float: right; width: 50%"
-          ></h3>
         </div>
+        <div id="metric_viewer_placeholder">
+          <canvas id="metric_viewer"></canvas>
+        </div>
+        <div id="video-container"><span>Pas de vidéos pour le projet par défaut</span></div>
       </div>
-      <div class="row">
-        <div class="col-md-6">
-          <div id="addVideoHandler">
-            <select name="videos" id="video_selector" class="select2"></select>
-            <div class="buttons-container">
-              <button class="btn btn-primary" id="show-form-button">
-                <span> + </span>
-              </button>
-            </div>
-          </div>
-          <div id="metric_viewer_placeholder">
-            <canvas id="metric_viewer"></canvas>
-          </div>
-          <div id="video-container"><span>Pas de vidéos pour le projet par défaut</span></div>
-        </div>
-        <div class="col-md-6">
-          <div id="content1" class="hiddenTable">
-            <table
-              class="table table-striped scrollable sticky-header .thead-dark"
-              id="table-image"
-            >
-              <thead>
-                <tr>
-                  <th colspan="3">
-                    <button class="btn btn-primary" id="toggle-view">
-                      See all images
-                    </button>
-                    <button class="btn btn-primary">export images</button>
-                  </th>
-                </tr>
-              </thead>
-              <tbody id="imageSource"></tbody>
-            </table>
-          </div>
+      <div class="col-md-6">
+        <div id="content1" class="hiddenTable">
+          <table class="table table-striped scrollable sticky-header .thead-dark" id="table-image">
+            <thead>
+              <tr>
+                <th colspan="3">
+                  <button class="btn btn-primary" id="toggle-view">
+                    See all images
+                  </button>
+                  <button class="btn btn-primary">export images</button>
+                </th>
+              </tr>
+            </thead>
+            <tbody id="imageSource"></tbody>
+          </table>
         </div>
       </div>
     </div>
+  </div>
 
-    <footer>
-      <p>&copy; 2025 Timelapse. All rights reserved.</p>
-    </footer>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <!-- Select2 JS -->
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
-    <script src="../js/utilities/constVariables.js"></script>
-    <script src="../js/utilities/populate.js"></script>
-    <script src="../js/utilities/routes.js"></script>
-    <script src="../js/utilities/tools.js"></script>
-    <script src="../js/projet_detail.js"></script>
-  </body>
-</html>
+  <footer>
+    <p>&copy; 2025 Timelapse. All rights reserved.</p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <!-- Select2 JS -->
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
+  <script src="../js/utilities/constVariables.js"></script>
+  <script src="../js/utilities/populate.js"></script>
+  <script src="../js/utilities/routes.js"></script>
+  <script src="../js/utilities/tools.js"></script>
+  <script src="../js/projet_detail.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/projet_detail.js b/js/projet_detail.js
index ff4cb3a..03d2c2c 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -17,37 +17,45 @@ document.addEventListener("DOMContentLoaded", async () => {
   const oneByOneContainer = document.getElementById('one-by-one-container');
   const firstLastContainer = document.getElementById('first-last-container');
   const addNumberButton = document.getElementById('add-number-button');
-  const formContainer = document.getElementById('form-container');
+  const formContainerProject = document.getElementById('form-container-project');
+  const formContainerCamera = document.getElementById('form-container-camera');
   const durationInput = document.getElementById('duration');
   const tableImage = document.getElementById("content1");
   const numberBoard = document.getElementById('number-board');
   // Add event listeners for the "Début" and "Fin" input fields
   const firstInput = document.getElementById('first');
   const lastInput = document.getElementById('last');
+  const start_timelapse = document.getElementById('start-timelapse')
 
-  
   let selectedNumbers = [];
 
+  populateTimelapseLogic(start_timelapse, projectId).then( () => {
+    document.getElementById('show-form-button-camera').addEventListener('click', showFormCamera)
+    document.getElementById('close-form-button-camera').addEventListener('click', hideFormCamera)
+  }
+  )
+
   choiceSelect.addEventListener('change', toggleContainers);
 
   if (addNumberButton) {
     addNumberButton.addEventListener('click', addSelectedNumber);
   }
   videoSelector.addEventListener("change", () => generateViewMetric(projectId));
-  document.getElementById('show-form-button').addEventListener('click', showForm);
-  document.getElementById('close-form-button').addEventListener('click', hideForm);
+  document.getElementById('show-form-button-camera').addEventListener('click', showFormProject);
+  document.getElementById('close-form-button-project').addEventListener('click', hideFormProject);
+  
   document.getElementById('increment-button').addEventListener('click', incrementDuration);
   document.getElementById('decrement-button').addEventListener('click', decrementDuration);
   document.getElementById('submit').addEventListener('click', handleFormSubmit);
   document.getElementById("projets").addEventListener("click", navigateToProjects);
   document.getElementById("toggle-view").addEventListener("click", toggleView);
 
-
   firstInput.addEventListener('input', updateRange);
   lastInput.addEventListener('input', updateRange);
 
   generateViewMetric(projectId);
   PopulateSelect(videoSelector, projectId);
+  
 
   function toggleContainers() {
     if (choiceSelect.value === 'oneByOne') {
@@ -91,12 +99,19 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   }
 
-  function showForm() {
-    formContainer.style.display = 'flex';
+  function showFormCamera() {
+    formContainerCamera.style.display = 'flex';
   }
 
-  function hideForm() {
-    formContainer.style.display = 'none';
+  function hideFormCamera() {
+    formContainerCamera.style.display = 'none';
+  }
+  function showFormProject() {
+    formContainerProject.style.display = 'flex';
+  }
+
+  function hideFormProject() {
+    formContainerProject.style.display = 'none';
   }
   function incrementDuration() {
     durationInput.value = parseInt(durationInput.value) + 1;
@@ -131,7 +146,13 @@ document.addEventListener("DOMContentLoaded", async () => {
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
           '\nRésolution : ' + videoResolution +
           '\nDurée : ' + videoDuration + ' secondes');
+      }).then(()=>{
+        getDataProjectVideosFromApi(projectId).then((data)=>{
+          console.log(data)
+          renderVideo(idVideo)
+        })
       })
+    
   }
 
   function navigateToProjects() {
@@ -227,7 +248,7 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
-  
+
   measurements = await getDataMetrics(projectId);
   let samples;
   if(videoId!=-1){
@@ -317,4 +338,96 @@ function showConfirmationAlert(videoId) {
   cancelBtn.onclick = function() {
     customAlert.style.display = 'none';
   };
-}
\ No newline at end of file
+}
+
+function convertStringToArray(string) {
+  const numberStrings = string.replace(/[{}]/g, '').split(',');
+
+  // Trim whitespace and convert the string numbers to integers
+  const numberArray = numberStrings.map(num => parseInt(num.trim(), 10));
+
+  return numberArray;
+}
+
+function filterAndSortMeasurementsByIds(measurements, ids) {
+  return measurements
+    .filter((measurement) => ids.includes(measurement.id))
+    .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+}
+function filterAndSortMeasurementsByNumber(measurements, Numbers) {
+  // Filter measurements based on their position in the Numbers array
+  const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined);
+
+  // Sort the filtered measurements by their timestamp
+  return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+}
+
+function checkVideoPath(videos, name) {
+  let res = true;
+  videos.forEach(video => {
+      const videoName = video.name;
+      if(videoName==name)
+        res=false;
+  });
+  return res;
+}
+
+function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
+  if (choice === 'oneByOne') {
+    const highlightedButtons = document.querySelectorAll('.number-button.highlight');
+    return Array.from(highlightedButtons).map(button => parseInt(button.textContent));
+  } else {
+    const first = parseInt(firstInput.value);
+    const last = parseInt(lastInput.value);
+    const denominator = parseInt(document.getElementById('denominator').value);
+
+    const measurementIds = new Set();
+    measurementIds.add(first); // Always include the first image
+    // Iterate through the range, adding the step size
+    for (let i = first + denominator; i <= last; i += denominator) {
+      measurementIds.add(i);
+    }
+
+    measurementIds.add(last); // Always include the last image
+
+    // Convert the Set back to an array and sort it
+    return Array.from(measurementIds).sort((a, b) => a - b);
+  }
+}
+
+async function populateTimelapseLogic(placeholder,id) {
+  const data = await getSingleProject(id);
+  if(data.status == 0){
+    placeholder.innerHTML = `<button class="btn btn-primary" id="show-form-button-camera">
+              <span> Configurer la caméra </span>
+            </button>`
+  } else {
+    placeholder.innerHTML = ``
+  }
+}
+
+function increment(id) {
+  const input = document.getElementById(id);
+  input.value = parseInt(input.value) + 1;
+  updateFrequencyText()
+}
+
+function decrement(id) {
+  const input = document.getElementById(id);
+  if (parseInt(input.value) > 0) {
+      input.value = parseInt(input.value) - 1;
+  }
+  updateFrequencyText()
+}
+
+function updateFrequencyText() {
+  const days = document.getElementById('days').value;
+  const hours = document.getElementById('hours').value;
+  const minutes = document.getElementById('minutes').value;
+  const seconds = document.getElementById('seconds').value;
+
+  const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes ${seconds} secondes`;
+  document.getElementById('frequency-text').innerHTML = frequencyText;
+}
+
+
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index b4782d3..f9550a4 100644
--- a/js/utilities/routes.js
+++ b/js/utilities/routes.js
@@ -29,6 +29,16 @@ function getAllProject() {
   });
 }
 
+function getSingleProject(id) {
+  return $.ajax({
+    url: api_url.concat("/projects/"+id),
+    method: "GET",
+    dataType: "json"
+  }).then((data) => {
+    return data;
+  });
+}
+
 function getDataMetrics(projectId){
   return $.ajax({
     url: api_url.concat(`/projects/${projectId}/measurements`),
@@ -146,4 +156,24 @@ async function deleteVideo(id){
     console.error("Error deleting video, video id :"+ id+"\n error :"+error);
     throw error;
   }
+}
+
+async function renderVideo(id){
+  try {
+    const mydata = JSON.stringify({
+      info:"none"
+    });
+    const response = await $.ajax({
+      url: api_url.concat(`/videos/render/`+id),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    console.log("Video rendered successfully:", response);
+  } catch (error) {
+    console.error("Error rendering video:", error);
+    throw error;
+  }
 }
\ No newline at end of file
diff --git a/js/utilities/tools.js b/js/utilities/tools.js
index 16e1658..3a6d2f4 100644
--- a/js/utilities/tools.js
+++ b/js/utilities/tools.js
@@ -53,4 +53,4 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
     // Convert the Set back to an array and sort it
     return Array.from(measurementIds).sort((a, b) => a - b);
   }
-}
+}
\ No newline at end of file
