alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-10 05:34:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implementation of photo taking feature

Browse Source
This commit is contained in:
Henry Feng 2022-11-30 15:59:43 -08:00
parent 20cdc4ce76
commit 0d17ddee53
4 changed files with 144 additions and 43 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>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
<option value="photo">Take a Photo</option>
</select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</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>
<legend>MEAL NAME:</legend>
<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>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
<option value="photo">Take a Photo</option>
</select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</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>
<legend>MEAL NAME:</legend>
<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
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:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`;
// 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:
<input type="text" id="mealImg" name="mealImg">
`;
// 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 = "";
}
});
});
}

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

@ -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:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`;
// 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:
<input type="text" id="mealImg" name="mealImg">
`;
// 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;
}
}