From 74ba0fc3e6e43bf1c1b0725e735ad46f10b2b46a Mon Sep 17 00:00:00 2001 From: mmmyr Date: Sun, 19 Nov 2023 23:19:46 -0600 Subject: [PATCH 1/3] change style --- hmns-app/client/assets/images/gallery.jpg | Bin 0 -> 8519 bytes .../client/components/CameraComponent.tsx | 31 +++++++++++------- hmns-app/server/package-lock.json | 23 +++++++++++++ hmns-app/server/package.json | 1 + 4 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 hmns-app/client/assets/images/gallery.jpg diff --git a/hmns-app/client/assets/images/gallery.jpg b/hmns-app/client/assets/images/gallery.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7371f70561e751ed5637afb6797fae28979195fa GIT binary patch literal 8519 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 s&^`$|#W?u~@n*0b?;_YiYgzp {/* You can add additional icons or information at the top */} - + {/* Placeholder for gallery button/icon */} - {photo && ( - - - - )} + + + + + Tips - + + @@ -168,8 +169,9 @@ const styles = StyleSheet.create({ bottomToolbar: { padding: 20, flexDirection: "row", - justifyContent: "space-between", + justifyContent: "center", alignItems: "center", + backgroundColor: "black" }, captureButton: { width: 70, @@ -179,6 +181,9 @@ const styles = StyleSheet.create({ borderRadius: 35, backgroundColor: "white", alignSelf: "center", + marginHorizontal: 20, // Add horizontal margin for spacing + marginLeft: 30, + }, flipButton: { alignSelf: "center", @@ -191,6 +196,7 @@ const styles = StyleSheet.create({ borderRadius: 10, alignSelf: "center", overflow: "hidden", + backgroundColor: "white", }, thumbnail: { width: 50, @@ -201,6 +207,7 @@ const styles = StyleSheet.create({ backgroundColor: "rgba(255, 255, 255, 0.5)", borderRadius: 10, padding: 10, + marginLeft: 20, }, tipsButtonText: { color: "white", @@ -213,7 +220,7 @@ const styles = StyleSheet.create({ }, confirmButtons: { flexDirection: "row", - justifyContent: "space-around", + //justifyContent: "space-around", width: "100%", padding: 20, }, diff --git a/hmns-app/server/package-lock.json b/hmns-app/server/package-lock.json index 414c4a3..9c18e00 100644 --- a/hmns-app/server/package-lock.json +++ b/hmns-app/server/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "apollo-server-express": "^3.12.1", + "config": "^3.3.9", "express": "^4.18.2", "graphql": "^16.8.1", "mongoose": "^7.6.2" @@ -946,6 +947,17 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/config": { + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/config/-/config-3.3.9.tgz", + "integrity": "sha512-G17nfe+cY7kR0wVpc49NCYvNtelm/pPy8czHoFkAgtV1lkmcp7DHtWCdDu+C9Z7gb2WVqa9Tm3uF9aKaPbCfhg==", + "dependencies": { + "json5": "^2.2.3" + }, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -1390,6 +1402,17 @@ "node": ">=0.12.0" } }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/kareem": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz", diff --git a/hmns-app/server/package.json b/hmns-app/server/package.json index c37a5c1..ea73b95 100644 --- a/hmns-app/server/package.json +++ b/hmns-app/server/package.json @@ -20,6 +20,7 @@ }, "dependencies": { "apollo-server-express": "^3.12.1", + "config": "^3.3.9", "express": "^4.18.2", "graphql": "^16.8.1", "mongoose": "^7.6.2" From 943686a2f7884b91eb1a9b9d36467970fc428b0d Mon Sep 17 00:00:00 2001 From: Mana Vale Date: Sat, 20 Jan 2024 15:41:46 -0600 Subject: [PATCH 2/3] changed camera and info buttons + repositioned --- .../client/components/CameraComponent.tsx | 488 +++++++++--------- 1 file changed, 252 insertions(+), 236 deletions(-) diff --git a/hmns-app/client/components/CameraComponent.tsx b/hmns-app/client/components/CameraComponent.tsx index f019723..595bef2 100644 --- a/hmns-app/client/components/CameraComponent.tsx +++ b/hmns-app/client/components/CameraComponent.tsx @@ -1,248 +1,264 @@ import React, { useState, useEffect, useRef } from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"; import { Camera } from "expo-camera"; -// import { Ionicons } from "@expo/vector-icons"; +import FontAwesome from "@expo/vector-icons/FontAwesome"; +import { Pressable, useColorScheme } from "react-native"; +import Colors from "../constants/Colors"; import * as MediaLibrary from "expo-media-library"; import { StatusBar } from "react-native"; + export default function CameraComponent() { - const [hasPermission, setHasPermission] = useState(null); - // // State to manage the type of camera (front or back) - // const [type, setType] = useState(Camera.Constants.Type.back); - // State to store the captured photo - const [photo, setPhoto] = useState(null); - // Reference to the camera component - const cameraRef = useRef(null); - // Function to show photo-taking tips - const showPhotoTips = () => { - alert("Photo-taking Tips:\n1. Keep your hands steady.\n2. Make sure there's enough light.\n3. Focus on the butterfly you want to search up before taking the photo."); - }; - const [confirmVisible, setConfirmVisible] = useState(false); - - // Request camera permissions when the component mounts - useEffect(() => { - (async () => { - // Request camera permission - const cameraStatus = await Camera.requestCameraPermissionsAsync(); - setHasPermission(cameraStatus.status === "granted"); - - // Request media library permission - const mediaLibraryStatus = await MediaLibrary.requestPermissionsAsync(); - if (mediaLibraryStatus.status !== "granted") { - alert("Sorry, we need camera roll permissions to save the image!"); - } - })(); - }, []); - - // // Capture a photo and save it to photo album - // const takePhoto = async () => { - // if (cameraRef.current) { - // const options = { quality: 0.5, base64: true, skipProcessing: true }; - // let newPhoto = await cameraRef.current.takePictureAsync(options); - // setPhoto(newPhoto); - - // // Save the photo to the gallery - // const asset = await MediaLibrary.createAssetAsync(newPhoto.uri); - // await MediaLibrary.createAlbumAsync('HMNS', asset, false); // Replace 'YourAppName' with your app's name or any other desired album name. - // } - // }; - const takePhoto = async () => { - if (cameraRef.current) { - const options = { quality: 0.5, base64: true, skipProcessing: true }; - const newPhoto = await cameraRef.current.takePictureAsync(options); - setPhoto(newPhoto); - setConfirmVisible(true); // Show the confirmation screen - } - }; - - // Retake the photo - const retakePhoto = () => { - setPhoto(null); - setConfirmVisible(false); // Hide the confirmation screen - }; - - // Accept the photo and save it - const acceptPhoto = async () => { - if (photo) { - try { - // Save the photo to the gallery here - const asset = await MediaLibrary.createAssetAsync(photo.uri); - await MediaLibrary.createAlbumAsync("YourAppName", asset, false); - - // Handle any operation after saving the photo, such as navigation or state reset - setConfirmVisible(false); // Hide confirmation screen - setPhoto(null); // Reset photo state - } catch (error) { - // Handle any errors here - console.error("Error saving photo", error); - alert("Error saving photo"); - } - } - }; - - // If confirmation screen should be visible, show the taken photo and options - if (confirmVisible && photo) { - return ( - - - - - Retake - - - Accept - - - - ); - } - - - - // If permissions are still being requested, return an empty view - if (hasPermission === null) { - return ; - } - // If camera access is denied, inform the user - if (hasPermission === false) { - return No access to camera; - } - - // Make sure to hide the status bar to provide a full-screen experience - StatusBar.setHidden(true); - - return ( - - - {/* Overlay the UI components on the camera preview */} - - - {/* You can add additional icons or information at the top */} - - - - {/* Placeholder for gallery button/icon */} - - - - - - - - - Tips - - - - - - - ); + const [hasPermission, setHasPermission] = useState(null); + // State to store the captured photo + const [photo, setPhoto] = useState(null); + // Reference to the camera component + const cameraRef = useRef(null); + // Function to show photo-taking tips + const showPhotoTips = () => { + alert("Photo-taking Tips:\n1. Keep your hands steady.\n2. Make sure there's enough light.\n3. Focus on the butterfly you want to search up before taking the photo."); + }; + const [confirmVisible, setConfirmVisible] = useState(false); + + + // Request camera permissions when the component mounts + useEffect(() => { + (async () => { + // Request camera permission + const cameraStatus = await Camera.requestCameraPermissionsAsync(); + setHasPermission(cameraStatus.status === "granted"); + + + // Request media library permission + const mediaLibraryStatus = await MediaLibrary.requestPermissionsAsync(); + if (mediaLibraryStatus.status !== "granted") { + alert("Sorry, we need camera roll permissions to save the image!"); + } + })(); + }, []); + + + // // Capture a photo and save it to photo album + // const takePhoto = async () => { + // if (cameraRef.current) { + // const options = { quality: 0.5, base64: true, skipProcessing: true }; + // let newPhoto = await cameraRef.current.takePictureAsync(options); + // setPhoto(newPhoto); + + + // // Save the photo to the gallery + // const asset = await MediaLibrary.createAssetAsync(newPhoto.uri); + // await MediaLibrary.createAlbumAsync('HMNS', asset, false); // Replace 'YourAppName' with your app's name or any other desired album name. + // } + // }; + const takePhoto = async () => { + if (cameraRef.current) { + const options = { quality: 0.5, base64: true, skipProcessing: true }; + const newPhoto = await cameraRef.current.takePictureAsync(options); + setPhoto(newPhoto); + setConfirmVisible(true); // Show the confirmation screen + } + }; + + + // Retake the photo + const retakePhoto = () => { + setPhoto(null); + setConfirmVisible(false); // Hide the confirmation screen + }; + + + // Accept the photo and save it + const acceptPhoto = async () => { + if (photo) { + try { + // Save the photo to the gallery here + const asset = await MediaLibrary.createAssetAsync(photo.uri); + await MediaLibrary.createAlbumAsync("YourAppName", asset, false); + + // Handle any operation after saving the photo, such as navigation or state reset + setConfirmVisible(false); // Hide confirmation screen + setPhoto(null); // Reset photo state + } catch (error) { + // Handle any errors here + console.error("Error saving photo", error); + alert("Error saving photo"); + } + } + }; + + + // If confirmation screen should be visible, show the taken photo and options + if (confirmVisible && photo) { + return ( + + + + + Retake + + + Accept + + + + ); + } + + + + + + + // If permissions are still being requested, return an empty view + if (hasPermission === null) { + return ; + } + // If camera access is denied, inform the user + if (hasPermission === false) { + return No access to camera; + } + + + // Make sure to hide the status bar to provide a full-screen experience + StatusBar.setHidden(true); + + + return ( + + + {/* Overlay the UI components on the camera preview */} + + + {/* Info Button */} + + + + + + + {/* Photo Button */} + + + + + + + + + + ); } + const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "black", - }, - camera: { - flex: 1, - justifyContent: "space-between", - }, - uiContainer: { - flex: 1, - backgroundColor: "transparent", - flexDirection: "column", - justifyContent: "space-between", - }, - topToolbar: { - flex: 0.1, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "flex-start", - paddingTop: 20, - paddingHorizontal: 20, - }, - bottomToolbar: { - padding: 20, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - backgroundColor: "black" - }, - captureButton: { - width: 70, - height: 70, - borderWidth: 4, - borderColor: "white", - borderRadius: 35, - backgroundColor: "white", - alignSelf: "center", - marginHorizontal: 20, // Add horizontal margin for spacing - marginLeft: 30, - - }, - flipButton: { - alignSelf: "center", - flex: 0.1, - alignItems: "center", - }, - galleryButton: { - width: 50, - height: 50, - borderRadius: 10, - alignSelf: "center", - overflow: "hidden", - backgroundColor: "white", - }, - thumbnail: { - width: 50, - height: 50, - }, - tipsButton: { - // Style your button as needed - backgroundColor: "rgba(255, 255, 255, 0.5)", - borderRadius: 10, - padding: 10, - marginLeft: 20, - }, - tipsButtonText: { - color: "white", - fontSize: 18, - }, - confirmContainer: { - flex: 1, - justifyContent: "center", - alignItems: "center", - }, - confirmButtons: { - flexDirection: "row", - //justifyContent: "space-around", - width: "100%", - padding: 20, - }, - confirmButton: { - flex: 1, - alignItems: "center", - justifyContent: "center", - marginHorizontal: 10, - paddingVertical: 10, - borderRadius: 5, - backgroundColor: "rgba(0,0,0,0.5)", - }, - preview: { - width: "100%", // You may need to adjust this - height: "80%", // You may need to adjust this - borderRadius: 4, - }, - confirmButtonText: { - // Style for the text inside your confirm buttons - color: "white", - fontSize: 18, - textAlign: "center", - }, + container: { + flex: 1, + backgroundColor: "black", + }, + camera: { + flex: 1, + justifyContent: "space-between", + }, + uiContainer: { + flex: 1, + backgroundColor: "transparent", + flexDirection: "column", + justifyContent: "space-between", + }, + topToolbar: { + flex: 0.1, + flexDirection: "row", + justifyContent: "space-between", + alignItems: "flex-start", + paddingTop: 20, + paddingHorizontal: 20, + }, + bottomToolbar: { + padding: 20, + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + backgroundColor: "rgba(0, 0, 0, 0.5)" + }, + captureButton: { + width: 70, + height: 70, + borderWidth: 4, + borderColor: "white", + borderRadius: 35, + backgroundColor: "white", + alignSelf: "center", + justifyContent: "center", + alignItems:"center", + }, + captureButtonRing: { + width: 65, + height: 65, + borderWidth: 2, + borderColor: "black", + borderRadius: 32.5, + position: "absolute", + }, + galleryButton: { + width: 50, + height: 50, + borderRadius: 10, + alignSelf: "center", + overflow: "hidden", + backgroundColor: "white", + }, + thumbnail: { + width: 45, + height: 45, + backgroundColor: "transparent", + }, + tipsButton: { + // Style your button as needed + position: 'absolute', + borderRadius: 10, + padding: 10, + top: 20, + left: 10, + }, + confirmContainer: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, + confirmButtons: { + flexDirection: "row", + //justifyContent: "space-around", + width: "100%", + padding: 20, + }, + confirmButton: { + flex: 1, + alignItems: "center", + justifyContent: "center", + marginHorizontal: 10, + paddingVertical: 10, + borderRadius: 5, + backgroundColor: "rgba(0,0,0,0.5)", + }, + preview: { + width: "100%", // You may need to adjust this + height: "80%", // You may need to adjust this + borderRadius: 4, + }, + confirmButtonText: { + // Style for the text inside your confirm buttons + color: "white", + fontSize: 18, + textAlign: "center", + }, }); + + + From ad726b29d991ff067cb99b92ffdd55571a8bfb56 Mon Sep 17 00:00:00 2001 From: Mana Vale Date: Sat, 3 Feb 2024 14:04:32 -0600 Subject: [PATCH 3/3] removed unnecessary comments --- hmns-app/client/components/CameraComponent.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/hmns-app/client/components/CameraComponent.tsx b/hmns-app/client/components/CameraComponent.tsx index 595bef2..620368a 100644 --- a/hmns-app/client/components/CameraComponent.tsx +++ b/hmns-app/client/components/CameraComponent.tsx @@ -219,7 +219,6 @@ const styles = StyleSheet.create({ backgroundColor: "transparent", }, tipsButton: { - // Style your button as needed position: 'absolute', borderRadius: 10, padding: 10, @@ -233,7 +232,6 @@ const styles = StyleSheet.create({ }, confirmButtons: { flexDirection: "row", - //justifyContent: "space-around", width: "100%", padding: 20, }, @@ -247,12 +245,11 @@ const styles = StyleSheet.create({ backgroundColor: "rgba(0,0,0,0.5)", }, preview: { - width: "100%", // You may need to adjust this - height: "80%", // You may need to adjust this + width: "100%", + height: "80%", borderRadius: 4, }, confirmButtonText: { - // Style for the text inside your confirm buttons color: "white", fontSize: 18, textAlign: "center",