Suggestion for your own ags config

[cafetestrest]

Hi @Aylur , I know that we can implement a custom widgets that suit us, have you ever tough about creating a weather widget for your own setup?

Also, there is a weather_key in ags/.gitignore file, which might hint into weather widget. Anyhow, I would appreciate a great looking weather widget for ags :smiley:

[Aylur]

that is a left over from my eww setup. I might do it just to fill some space though

[daUnknownCoder]

Hi @Aylur , I know that we can implement a custom widgets that suit us, have you ever tough about creating a weather widget for your own setup?

i have a close thing to what he might have done:

https://github.com/Aylur/dotfiles/assets/84800625/66833382-bbae-446a-9d9e-e90cb1f65763

this is the code: main Weather.js to be put in ~/.config/ags/js/bar/buttons/Weather.js

import { Widget, Variable } from '../../imports.js';
import App from 'resource:///com/github/Aylur/ags/app.js';
import PanelButton from '../PanelButton.js';
import Gdk from 'gi://Gdk';

const weather = Variable(
    {},
    {
        poll: [
            30000,
            `python ${App.configDir}/assets/weather`,
            out => JSON.parse(out),
        ],
    }
);

export const Weather = () =>
    PanelButton({
        class_name: 'weather',
        content: Widget.Label({
            binds: [['label', weather, 'value', value => value.text || '󰇘']],
        }),
        window: 'weather-tooltip',
        connections: [
            [
                weather,
                (self, value) => {
                    if (value) {
                        self.set_tooltip_text(value.tooltip || 'Weather Data');
                    }
                },
            ],
        ],
        on_primary_click: btn => {
            let menu = Widget.Menu({
                children: [
                    Widget.MenuItem({
                        child: Widget.Label({
                            label: weather.value.tooltip || '󰇘',
                            use_markup: true, // Enable Pango markup
                        }),
                    }),
                ],
            });

            menu.popup_at_widget(
                btn,
                Gdk.Gravity.SOUTH,
                Gdk.Gravity.NORTH,
                null
            );
        },
    });

imports.js to be put in ~/.config/ags/js/

const resource = file => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async file => (await import(resource(file))).default;
const service = async file => await require(`service/${file}`);

export const App = await require('app');
export const Widget = await require('widget');
export const Service = await require('service');
export const Variable = await require('variable');
export const Utils = await import(resource('utils'));

export const Applications = await service('applications');
export const Audio = await service('audio');
export const Battery = await service('battery');
export const Bluetooth = await service('bluetooth');
export const Hyprland = await service('hyprland');
export const Mpris = await service('mpris');
export const Network = await service('network');
export const Notifications = await service('notifications');
export const SystemTray = await service('systemtray');

see the code was copied from @PoSayDone's dotfiles and then refactored and edited a little bit for a better view.

[cafetestrest]

Perhaps a suggestion of what I did while back, but I just over-complicated the logic :)

[daUnknownCoder]

Perhaps a suggestion of what I did while back, but I just over-complicated the logic :)

omg thats way better than mine can i get the code?

[daUnknownCoder]

Perhaps a suggestion of what I did while back, but I just over-complicated the logic :)

mine looks like this:

[cafetestrest]

omg thats way better than mine can i get the code?

They are already public just a mess in the files, I think this is all of the required files, but could be more.

ags:

• weather service: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/services/weather.js
• weather popup window: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/dashboard/Weather.js
• weather widget logic: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/bar/buttons/Weather.js
• add it in topbar: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/bar/TopBar.js
• add it in QS: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/quicksettings/QuickSettings.js
• add service in globals.js: https://github.com/cafetestrest/nixos/blob/main/config/ags/js/settings/globals.js
• weather scss: https://github.com/cafetestrest/nixos/blob/main/config/ags/scss/widgets/dashboard.scss

weather bash script:

• https://github.com/cafetestrest/nixos/blob/main/config/scripts/openweathermap.sh
• you need to create your own file for providing location and api key or update the code to hard-code it (ConfigFile variable in openweathermap.sh)