Overview style or ... edits?

[daUnknownCoder]

Tried on both the git and non git versions, config.js and style.css are copypasted from 'https://github.com/Aylur/ags/tree/main/example/simple-bar', and what all i get is:

Kooha-2023-11-27-22-36-08.webm

and the css for hyprland workspaces doesnt work, idk whats with the css, none of the rices on reddit work [ even though just copy-pastaing...], and idk whats in the middle coz i cant see it...

[Aylur]

try resetting your gtk theme, you might have a custom theme set on your system thats borked

[daUnknownCoder]

try resetting your gtk theme, you might have a custom theme set on your system thats borked

i m using sweet dark, and got this working from your dots thanks, i m using thorium-browser and i have a few problems:

(com.github.Aylur.ags:105595): Gjs-Console-CRITICAL **: 13:11:11.783: Error: can't assign "Thorium-browser" as icon, it is not a file nor a named icon
set icon@resource:///com/github/Aylur/ags/widgets/icon.js:41:31
AgsIcon@resource:///com/github/Aylur/ags/widgets/icon.js:25:1
createCtor/<@resource:///com/github/Aylur/ags/widget.js:22:26
default@file:///home/daUnknownCoder/.config/ags/js/overview/Client.js:22:19
default/widget.update/<@file:///home/daUnknownCoder/.config/ags/js/overview/Workspace.js:49:39
default/widget.update@file:///home/daUnknownCoder/.config/ags/js/overview/Workspace.js:46:14
update/</<@file:///home/daUnknownCoder/.config/ags/js/overview/Overview.js:20:43
update/<@file:///home/daUnknownCoder/.config/ags/js/overview/Overview.js:20:26
_init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266:34

and this :

then

(com.github.Aylur.ags:106139): Gjs-Console-CRITICAL **: 13:15:04.025: Error: can't assign "audio-card-pci" as icon, it is not a file nor a named icon
set icon@resource:///com/github/Aylur/ags/widgets/icon.js:41:31
VolumeIndicator/<.child<.connections<@file:///home/daUnknownCoder/.config/ags/js/quicksettings/widgets/Volume.js:20:1
default/connectTo/id<@resource:///com/github/Aylur/ags/widgets/widget.js:105:65
@resource:///com/github/Aylur/ags/service/audio.js:138:72
changed@resource:///com/github/Aylur/ags/service.js:61:14
Stream/this._ids</<@resource:///com/github/Aylur/ags/service/audio.js:40:18
_init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266:34

i cant get it working, and mind if i ask you if i can remove this dock type thing:

coz i dont know much of js and css and can u tell me how could i run rofi -show drun in the < icon next to the 'wifi' 'bt' 'aud' 'mic' box where the colorpicker is?

and can i use a script where the colorpicker is

the script is python,

#!/usr/bin/python3

import subprocess

from PIL import Image

color = str(subprocess.check_output(["hyprpicker"]))[2:-3]
subprocess.Popen(["wl-copy", color.upper()])

if not color:
    exit(-1)

Image.new(mode="RGB", color=color, size=(64, 64)).save("/tmp/colorpicker.png")
subprocess.Popen(
    [
        "notify-send",
        f"color ({color.upper()}) saved to clipboard",
        "-i",
        "/tmp/colorpicker.png",
    ]
)

so can i use this anywhere coz i looked in the colorpicker.js, these is no notify-send so i cant replace it...

and can i make this calendar thing lil less blurry coz its too messed up?

[Aylur]

moved this issue to my dotfiles, because none of your issues are ags related.

i m using thorium-browser and i have a few problems

your icon theme doesn't have Thorium-browser named icon, you can substitute it to something else in js/options.js, you can look up existing icons by running ags -r "iconBrowser()" in terminal

same with audio-card-pci but for that you need to edit getAudioTypeIcon in js/utils.js

mind if i ask you if i can remove this dock type thing

I am not sure if you mean the dock or applauncher by dock type thing, but you can comment out windows in js/main.js to exclude them

and can u tell me how could i run rofi -show drun in the < icon next to the 'wifi' 'bt' 'aud' 'mic' box where the colorpicker is?

find the widget you want to edit, and look it up on the wiki

can i use a script where the colorpicker is

yes, you can run external scripts

calendar thing lil less blurry coz its too messed up?

its not blurred, its fully transparent, if you want to blur it, you can do so with your compositor

[daUnknownCoder]

its not blurred, its fully transparent, if you want to blur it, you can do so with your compositor

i m using Hyprland

find the widget you want to edit, and look it up on the wiki

i mean this thing, i dont know where its js is or what is the name of it

same with audio-card-pci but for that you need to edit getAudioTypeIcon in js/utils.js

i dowloaded into my downloads dir i wonder how to use it

[Aylur]

this thing

its at js/bar/buttons/OverviewButton.js

[daUnknownCoder]

this thing

its at js/bar/buttons/OverviewButton.js

how to change? i tried

import Utils from "../../utils.js";
    on_clicked: () => Utils.execAsync("rofi", "-show", "drun"),

but its not working...

[Aylur]

you are passing multiple strings, "-show", and "drun" gets ignored

[daUnknownCoder]

you are passing multiple strings, "-show", and "drun" gets ignored

so possible sollution?

[Aylur]

execAsync takes an array

so you should pass an array

Utils.execAsync(["rofi", "-show", "drun"])

[daUnknownCoder]

ok thanks, now help me with this: what to do with this transparency issue, the bg is too transparent, i m on hyprland using arch, and in the second image, one is a youtube vid i m playing but there's always an another empty one which idk how to remove and in the youtube vid or any player the play/pause and the next ad prev buttons are very close to each other and in the second pic where there is the battery thing, it just has a ⚡, can i have the pattery perc too like "55 % ⚡"? and in the second pic, i have this uptime thing which shows "go sleep" idk why

[Aylur]

hyprland layerrules are handled in js/settings/hyprland.js, try debugging from there

there is an mpris interface exposed from a software thats faulty, add its bus name to mpris.black_list in js/options.js

# prints every mpris available
ags -r "(await import('./service/mpris.js')).default.players.map(p => p.busName)"

I can't help with the buttons being too close to each other, I have seen it with other people too, but have no idea what might be the cause

can i have the pattery perc too like "55 % ⚡"

yes, edit the widget in js/quicksettings/widgets/Header.js

[daUnknownCoder]

cant do this :

ags -r "(await import('./service/mpris.js')).default.players.map(p => p.busName)"

ags -r "(await import('./service/mpris.js')).default.players.map(p => p.busName)"

(com.github.Aylur.ags:188476): Gjs-WARNING **: 22:41:20.928: JS ERROR: Exception in method call: RunJs: SyntaxError: missing ) in parenthetical @ resource:///com/github/Aylur/ags/app.js:3:14

(com.github.Aylur.ags:189704): Gjs-CRITICAL **: 22:41:20.929: JS ERROR: Gio.IOErrorEnum: GDBus.Error:org.gnome.gjs.JSError.SyntaxError: missing ) in parenthetical
_proxyInvoker@resource:///org/gnome/gjs/modules/core/overrides/Gio.js:122:46
_makeProxyMethod/<@resource:///org/gnome/gjs/modules/core/overrides/Gio.js:147:30
default@resource:///com/github/Aylur/ags/client.js:48:21
main@resource:///com/github/Aylur/ags/main.js:111:16
@file:///usr/bin/ags:36:31

(com.github.Aylur.ags:189704): Gjs-CRITICAL **: 22:41:20.929: Module file:///usr/bin/ags threw an exception

[daUnknownCoder]

this is the bar right now:

now i want two things, --> in the styling of this button, i increased its width, but it went like this: i mean the icon doesnt come to the center...

this is the overview thing: when i have 10 workspaces: so these are only 8 fitting in the screen this is end-4's dots, for eww: he has it divided into two parts, can we achieve this in ags?

[Aylur]

i mean the icon doesnt come to the center...

hpack: 'center' is what you are looking for

can we achieve this in ags

you can either write some logic to have it split, or just set it to a fixed number with two box under one another

[daUnknownCoder]

hpack: 'center' is what you are looking for

Where? In the overview.js or in the css?

you can either write some logic to have it split, or just set it to a fixed number with two box under one another

Logic? How do you get the whole overview thing in ur system? Like do u use <10 workspaces or ur screen is large?

[Aylur]

Where? In the overview.js or in the css?

in js/bar/buttons/OverviewButton.js on the FontIcon widget

Logic?

If you use a dynamic number of workspaces, you could implement some logic that would split it into rows. If not, just edit js/overview/Overview.js so that instead of one box, it has multiple with the number of Workspaces you want

How do you get the whole overview thing in ur system? Like do u use <10 workspaces or ur screen is large?

I set it to a fixed size of 7, and it doesn't go over my screen

[daUnknownCoder]

If you use a dynamic number of workspaces, you could implement some logic that would split it into rows.

i am not using dynamic workpaces

splitting into rows?

[daUnknownCoder]

@Aylur, it works now, my approach was changing:

    css: `
            min-width: ${1366 * SCALE}px;
            min-height: ${768 * SCALE}px;
        `,

from :

            min-width: ${1920 * SCALE}px;
            min-height: ${1080 * SCALE}px

and the result is :

idk why the icon for thorium browser doesnt work, like in the options.js: i did: ['Thorium-browser', 'Thorium'], // in the title subsititutes - this workss and i tried: ['Thorium-browser', ''], // in the icon substitutes but it doesnt work, image above... i also get:

(com.github.Aylur.ags:339124): Gjs-Console-CRITICAL **: 14:05:37.215: Error: can't assign "" as icon, it is not a file nor a named icon
    set icon@resource:///com/github/Aylur/ags/widgets/icon.js:41:31
    AgsIcon@resource:///com/github/Aylur/ags/widgets/icon.js:25:1
    createCtor/<@resource:///com/github/Aylur/ags/widget.js:22:26
    default@file:///home/daUnknownCoder/.config/ags/js/overview/Client.js:22:19
    default/widget.update/<@file:///home/daUnknownCoder/.config/ags/js/overview/Workspace.js:63:31
    default/widget.update@file:///home/daUnknownCoder/.config/ags/js/overview/Workspace.js:60:8
    update/</<@file:///home/daUnknownCoder/.config/ags/js/overview/Overview.js:20:39
    update/<@file:///home/daUnknownCoder/.config/ags/js/overview/Overview.js:20:20
    _init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266:34

and in the browser thing i have this weirdo out-of-the box thing which is not even on the workspace: and idk what da hell it is

and yeah the extra music player was Caprine idk if its installed or what it is but removing it from the blacklist solved the extra thing

hpack: 'center'

this aint working too: i tried this: in buttons/overviewbutton.js:

import App from 'resource:///com/github/Aylur/ags/app.js';
import PanelButton from '../PanelButton.js';
import FontIcon from '../../misc/FontIcon.js';
import { distroIcon } from '../../variables.js';
import options from '../../options.js';

export default () =>
  PanelButton({
    class_name: 'overview',
    window: 'overview',
    hpack: 'center', // i tried this
    on_clicked: () => App.toggleWindow('overview'),
    content: FontIcon({
      binds: [
        [
          'icon',
          options.bar.icon,
          'value',
          (v) => {
            return v === 'distro-icon' ? distroIcon : v;
          },
        ],
      ],
    }),
  });

but it still is :

and this audio-card-pci also doesnt work i have an svg in ~/Downloads/audio.svg and a png with a same name and location, but idk how to load it

[Aylur]

['Thorium-browser', '']

 is still not a valid named icon, to get a list run

ags -r "imports.gi.Gtk.IconTheme.get_default().list_icons(null)" | tr "," "\n"

i have this weirdo out-of-the box thing

no clue what that might be

in buttons/overviewbutton.js:

not on PanelButton, but in the inner FontIcon

  content: FontIcon({
    vpack: 'center',
    binds: [

and this audio-card-pci also doesnt work i have an svg in ~/Downloads/audio.svg

I wouldn't recommend using an svg file outside of your icon theme, look for an existing named icon instead

[daUnknownCoder]

not on PanelButton, but in the inner FontIcon

export default () =>
  PanelButton({
    class_name: 'overview',
    window: 'overview',
    on_clicked: () => App.toggleWindow('overview'),
    content: FontIcon({
      hpack: 'center',
      vpack: 'center',
      binds: [
        [
          'icon',
          options.bar.icon,
          'value',
          (v) => {
            return v === 'distro-icon' ? distroIcon : v;
          },
        ],
      ],
    }),
  });

i tried too much of logics for splitting into rows and ended up changing its resolution...

[Aylur]

maybe hexpand: true too

[daUnknownCoder]

maybe hexpand: true too

that works,

this thing, i mean the focusedclient.js thing can i change the name to its icon? like can i keep it as a fallback that if there's no icon, then name it? like for kitty term, i have an icon so i replaced it and i dont have an icon for the AGS window so can i do that thing?

and i dont have this temperature thing icon and it always stays 27 degs so what to do?

and yeah, in the quicksettings, when i mute or not mute, when i have my system muted, it still stays on the current volume and doesnt switch to mute

and this uptime thing stays go sleep

[Aylur]

can i

yes

i dont have this temperature thing icon

I have it installed with the gnome-system-monitor package

it always stays 27 degs

set the temperature sys path in options.js

it still stays on the current volume and doesnt switch to mute

https://github.com/Aylur/ags/issues/97

and this uptime thing stays go sleep

you can edit that in variables.js

[daUnknownCoder]

yes

how can i?

gnome-system-monitor

i installed it with no changes, explicitly setting an icon?

https://github.com/Aylur/ags/issues/97

neh didnt get anything; i tried this code:

const VolumeIndicator = (type = 'speaker') => {
    const updateIcon = (icon, type) => {
        if (!Audio[type]) return;

        if (Audio[type].mute) {
            icon.icon = 'audio-volume-muted';
        } else {
            icon.icon =
                type === 'speaker'
                    ? getAudioTypeIcon(Audio[type].icon_name || '')
                    : icons.audio.mic.high;
        }

        icon.tooltip_text = `Volume ${Math.floor(Audio[type].volume * 100)}%`;
    };

    const iconWidget = Widget.Icon({
        connections: [
            [
                Audio,
                icon => {
                    updateIcon(icon, type);
                },
                `${type}-changed`,
            ],
            [
                Audio,
                icon => {
                    updateIcon(icon, type);
                },
                `${type}-mute-changed`,
            ],
        ],
    });

    return Widget.Button({
        on_clicked: () => {
            Audio[type].is_muted = !Audio[type].is_muted;
            // Update the icon after changing the mute state
            updateIcon(iconWidget, type);
            Utils.execAsync('pamixer -t');
        },
        child: iconWidget,
    });
};

in the volume.js, it works only if i click the volume icon and doesnt update when i press XF86AudioMute

now since i have remove Caprine from the black list i get these errors:

(com.github.Aylur.ags:473744): Gjs-CRITICAL **: 14:58:27.480: JS ERROR: TypeError: (intermediate value).mpris.black_list.value.includes is not a function
default/<.binds</<@file:///home/daUnknownCoder/.config/ags/js/quicksettings/widgets/Media.js:110:65
default/<.binds<@file:///home/daUnknownCoder/.config/ags/js/quicksettings/widgets/Media.js:108:26
callback@resource:///com/github/Aylur/ags/widgets/widget.js:121:49
default/connectTo/<@resource:///com/github/Aylur/ags/widgets/widget.js:112:29
_init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266:34

(com.github.Aylur.ags:473744): Gjs-Console-CRITICAL **: 14:58:27.332: Error: can't assign "external-link-symbolic" as icon, it is not a file nor a named icon
set icon@resource:///com/github/Aylur/ags/widgets/icon.js:41:31
AgsIcon@resource:///com/github/Aylur/ags/widgets/icon.js:25:1
createCtor/<@resource:///com/github/Aylur/ags/widget.js:22:26
LinkButton@file:///home/daUnknownCoder/.config/ags/js/about/about.js:25:24
default@file:///home/daUnknownCoder/.config/ags/js/about/about.js:72:25
windows@file:///home/daUnknownCoder/.config/ags/js/main.js:34:5
@file:///home/daUnknownCoder/.config/ags/js/main.js:39:14
_init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:266:34

for about.js external link symbolic

[Aylur]

how can i?

you'll have to figure that out

i installed it with no changes, explicitly setting an icon?

your icon pack doesn't fallback to it then, you could specify a full path to the file, but it won't look good

i tried this code:

I linked you an explanation already, your issue is this line

Audio[type].is_muted = !Audio[type].is_muted;

and probably your keybind for XF86AudioMute

i have remove Caprine

leave the empty array [] there

for about.js external link symbolic

your icon theme doesn't have "external-link-symbolic"

[daUnknownCoder]

you'll have to figure that out

If I could I won't have asked... 🙏 🙏 🙏

your icon pack doesn't fallback to it then, you could specify a full path to the file, but it won't look good

But I can't go on without an icon, Icon browser have a temperature-symbolic icon so can i use that in anyway?

I linked you an explanation already, your issue is this line

Audio[type].is_muted = !Audio[type].is_muted;

So what should I do for that? Like I tried editing the code according to that issue but it doesn't help much...

and probably your keybind for XF86AudioMute

That's just a listener it doesn't matter

leave the empty array [] there

Tried that, no mpris controllers were coming afterwards... Like if I remove the block completely, no mpris thing comes, if I keep it in an empty array, there's a $morris-blacklist or something like that error...

your icon theme doesn't have "external-link-symbolic"

Again any substitute I could use like I have an icon for link...

Sorry I Was out for a few days so couldnt post...