Add mostly final ags config
This commit is contained in:
parent
c310042564
commit
bce65f6835
GPG key ID:
B684FD451B692E04
23 changed files with 999 additions and 156 deletions
|
|
@ -0,0 +1,41 @@
|
|||
import { date } from "../../state.js";
|
||||
|
||||
function BlinkingDots() {
|
||||
return Widget.Label({
|
||||
class_name: "blinking-dots",
|
||||
label: ":",
|
||||
});
|
||||
}
|
||||
|
||||
export function Clock() {
|
||||
return Widget.Box({
|
||||
children: [
|
||||
Widget.Box({ hexpand: true, hpack: "fill" }), // Separator
|
||||
Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: date.bind().as((d) => {
|
||||
return d.split(" ")[0];
|
||||
}),
|
||||
}),
|
||||
BlinkingDots(),
|
||||
Widget.Label({
|
||||
label: date.bind().as((d) => {
|
||||
return d.split(" ")[1];
|
||||
}),
|
||||
}),
|
||||
BlinkingDots(),
|
||||
Widget.Label({
|
||||
label: date.bind().as((d) => {
|
||||
return d.split(" ")[2];
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({ hexpand: true, hpack: "fill" }), // Separator
|
||||
],
|
||||
class_names: ["clock", "clock-big"],
|
||||
hpack: "fill",
|
||||
spacing: 8,
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
const mpris = await Service.import("mpris");
|
||||
const players = mpris.bind("players");
|
||||
|
||||
// TODO: rework
|
||||
export const currently_playing_controller = Widget.Box({
|
||||
vertical: true,
|
||||
visible: players.as((p) => p.length > 0),
|
||||
children: players.as((p) => p.map(CurrentlyPlaying)),
|
||||
});
|
||||
|
||||
function CurrentlyPlaying(player) {
|
||||
return Widget.Box({
|
||||
class_name: "currently-playing-big",
|
||||
css: player.bind("cover_path").as((url) => {
|
||||
if (url == undefined) {
|
||||
return "";
|
||||
}
|
||||
console.log(url);
|
||||
return `
|
||||
background-image: url('${url}');
|
||||
background-blend-mode: darken;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
`;
|
||||
}),
|
||||
spacing: 4,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "album-art-big",
|
||||
css: player.bind("cover_path").as((url) => {
|
||||
if (url == undefined) {
|
||||
return `
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-image: url('${App.configDir}/assets/music-symbolic.svg');
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
`;
|
||||
}
|
||||
return `background-image: url('${url}'); background-size: cover;`;
|
||||
}),
|
||||
}),
|
||||
Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "currently-playing-title",
|
||||
label: player.bind("track-title"),
|
||||
xalign: 0.5,
|
||||
hexpand: true,
|
||||
truncate: "end",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "currently-playing-artists",
|
||||
label: player.bind("track-artists").as((artists) => {
|
||||
return artists.join(", ");
|
||||
}),
|
||||
xalign: 0.5,
|
||||
hexpand: true,
|
||||
truncate: "end",
|
||||
}),
|
||||
],
|
||||
vpack: "center",
|
||||
vertical: true,
|
||||
}),
|
||||
// Widget.Icon({
|
||||
// class_name: "playback-status",
|
||||
// icon: player.bind("play-back-status").as((status) => {
|
||||
// if (status == "Playing") {
|
||||
// return "media-playback-start";
|
||||
// } else if (status == "Paused") {
|
||||
// return "media-playback-pause";
|
||||
// }
|
||||
// return "";
|
||||
// }),
|
||||
// }),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { Clock } from "./big-clock.js";
|
||||
import { currently_playing_controller } from "./currently-playing.js";
|
||||
import { ProfileBlock } from "./profile-block.js";
|
||||
import {
|
||||
graphics_card_usage,
|
||||
memory_usage,
|
||||
processor_usage,
|
||||
volume_widget,
|
||||
} from "./system-stats-big.js";
|
||||
import { workspaces } from "./workspaces.js";
|
||||
import { on_window_event } from "../../state.js";
|
||||
|
||||
export const extended_bar = Widget.Window({
|
||||
name: "bar_extended",
|
||||
anchor: ["left", "top", "bottom"],
|
||||
margins: [4, 0, 4, 4],
|
||||
child: Widget.Box({
|
||||
class_names: ["bar", "extended_bar"],
|
||||
vpack: "fill",
|
||||
spacing: 6,
|
||||
vertical: true,
|
||||
children: [
|
||||
ProfileBlock(),
|
||||
workspaces,
|
||||
Widget.Box({ expand: true, vpack: "fill" }), // Separator
|
||||
currently_playing_controller,
|
||||
processor_usage,
|
||||
memory_usage,
|
||||
graphics_card_usage,
|
||||
volume_widget,
|
||||
Widget.Calendar({}),
|
||||
Clock(),
|
||||
],
|
||||
}),
|
||||
exclusivity: "ignore",
|
||||
visible: false,
|
||||
layer: "overlay",
|
||||
setup: (self) => {
|
||||
self.hook(App, (_, window_name, visible) => {
|
||||
if (window_name == self.name) {
|
||||
on_window_event(_, window_name, visible);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { ProfilePicture } from "../bar/profile-picture.js";
|
||||
import { CURRENT_USER, HOSTNAME } from "../../state.js";
|
||||
|
||||
const CURRENT_WALLPAPER_PATH =
|
||||
"/home/avery/.local/share/wallpapers/.current_path";
|
||||
|
||||
const wallpaperPath = Variable(Utils.readFile(CURRENT_WALLPAPER_PATH));
|
||||
|
||||
const wallpaperMonitor = Utils.monitorFile(
|
||||
CURRENT_WALLPAPER_PATH,
|
||||
(file, event) => {
|
||||
if (event === 1) {
|
||||
wallpaperPath.value = Utils.readFile(file);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export function ProfileBlock() {
|
||||
return Widget.Box({
|
||||
class_name: "profile_block",
|
||||
css: wallpaperPath.bind().as((path) => {
|
||||
path =
|
||||
path
|
||||
.replace("\n", "")
|
||||
.replace("/", "\\/")
|
||||
.replace("wallpapers", "wallpaper_thumbnails") + ".jpg";
|
||||
return `
|
||||
background-image: url('${path}');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
`;
|
||||
}),
|
||||
spacing: 8,
|
||||
children: [
|
||||
ProfilePicture(40),
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
vpack: "center",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "username",
|
||||
label: CURRENT_USER.real_name,
|
||||
xalign: 0,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "hostname",
|
||||
label: HOSTNAME,
|
||||
xalign: 0,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
import cpu from "../../services/cpu.js";
|
||||
import ram from "../../services/ram.js";
|
||||
import gpu from "../../services/gpu.js";
|
||||
const { speaker } = await Service.import("audio");
|
||||
|
||||
const PROCESSOR_NAME = Utils.exec(
|
||||
'bash -c \'cat /proc/cpuinfo | grep "model name" | head -n 1 | cut -d ":" -f 2 | cut -d " " -f 3,4,5\'',
|
||||
);
|
||||
const GRAPHICS_CARD_NAME = "Radeon RX 6700 XT";
|
||||
|
||||
export const processor_usage = Widget.Box({
|
||||
class_names: ["system-stats", "system-stats-big"],
|
||||
css: cpu.bind("current-usage").as((usage) => {
|
||||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
children: [
|
||||
Widget.Icon({
|
||||
class_names: ["system-stats-icon"],
|
||||
icon: "microchip-symbolic",
|
||||
size: 16,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-title",
|
||||
label: PROCESSOR_NAME,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-text-big",
|
||||
hexpand: true,
|
||||
xalign: 1,
|
||||
label: cpu.bind("current-usage").as((usage) => {
|
||||
return `${(usage * 100).toFixed(0)}% (${cpu.temperature.toFixed(0)}ºC)`;
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
export const memory_usage = Widget.Box({
|
||||
class_names: ["system-stats", "system-stats-big"],
|
||||
css: ram.bind("current-usage-percentage").as((usage) => {
|
||||
let level = (usage * 100).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
children: [
|
||||
Widget.Icon({
|
||||
class_names: ["system-stats-icon"],
|
||||
icon: "ram-custom-symbolic",
|
||||
size: 16,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-title",
|
||||
label: "Memoria",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-text-big",
|
||||
hexpand: true,
|
||||
xalign: 1,
|
||||
label: ram.bind("current-usage").as((usage) => {
|
||||
let usageGb = (usage / 1024 ** 2).toFixed(2);
|
||||
let totalGb = (ram.total_available / 1024 ** 2).toFixed(2);
|
||||
return `${usageGb}/${totalGb}GiB (${(ram.current_usage_percentage * 100).toFixed(2)}%)`;
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
export const graphics_card_usage = Widget.Box({
|
||||
class_names: ["system-stats", "system-stats-big"],
|
||||
css: gpu.bind("current-usage").as((usage) => {
|
||||
var level = Number(usage).toFixed(0);
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
)`;
|
||||
}),
|
||||
spacing: 6,
|
||||
children: [
|
||||
Widget.Icon({
|
||||
class_names: ["system-stats-icon"],
|
||||
icon: "gpu-symbolic",
|
||||
size: 16,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-title",
|
||||
label: GRAPHICS_CARD_NAME,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-text-big",
|
||||
hexpand: true,
|
||||
xalign: 1,
|
||||
label: gpu.bind("current-usage").as((usage) => {
|
||||
return `${Number(usage).toFixed(0)}% (${gpu.temperature.toFixed(0)}ºC)`;
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
export const volume_widget = Widget.Box({
|
||||
class_names: ["system-stats", "system-stats-big"],
|
||||
css: speaker.bind("volume").as((l) => {
|
||||
let level = l.toFixed(2) * 100;
|
||||
if (level >= 0 && level <= 100) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(26, 27, 38, 0.8) ${level}%, rgba(26, 27, 38, 0.4) ${level}%
|
||||
);`;
|
||||
} else if (level > 100 && level <= 200) {
|
||||
return `
|
||||
background: linear-gradient(
|
||||
90deg, rgba(226, 27, 38, 0.4) ${level - 100}%, rgba(26, 27, 38, 0.8) ${level - 100}%
|
||||
);`;
|
||||
} else {
|
||||
return "background: rgba(226, 27, 38, 0.4)";
|
||||
}
|
||||
}),
|
||||
spacing: 6,
|
||||
children: [
|
||||
Widget.Icon({
|
||||
class_names: ["system-stats-icon"],
|
||||
icon: speaker.bind("volume").as((l) => {
|
||||
let level = l.toFixed(2) * 100;
|
||||
if (level == 0) {
|
||||
return "audio-volume-muted";
|
||||
} else if (level > 0 && level <= 30) {
|
||||
return "audio-volume-low";
|
||||
} else if (level > 30 && level <= 70) {
|
||||
return "audio-volume-medium";
|
||||
} else {
|
||||
return "audio-volume-high";
|
||||
}
|
||||
}),
|
||||
size: 16,
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-title",
|
||||
label: "Volumen",
|
||||
}),
|
||||
Widget.Label({
|
||||
class_name: "system-stats-text-big",
|
||||
hexpand: true,
|
||||
xalign: 1,
|
||||
label: speaker.bind("volume").as((l) => {
|
||||
return `${(l * 100).toFixed(0)}%`;
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
const sway = await Service.import("sway");
|
||||
|
||||
function getWorkspaceWindows(node) {
|
||||
var nodes = [];
|
||||
node.nodes.concat(node.floating_nodes).forEach((child_node) => {
|
||||
if (
|
||||
child_node.app_id != undefined ||
|
||||
child_node.window_properties != undefined
|
||||
) {
|
||||
nodes.push(child_node);
|
||||
} else {
|
||||
nodes = nodes.concat(getWorkspaceWindows(child_node));
|
||||
}
|
||||
});
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export const workspaces = Widget.Box({
|
||||
children: Array.from({ length: 10 }, (_, i) => {
|
||||
i += 1;
|
||||
return Widget.Box({
|
||||
class_names: ["workspace-button", "workspace-button-big"],
|
||||
spacing: 16,
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "workspace-name",
|
||||
label: `Escritorio ${i.toString()}`,
|
||||
}),
|
||||
Widget.Box({
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: "dummy",
|
||||
hexpand: true,
|
||||
xalign: 1,
|
||||
truncate: "end",
|
||||
setup: (label) => {
|
||||
label.hook(sway, (label) => {
|
||||
const ws = sway.getWorkspace(`${i}`);
|
||||
if (ws === undefined) {
|
||||
label.visible = false;
|
||||
return;
|
||||
}
|
||||
var nodes = getWorkspaceWindows(ws);
|
||||
if (nodes.length == 1) {
|
||||
label.label = nodes[0].name;
|
||||
label.visible = true;
|
||||
} else if (nodes.length > 0) {
|
||||
label.label = `${nodes.length} ventanas abiertas`;
|
||||
label.visible = true;
|
||||
} else {
|
||||
label.label = "No hay ventanas abiertas";
|
||||
label.visible = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
setup: (btn) => {
|
||||
btn.hook(
|
||||
sway,
|
||||
(btn) => {
|
||||
const ws = sway.getWorkspace(`${i}`);
|
||||
btn.toggleClassName(
|
||||
"occupied",
|
||||
ws?.nodes.length + ws?.floating_nodes.length > 0,
|
||||
);
|
||||
},
|
||||
"notify::workspaces",
|
||||
);
|
||||
|
||||
btn.hook(sway.active.workspace, (btn) => {
|
||||
btn.toggleClassName("active", sway.active.workspace.name == i);
|
||||
});
|
||||
},
|
||||
});
|
||||
}),
|
||||
spacing: 4,
|
||||
vertical: true,
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue