From fb799b2845f43abc1c6be08f0917448c1bb329de Mon Sep 17 00:00:00 2001 From: rongxinyin Date: Tue, 5 Dec 2023 23:52:04 -0800 Subject: [PATCH 1/4] change front page to be consistent with other pages --- client/src/components/Home.js | 185 ++++++++++-------- client/src/components/images/benchmarking.png | Bin 0 -> 13346 bytes client/src/components/images/commercial.png | Bin 0 -> 5276 bytes client/src/components/images/residential.png | Bin 0 -> 6095 bytes 4 files changed, 100 insertions(+), 85 deletions(-) create mode 100644 client/src/components/images/benchmarking.png create mode 100644 client/src/components/images/commercial.png create mode 100644 client/src/components/images/residential.png diff --git a/client/src/components/Home.js b/client/src/components/Home.js index d70e4f2..9654f7b 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -1,22 +1,24 @@ -import { Button, Grid, Typography } from "@mui/material"; +import { Box, Button, Grid, Typography, Paper, styled } from "@mui/material"; import { useNavigate } from "react-router-dom"; import image from "./images/berkeleylab.png"; +import residentialIcon from "./images/residential.png"; +import commercialIcon from "./images/commercial.png"; +import benchmarkIcon from "./images/benchmarking.png"; + +// visualization +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: "center", + color: theme.palette.text.secondary, +})); export default function Home() { let navigate = useNavigate(); // navigate to diff pages return ( -
+ - Demand Flexibility Assessment Tool + Welcome to the Demand Flexibility Assessment Tool (DFAT) @@ -45,108 +47,121 @@ export default function Home() { variant="h6" color="white.main" sx={{ - fontWeight: "bold", + // fontWeight: "bold", m: 1, marginTop: 1, textAlign: "center", - textShadow: "1px 1px #000", + // backgroundColor: "tertiary.main", // Change the background color to theme primary + // textShadow: "1px 1px #000", }} > - Welcome to the Demand Flexibility Assessment Tool, made by the Grid - Integration Group at Lawrence Berkeley National Lab. The estimation - tool provides demand response shed magnitudes for a range of OATs - for one of the major DR strategies: HVAC Temp Reset (Precool with - Zone Temp Setback). + DFAT is an open-source web-based tool that estimates the demand + flexibility potential of common control strategies in residential + and commercial buildings. DFAT is designed to help building owners & + operators understand the potential of demand flexibility in their + buildings and to help utilities and grid operators understand the + potential of demand flexibility in their service territories. - + - - {/* + - Welcome to the Demand Flexibility Assessment Tool, made by the - Grid Integration Group at Lawrence Berkeley National Lab. The - estimation tool provides demand response shed magnitudes for a - range of OATs for one of the major DR strategies: HVAC Temp Reset - (Precool with Zone Temp Setback). + {" "} + Paper citation: DFAT: A Web-Based Demand Flexibility Assessment + Toolkit for Building-to-Grid Integration,{" "} + + https://doi.org/10.1016/j.buildenv.2023.110663 + - - - - - - - - - - - - - - */} -
+ + ); } - -/*return ;*/ -/**/ diff --git a/client/src/components/images/benchmarking.png b/client/src/components/images/benchmarking.png new file mode 100644 index 0000000000000000000000000000000000000000..835cbfc31563d4c9d0bfbae35a897423d5fb1cc2 GIT binary patch literal 13346 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

inB-=Q>%YeU{bDwF8-=3cf zLDrWoFi)g;@hF;Q<~z)mC)6uY5P5$je&XixVR1 zhVe9&etG?6;Z-@06uCD|5m_})AD{n(wt7qhHDqHFkt;SAop`bOp}vB<-&58VS}8Au z*pz4Fy$UtEHNy_=UlC^YeGLT#FAERBn@U$8R+kr_3_MODOaju+2ZoIU5}B)~T^NN9 z%yIY0K|FyyuE8F3n)QI@87$;|{GQ5R{i6tFQ~1>F1)>+jv&c+0?n;uM10c0z@-X*Y zMiVbZ&>N_nN6qBJT(Ll=7q(0-)Ennwax(!19LUVI`sj)3PH;s2K=EY3Ac#EPeEoYr z(gl3bmjfAd{w>#fx5*>X01Bk=Qsf%&-ap}l^OAQCvR&JFn*MR)G;RGP6}(rv>Ut!& z);KdkC&ASFP!6q~Kf=&G^Ah=F1A&z{JleFS8sDD^k~+?dzXX+h4_>?@2*482JJUnf z$L0+Cs}-9Gx(Z6L7}Uxm50zOAl0beK!hcln3II}?=E>6i-_IQISphW7_ANOKWe$5U z0a?sHO-PH~``a?GG|Dsb0JJb{$_HARDh5T>_wBfVLoz(-IP@mQ?m<+58l2%lq;z12 zsfQv+E%$(rpR8&zs^bf4gzGGAIsr;WHl+K2^AD3w(ul^e7##LbsOX*D`#A&a_7G0+ z6~6*<+a|IMm!2;!_+1DWqo6;}M6~cU6%>RKMuaX*Fu)x_H*1i6CFqa)r68J)J?=)S zK9onCpoXwccgSr6z_Q5kq0*w2Fu_R3fQ4(Ij%tY14M`Vsv`@2X*2uA%a-N^UQi2L8XD6G9;O#$0# zk5tQ+HMe*IPtfi(HHa-Ee@^fAY($Q(Xgac<#b$Ng7282o<+WV9)hD0b@PKl&`8k4c zr_g!+zDJJB2>lA_EJ?b#?tdfF&%WwK0$qxe$v9#cQ5K1OIc$E5)Hx z)s2ex$UES?4E0q^C*k(?PykM|xxUy`|o-^~* zJ9qYt>%&^8iy23J3`nXAz$kKv9GUd`hJ}I{-KIhyabc1*?&3_~&by29IW@sjr?ESH zuH{UO9c% zX5cXwGzYe$p)h=OM&5{|PI@6@j^on0*=B2reN_LbYm2zDo#V~u{83m>={1Xnf8F$1 zBd9)I#w1GKf#h5CsB&SA*Ni;sG9Cv$gbio+PylzSYw}+X(xn5J$P5`>XDqVMwxXU7 zl9T)ycq7Q^f22ElTrpj-cc^bpy%*BmEb&u0K$Bcy#=PFEEX@{QFRd)q2)W2hOOzub zq+F012c|8#%_g;QykPULb?Y!@oZEBu0Wfgq^C~Mb@+r9@Tl?$xcORSv%N*oLy`d#O zM(Ji;p0i$fX=^{KGd2uEYcOy%Vz5>_u`LKDV}Tw!?Vt69EHp)-Am4P9I(ohjm^%u3 zz#%XSkF!ea;#${uPHzL#kM=2-s=(oNuz|a?Wf+GQgj5O_LZ`Y%*Vh?Iwt1DQKiY|J zM0eD@opfmm5JQk7=+Y;9zY-pHCLZlU!05F|C)%dJO)4UHpm<7Kv9c8nBmLoSwuL^; z`_*&$93D>}=v8=npzd~3G~Ix7NSb5K?Fspb2NseCQcGXYtdL2~lEau>VCpvQ*866K zDpr(LzOZI*SZat&(IHW&&)INLn0+d}5V)XJB^!+tM`~FB%_49CdkVTZt`ai|e5l~J zMT5`EZFin;8qVzF@~cJ8GRq75W!+ojqZM|kAagroAT{fpN}h3ErQcgiye-(jY6z!K zbY>PBQog6*1WWaT=z6j9#5`GC| zefMa-uNt`f3RJa0pRw>BD zMWv&MFP44(Y&mqo+?z<4I=8Q=Ig_=tC}X&p@i>&&ZN=Kt%r58B7^%)vTq?>V|HV5K z>WrSVr=YWA2x?2g_;%ZoQPlwMr0Bu$3#(FYo*O~Gt~65)k`FF@?|<^J{!PC$=?zX@ zicl$Ip=&01$U3bIn-(S}G|PKEx;`nBa37j&)M~Exko>~wNzA0XfkAC=&$x|)5Lrcz zCKr6J-LN~oadqenQGW6qd#g^qgsGA5ZfzMI-|lRBYaZr!@+--CKD^``n}pmO3LNsL zg6C6c{*6^fGB7QuLj1)(=m1Gp_Zk(z=i`4Jp%*Z+fH|?>>d>S&{d7HytgmrQ#y z9zgj}ft=87*w(E_%maBsb4m&k#gjSsggRnrn5>#AC7af4cQ`6Q($we!+Dc*E$+X9+ z0&cQ5>}ekfTX{wa%70%jvl`U?_pq{2;H>iBBm9e!$z3X!@R>P*hHFq|xPOL~ytrz# z;aYckTh3HaD}~qr=p*azAV7G1Cgryt_Zf9MAqeopvtoPvc1#h!B~{3C zRuLKuBz$ZEvi;VD(WRHMZrDJh_xn6%0A)y+4rQ6*Wz750jwJcXA6lgCzsxzDGQT@y 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 literal 0 HcmV?d00001 From 745f9e8c7b6aaba7569900633ed6dbb5281a2260 Mon Sep 17 00:00:00 2001 From: Michael Leong Date: Wed, 6 Dec 2023 00:20:06 -0800 Subject: [PATCH 2/4] adjust for mobile view --- client/src/components/Home.js | 83 +++++++++++++++++++---------------- 1 file changed, 46 insertions(+), 37 deletions(-) diff --git a/client/src/components/Home.js b/client/src/components/Home.js index 9654f7b..5fb6b21 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -1,11 +1,19 @@ -import { Box, Button, Grid, Typography, Paper, styled } from "@mui/material"; +import { + Box, + Button, + Grid, + Typography, + Paper, + styled, + useTheme, + useMediaQuery, +} from "@mui/material"; import { useNavigate } from "react-router-dom"; -import image from "./images/berkeleylab.png"; import residentialIcon from "./images/residential.png"; import commercialIcon from "./images/commercial.png"; import benchmarkIcon from "./images/benchmarking.png"; -// visualization +// Visualization const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", ...theme.typography.body2, @@ -15,19 +23,15 @@ const Item = styled(Paper)(({ theme }) => ({ })); export default function Home() { - let navigate = useNavigate(); // navigate to diff pages + let navigate = useNavigate(); // Navigate to different pages + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Check if the device is mobile return ( - - + + {" "} + {/* Adjust padding for mobile */} + Welcome to the Demand Flexibility Assessment Tool (DFAT) @@ -47,12 +50,9 @@ export default function Home() { variant="h6" color="white.main" sx={{ - // fontWeight: "bold", m: 1, marginTop: 1, textAlign: "center", - // backgroundColor: "tertiary.main", // Change the background color to theme primary - // textShadow: "1px 1px #000", }} > DFAT is an open-source web-based tool that estimates the demand @@ -68,15 +68,22 @@ export default function Home() { item xs={12} align="center" - sx={{ display: "flex", justifyContent: "center", gap: "1rem" }} + sx={{ + display: "flex", + justifyContent: "center", + gap: "1rem", + flexDirection: isMobile ? "column" : "row", + }} /* Stack buttons vertically on mobile */ > + {/* Button Components */} + {/* Residential Button */} + + {/* Commercial Button */} + + {/* Benchmarking Button */} @@ -134,13 +145,12 @@ export default function Home() { xs={12} align="left" sx={{ - top: "auto", // Change top to "auto" to move the grid to the bottom of the box - bottom: 0, // Set bottom to 0 to align the grid to the bottom - display: "flex", - alignItems: "center", - marginTop: 20, - width: "100%", // Set the width to 100% - backgroundColor: "primary.main", // Change the background color to theme primary + marginTop: 5, + width: "100%", + backgroundColor: "primary.main", + fontSize: isMobile + ? "0.8rem" + : "1.2rem" /* Adjust font size for mobile */, }} > - {" "} Paper citation: DFAT: A Web-Based Demand Flexibility Assessment - Toolkit for Building-to-Grid Integration,{" "} + Toolkit for Building-to-Grid Integration, Date: Wed, 6 Dec 2023 00:50:02 -0800 Subject: [PATCH 3/4] change a tag color to have more contrast --- client/src/components/Home.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Home.js b/client/src/components/Home.js index 5fb6b21..ec5cbc6 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -164,7 +164,7 @@ export default function Home() { href="https://doi.org/10.1016/j.buildenv.2023.110663" target="_blank" rel="noopener noreferrer" - sx={{ color: "white.main" }} + style={{ color: "#2196f3" }} > https://doi.org/10.1016/j.buildenv.2023.110663 From 2b3e930bb738c9856d48be36b7eaa76e6ecd574c Mon Sep 17 00:00:00 2001 From: rongxinyin Date: Wed, 6 Dec 2023 07:31:45 -0800 Subject: [PATCH 4/4] add paper citations --- client/src/components/Home.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/client/src/components/Home.js b/client/src/components/Home.js index ec5cbc6..caaf278 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -158,8 +158,17 @@ export default function Home() { color="white.main" sx={{ fontSize: "1.2rem" }} > - Paper citation: DFAT: A Web-Based Demand Flexibility Assessment - Toolkit for Building-to-Grid Integration, + Paper Citations: + + + Yin, R., J. Liu, M.A. Piette, J. Xie, M. Pritoni, A. Casillas, L. + Yu, P. Schwartz, Comparing simulated demand flexibility against + actual performance in commercial office buildings, Building and + Environment, 2023.{" "} + + DFAT: A Web-Based Demand Flexibility Assessment Toolkit for + Building-to-Grid Integration.{" "} + + To be submitted to Journal of SoftwareX + +