Merge pull request #55 from firelab/opacity

Add opacity slider

Author: robertmcabee

frontend/src/App.jsx

@@ -29,6 +29,7 @@ export default function App() {
   );
   const [timezone, setTimezone] = useState(dayjs.tz.guess());
   const [selectedDuration, setSelectedDuration] = useState("60");
+  const [geotiffOpacity, setGeotiffOpacity] = useState("80");
 
   // API State
   const [jobStatus, setJobStatus] = useState("NONE");
@@ -133,6 +134,7 @@ export default function App() {
         );
         const urls = await Promise.all(promises);
         setFrames(urls);
+        setIsPlaying(true);
         console.log("Frames fetched successfully: ", urls);
       } catch (err) {
         console.error("Error fetching frames:", err);
@@ -297,7 +299,11 @@ export default function App() {
             className="w-full max-w-92 h-14"
             onClick={fetchRadarData}
             variant="contained"
-            loading={jobStatus === "REQUESTED" || jobStatus === "PROCESSING" || jobStatus === "PENDING"}
+            loading={
+              jobStatus === "REQUESTED" ||
+              jobStatus === "PROCESSING" ||
+              jobStatus === "PENDING"
+            }
           >
             Get Radar Data
           </Button>
@@ -318,36 +324,73 @@ export default function App() {
           {/* The CSS is a little cursed. */}
           <div className="flex h-full items-end">
             <div className=" flex md:min-w-[calc(100vw-1rem)] md:pl-92 z-999 w-full">
-              {numFrames !== 0 && <div className="flex items-center w-full max-w-[1000px] bg-white p-2 rounded-full md:shadow-2xl md:mr-4 md:pr-4">
-                <button
-                  type="button"
-                  onClick={() => setIsPlaying(!isPlaying)}
-                  className="mr-4 cursor-pointer text-white rounded-full bg-[#1976d2] hover:bg-[#1565c0] shadow hover:shadow-lg transition-all flex p-3 h-max"
-                >
-                  {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
-                </button>
-                <Slider
-                  value={currentFrameIndex}
-                  min={0}
-                  max={frames.length > 0 ? frames.length - 1 : 0}
-                  step={1}
-                  onChange={handleSliderChange}
-                  valueLabelDisplay="auto"
-                  marks={frames.map((_, i) => ({ value: i }))}
-                />
-              </div>}
+              {numFrames !== 0 && (
+                <div className="flex flex-col items-center w-full max-w-[800px] bg-white p-2 rounded-xl md:shadow-2xl md:mr-4 md:pr-4">
+                  <div className="flex w-full items-center">
+                    <button
+                      type="button"
+                      onClick={() => setIsPlaying(!isPlaying)}
+                      className="mr-6 ml-2 cursor-pointer text-white rounded-full bg-[#1976d2] hover:bg-[#1565c0] shadow hover:shadow-lg transition-all flex p-3 h-max"
+                    >
+                      {isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
+                    </button>
+                    <Slider
+                      value={currentFrameIndex}
+                      min={0}
+                      max={frames.length > 0 ? frames.length - 1 : 0}
+                      step={1}
+                      onChange={handleSliderChange}
+                      valueLabelDisplay="auto"
+                      marks={frames.map((_, i) => ({ value: i }))}
+                    />
+                  </div>
+                  <div className="flex w-full pt-4">
+                    <div className="flex items-center w-1/2">
+                      <p className="min-w-fit px-3 text-sm">Opacity</p>
+                      <Slider
+                        value={geotiffOpacity}
+                        min={0}
+                        max={100}
+                        step={1}
+                        onChange={(event, newValue) =>
+                          setGeotiffOpacity(newValue)
+                        }
+                        valueLabelDisplay="auto"
+                      />
+                      <p className="min-w-fit px-3">{geotiffOpacity}%</p>
+                    </div>
+                    <div className="w-1/2">
+                      {/*TODO: Actual timestamp will go here: */}
+                      <p className="text-sm text-right">
+                        {selectedDateTime
+                          .tz(timezone)
+                          .format("YYYY-MM-DD HH:mm z")}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
 
         <div className="bg-gray-50 min-h-100 w-full">
-          <div className={jobStatus === "PROCESSING" || jobStatus === "REQUESTED" || jobStatus === "PENDING" ? "opacity-50" : ""}>
+          <div
+            className={
+              jobStatus === "PROCESSING" ||
+              jobStatus === "REQUESTED" ||
+              jobStatus === "PENDING"
+                ? "opacity-50"
+                : ""
+            }
+          >
             <LeafletMap
               stations={stations}
               selectedStation={selectedStation}
               setSelectedStation={setSelectedStation}
               frames={frames}
               currentFrameIndex={currentFrameIndex}
+              opacity={geotiffOpacity}
             />
           </div>
         </div>

frontend/src/components/GeoTiffAnimation.jsx

@@ -3,7 +3,7 @@ import L from "leaflet";
 import { useEffect, useState } from "react";
 import { ImageOverlay } from "react-leaflet";
 
-export default function GeotiffAnimation({ frames, currentIndex }) {
+export default function GeotiffAnimation({ frames, currentIndex, opacity }) {
   const [frameData, setFrameData] = useState([]);
   const [loading, setLoading] = useState(true);
 
@@ -76,7 +76,7 @@ export default function GeotiffAnimation({ frames, currentIndex }) {
       url={frameData[currentIndex].url}
       bounds={frameData[currentIndex].bounds}
       zIndex={1000}
-      opacity={0.7}
+      opacity={opacity / 100}
     />
   );
 }

frontend/src/components/LeafletMap.jsx

@@ -27,6 +27,7 @@ export default function LeafletMap({
   setSelectedStation,
   frames = [],
   currentFrameIndex,
+  opacity
 }) {
   const [map, setMap] = useState(null);
   const [mapLatLng, setMapLatLng] = useState({ lat: 40.0, lng: -98.0 });
@@ -88,7 +89,7 @@ export default function LeafletMap({
             </Marker>
           );
         })}
-        <GeoTiffAnimation frames={frames} currentIndex={currentFrameIndex} />
+        <GeoTiffAnimation frames={frames} currentIndex={currentFrameIndex} opacity={opacity} />
       </MapContainer>
     </div>
   );