-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (148 loc) · 6.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<title>Big Data: UV Index</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PyScript CSS -->
<link
rel="stylesheet"
href="https://pyscript.net/releases/2024.7.1/core.css"
/>
<!-- This script tag bootstraps PyScript -->
<script
type="module"
src="https://pyscript.net/releases/2024.7.1/core.js"
></script>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="mqtt.min.js"></script>
</head>
<body>
<header id="headbarr">
Big Data: UV Index with the LEGO SPIKE Prime and PicoW
</header>
<script
type="mpy"
src="./main.py"
config="./pyscript.toml"
async
></script>
<script src="app.js"></script>
<p>
You and your friends are planning to play frisbee in the park. You
need to know the UV index and temperature to make sure you are safe
and when the best time to play is between 9am and 5pm. You have a
LEGO SPIKE Prime and a UV sensor to help you with this task. You
will use the UV sensor to get the UV index and compare it to the
local weather station temperature. Then use Python and Google Colab
to analyze the data to find the best time to play with your friends.
</p>
<h2>Connect to SPIKE and Pico</h2>
<p>
First connect up to the LEGO SPIKE Prime in order to communicate to
the RoboPico. This will let us grab data on when the best time to
play frisbee is. Select hardware.py and then run the code!
</p>
<button id="connect">connect up</button>
<button id="library">load BLE library</button>
<progress id="progress" value="0" max="100" hidden>0%</progress>
<br /><br />
<select name="files" id="files"></select>
<button id="upload">Grab remote code</button>
<button id="clear">Clear</button>
<button id="test">BLE Test Code</button> <br /><br />
<div class="container">
<script id="mpCode" type="mpy-editor" env="ble"></script>
<div id="repl"></div>
</div>
<h2>Get Daily UV Data</h2>
<p>
Now that we have the UV data running. We need to compare it to the
the local temperature data from the nearest weather station. To do
this we will use data from an API. This will give use the
temperature for the local area. Look at both of these data sets to
see if they match up.
</p>
<canvas id="tempChart" width="400" height="200"></canvas>
<div id="uvData"></div>
<div id="otherData"></div>
<h2>Best Time to Play Frisbee Today!</h2>
<p>
Now that we have the UV data from the local weather station and the
UV data from the Spike Prime. We can compare the two data sets to
see how accurate the LEGO SPIKE Prime is and see if the UV index
matches the weather. First add the sensor data to the graph above
using the "Add Sensor Data" button. Next start playing with the data
using the "Start Analyzing" button to find the best time to play
frisbee.
</p>
<button id="get_sensor_data">Graph Sensor Data</button>
<button id="to_python">Use Sensor Data</button>
<script type="py-editor" env="daily" config="matplotlib.toml">
## Do Not Edit this Code! ##
## Run this code to get the data from the sensor then move on to the next step. ##
from pyscript import window
import json
def process_uv_data():
uv_data_element = window.document.getElementById('uvData')
uv_data_json = uv_data_element.innerText
uv_data = json.loads(uv_data_json)
times_uv = [entry['time'] for entry in uv_data]
uv_indices = [float(entry['UV Index']) for entry in uv_data]
global time_list_uv
global uv_index_list
time_list_uv = times_uv
uv_index_list = uv_indices
print("Time List (UV):", time_list_uv)
print("UV Index List:", uv_index_list)
def process_other_data():
other_data_element = window.document.getElementById('otherData')
other_data_json = other_data_element.innerText
other_data = json.loads(other_data_json)
humidities = [entry['Humidity'] for entry in other_data]
temperatures = [entry['Temperature'] for entry in other_data]
global humidity_list
global temperature_list
humidity_list = humidities
temperature_list = temperatures
print("Humidity List:", humidity_list)
print("Temperature List:", temperature_list)
process_uv_data()
process_other_data()
</script>
<script type="py-editor" env="daily">
## This is matplotlib code to plot the data try experimenting with the settings and find out what time is the best time to play frisbee. ##
import matplotlib.pyplot as plt
import numpy as np
from pyscript import display
## Data for the plot
global time_list_uv
global uv_index_list
## Settings for the plot ##
plt.plot(time_list_uv, uv_index_list, label='data!') # Change the label
plt.title('Sample Plot') # Change the Title!
plt.xlabel('Date and Time') # Change the x-axis label!
plt.ylabel('UV Index') # Change the y-axis label!
plt.legend()
plt.grid(True)
display(plt, target="graph_image")
</script>
<div id="graph_image"></div>
<h2>Best Day of Summer '24 to Play Frisbee</h2>
<p>
Continue to Google Colab to continue this activity and find the best
day of the summer to play frisbee. Use the data to find of the whole
summer from the API. Friday is the best day of the week to play
frisbee.
</p>
<button id="colab">Send to Google Colab</button>
<p>Click this link to continue in Google Colab...</p>
<a
href="https://colab.research.google.com/drive/1HWw_nLjtoi-3X9VJIM-opJcOlxqM7_yV?usp=sharing"
>To Colab!
</a>
<br /><br />
<br /><br />
</body>
</html>