-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (82 loc) · 3.08 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
<!-- <!doctype html>
<html>
<head>
<title>Communicating Between a Webpage and an Arduino</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script> <!-- Updated version -->
<!--
<style>
#sample {
width:300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<h1>Communicating Between a Webpage and an Arduino</h1>
<div id="sample"></div>
<script>
var socket = io('http://127.0.0.1:3000'); // Use the correct port here
// Listen for the 'data' event
socket.on('data', (data) => {
console.log(data);
document.getElementById('sample').style.opacity = data / 100 ;
});
</script>
</body>
</html> -->
<!DOCTYPE html>
<html>
<head>
<title>Communicating Between a Webpage and an Arduino</title>
<!-- Leaflet CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<!-- Socket.io -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
<!-- Styles -->
<style>
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
#map {position:absolute; top:0; bottom:0; right:0; left:0;}
#sample {width:300px; height: 300px; background-color: red;}
</style>
</head>
<body>
<h1>Communicating Between a Webpage and an Arduino</h1>
<div id="sample"></div>
<div id="map"></div> <!-- Map container -->
<script>
// Initialize the Leaflet map
var map = L.map('map', {
center: [32.88195184526258, -117.23350219670715],
zoom: 15,
zoomControl: true
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Socket.io connection
var socket = io('http://127.0.0.1:3000');
// Marker cache
var markers = [];
// Listen for the 'data' event
socket.on('data', (data) => {
console.log(data);
// Update the sample div's opacity
document.getElementById('sample').style.opacity = data.opacity || 1;
// Parse the received data assuming it includes latitude, longitude, and other attributes
var lat = data;
var lng = data;
var content = `<b>Data:</b><br>Lat: ${lat}<br>Lng: ${lng}`;
// Remove old markers
// markers.forEach(marker => map.removeLayer(marker));
// markers = [];
// Add a new marker
var marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup(content).openPopup();
// Store the marker in the cache
// markers.push(marker);
});
</script>
</body>
</html>