From 0d17ddee534f9002e2e384ee9ed5e784edc167df Mon Sep 17 00:00:00 2001 From: Henry Feng Date: Wed, 30 Nov 2022 15:59:43 -0800 Subject: [PATCH] Implementation of photo taking feature --- source/CreatePage.html | 14 +++-- source/ReviewDetails.html | 12 ++-- source/assets/scripts/CreatePage.js | 81 ++++++++++++++++++++------ source/assets/scripts/ReviewDetails.js | 80 ++++++++++++++++++++----- 4 files changed, 144 insertions(+), 43 deletions(-) diff --git a/source/CreatePage.html b/source/CreatePage.html index 4c450ca..d4a1192 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -39,13 +39,17 @@ PICTURE: - + - + +
+ + + +
+
MEAL NAME: diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 3340c89..d58bf69 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -70,13 +70,17 @@ PICTURE: - +
+
+ + + +
+
MEAL NAME: diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js index 076463b..526a766 100644 --- a/source/assets/scripts/CreatePage.js +++ b/source/assets/scripts/CreatePage.js @@ -17,31 +17,76 @@ function initFormHandler() { // Accesses form components let tagContainer = document.getElementById("tag-container-form"); let form = document.querySelector("form"); - - // Event listener for reading form data - let select = document.getElementById("select"); - select.addEventListener("change", function() { - const input = document.getElementById("source"); + // Declaring variable storing image data url + let imgDataURL = ""; + + // Accessing components related to taking photo + let videoMode = true; + let player = document.getElementById("player"); + let canvas = document.getElementById("photoCanvas"); + let photoButton = document.getElementById("photoButton"); + let context = canvas.getContext('2d'); + + // Event listener for the photo taking/reset button + photoButton.addEventListener('click', ()=>{ + // capturing the current video frame + if (videoMode) { + videoMode = false; + + // setting up the appropriate components for displaying the photo preview + photoButton.innerText = "Retake"; + player.setAttribute("hidden", ""); + canvas.removeAttribute("hidden", ""); + + // displaying the captured snapshot on a canvas and saving it as a data url + context.drawImage(player, 0, 0, canvas.width, canvas.height); + imgDataURL = canvas.toDataURL(); + } + // returning to displaying the video stream + else { + videoMode = true; + + // setting up the appropriate components for the video stream + photoButton.innerText = "Take Photo"; + canvas.setAttribute("hidden", ""); + player.removeAttribute("hidden", ""); + } + }); + + // Event listener for reading image form different data + let select = document.getElementById("select"); + const input = document.getElementById("mealImg"); + select.addEventListener("change", function() { // Select a photo with HTML file selector if (select.value == "file") { - input.innerHTML = ` - Source: - - `; + // enabling file upload components and hiding photo taking components + input.removeAttribute("hidden", ""); + player.setAttribute("hidden", ""); + canvas.setAttribute("hidden", ""); + photoButton.setAttribute("hidden", ""); + + // stopping the video stream + player.srcObject.getVideoTracks()[0].stop(); } - // Upload text URL input + // Take a photo else { - input.innerHTML = ` - Source: - - `; + // enabling photo taking components and hiding file upload components + videoMode = true; + photoButton.innerText = "Take Photo"; + input.setAttribute("hidden", ""); + player.removeAttribute("hidden", ""); + photoButton.removeAttribute("hidden", ""); + + // getting video stream from user's camera then displaying it on a video element + navigator.mediaDevices.getUserMedia({video: true,}).then((stream)=>{ + player.srcObject = stream; + }); } }); // Addresses sourcing image from local file - let imgDataURL = ""; document.getElementById("mealImg").addEventListener("change", function() { const reader = new FileReader(); @@ -53,7 +98,7 @@ function initFormHandler() { // Convert image file into data URL for local storage reader.readAsDataURL(document.getElementById("mealImg").files[0]); }); - + form.addEventListener("submit", function(e){ // Create reviewObject and put in storage @@ -68,7 +113,7 @@ function initFormHandler() { if (`${key}` !== "tag-form") { reviewObject[`${key}`] = `${value}`; } - if (`${key}` === "mealImg" && select.value == "file") { + if (`${key}` === "mealImg" && imgDataURL !== "") { reviewObject["mealImg"] = imgDataURL; } } @@ -126,6 +171,6 @@ function initFormHandler() { } tagField.value = ""; } - }); + }); } diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 59150c7..5c056c1 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -102,8 +102,8 @@ function setupUpdate(){ while (tagContainer.firstChild) { tagContainer.removeChild(tagContainer.firstChild); } - let tagSetVal = currReview["tags"][i].toLowerCase() for (let i = 0; i < currReview["tags"].length; i++) { + let tagSetVal = currReview["tags"][i].toLowerCase() tagSet.add(tagSetVal); let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); @@ -115,32 +115,80 @@ function setupUpdate(){ tagContainer.append(newTag); } } + + // Declaring variable storing image data url + let imgDataURL = ""; + + // Accessing components related to taking photo + let videoMode = true; + let player = document.getElementById("player"); + let canvas = document.getElementById("photoCanvas"); + let photoButton = document.getElementById("photoButton"); + let context = canvas.getContext('2d'); + + // Event listener for the photo taking/reset button + photoButton.addEventListener('click', ()=>{ + // capturing the current video frame + if (videoMode) { + videoMode = false; + + // setting up the appropriate components for displaying the photo preview + photoButton.innerText = "Retake"; + player.setAttribute("hidden", ""); + canvas.removeAttribute("hidden", ""); + + // displaying the captured snapshot on a canvas and saving it as a data url + context.drawImage(player, 0, 0, canvas.width, canvas.height); + imgDataURL = canvas.toDataURL(); + } + // returning to displaying the video stream + else { + videoMode = true; + + // setting up the appropriate components for the video stream + photoButton.innerText = "Take Photo"; + canvas.setAttribute("hidden", ""); + player.removeAttribute("hidden", ""); + } + }); /* - * change the input source of the image between local file and URL + * change the input source of the image between local file and taking photo * depending on user's selection */ let select = document.getElementById("select"); + const input = document.getElementById("mealImg"); select.addEventListener("change", function() { - const input = document.getElementById("source"); - + console.log("1"); + // Select a photo with HTML file selector if (select.value == "file") { - input.innerHTML = ` - Source: - - `; + // enabling file upload components and hiding photo taking components + input.removeAttribute("hidden", ""); + player.setAttribute("hidden", ""); + canvas.setAttribute("hidden", ""); + photoButton.setAttribute("hidden", ""); + + // stopping the video stream + player.srcObject.getVideoTracks()[0].stop(); } - //TODO: change to photo taking for sprint 3 + + // Take a photo else { - input.innerHTML = ` - Source: - - `; + // enabling photo taking components and hiding file upload components + videoMode = true; + photoButton.innerText = "Take Photo"; + input.setAttribute("hidden", ""); + player.removeAttribute("hidden", ""); + photoButton.removeAttribute("hidden", ""); + + // getting video stream from user's camera then displaying it on a video element + navigator.mediaDevices.getUserMedia({video: true,}).then((stream)=>{ + player.srcObject = stream; + }); } }); //addressing sourcing image from local file - let imgDataURL = ""; document.getElementById("mealImg").addEventListener("change", function() { console.log("reading used"); const reader = new FileReader(); @@ -171,10 +219,10 @@ function setupUpdate(){ newData[`${key}`] = `${value}`; } // Account for the case where image is not updated - if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") { + if (`${key}` === "mealImg" && imgDataURL === "") { newData["mealImg"] = currReview["mealImg"]; } - else if (`${key}` === "mealImg" && select.value == "file") { + else if (`${key}` === "mealImg") { newData["mealImg"] = imgDataURL; } }