-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlr.html
115 lines (109 loc) · 6.48 KB
/
lr.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Living Room</title>
<link rel="stylesheet" href="lrc.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>
<body class="m-0 p-0 overflow-x-hidden">
<div id="nav" class="h-16 w-full fixed top-0 z-10 left-0 p-1">
<a href="./index.html" style="text-decoration: none;">
<h2 id="sustarch" class="absolute top-1/2 -translate-y-1/2 left-4 md:left-10 font-semibold text-sm md:text-2xl text-white">Sustainable Home Automation</h2>
</a>
<div id="right" class="absolute right-0 top-1/2 -translate-y-1/2 mr-4 md:mr-10 flex items-center gap-2 md:gap-6">
<a href="./aboutus.html" class="hidden md:block">
<h4>About us</h4>
</a>
<h4 id="btn1" class="p-2 h-8 md:h-10 w-16 md:w-20 text-sm md:text-base cursor-pointer border-white border-2 hidden items-center justify-center rounded-md md:flex">
<a href="./signin.html">Sign in</a>
</h4>
<i class="fa-solid fa-bell cursor-pointer text-sm md:text-xl"></i>
</div>
</div>
<div id="page1" class="min-h-screen w-full mt-16 px-4 md:px-0 flex flex-col justify-center items-center bg-gray-100">
<h1 class="text-2xl md:text-3xl font-bold mb-6 md:mb-8">Living Room</h1>
<div class="bg-white rounded-lg shadow-lg mx-auto w-full max-w-sm md:w-96 p-6 md:p-8">
<h2 class="text-lg md:text-xl font-semibold mb-6 text-center">LED Energy Analysis</h2>
<div class="mb-4">
<select id="timeframe" class="w-full p-2 border rounded-md text-sm md:text-base">
<option value="yearly">Yearly</option>
<option value="monthly">Monthly</option>
<option value="weekly">Weekly</option>
</select>
</div>
<div id="energyData" class="space-y-6 md:space-y-8">
<div class="flex flex-col gap-2 text-sm md:text-base">
<span class="text-gray-600 font-medium">Decision(ON/OFF):</span>
<span id="decision" class="font-medium bg-gray-50 p-2 rounded">Loading...</span>
</div>
<div class="flex flex-col gap-2 text-sm md:text-base">
<span class="text-gray-600 font-medium">Daily Energy Saved (If turned off for 15min/hr):</span>
<span id="dailySaved" class="font-medium bg-gray-50 p-2 rounded">Loading...</span>
</div>
<div class="flex flex-col gap-2 text-sm md:text-base">
<span class="text-gray-600 font-medium">Energy Saved (<span id="periodText">Yearly</span>):</span>
<span id="periodSaved" class="font-medium bg-gray-50 p-2 rounded">Loading...</span>
</div>
<div class="flex flex-col gap-2 text-sm md:text-base">
<span class="text-gray-600 font-medium">Expected points from the savings:</span>
<span id="expcoin" class="font-medium bg-gray-50 p-2 rounded">Loading...</span>
</div>
<div class="flex flex-col gap-2 text-sm md:text-base">
<span class="text-gray-600 font-medium">Usage Pattern(in watt):</span>
<span id="pattern" class="font-medium bg-gray-50 p-2 rounded break-words">Loading...</span>
</div>
</div>
</div>
</div>
<script>
// Load the processed data from the JSON file
fetch('./aimodel/sustmodel/sustainable-automation-ai-agent/processed_data.json')
.then(response => response.json())
.then(data => {
const yearlyEnergy = parseFloat(data.yearlyEnergySaved);
document.getElementById('decision').textContent = data.decision;
document.getElementById('dailySaved').textContent = data.dailyEnergySaved;
document.getElementById('pattern').textContent = data.usagePattern;
document.getElementById('expcoin').textContent = parseInt(yearlyEnergy/365);
// Handle timeframe changes
const timeframeSelect = document.getElementById('timeframe');
const updatePeriodData = () => {
const periodText = document.getElementById('periodText');
const periodSaved = document.getElementById('periodSaved');
const expcoin = document.getElementById('expcoin');
switch(timeframeSelect.value) {
case 'weekly':
periodText.textContent = 'Weekly';
const weeklyEnergy = yearlyEnergy / 52;
periodSaved.textContent = `${weeklyEnergy.toFixed(2)} watts`;
expcoin.textContent = parseInt(weeklyEnergy / 365); // Correctly calculate weekly points
break;
case 'monthly':
periodText.textContent = 'Monthly';
const monthlyEnergy = yearlyEnergy / 12;
periodSaved.textContent = `${monthlyEnergy.toFixed(2)} watts`;
expcoin.textContent = parseInt(monthlyEnergy / 365); // Correctly calculate monthly points
break;
case 'yearly':
periodText.textContent = 'Yearly';
periodSaved.textContent = `${yearlyEnergy.toFixed(2)} watts`;
expcoin.textContent = parseInt(yearlyEnergy / 365);
break;
}
};
timeframeSelect.addEventListener('change', updatePeriodData);
updatePeriodData(); // Initial update
})
.catch(error => {
console.error('Error loading data:', error);
document.getElementById('energyData').innerHTML = '<p class="text-red-500 text-sm md:text-base">Failed to load energy data. Please try again later.</p>';
});
</script>
</body>
</html>