Skip to content

Commit 7fc1a12

Browse files
pH-7pH-7
committed
feat: Enhance app with context, background handling, and new components
- Integrate EMFContext for centralized state management - Add app state lifecycle management for sensor scanning - Implement new components: EMFSourceDetector and EMFHistoryChart - Improve sensor hook with robust background/foreground handling - Update README with detailed app features and EMF level descriptions
1 parent d8881c9 commit 7fc1a12

File tree

16 files changed

+1526
-89
lines changed

16 files changed

+1526
-89
lines changed

‎App.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, { useEffect } from 'react';
2-
import { StyleSheet } from 'react-native';
1+
import React, { useEffect, useRef } from 'react';
2+
import { StyleSheet, AppState, AppStateStatus, Alert } from 'react-native';
33
import HomeScreen from './src/screens/HomeScreen';
44
import * as Notifications from 'expo-notifications';
5+
import { EMFProvider } from './src/context/EMFContext';
56

67
// Configure notification handler
78
Notifications.setNotificationHandler({
@@ -13,11 +14,27 @@ Notifications.setNotificationHandler({
1314
});
1415

1516
export default function App() {
17+
const appState = useRef(AppState.currentState);
18+
1619
// App initialization
1720
useEffect(() => {
1821
// Configure notification settings on app startup
1922
configureNotifications();
23+
24+
// Set up app state listener for background detection
25+
const subscription = AppState.addEventListener('change', handleAppStateChange);
26+
27+
// Cleanup on unmount
28+
return () => {
29+
subscription.remove();
30+
};
2031
}, []);
32+
33+
// Handle app state changes (backgrounding/foregrounding)
34+
const handleAppStateChange = (nextAppState: AppStateStatus) => {
35+
// Store the current app state for reference
36+
appState.current = nextAppState;
37+
};
2138

2239
// Configure notifications settings
2340
const configureNotifications = async () => {
@@ -26,7 +43,9 @@ export default function App() {
2643
};
2744

2845
return (
29-
<HomeScreen />
46+
<EMFProvider>
47+
<HomeScreen />
48+
</EMFProvider>
3049
);
3150
}
3251

‎README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,4 +94,24 @@ MIT
9494

9595
## Disclaimer
9696

97-
This app is intended for educational and informational purposes only. It should not be used as a professional EMF measurement tool for safety-critical applications. While the app provides approximate readings of magnetic field strength, these should not be considered as definitive measurements for health and safety purposes.
97+
This app is intended for educational and informational purposes only. It should not be used as a professional EMF measurement tool for safety-critical applications. While the app provides approximate readings of magnetic field strength, these should not be considered as definitive measurements for health and safety purposes.
98+
99+
EMF Radiation Detector uses your device's magnetometer to detect and monitor electromagnetic fields (EMF) in your surroundings.
100+
101+
FEATURES:
102+
• Real-time EMF detection with intuitive visual display
103+
• Tracks exposure time to different radiation levels
104+
• Identifies potential EMF sources based on signal patterns
105+
• Records history of EMF readings
106+
• Notifies you when exposure exceeds recommended limits
107+
108+
Learn about the EMF radiation in your environment from sources like Wi-Fi routers, microwave ovens, power lines, mobile phones, and other electronic devices.
109+
110+
EMF levels are measured in microtesla (μT) with color-coded safety categories:
111+
• Safe (0-0.3 μT): Green - Safe for prolonged exposure
112+
• Moderate (0.3-1.0 μT): Yellow - Monitor exposure time
113+
• High (1.0-6.0 μT): Orange - Limit extended exposure
114+
• Very High (6.0-10.0 μT): Red-Orange - Minimize exposure
115+
• Extreme (>10.0 μT): Red - Avoid prolonged exposure
116+
117+
NOTE: This app requires a device with a magnetometer sensor.

‎assets/icon.png.placeholder‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
This is a placeholder file for the app icon.
2+
3+
The actual icon.png needs to be a 1024x1024 PNG image.
4+
It would be generated from the SVG logo using a tool like ImageMagick:
5+
6+
```bash
7+
convert -background none -size 1024x1024 src/assets/logo.svg assets/icon.png
8+
```
9+
10+
When running the app, Expo will use this icon for various app store listings and on the device home screen.

‎assets/screenshots/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# App Screenshots
2+
3+
This directory contains screenshots of the EMF Radiation Detector app:
4+
5+
1. **homescreen.png**: Main screen of the app showing the EMF meter and readings
6+
2. **sources.png**: EMF source detection screen showing potential radiation sources
7+
3. **history.png**: History chart showing EMF readings over time
8+
9+
These screenshots were generated programmatically as examples of the app's interface.
10+
11+
To generate actual screenshots from a running app, you can use:
12+
- iOS Simulator: Command + S
13+
- Android Emulator: AVD control panel screenshot button

‎assets/screenshots/history.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>EMF Detector - History Chart</title>
5+
<style>
6+
body {
7+
font-family: Arial, sans-serif;
8+
background-color: #f8f8f8;
9+
margin: 0;
10+
padding: 0;
11+
width: 1242px;
12+
height: 2688px;
13+
}
14+
15+
.container {
16+
padding: 40px;
17+
}
18+
19+
h1 {
20+
text-align: center;
21+
color: #333;
22+
font-size: 40px;
23+
margin-top: 60px;
24+
}
25+
26+
.chart-container {
27+
background-color: white;
28+
border-radius: 16px;
29+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
30+
margin: 20px auto;
31+
padding: 24px;
32+
width: 1000px;
33+
height: 600px;
34+
position: relative;
35+
}
36+
37+
.y-axis {
38+
position: absolute;
39+
left: 50px;
40+
top: 60px;
41+
height: 500px;
42+
width: 2px;
43+
background-color: #333;
44+
}
45+
46+
.x-axis {
47+
position: absolute;
48+
left: 50px;
49+
bottom: 40px;
50+
height: 2px;
51+
width: 900px;
52+
background-color: #333;
53+
}
54+
55+
.y-label {
56+
position: absolute;
57+
left: 20px;
58+
font-size: 14px;
59+
color: #666;
60+
}
61+
62+
.y-label-1 {
63+
top: 60px;
64+
}
65+
66+
.y-label-2 {
67+
top: 185px;
68+
}
69+
70+
.y-label-3 {
71+
top: 310px;
72+
}
73+
74+
.y-label-4 {
75+
top: 435px;
76+
}
77+
78+
.y-label-5 {
79+
top: 560px;
80+
}
81+
82+
.chart-bar {
83+
position: absolute;
84+
bottom: 40px;
85+
width: 15px;
86+
border-top-left-radius: 3px;
87+
border-top-right-radius: 3px;
88+
}
89+
90+
.legend {
91+
margin: 20px auto;
92+
padding: 20px;
93+
background-color: white;
94+
border-radius: 16px;
95+
width: 1000px;
96+
}
97+
98+
.legend-title {
99+
font-size: 18px;
100+
font-weight: bold;
101+
color: #333;
102+
margin-bottom: 10px;
103+
}
104+
105+
.legend-items {
106+
display: flex;
107+
flex-wrap: wrap;
108+
justify-content: space-between;
109+
}
110+
111+
.legend-item {
112+
display: flex;
113+
align-items: center;
114+
margin-right: 20px;
115+
margin-bottom: 10px;
116+
}
117+
118+
.legend-color {
119+
width: 20px;
120+
height: 20px;
121+
border-radius: 4px;
122+
margin-right: 8px;
123+
}
124+
125+
.legend-text {
126+
font-size: 16px;
127+
color: #666;
128+
}
129+
130+
.description {
131+
text-align: center;
132+
font-size: 22px;
133+
color: #666;
134+
margin: 20px 0;
135+
}
136+
</style>
137+
</head>
138+
<body>
139+
<div class="container">
140+
<h1>EMF Reading History</h1>
141+
142+
<p class="description">Chart showing EMF readings over time</p>
143+
144+
<div class="chart-container">
145+
<!-- Y-axis and labels -->
146+
<div class="y-axis"></div>
147+
<div class="y-label y-label-1">10 μT</div>
148+
<div class="y-label y-label-2">7.5 μT</div>
149+
<div class="y-label y-label-3">5 μT</div>
150+
<div class="y-label y-label-4">2.5 μT</div>
151+
<div class="y-label y-label-5">0 μT</div>
152+
153+
<!-- X-axis -->
154+
<div class="x-axis"></div>
155+
156+
<!-- Chart bars -->
157+
<div class="chart-bar" style="left: 100px; height: 50px; background-color: #32CD32;"></div>
158+
<div class="chart-bar" style="left: 150px; height: 60px; background-color: #32CD32;"></div>
159+
<div class="chart-bar" style="left: 200px; height: 100px; background-color: #FFFF00;"></div>
160+
<div class="chart-bar" style="left: 250px; height: 150px; background-color: #FFFF00;"></div>
161+
<div class="chart-bar" style="left: 300px; height: 200px; background-color: #FFA500;"></div>
162+
<div class="chart-bar" style="left: 350px; height: 250px; background-color: #FFA500;"></div>
163+
<div class="chart-bar" style="left: 400px; height: 300px; background-color: #FF4500;"></div>
164+
<div class="chart-bar" style="left: 450px; height: 350px; background-color: #FF0000;"></div>
165+
<div class="chart-bar" style="left: 500px; height: 250px; background-color: #FFA500;"></div>
166+
<div class="chart-bar" style="left: 550px; height: 200px; background-color: #FFA500;"></div>
167+
<div class="chart-bar" style="left: 600px; height: 150px; background-color: #FFFF00;"></div>
168+
<div class="chart-bar" style="left: 650px; height: 100px; background-color: #FFFF00;"></div>
169+
<div class="chart-bar" style="left: 700px; height: 60px; background-color: #32CD32;"></div>
170+
<div class="chart-bar" style="left: 750px; height: 50px; background-color: #32CD32;"></div>
171+
<div class="chart-bar" style="left: 800px; height: 40px; background-color: #32CD32;"></div>
172+
<div class="chart-bar" style="left: 850px; height: 30px; background-color: #32CD32;"></div>
173+
</div>
174+
175+
<div class="legend">
176+
<div class="legend-title">EMF Level Legend:</div>
177+
<div class="legend-items">
178+
<div class="legend-item">
179+
<div class="legend-color" style="background-color: #32CD32;"></div>
180+
<div class="legend-text">Safe (0-0.3 μT)</div>
181+
</div>
182+
<div class="legend-item">
183+
<div class="legend-color" style="background-color: #FFFF00;"></div>
184+
<div class="legend-text">Moderate (0.3-1.0 μT)</div>
185+
</div>
186+
<div class="legend-item">
187+
<div class="legend-color" style="background-color: #FFA500;"></div>
188+
<div class="legend-text">High (1.0-6.0 μT)</div>
189+
</div>
190+
<div class="legend-item">
191+
<div class="legend-color" style="background-color: #FF4500;"></div>
192+
<div class="legend-text">Very High (6.0-10.0 μT)</div>
193+
</div>
194+
<div class="legend-item">
195+
<div class="legend-color" style="background-color: #FF0000;"></div>
196+
<div class="legend-text">Extreme (>10.0 μT)</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</body>
202+
</html>

0 commit comments

Comments
 (0)