Skip to content

Commit 9a59644

Browse files
leongmichaelleongmichael
committed
fix about page
1 parent 6100049 commit 9a59644

File tree

5 files changed

+157
-142
lines changed

5 files changed

+157
-142
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# DR-Estimation-Tool
1+
# Demand Flexibility Assessment Tool
22

3-
Web-based demand respones assessment tool.
3+
Web-based tool to assess the building demand flexibility of small and medium sized buildings enabling customers to estimate their demand flexibility easily and determine how to reduce their electricity usage in response to on-peak expensive electricity prices.
44

55
## Setup/Installation
66

‎client/src/components/About.js

Lines changed: 68 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,55 +12,79 @@ const Item = styled(Paper)(({ theme }) => ({
1212

1313
const typographySX = {
1414
fontWeight: "bold",
15-
m: 3,
15+
m: 0,
1616
};
1717

1818
export default function About() {
1919
return (
20-
<Box sx={{ flexGrow: 1, marginTop: 3 }}>
21-
<Grid container spacing={2}>
22-
<Grid item xs={7}>
23-
<Typography variant="h4" color="primary.main" sx={typographySX}>
24-
Objectives
25-
</Typography>
26-
<Typography variant="h6" color="primary.main" sx={typographySX}>
27-
This is a web-based tool to assess the building demand flexibility
28-
of small and medium sized buildings enabling customers to estimate
29-
their demand flexibility easily and determine how to reduce their
30-
electricity usage in response to on-peak expensive electricity
31-
prices.
32-
</Typography>
33-
</Grid>
34-
<Grid item xs={5}>
35-
<img src={graphic} style={{ width: 500, height: 250 }}></img>
36-
{/* <Logo style={{ width: 500, height: 250 }}></Logo> */}
37-
</Grid>
38-
<Grid item xs={12} bgcolor="tertiary.main">
39-
<Typography variant="body1" color="primary.main" sx={typographySX}>
40-
The box sat on the desk next to the computer. It had arrived earlier
41-
in the day and business had interrupted her opening it earlier. She
42-
didn't who had sent it and briefly wondered who it might have been.
43-
As she began to unwrap it, she had no idea that opening it would
44-
completely change her life. The answer was within her reach. It was
45-
hidden in a box and now that box sat directly in front of her. She'd
46-
spent years searching for it and could hardly believe she'd finally
47-
managed to find it. She turned the key to unlock the box and then
48-
gently lifted the top. She held her breath in anticipation of
49-
finally knowing the answer she had spent so much of her time in
50-
search of. As the lid came off she could see that the box was empty.
51-
A long black shadow slid across the pavement near their feet and the
52-
five Venusians, very much startled, looked overhead. They were
53-
barely in time to see the huge gray form of the carnivore before it
54-
vanished behind a sign atop a nearby building which bore the
55-
mystifying information "Pepsi-Cola." Finding the truth wouldn't be
56-
easy, that's for sure. Then there was the question of whether or not
57-
Jane really wanted to know the truth. That's the thing that bothered
58-
her most. It wasn't the difficulty of actually finding out what
59-
happened that was the obstacle, but having to live with that
60-
information once it was found.
61-
</Typography>
20+
<Box bgcolor="tertiary.main">
21+
<Box sx={{ flexGrow: 1, margin: 3 }}>
22+
<Grid container spacing={2}>
23+
<Grid item xs={12}>
24+
<Typography
25+
variant="h4"
26+
color="primary.main"
27+
sx={{ fontWeight: "bold", marginTop: 3 }}
28+
>
29+
About
30+
</Typography>
31+
<Typography variant="h6" color="primary.main" sx={{}}>
32+
Demand Flexibility Assessment Tool (DFAT) is a web-based tool to
33+
assess the building demand flexibility of small and medium sized
34+
buildings enabling customers to estimate their demand flexibility
35+
easily and determine how to reduce their electricity usage in
36+
response to on-peak expensive electricity prices.
37+
</Typography>
38+
</Grid>
39+
40+
<Grid item xs={12}>
41+
<Typography variant="h4" color="primary.main" sx={typographySX}>
42+
Thanks and Credits
43+
</Typography>
44+
<Typography variant="h6" color="primary.main" sx={{}}>
45+
Main Developers:
46+
</Typography>
47+
<ul>
48+
<Typography variant="h6" color="primary.main">
49+
- Michael Leong
50+
</Typography>
51+
<Typography variant="h6" color="primary.main" sx={{}}>
52+
- Medha Mahanta
53+
</Typography>
54+
<Typography variant="h6" color="primary.main" sx={{}}>
55+
- Clara Yin
56+
</Typography>
57+
<Typography variant="h6" color="primary.main" sx={{}}>
58+
- TJ Garcia
59+
</Typography>
60+
<Typography variant="h6" color="primary.main" sx={{}}>
61+
- Zach Tan
62+
</Typography>
63+
</ul>
64+
<Typography variant="h6" color="primary.main" sx={{}}>
65+
And thank you to mentors Rongxin Yin and Anand Krishnan for
66+
leading this project in the 2023 Experiences in Research program.
67+
</Typography>
68+
</Grid>
69+
70+
<Grid item xs={12}>
71+
<Typography
72+
variant="h4"
73+
color="primary.main"
74+
sx={{ fontWeight: "bold", marginTop: 3 }}
75+
>
76+
Source Code
77+
</Typography>
78+
<Typography variant="h6" color="primary.main" sx={{}}>
79+
The source code for DFAT can be found on{" "}
80+
<a href="https://github.com/rongxinyin/DR-Estimation-Tool">
81+
GitHub
82+
</a>
83+
.
84+
</Typography>
85+
</Grid>
6286
</Grid>
63-
</Grid>
87+
</Box>
6488
</Box>
6589
);
6690
}

‎client/src/components/FAQ.js

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,48 @@
1-
import {
2-
Box,
3-
Button,
4-
Grid,
5-
Typography,
6-
} from "@mui/material";
7-
import React, { useState } from 'react';
8-
import InfoListComponent from './InfoListComponent.js';
9-
10-
11-
const data =
12-
[
13-
{
14-
question: "How can solar panels help reduce building energy usage?",
15-
answer: "Solar panels can generate clean electricity from sunlight, ' allowing buildings to offset their energy consumption by using renewable energy, thereby reducing their reliance on conventional energy sources and lowering their carbon footprint."
16-
},
17-
{
18-
question: "How can solar power help reduce building energy usage?",
19-
answer: "Solar power reduces building energy usage by converting sunlight into electricity, promoting sustainability."
20-
},
21-
{
22-
question: "What is solar energy?",
23-
answer: "Solar energy is a sustainable and renewable form of power derived from the sun's radiation. It is harnessed using photovoltaic cells or solar thermal collectors, converting sunlight into electricity or heat to meet various energy needs. As an eco-friendly alternative to fossil fuels, solar power contributes to reducing greenhouse gas emissions and mitigating climate change while promoting energy independence and resilience."
24-
},
25-
{
26-
question: "What is the main advantage of using solar power in buildings?",
27-
answer: "The main advantage of using solar power in buildings is that it provides a clean and renewable energy source, reducing greenhouse gas emissions and dependence on fossil fuels."
28-
},
29-
{
30-
question: "What is a Packet RTU?",
31-
answer: "An HVAC packaged rooftop unit (RTU) is a self-contained system used for heating and cooling in commercial buildings. It is installed on the roof or ground and contains all major components within a single enclosure, including the compressor, condenser, evaporator, blower, and sometimes a heating element. RTUs are space-saving, energy-efficient, and easy to maintain, making them a popular choice for commercial applications."
32-
},
33-
{
34-
question: "What is the energy duck curve, and why is it important in the context of energy consumption?",
35-
answer: "The energy duck curve represents the fluctuation of energy demand throughout the day, particularly in regions with high solar power capacity. It is important because it highlights the challenges of balancing supply and demand, as it shows a significant drop in demand during peak solar production, followed by a steep increase during the evening when solar generation decreases. This curve emphasizes the need for energy storage solutions and grid flexibility to manage the variability of renewable energy sources effectively."
36-
},
37-
// Add more questions and answers as needed
38-
];
1+
import { Box, Button, Grid, Typography } from "@mui/material";
2+
import React, { useState } from "react";
3+
import InfoListComponent from "./InfoListComponent.js";
394

5+
const data = [
6+
{
7+
question: "How can solar panels help reduce building energy usage?",
8+
answer:
9+
"Solar panels can generate clean electricity from sunlight, ' allowing buildings to offset their energy consumption by using renewable energy, thereby reducing their reliance on conventional energy sources and lowering their carbon footprint.",
10+
},
11+
{
12+
question: "How can solar power help reduce building energy usage?",
13+
answer:
14+
"Solar power reduces building energy usage by converting sunlight into electricity, promoting sustainability.",
15+
},
16+
{
17+
question: "What is solar energy?",
18+
answer:
19+
"Solar energy is a sustainable and renewable form of power derived from the sun's radiation. It is harnessed using photovoltaic cells or solar thermal collectors, converting sunlight into electricity or heat to meet various energy needs. As an eco-friendly alternative to fossil fuels, solar power contributes to reducing greenhouse gas emissions and mitigating climate change while promoting energy independence and resilience.",
20+
},
21+
{
22+
question: "What is the main advantage of using solar power in buildings?",
23+
answer:
24+
"The main advantage of using solar power in buildings is that it provides a clean and renewable energy source, reducing greenhouse gas emissions and dependence on fossil fuels.",
25+
},
26+
{
27+
question: "What is a Packet RTU?",
28+
answer:
29+
"An HVAC packaged rooftop unit (RTU) is a self-contained system used for heating and cooling in commercial buildings. It is installed on the roof or ground and contains all major components within a single enclosure, including the compressor, condenser, evaporator, blower, and sometimes a heating element. RTUs are space-saving, energy-efficient, and easy to maintain, making them a popular choice for commercial applications.",
30+
},
31+
{
32+
question:
33+
"What is the energy duck curve, and why is it important in the context of energy consumption?",
34+
answer:
35+
"The energy duck curve represents the fluctuation of energy demand throughout the day, particularly in regions with high solar power capacity. It is important because it highlights the challenges of balancing supply and demand, as it shows a significant drop in demand during peak solar production, followed by a steep increase during the evening when solar generation decreases. This curve emphasizes the need for energy storage solutions and grid flexibility to manage the variability of renewable energy sources effectively.",
36+
},
37+
// Add more questions and answers as needed
38+
];
4039

4140
export default function FAQ() {
4241
return (
4342
<Box bgcolor={"primary.main"} p={2}>
44-
<Typography variant="h4" color="common.white" sx={{ marginTop: 5 }}>Frequently Asked Questions</Typography>
43+
<Typography variant="h4" color="common.white" sx={{ marginTop: 5 }}>
44+
Frequently Asked Questions
45+
</Typography>
4546
<InfoListComponent data={data} />
4647
</Box>
4748
);

‎client/src/components/InfoListComponent.js

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
// src/components/FAQ.js
2-
import React, { useState } from 'react';
3-
import {
4-
Button,
5-
Typography,
6-
} from "@mui/material";
7-
2+
import React, { useState } from "react";
3+
import { Button, Typography } from "@mui/material";
84

95
const InfoListComponent = ({ data }) => {
10-
const [openIndex, setOpenIndex] = useState(null);
6+
const [openIndex, setOpenIndex] = useState(null);
117

12-
const toggleQuestion = (index) => {
13-
if (openIndex === index) {
14-
setOpenIndex(null);
15-
} else {
16-
setOpenIndex(index);
17-
}
18-
};
8+
const toggleQuestion = (index) => {
9+
if (openIndex === index) {
10+
setOpenIndex(null);
11+
} else {
12+
setOpenIndex(index);
13+
}
14+
};
1915

20-
return (
21-
<div className="InfoListComponent">
22-
{data.map((item, index) => (
23-
<div key={index}>
24-
<Button style={{
25-
borderRadius: 35,
26-
backgroundColor: 'secondary',
27-
color: "white",
28-
fontSize: "18px",
29-
padding: "18px 36px",
30-
marginBottom: 5
31-
}}
32-
color="inherit"
33-
variant="outlined"
34-
onClick={() => toggleQuestion(index)}>
35-
{item.question}
36-
</Button>
37-
{openIndex === index && <Typography
38-
variant="h6"
39-
color="common.white"
40-
sx={{ margin: 1 }}
41-
>{item.answer}</Typography>}
42-
</div>
43-
))}
16+
return (
17+
<div className="InfoListComponent">
18+
{data.map((item, index) => (
19+
<div key={index}>
20+
<Button
21+
style={{
22+
borderRadius: 35,
23+
backgroundColor: "secondary",
24+
color: "white",
25+
fontSize: "18px",
26+
padding: "18px 36px",
27+
marginBottom: 5,
28+
}}
29+
color="inherit"
30+
variant="outlined"
31+
onClick={() => toggleQuestion(index)}
32+
>
33+
{item.question}
34+
</Button>
35+
{openIndex === index && (
36+
<Typography variant="h6" color="common.white" sx={{ margin: 1 }}>
37+
{item.answer}
38+
</Typography>
39+
)}
4440
</div>
45-
);
41+
))}
42+
</div>
43+
);
4644
};
4745

4846
export default InfoListComponent;

‎client/src/components/UserGuide.js

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@ import { Box, Button, Grid, Typography } from "@mui/material";
22

33
import { useNavigate } from "react-router-dom";
44

5-
65
export default function UserGuide() {
76
let navigate = useNavigate();
87

98
return (
109
<Box bgcolor={"primary.main"} p={2}>
11-
1210
<Grid
1311
Container
1412
my={1}
@@ -34,13 +32,15 @@ export default function UserGuide() {
3432
sx={{ borderRadius: "5px", border: "2px solid #F0F0F0" }}
3533
>
3634
<Typography variant="h6" color="white.main" textAlign={"left"}>
37-
<strong>Basic</strong>: The Basic calculator uses building information (such as
38-
size and build year) and local weather and meter data to calculate
39-
shed potential for various precool and event temperature offsets.
35+
<strong>Basic</strong>: The Basic calculator uses building
36+
information (such as size and build year) and local weather and
37+
meter data to calculate shed potential for various precool and
38+
event temperature offsets.
4039
<br></br>
41-
<strong>Advanced</strong>: The Advanced calculator uses information about the
42-
customer's RTUs, as well as normal and reset temperature
43-
setpoints, to calculate total demand response load reduction.
40+
<strong>Advanced</strong>: The Advanced calculator uses
41+
information about the customer's RTUs, as well as normal and reset
42+
temperature setpoints, to calculate total demand response load
43+
reduction.
4444
</Typography>
4545
</Box>
4646
</Grid>
@@ -103,11 +103,7 @@ export default function UserGuide() {
103103
p={2}
104104
sx={{ borderRadius: "5px", border: "2px solid #F0F0F0" }}
105105
>
106-
<Typography
107-
variant="h6"
108-
color="white.main"
109-
textAlign={"left"}
110-
>
106+
<Typography variant="h6" color="white.main" textAlign={"left"}>
111107
Input the percentage of building floor area that GTA will apply.
112108
This is how much of your room or building will be affected. Input
113109
the precool period temp offset. Finally add the demand response
@@ -128,11 +124,7 @@ export default function UserGuide() {
128124
p={2}
129125
sx={{ borderRadius: "5px", border: "2px solid #F0F0F0" }}
130126
>
131-
<Typography
132-
variant="h6"
133-
color="white.main"
134-
textAlign={"left"}
135-
>
127+
<Typography variant="h6" color="white.main" textAlign={"left"}>
136128
For this part, input the outside air temperature (OAT) and meter
137129
kW at that certain hour. For example, first hour is 76°F and meter
138130
reading is 733 kW. Add these values to the input table for all 4

0 commit comments

Comments
 (0)