feat: add a cycling power overlay editor and update the home page and readme

README.md

@@ -136,6 +136,13 @@ a bluetooth device connected to the beacon app.
 
 `https://overlays.rtirl.com/cycling_cadence/rpm.html?key=<YOUR_PULL_KEY>`
 
+## Cycling Power
+
+This overlay renders the cycling power in watts (W). This requires a bluetooth
+device connected to the beacon app.
+
+`https://overlays.rtirl.com/power/wattage.html?key=<YOUR_PULL_KEY>`
+
 ## StreamElements
 
 If you would like to display RealtimeIRL data using StreamElements overlays, you will need to add a Custom widget and then add the iFrame to the HTML section. (Settings > Open Editor)

web-editor/src/App.js

@@ -22,6 +22,7 @@ import SpeedEditor from "./screen/SpeedEditor";
 import WeatherEditor from "./screen/WeatherEditor";
 import HeartRateEditor from "./screen/HeartRateEditor";
 import CyclingCadenceEditor from "./screen/CyclingCadenceEditor";
+import CyclingPowerEditor from "./screen/CyclingPowerEditor";
 import editorTheme from "./theme/editorTheme";
 
 function useQuery() {
@@ -200,6 +201,18 @@ function App() {
                 />
               }
             />
+            <Route
+              exact
+              path="/cycling_power"
+              element={
+                <CyclingPowerEditor
+                  pullKey={pullKey}
+                  onPullKeyChange={setPullKey}
+                  textStyle={textStyle}
+                  onTextStyleChange={setTextStyle}
+                />
+              }
+            />
           </Routes>
         </Stack>
       </ThemeProvider>

web-editor/src/screen/CyclingPowerEditor.jsx

@@ -0,0 +1,67 @@
+import { Box, Grid, Typography } from "@mui/material";
+import OverlayExportPanel from "../component/OverlayExportPanel";
+import PullKeyInput from "../component/PullKeyInput";
+import TextOverlayPreview from "../component/TextOverlayPreview";
+import { TextSettings } from "../component/TextSettings";
+import { scrollbarStyles } from "../theme/editorTheme";
+
+function CyclingPowerEditor({
+  pullKey,
+  onPullKeyChange,
+  textStyle,
+  onTextStyleChange,
+}) {
+  const url = `https://overlays.rtirl.com/power/wattage.html?key=${pullKey.value}`;
+
+  return (
+    <Grid container columns={{ xs: 1, md: 12 }} direction="row">
+      <Grid
+        item
+        xs={1}
+        md={2.5}
+        sx={{
+          overflow: "auto",
+          height: "100vh",
+          ...scrollbarStyles,
+        }}
+      >
+        <Box
+          style={{
+            height: "max-content",
+          }}
+          borderRight={1}
+          borderBottom={1}
+          borderColor="primary.border"
+          backgroundColor="primary.main"
+          textAlign="left"
+        >
+          <PullKeyInput pullKey={pullKey} onKeyChange={onPullKeyChange} />
+
+          <Box bgcolor="black" sx={{ marginTop: "12px" }}>
+            <Typography sx={{ paddingLeft: "24px", paddingTop: "10px" }}>
+              Export
+            </Typography>
+            <OverlayExportPanel
+              overlayDescription="Cycling Power Overlay URL"
+              isExportable={pullKey.valid}
+              url={url}
+              textDivCSS={textStyle}
+              type="cycling_power_overlay"
+            />
+          </Box>
+          <TextSettings
+            textDivCSS={textStyle}
+            setTextDivCSS={onTextStyleChange}
+          />
+        </Box>
+      </Grid>
+      <Grid item xs={1} md={9.5} lg={12}>
+        <Box padding={1} paddingBottom={0}>
+          <TextOverlayPreview text={`250 W`} textDivCSS={textStyle} />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default CyclingPowerEditor;

web-editor/src/screen/Home.jsx

@@ -92,6 +92,11 @@ const pages = [
     route: "/cycling_cadence",
     text: "75 rpm",
   },
+  {
+    name: "Cycling Power",
+    route: "/cycling_power",
+    text: "250 W",
+  },
 ];
 
 export const Home = (props) => {