low battery alert

README.md

@@ -22,6 +22,8 @@ Includes a Desktop clock, sidebar, and a charging animation.
 
 > **Important**: Before proceeding, open all SCSS files in the project and replace any reference to `colors` with your **username**. Since I haven't found a way to reference the home folder relatively, you'll need to make this change manually to ensure the color scheme is applied correctly.
 
+> **Important**: hypr-widgets have a default color theme But if you need costom colors . create color with pywal and replace in styles/colors.scss 
+
 > **Warning**: Make sure you have **pywal16** installed and properly configured to generate colors. The widgets rely on the color scheme generated by **pywal16**, so ensure it is set up before using the widgets.
 
 ## Installation
@@ -43,11 +45,11 @@ Includes a Desktop clock, sidebar, and a charging animation.
 
     **Note**: If you already have shaders enabled in your Hyprland setup, this may cause a conflict. Ensure to resolve any potential conflicts accordingly.
 
-
 ## Running the Widgets
 
 Once everything is set up, you can run the widgets with:
 
 ```bash
-ags run
+ags run 
 ```
+

app.ts

@@ -3,14 +3,19 @@ import style from "./style.scss";
 import DesktopClock from "./widget/DesktopClock";
 import Bar from "./widget/Bar";
 import ChargingAlert from "./widget/ChargingAlert";
+import LowBatteryAlert from "./widget/LowBatteryAlert";
+
+
+
 
 App.start({
   css: style,
   main() {
     App.get_monitors().forEach((gdkmonitor) => {
-      Bar(gdkmonitor);
+      //Bar(gdkmonitor);
       DesktopClock(gdkmonitor);
       ChargingAlert(gdkmonitor);
+      LowBatteryAlert(gdkmonitor);
     });
   },
 });

style.scss

@@ -1,6 +1,7 @@
 @use "./styles/DesktopClock.scss";
 @use "./styles/Bar.scss";
 @use "./styles/Charging.scss";
+@use "./styles/LowBatteryAlert.scss";
 
 window.Bar {
     background: transparent;

styles/Bar.scss

@@ -1,4 +1,4 @@
-@use "/home/shreyas/.cache/wal/colors.scss" as wal;
+@use "./colors.scss" as wal;
 
 .bar-container {
     background: wal.$background;

styles/Charging.scss

@@ -1,4 +1,4 @@
-@use "/home/shreyas/.cache/wal/colors.scss" as wal;
+@use "./colors.scss" as wal;
 
 .charging-box {
     border: 1px solid rgba(wal.$foreground, 0.3);

styles/DesktopClock.scss

@@ -1,13 +1,25 @@
-@use "/home/shreyas/.cache/wal/colors.scss" as wal;
+@use "./colors.scss" as wal;
 
 .clock-container {
     font-weight: bold;
     font-family: Electroharmonix;
     color: wal.$background;
+
+
 }
 .clock-time {
-    font-size: 100px;
+    font-size: 75px;
+    text-shadow: 
+    -1px -1px 0 wal.$foreground,
+     1px -1px 0 wal.$foreground,
+    -1px  1px 0 wal.$foreground,
+     1px  1px 0 wal.$foreground; 
 }
 .clock-date {
     font-size: 25px;
+    text-shadow: 
+    -1px -1px 0 rgba(wal.$foreground,0.5),
+     1px -1px 0 rgba(wal.$foreground,0.5),
+    -1px  1px 0 rgba(wal.$foreground,0.5),
+     1px  1px 0 rgba(wal.$foreground,0.5); 
 }

styles/LowBatteryAlert.scss

@@ -0,0 +1,14 @@
+@use "./colors.scss" as wal;
+
+.low-battery-box {
+    border: 4px solid rgba(#ff0000, 0.3);
+    background: wal.$background;
+    min-width: 200px;
+    min-height: 200px;
+    border-radius: 50%;
+    label {
+        font-family: "Electroharmonix", Times, serif;
+        color: wal.$color6;
+        font-size: 3rem;
+    }
+}

styles/colors.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/abancp/Pictures/wallpapers/wallpapers/City/m01.jpg";
+
+// Special
+$background: #071F34;
+$foreground: #dba089;
+$cursor: #dba089;
+
+// Colors
+$color0: #071F34;
+$color1: #302F41;
+$color2: #4B3641;
+$color3: #6B4243;
+$color4: #865636;
+$color5: #AE4C2D;
+$color6: #85613B;
+$color7: #dba089;
+$color8: #99705f;
+$color9: #302F41;
+$color10: #4B3641;
+$color11: #6B4243;
+$color12: #865636;
+$color13: #AE4C2D;
+$color14: #85613B;
+$color15: #dba089;

widget/ChargingAlert.tsx

@@ -32,7 +32,7 @@ function stopAnimations() {
   fadeInId = fadeOutId = timeoutId = 0;
 }
 
-function fadeIn(window: Gtk.Window) {
+export function fadeIn(window: Gtk.Window) {
   stopAnimations();
   window.opacity = 0;
   window.visible = true;
@@ -53,7 +53,7 @@ function fadeIn(window: Gtk.Window) {
   });
 }
 
-function fadeOut(window: Gtk.Window) {
+export function fadeOut(window: Gtk.Window) {
   let opacity = 1;
   const interval = 20;
   const step = 0.05;
@@ -132,5 +132,6 @@ export default function ChargingAlert(gdkmonitor: Gdk.Monitor) {
     });
   });
 
+
   return alertWindow;
 }

widget/LowBatteryAlert.tsx

@@ -0,0 +1,74 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import Battery from "gi://AstalBattery";
+import { bind } from "astal";
+import Gio from "gi://Gio";
+import GLib from "gi://GLib";
+import {playSound,fadeIn,fadeOut,exec} from "./ChargingAlert.tsx"
+
+
+const battery = Battery.get_default()
+let alertWindow = null;
+let fadeInId = 0;
+let fadeOutId = 0;
+let timeoutId = 0;
+
+export default function LowBatteryAlert(gdkmonitor: Gdk.Monitor) {
+  const battery = Battery.get_default();
+  const homeDir = GLib.get_home_dir();
+
+  const batteryPercentage = bind(battery, "percentage").as(
+    (val) => `${(val * 100).toFixed(0)}%`,
+  );
+
+  const chargingIcon = bind(battery, "charging").as((val) => (val ? "󰂄" : "󰚦"));
+
+  const labelClass = bind(battery, "charging").as(
+    (val) => `charging-label${val ? "" : " not"}`,
+  );
+
+  alertWindow = (
+    <window
+      className="charging-widget"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.IGNORE}
+      application={App}
+      layer={Astal.Layer.TOP}
+      visible={false}
+      opacity={0}
+      title="Charging Alert"
+    >
+      <box className="low-battery-box">
+        <box
+          halign={Gtk.Align.CENTER}
+          valign={Gtk.Align.CENTER}
+          spacing={10}
+          hexpand={true}
+          vexpand={true}
+        >
+          <label label={chargingIcon} className="charging-label" />
+          <label label={batteryPercentage} className={labelClass} />
+        </box>
+      </box>
+    </window>
+  );
+
+
+  battery.connect("notify::percentage", () => {
+    const per = battery.percentage;
+    log(per)
+    if(per == 0.15 && !battery.charging){
+    playSound(`~/.config/ags/audio/unplug.mp3`);
+
+    fadeIn(alertWindow);
+
+    timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2500, () => {
+      fadeOut(alertWindow);
+      timeoutId = 0;
+      return GLib.SOURCE_REMOVE;
+    });
+    }
+      });
+
+
+  return alertWindow;
+}