Skip to content

Commit

Permalink
Readme (#567)
Browse files Browse the repository at this point in the history 
* Update readme.

* updates

* Update and fix startup issues.
  • Loading branch information
@Jas-SinghFSU
Jas-SinghFSU authored Dec 21, 2024
1 parent 0101f24 commit e4a5e80
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 169 deletions.
213 changes: 48 additions & 165 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,40 @@
# 🚧 Migrating to Astal and AGSv2 🚧

Hyprpanel is upgrading to AGSv2 and Astal

🔧 No new features or most bugs will be worked on until migration is complete.

<p align="center">
<a href="https://hyprpanel.com" target="_blank" rel="noopener noreferrer">
<img width="180" src="./assets/hyprpanel.png" alt="Hyprpanel logo">
</a>
</p>
<br/>
<p align="center">
<a href="https://hyprpanel.com/getting_started/installation.html"><img src="https://img.shields.io/badge/Wiki-hyprpanel-orange?style=flat&logo=wiki" alt="wiki"></a>
<a href="https://discord.gg/MNpg7Z2b3a"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
</p>
<br/>

# HyprPanel 🚀

A panel built for Hyprland with [AGS](https://github.com/Aylur/ags)
A panel built for Hyprland with [Astal](https://github.com/Aylur/astal)

![HyprPanel1](./assets/hp1.png)
![HyprPanel2](./assets/hp2.png)

> NOTE: If you would like to support the project, please instead [donate to Aylur](https://ko-fi.com/aylur) who put in tremendous effort to build AGS. Hyprpanel likely wouldn't exist without it.
## Installation

The [HyprPanel Wiki](https://hyprpanel.com/getting_started/installation.html) contains in depth instructions for installing the panel and all of its dependencies. The instructions below are general instructions for installing the panel.
## Information

## Requirements
The [HyprPanel Wiki](https://hyprpanel.com/getting_started/installation.html) contains in depth instructions for configuring and installing the panel and all of its dependencies. The instructions below are just the general instructions for installing the panel.

Bun
## Arch

```sh
curl -fsSL https://bun.sh/install | bash && \
sudo ln -s $HOME/.bun/bin/bun /usr/local/bin/bun
```bash
yay -S ags-hyprpanel-git
```

## From Source

### Required

```sh
pipewire

## Resource monitoring modules
aylurs-gtk-shell-git
wireplumber
libgtop

## Bluetooth menu utilities
bluez
bluez-utils

## Copy/Paste utilities
wl-clipboard

## Compiler for sass/scss
dart-sass

## Brightness module for OSD
brightnessctl

## AGS requirements
networkmanager
gnome-bluetooth-3.0
dart-sass
wl-clipboard
upower
gvfs
```

::: warning
HyprPanel will not run without the required dependencies.
:::
**NOTE: HyprPanel will not run without the required dependencies.**

### Optional

Expand All @@ -75,6 +43,9 @@ HyprPanel will not run without the required dependencies.
python
python-gpustat

## To control screen/keyboard brightness
brightnessctl

## Only if a pywal hook from wallpaper changes applied through settings is desired
pywal

Expand Down Expand Up @@ -114,13 +85,13 @@ swww
pacman:

```bash
sudo pacman -S pipewire libgtop bluez bluez-utils btop networkmanager dart-sass wl-clipboard brightnessctl swww python gnome-bluetooth-3.0 pacman-contrib power-profiles-daemon gvfs
sudo pacman -S --needed wireplumber libgtop bluez bluez-utils btop networkmanager dart-sass wl-clipboard brightnessctl swww python upower pacman-contrib power-profiles-daemon gvfs
```

AUR:

```bash
yay -S grimblast-git gpu-screen-recorder hyprpicker matugen-bin python-gpustat aylurs-gtk-shell-git hyprsunset-git hypridle-git
yay -S --needed aylurs-gtk-shell-git grimblast-git gpu-screen-recorder-git hyprpicker matugen-bin python-gpustat hyprsunset-git hypridle-git
```

### Fedora
Expand All @@ -135,14 +106,14 @@ sudo dnf config-manager --save --setopt=copr:copr.fedorainfracloud.org:heus-sueh

DNF:

```bash
sudo dnf install pipewire libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs
```sh
sudo dnf install wireplumber upower libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs nodejs
```

bun:
npm:

```bash
bun install -g sass
npm install -g sass
```

flatpak:
Expand All @@ -163,41 +134,28 @@ sudo dnf install python python3-pip; pip install gpustat pywal

For NixOS/Home-Manager, see [NixOS & Home-Manager instructions](#nixos--home-manager).

## Instructions

### AGS

Once everything is installed you need to put the contents of this repo in `~/.config/ags`.
If you already have something in `~/.config/ags`, it's recommended that you back it up with:

```bash
mv $HOME/.config/ags $HOME/.config/ags.bkup
```
## Installation

Otherwise you can use this command to install the panel:
To install HyprPanel, you can run the following commands:

```bash
git clone https://github.com/Jas-SinghFSU/HyprPanel.git && \
ln -s $(pwd)/HyprPanel $HOME/.config/ags
git clone https://github.com/Jas-SinghFSU/HyprPanel.git
cd HyprPanel
meson setup build
meson compile -C build
meson install -C build
```

### Nerd Fonts

Additionally, you need to ensure that you have a [Nerd Font](https://www.nerdfonts.com/font-downloads) installed for your icons to render properly.
### Installing NerdFonts

### Launch the panel

Afterwards you can run the panel with the following command in your terminal:
HyprPanel uses [Nerdfonts](https://www.nerdfonts.com/) to display icons. You can install them using the following command from within the HyprPanel's `scripts` directory:

```bash
ags
```sh
# Installs the JetBrainsMono NerdFonts used for icons
./scripts/install_fonts.sh
```

Or you can add it to your Hyprland config (hyprland.conf) to auto-start with:

```bash
exec-once = ags
```
If you install the fonts after installing HyperPanel, you will need to restart HyperPanel for the changes to take effect.

### NixOS & Home-Manager

Expand Down Expand Up @@ -263,97 +221,22 @@ wayland.windowManager.hyprland.settings.exec-once = [
```

### Notifications

HyprPanel handles notifications through the AGS built-in notification service. If you're already using a notification daemon such as Dunst or Mako, you may have to stop them to prevent conflicts with HyprPanel.

> NOTE: If your system is in a language other than English, the resource monitor in the dashboard may not work properly.
## Configuration

The HyprPanel comes with a configuration menu which is available by opening the Dashboard menu (click the button in the bar with the default - Arch - icon) and then clicking the Gear icon.

### Size

The panel is automatically scaled based on your font size in `Configuration > General`.

### Specifying bar layouts per monitor
### Launch the panel

To specify layouts for each monitor you can create a JSON object such as:
Afterwards you can run the panel with the following command in your terminal:

```JSON
{
"0": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"1": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"clock",
"notifications"
]
},
"2": {
"left": [
"dashboard",
"workspaces",
"windowtitle"
],
"middle": [
"media"
],
"right": [
"volume",
"network",
"bluetooth",
"systray",
"clock",
"notifications"
]
}
}
```bash
hyprpanel
```

Where each monitor is defined by its index (0, 1, 2 in this case) and each section (left, middle, right) contains one or more of the following modules:

```js
'battery';
'dashboard';
'workspaces';
'windowtitle';
'media';
'notifications';
'volume';
'network';
'bluetooth';
'clock';
'systray';
```
Or you can add it to your Hyprland config (hyprland.conf) to auto-start with:

Since the text-box in the options dialog isn't sufficient, it is recommended that you create this JSON configuration in a text editor elsewhere and paste it into the layout text-box under Configuration > Bar > "Bar Layouts for Monitors".
```bash
exec-once = hyprpanel
```

### Additional Configuration
### Notifications

#### GPU Tracking
HyprPanel handles notifications through the AGS built-in notification service. If you're already using a notification daemon such as Dunst or Mako, you may have to stop them to prevent conflicts with HyprPanel.

If you have an NVidia GPU, you can track your GPU usage in your Dashboard by going to your `Settings > Configuration > Dashboard Menu > Track GPU` and turning it on.
> NOTE: If your system is in a language other than English, the resource monitor in the dashboard may not work properly.
16 changes: 14 additions & 2 deletions src/components/bar/modules/systray/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,16 @@ const MenuDefaultIcon = ({ item }: MenuEntryProps): JSX.Element => {
};

const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => {
const menu = createMenu(item.menuModel, item.actionGroup);
let menu: Gtk.Menu;

const entryBinding = Variable.derive(
[bind(item, 'menuModel'), bind(item, 'actionGroup')],
(menuModel, actionGroup) => {
if (menuModel && actionGroup) {
menu = createMenu(menuModel, actionGroup);
}
},
);

return (
<button
Expand All @@ -51,7 +60,10 @@ const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => {
Notify({ summary: 'App Name', body: item.id });
}
}}
onDestroy={() => menu?.destroy()}
onDestroy={() => {
menu?.destroy();
entryBinding.drop();
}}
>
{child}
</button>
Expand Down
4 changes: 3 additions & 1 deletion src/components/menus/bluetooth/devices/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import { bluetoothService } from 'src/lib/constants/services';
* @returns An array of available Bluetooth devices.
*/
export const getAvailableBluetoothDevices = (): AstalBluetooth.Device[] => {
const availableDevices = bluetoothService.devices
const bluetoothDevices = bluetoothService.get_devices() ?? [];

const availableDevices = bluetoothDevices
.filter((btDev) => btDev.name !== null)
.sort((a, b) => {
if (a.connected || a.paired) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/menus/network/wifi/WirelessAPs/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const dedupeWAPs = (): AstalNetwork.AccessPoint[] => {
return [];
}

const WAPs = networkService.wifi.accessPoints;
const WAPs = networkService.wifi.get_access_points();
const dedupMap: Record<string, AstalNetwork.AccessPoint> = {};

WAPs.forEach((item: AstalNetwork.AccessPoint) => {
Expand Down

0 comments on commit e4a5e80

Please sign in to comment.