diff --git a/components/ags/config.js b/components/ags/config.js index aa9c12f..2c4e4a6 100644 --- a/components/ags/config.js +++ b/components/ags/config.js @@ -1,14 +1,7 @@ // importing import { Hyprland, Notifications, Mpris, Audio, Battery, SystemTray, App, Widget, Utils, Variable} from './imports.js'; -// import Notifications from './imports.js'; -// import Mpris from './imports.js'; -// import Audio from './imports.js'; -// import Battery from './imports.js'; -// import SystemTray from './imports.js'; -// import App from './imports.js'; -// import Widget from './imports.js'; -// import { Utils } from './imports.js'; -import nowplaying from './service/nowplaying.js'; //; + +import nowplaying from './service/nowplaying.js'; // widgets can be only assigned as a child in one container // so to make a reuseable widget, just make it a function @@ -31,7 +24,35 @@ const battery = Variable(false,{ }] }) +const dominant_color = Variable("#000000",{}); + +function dark_text(color){ + //check limunosity of color and determine if white text will be visible + let tolerence = 0.5; + let r = parseInt(color.slice(1,3),16); + let g = parseInt(color.slice(3,5),16); + let b = parseInt(color.slice(5,7),16); + let limunosity = 0.2126*r + 0.7152*g + 0.0722*b; + return limunosity > 255*tolerence; +} + +function arrremove(arr, value) { + return arr.filter(function(ele){ + return ele != value; + }); +} + +function arradd(arr, value) { + if (arr.includes(value)){ + return arr; + } + arr.push(value); + return arr; +} + + globalThis.battery = battery; +globalThis.dominant_color = dominant_color; let prev_battery = false battery.connect('changed', ({ value }) => { @@ -51,18 +72,16 @@ battery.connect('changed', ({ value }) => { function get_color(){ return Utils.readFileAsync(home + '/.config/hypr/themes/uicolors') .then(content => { - var colors = {} + let colors = {} //split into lines let lines = content.split('\n'); - for (let i = 0; i < lines.length; i++) { - let [key, value] = lines[i].split(':'); + for (const element of lines) { + let [key, value] = element.split(':'); if (key == undefined || value == undefined){ continue; } - //strip key = key.trim(); value = value.trim(); - colors[key] = value; } console.log(colors) @@ -106,31 +125,52 @@ const Workspaces = () => Widget.Box({ className: 'workspaces', children: Array.from({ length: 10 }, (_, i) => i + 1).map(i => Widget.Button({ - child:Widget.Label({label:`${i}`}), + child:Widget.Label({label:`${i}`,}), className: "workspace", onClicked: () => Utils.execAsync(`hyprctl dispatch workspace ${i}`), }) ), - connections: [[Hyprland, box => { + connections: [ + + [dominant_color, self => { + if (dark_text(dominant_color.value)){ + self.className = arrremove(self.className,"light"); + self.className = arradd(self.className,"dark"); + } else { + self.className = arrremove(self.className,"dark"); + self.className = arradd(self.className,"light"); + } + + }], + [Hyprland, box => { //loop through children - for (let i = 0; i < box.children.length; i++) { + for (const element of box.children) { //set the label of the child to the name of the workspace - if(box.children[i].child.label == Hyprland.active.workspace.id){ - box.children[i].className = ["active","workspace"]; + if(element.child.label == Hyprland.active.workspace.id){ + element.className = ["active","workspace"]; } else { - box.children[i].className = ["workspace"]; + element.className = ["workspace"]; } } } ]]}); const Clock = () => Widget.Label({ - className: 'clock', + className: ['clock'], connections: [ // this is what you should do - [1000, self => Utils.execAsync(['date', '+%I:%M']) + [1000, self => Utils.execAsync(['date', '+%I : %M']) .then(date => self.label = date).catch(console.error)], + [dominant_color, self => { + if (dark_text(dominant_color.value)){ + self.className = arrremove(self.className,"light"); + self.className = arradd(self.className,"dark"); + } else { + self.className = arrremove(self.className,"dark"); + self.className = arradd(self.className,"light"); + } + }], ], }); @@ -149,7 +189,18 @@ const Notification = () => Widget.Box({ await new Promise(r => setTimeout(r, 200)); self.label = Notifications.popups[0]?.summary } - }]], + }], + [dominant_color, self => { + if (dark_text(dominant_color.value)){ + self.className = arrremove(self.className,"light"); + self.className = arradd(self.className,"dark"); + } else { + self.className = arrremove(self.className,"dark"); + self.className = arradd(self.className,"light"); + } + + }], + ], }), ], connections: [[Notifications, self => { @@ -162,7 +213,8 @@ const Notification = () => Widget.Box({ } else { self.className = ['notification']; } - }]], + }], + ], }); const is_it_playing = (self) => { @@ -183,7 +235,7 @@ const is_it_playing = (self) => { let NO = false; const Media = () => Widget.Button({ - className: 'media', + className: ['media'], onPrimaryClick: () => Mpris.getPlayer('')?.playPause(), onScrollUp: async (self) => { if (NO){ @@ -220,7 +272,7 @@ const Media = () => Widget.Button({ nowplaying.now_playing = nowplaying.now_playing.slice(1,-1); await new Promise(r => setTimeout(r, 50)); } - await new Promise(r => setTimeout(r, 2000)) + await new Promise(r => setTimeout(r, 1000)) if (nowplaying.now_playing.length == 0){ Utils.execAsync([`${themedir}/scripts/pywal_set`, `--reset`]) .then(out => console.log(out)) @@ -230,7 +282,22 @@ const Media = () => Widget.Button({ }], [nowplaying, self => { self.label = nowplaying.now_playing; - }] + }], + [dominant_color, self => { + if (dark_text(dominant_color.value)){ + self.className = arrremove(self.className,"light"); + self.className = arradd(self.className,"dark"); + } else { + self.className = arrremove(self.className,"dark"); + self.className = arradd(self.className,"light"); + } + + }], + // [100, self => { + // console.log(arradd(self.className,"light")); + // self.className = arradd(self.className,"light"); + // console.log(self.className); + // }] ], }), ] @@ -367,8 +434,8 @@ const Bar = ({ monitor } = {}) => Widget.Window({ monitor, margin: [0, 20], anchor: ['top', 'left', 'right'], - exclusive: true, - layer: "bottom", + exclusive: false, + layer: "top", child: Widget.CenterBox({ startWidget: Left(), centerWidget: Center(), diff --git a/components/ags/style.css b/components/ags/style.css index 26a7c34..e649971 100644 --- a/components/ags/style.css +++ b/components/ags/style.css @@ -2,7 +2,7 @@ * { all:unset; - padding: 2px; + /* padding: 1px; */ } /* Defaults */ @@ -10,6 +10,34 @@ label { font-weight: bolder; } +.workspaces.dark .active{ + color: @cbackground; + text-shadow: 0 0 4px alpha(@cforeground,0.7); +} + +.workspaces.light .active{ + color: @cforeground; + text-shadow: 0 0 4px alpha(@cbackground,0.7); +} + +.workspaces.light, +.workspaces.dark, +.media.paused +.media{ + color: @cforeground; + text-shadow: 0 0 4px alpha(@cbackground,0.7); +} + +.dark{ + color: @cbackground; + text-shadow: 0 0 4px alpha(@cforeground,0.7); +} + +.light{ + color: @cforeground; + text-shadow: 0 0 4px alpha(@cbackground,0.7); +} + .trayitem{ all: unset; } @@ -19,6 +47,7 @@ label { .workspaces button, .notification, .trayitem { + min-width: 20px; background-color: alpha(@cbackground,0.7) ; box-shadow: alpha(@cbackground,0.2) 2 2 5 2px; border-radius: 15px; @@ -27,12 +56,11 @@ label { padding-top: 4px; padding-bottom: 2px; font-weight: bolder; - color: @cforeground ; + /* color: @cforeground ; */ background-size: 100% 100%; background-position: 0% 0%; - text-shadow: 0 0 5px alpha(@cbackground,0.2); - font-size: 15px; - transition: padding 0.4s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in; + font-size: 16px; + transition: padding 0.4s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in,all 0.3s cubic-bezier(.55,-0.68,.48,1.68); } /* Notification */ @@ -86,11 +114,11 @@ label { background-color: #32325c; transition: background 0.3s ease-in; } + .workspaces button.active { padding-right: 20px; padding-left: 20px; padding-bottom: 3px; - color: @cbackground; background-position: 0% 200%; background: radial-gradient( circle, @@ -116,7 +144,7 @@ label { @c12 100%); background-size: 400% 400%; animation: gradient_f 20s ease-in-out infinite; - transition: padding 0.3s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in-out; + transition: padding 0.3s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in-out,all 0.3s cubic-bezier(.55,-0.68,.48,1.68); } /* Center Pill Thing™ */ @@ -137,7 +165,7 @@ label { background-size: 400% 400%; animation: gradient_back 2s cubic-bezier(.72,.39,.21,1) infinite; text-shadow: 0 0 5px alpha(@cbackground,0.2); - color: @cforeground ; + /* color: @cforeground ; */ padding-left: 40px; padding-right: 40px; padding-bottom: 2; @@ -151,7 +179,7 @@ label { background-size: 400% 400%; animation: gradient_next 2s cubic-bezier(.72,.39,.21,1) infinite; text-shadow: 0 0 5px alpha(@cbackground,0.2); - color: @cforeground ; + /* color: @cforeground ; */ padding-left: 40px; padding-right: 40px; padding-bottom: 2; @@ -163,8 +191,6 @@ label { background-image: cross-fade(50% image(radial-gradient(circle, @c2 0%, @c2 6%, @c3 14%, @c4 14%, @c5 18%, @c6 28%, @c6 28%, @c9 58%, @c10 69%, @c11 72%, @c12 73%, @c13 78%, @c14 100%)),url("../../texture.png")); background-size: 400% 400%; animation: gradient_f 9s cubic-bezier(.72,.39,.21,1) infinite; - text-shadow: 0 0 5px alpha(@cforeground,0.4); - color: @cbackground ; padding-left: 40px; padding-right: 40px; padding-bottom: 2; @@ -174,12 +200,11 @@ label { } .media.paused { - background: @cbackground; + background: alpha(@cbackground,0.7); background-size: 400% 400%; animation: gradient_f 9s cubic-bezier(.72,.39,.21,1) infinite; - text-shadow: 0 0 5px alpha(@cbackground,0.2); - color: @c4 ; - font-size: 13px; + /* color: @c4 ; */ + /* font-size: 13px; */ transition-delay: 250ms; transition: padding 1s cubic-bezier(0,1.77,.08,1.49),background 0.2s ease-in-out,font-size 0.5s ease-out; } @@ -257,17 +282,39 @@ label { } .clock { + font-weight: bolder; background: @cforeground; - color: @cbackground; - text-shadow: 0 0 5px alpha(@cforeground,0.2); - background: linear-gradient(118deg, @cforeground 5%, @c1 5%, @c1 20%, @cforeground 20%, @cforeground 40%, @c1 40%, @c1 60%, @cforeground 60%, @cforeground 80%, @c1 80%, @c1 95%, @cforeground 95%); - background-size: 200% 300%; - - animation: gradient_f_nh 4s linear infinite; - padding-top: 5px; + /* color: @cforeground; */ + background-position: 0% 200%; + background: linear-gradient(118deg, @c5 5%, @c3 5%, @c3 20%, @c5 20%, @c5 40%, @c3 40%, @c3 60%, @c5 60%, @c5 80%, @c3 80%, @c3 95%, @c5 95%); + /* background: radial-gradient( + circle, + @c1 0%, + @c2 12%, + @c3 19%, + @c4 20%, + @c5 24%, + @c6 36%, + @c1 37%, + @c2 48%, + @c3 52%, + @c13 52%, + @c14 59%, + @c6 66%, + @c7 67%, + @c8 68%, + @c9 77%, + @c10 78%, + @c11 82%, + @c12 83%, + @c13 90%, + @c14 100%); */ + background-size: 400% 400%; + animation: gradient_f_nh 20s ease-in-out infinite; + /* padding-top: 5px; padding-right: 20px; - padding-left: 20px; + padding-left: 20px; */ } .progress progress { diff --git a/scripts/cover2bg b/scripts/cover2bg index 3008c33..ef5bc7c 100755 --- a/scripts/cover2bg +++ b/scripts/cover2bg @@ -61,6 +61,8 @@ fi convert /tmp/texture.png -alpha set -channel A -evaluate set 5% /tmp/texture.png convert /tmp/bg.png /tmp/texture.png -gravity center -compose overlay -composite /tmp/bg.png +ags -r "dominant_color.value = '$color';" + $HYPRLAND_THEME/scripts/apply_wall /tmp/bg.png