diff --git a/README.md b/README.md index 4a79dbd..0aa238a 100644 --- a/README.md +++ b/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 ``` + diff --git a/app.ts b/app.ts index 37fe76f..7745582 100644 --- a/app.ts +++ b/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); }); }, }); diff --git a/style.scss b/style.scss index 742918e..b03c8c2 100644 --- a/style.scss +++ b/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; diff --git a/styles/Bar.scss b/styles/Bar.scss index 389b9d3..10ed5f2 100644 --- a/styles/Bar.scss +++ b/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; diff --git a/styles/Charging.scss b/styles/Charging.scss index e441105..97b4f06 100644 --- a/styles/Charging.scss +++ b/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); diff --git a/styles/DesktopClock.scss b/styles/DesktopClock.scss index c3716fb..17be149 100644 --- a/styles/DesktopClock.scss +++ b/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); } diff --git a/styles/LowBatteryAlert.scss b/styles/LowBatteryAlert.scss new file mode 100644 index 0000000..3c2f24d --- /dev/null +++ b/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; + } +} diff --git a/styles/colors.scss b/styles/colors.scss new file mode 100644 index 0000000..8835be4 --- /dev/null +++ b/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; diff --git a/widget/ChargingAlert.tsx b/widget/ChargingAlert.tsx index a99b6a6..6eb6d12 100644 --- a/widget/ChargingAlert.tsx +++ b/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; } diff --git a/widget/LowBatteryAlert.tsx b/widget/LowBatteryAlert.tsx new file mode 100644 index 0000000..8c0a16f --- /dev/null +++ b/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 = ( + + + + + + + ); + + + 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; +}