alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-09-20 00:37:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #103 from cse110-fa22-group29/49-image-feature

Browse Source 
Adding implementation of the photo taking feature to sprint-3
This commit is contained in:
dusk-moon 2022-12-01 19:56:02 -08:00 committed by GitHub
commit ac9b101b47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 143 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
source/CreatePage.html
View File

@ -39,13 +39,17 @@
<legend>PICTURE:</legend> <legend>PICTURE:</legend>
<select id="select" name="select"> <select id="select" name="select">
<option value="file">File Upload</option> <option value="file">File Upload</option>
<option value="url">From an URL</option> <option value="photo">Take a Photo</option>
</select> </select>
<label for="mealImage" id="source"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset> </fieldset>
<fieldset>
<video id="player" width="320" height="240" autoplay hidden></video>
<canvas id="photoCanvas" width="320" height="240" hidden></canvas>
<button type="button" id="photoButton" hidden>Take Photo</button>
</fieldset>
<fieldset> <fieldset>
<legend>MEAL NAME:</legend> <legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label> <label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>

12
source/ReviewDetails.html
View File

@ -70,13 +70,17 @@
<legend>PICTURE:</legend> <legend>PICTURE:</legend>
<select id="select" name="select"> <select id="select" name="select">
<option value="file">File Upload</option> <option value="file">File Upload</option>
<option value="url">From an URL</option> <option value="photo">Take a Photo</option>
</select> </select>
<label for="mealImage" id="source"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset> </fieldset>
<fieldset>
<video id="player" width="320" height="240" autoplay hidden></video>
<canvas id="photoCanvas" width="320" height="240" hidden></canvas>
<button type="button" id="photoButton" hidden>Take Photo</button>
</fieldset>
<fieldset> <fieldset>
<legend>MEAL NAME:</legend> <legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label> <label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>

81
source/assets/scripts/CreatePage.js
View File

@ -17,31 +17,76 @@ function initFormHandler() {
// Accesses form components // Accesses form components
let tagContainer = document.getElementById("tag-container-form"); let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("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 // Select a photo with HTML file selector
if (select.value == "file") { if (select.value == "file") {
input.innerHTML = ` // enabling file upload components and hiding photo taking components
Source: input.removeAttribute("hidden", "");
<input type="file" accept="image/*" id="mealImg" name="mealImg"> 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 { else {
input.innerHTML = ` // enabling photo taking components and hiding file upload components
Source: videoMode = true;
<input type="text" id="mealImg" name="mealImg"> 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 // Addresses sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() { document.getElementById("mealImg").addEventListener("change", function() {
const reader = new FileReader(); const reader = new FileReader();
@ -53,7 +98,7 @@ function initFormHandler() {
// Convert image file into data URL for local storage // Convert image file into data URL for local storage
reader.readAsDataURL(document.getElementById("mealImg").files[0]); reader.readAsDataURL(document.getElementById("mealImg").files[0]);
}); });
form.addEventListener("submit", function(e){ form.addEventListener("submit", function(e){
// Create reviewObject and put in storage // Create reviewObject and put in storage
@ -68,7 +113,7 @@ function initFormHandler() {
if (`${key}` !== "tag-form") { if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`; reviewObject[`${key}`] = `${value}`;
} }
if (`${key}` === "mealImg" && select.value == "file") { if (`${key}` === "mealImg" && imgDataURL !== "") {
reviewObject["mealImg"] = imgDataURL; reviewObject["mealImg"] = imgDataURL;
} }
} }
@ -126,6 +171,6 @@ function initFormHandler() {
} }
tagField.value = ""; tagField.value = "";
} }
}); });
} }

78
source/assets/scripts/ReviewDetails.js
View File

@ -117,32 +117,80 @@ function setupUpdate(){
tagContainer.append(newTag); 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 * depending on user's selection
*/ */
let select = document.getElementById("select"); let select = document.getElementById("select");
const input = document.getElementById("mealImg");
select.addEventListener("change", function() { select.addEventListener("change", function() {
const input = document.getElementById("source"); console.log("1");
// Select a photo with HTML file selector
if (select.value == "file") { if (select.value == "file") {
input.innerHTML = ` // enabling file upload components and hiding photo taking components
Source: input.removeAttribute("hidden", "");
<input type="file" accept="image/*" id="mealImg" name="mealImg"> 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 { else {
input.innerHTML = ` // enabling photo taking components and hiding file upload components
Source: videoMode = true;
<input type="text" id="mealImg" name="mealImg"> 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 //addressing sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() { document.getElementById("mealImg").addEventListener("change", function() {
console.log("reading used"); console.log("reading used");
const reader = new FileReader(); const reader = new FileReader();
@ -173,10 +221,10 @@ function setupUpdate(){
newData[`${key}`] = `${value}`; newData[`${key}`] = `${value}`;
} }
// Account for the case where image is not updated // Account for the case where image is not updated
if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") { if (`${key}` === "mealImg" && imgDataURL === "") {
newData["mealImg"] = currReview["mealImg"]; newData["mealImg"] = currReview["mealImg"];
} }
else if (`${key}` === "mealImg" && select.value == "file") { else if (`${key}` === "mealImg") {
newData["mealImg"] = imgDataURL; newData["mealImg"] = imgDataURL;
} }
} }