From 74ba0fc3e6e43bf1c1b0725e735ad46f10b2b46a Mon Sep 17 00:00:00 2001
From: mmmyr <mmmyr@mmmyrdeMacBook-Air.local>
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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
literal 0
HcmV?d00001
diff --git a/hmns-app/client/components/CameraComponent.tsx b/hmns-app/client/components/CameraComponent.tsx
index 52a8a8a..f019723 100644
--- a/hmns-app/client/components/CameraComponent.tsx
+++ b/hmns-app/client/components/CameraComponent.tsx
@@ -119,23 +119,24 @@ export default function CameraComponent() {
<View style={styles.topToolbar}>
{/* You can add additional icons or information at the top */}
</View>
-
+
<View style={styles.bottomToolbar}>
{/* Placeholder for gallery button/icon */}
- {photo && (
- <TouchableOpacity style={styles.galleryButton}>
- <Image
- source={{ uri: photo.uri }}
- style={styles.thumbnail}
- />
- </TouchableOpacity>
- )}
+
+ <TouchableOpacity style={styles.galleryButton}>
+ <Image
+ source={{ uri: 'https://icons.iconarchive.com/icons/praveen/minimal-outline/256/gallery-icon.png' }}
+ style={styles.thumbnail}
+ />
+ </TouchableOpacity>
+
<TouchableOpacity style={styles.captureButton} onPress={takePhoto} />
<TouchableOpacity style={styles.tipsButton} onPress={showPhotoTips}>
<Text style={styles.tipsButtonText}>Tips</Text>
</TouchableOpacity>
- </View>
+ </View>
+
</View>
</Camera>
</View>
@@ -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 <mana.vale@lnew.co>
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 (
- <View style={styles.confirmContainer}>
- <Image source={{ uri: photo.uri }} style={styles.preview} />
- <View style={styles.confirmButtons}>
- <TouchableOpacity onPress={retakePhoto} style={styles.confirmButton}>
- <Text style={styles.confirmButtonText}>Retake</Text>
- </TouchableOpacity>
- <TouchableOpacity onPress={acceptPhoto} style={styles.confirmButton}>
- <Text style={styles.confirmButtonText}>Accept</Text>
- </TouchableOpacity>
- </View>
- </View>
- );
- }
-
-
-
- // If permissions are still being requested, return an empty view
- if (hasPermission === null) {
- return <View />;
- }
- // If camera access is denied, inform the user
- if (hasPermission === false) {
- return <Text>No access to camera</Text>;
- }
-
- // Make sure to hide the status bar to provide a full-screen experience
- StatusBar.setHidden(true);
-
- return (
- <View style={styles.container}>
- <Camera style={styles.camera} ref={cameraRef}>
- {/* Overlay the UI components on the camera preview */}
- <View style={styles.uiContainer}>
- <View style={styles.topToolbar}>
- {/* You can add additional icons or information at the top */}
- </View>
-
- <View style={styles.bottomToolbar}>
- {/* Placeholder for gallery button/icon */}
-
- <TouchableOpacity style={styles.galleryButton}>
- <Image
- source={{ uri: 'https://icons.iconarchive.com/icons/praveen/minimal-outline/256/gallery-icon.png' }}
- style={styles.thumbnail}
- />
- </TouchableOpacity>
-
- <TouchableOpacity style={styles.captureButton} onPress={takePhoto} />
-
- <TouchableOpacity style={styles.tipsButton} onPress={showPhotoTips}>
- <Text style={styles.tipsButtonText}>Tips</Text>
- </TouchableOpacity>
- </View>
-
- </View>
- </Camera>
- </View>
- );
+ 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 (
+ <View style={styles.confirmContainer}>
+ <Image source={{ uri: photo.uri }} style={styles.preview} />
+ <View style={styles.confirmButtons}>
+ <TouchableOpacity onPress={retakePhoto} style={styles.confirmButton}>
+ <Text style={styles.confirmButtonText}>Retake</Text>
+ </TouchableOpacity>
+ <TouchableOpacity onPress={acceptPhoto} style={styles.confirmButton}>
+ <Text style={styles.confirmButtonText}>Accept</Text>
+ </TouchableOpacity>
+ </View>
+ </View>
+ );
+ }
+
+
+
+
+
+
+ // If permissions are still being requested, return an empty view
+ if (hasPermission === null) {
+ return <View />;
+ }
+ // If camera access is denied, inform the user
+ if (hasPermission === false) {
+ return <Text>No access to camera</Text>;
+ }
+
+
+ // Make sure to hide the status bar to provide a full-screen experience
+ StatusBar.setHidden(true);
+
+
+ return (
+ <View style={styles.container}>
+ <Camera style={styles.camera} ref={cameraRef}>
+ {/* Overlay the UI components on the camera preview */}
+ <View style={styles.uiContainer}>
+ <View style={styles.topToolbar}>
+ {/* Info Button */}
+ <TouchableOpacity style={styles.tipsButton} onPress={showPhotoTips}>
+ <FontAwesome
+ name='info-circle'
+ size={30}
+ color="white"
+ style={{ marginLeft: 15 }}
+ />
+ </TouchableOpacity>
+ </View>
+
+ <View style={styles.bottomToolbar}>
+ {/* Photo Button */}
+ <TouchableOpacity style={styles.captureButton} onPress={takePhoto}>
+ <View style={styles.captureButtonRing} />
+ </TouchableOpacity>
+ </View>
+
+
+ </View>
+ </Camera>
+ </View>
+ );
}
+
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 <mana.vale@lnew.co>
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",