[Build] Start refactor
This commit is contained in:
84
configs/userland/astal/components/bar/Bar.tsx
Normal file
84
configs/userland/astal/components/bar/Bar.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import {
|
||||
App, Astal, Gdk, Gtk
|
||||
} from 'astal/gtk4';
|
||||
import Calendar from './modules/Calendar';
|
||||
import {
|
||||
CenterBox
|
||||
} from 'astal/gtk4/widget';
|
||||
import Hyprland from './modules/Hyprland';
|
||||
import QuickView from './modules/QuickView';
|
||||
import SystemInfo from './modules/SystemInfo';
|
||||
|
||||
const Bar = ( {
|
||||
gdkmonitor, name
|
||||
}: {
|
||||
'gdkmonitor': Gdk.Monitor,
|
||||
'name': string
|
||||
} ) => {
|
||||
const {
|
||||
TOP, LEFT, RIGHT
|
||||
} = Astal.WindowAnchor;
|
||||
|
||||
return (
|
||||
<window
|
||||
gdkmonitor={gdkmonitor}
|
||||
cssClasses={[ 'Bar' ]}
|
||||
name={name}
|
||||
namespace={'bar'}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={TOP | LEFT | RIGHT}
|
||||
visible
|
||||
application={App}
|
||||
child={
|
||||
<CenterBox
|
||||
orientation={Gtk.Orientation.HORIZONTAL}
|
||||
startWidget={
|
||||
<box
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
>
|
||||
<Hyprland.ModeStatus />
|
||||
<Calendar.Time />
|
||||
<Hyprland.Workspace />
|
||||
</box>
|
||||
}
|
||||
centerWidget={<Hyprland.ActiveWindow />}
|
||||
endWidget={
|
||||
<box
|
||||
hexpand
|
||||
halign={Gtk.Align.END}
|
||||
cssClasses={[ 'BarRight' ]}
|
||||
>
|
||||
<SystemInfo.SystemInfo />
|
||||
<QuickView.QuickView />
|
||||
</box>
|
||||
}
|
||||
></CenterBox>
|
||||
}
|
||||
></window>
|
||||
);
|
||||
};
|
||||
|
||||
const cliHandler = ( args: string[] ): string => {
|
||||
console.debug( args );
|
||||
|
||||
return 'Not implemented';
|
||||
};
|
||||
|
||||
const BarLauncher = ( monitor: Gdk.Monitor ) => {
|
||||
const windowName = `bar-${ monitor.get_connector() }`;
|
||||
|
||||
const createBar = () => {
|
||||
return <Bar gdkmonitor={monitor} name={windowName}></Bar>;
|
||||
};
|
||||
|
||||
// Actually start the bar
|
||||
createBar();
|
||||
|
||||
return windowName;
|
||||
};
|
||||
|
||||
export default {
|
||||
BarLauncher,
|
||||
cliHandler,
|
||||
};
|
||||
111
configs/userland/astal/components/bar/bar.scss
Normal file
111
configs/userland/astal/components/bar/bar.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@use "../../util/colours.scss" as *;
|
||||
|
||||
window.Bar {
|
||||
font-family: "Comfortaa, sans-serif";
|
||||
background: transparent;
|
||||
color: $fg-color;
|
||||
font-weight: bold;
|
||||
|
||||
/* >centerbox { */
|
||||
/* background: $bg-color; */
|
||||
/* border-radius: 10px; */
|
||||
/* margin: 8px; */
|
||||
/* } */
|
||||
.mode-status {
|
||||
color: white;
|
||||
background-color: #00002dff;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
font-family: $monospace-font;
|
||||
|
||||
&.command-mode {
|
||||
background-color: darkslategray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.windowing-mode {
|
||||
background-color: darkslategray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.workspace-mode {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.launch-mode {
|
||||
background-color: darkgreen;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.device-mode {
|
||||
background-color: darkred;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.screenshotting-mode {
|
||||
background-color: purple;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.notifications-mode {
|
||||
background-color: darkorange;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button {
|
||||
border-radius: 20px;
|
||||
margin: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: $bg-color;
|
||||
|
||||
& button {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-action-button {
|
||||
border-radius: 20px;
|
||||
margin: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
button.workspace-button {
|
||||
border-radius: 20px;
|
||||
margin: 1px;
|
||||
|
||||
&.focused-workspace-button {
|
||||
color: $accent-color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.tray-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& button {
|
||||
margin: 2px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
min-width: 11rem;
|
||||
padding: 3px;
|
||||
|
||||
& button {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-view-symbol {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
26
configs/userland/astal/components/bar/modules/Calendar.tsx
Normal file
26
configs/userland/astal/components/bar/modules/Calendar.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { GLib, Variable } from "astal";
|
||||
import { Gtk } from "astal/gtk4";
|
||||
|
||||
const Time = ({ format = "%a, %e.%m %H:%M:%S" }) => {
|
||||
const time = Variable<string>("").poll(
|
||||
1000,
|
||||
() => GLib.DateTime.new_now_local().format(format)!,
|
||||
);
|
||||
|
||||
return (
|
||||
<menubutton
|
||||
cssClasses={["time", "bar-button"]}
|
||||
hexpand
|
||||
halign={Gtk.Align.CENTER}
|
||||
>
|
||||
<label onDestroy={() => time.drop()} label={time()} halign={Gtk.Align.CENTER}></label>
|
||||
<popover>
|
||||
<Gtk.Calendar />
|
||||
</popover>
|
||||
</menubutton>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
Time,
|
||||
};
|
||||
146
configs/userland/astal/components/bar/modules/Hyprland.tsx
Normal file
146
configs/userland/astal/components/bar/modules/Hyprland.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import {
|
||||
bind,
|
||||
exec,
|
||||
readFile
|
||||
} from 'astal';
|
||||
import AstalHyprland from 'gi://AstalHyprland';
|
||||
import {
|
||||
Gtk
|
||||
} from 'astal/gtk4';
|
||||
import Pango from 'gi://Pango?version=1.0';
|
||||
|
||||
const hypr = AstalHyprland.get_default();
|
||||
|
||||
const Workspace = () => {
|
||||
return (
|
||||
<box>
|
||||
{bind( hypr, 'workspaces' ).as( wss => wss
|
||||
.filter( ws => !( ws.id >= -99 && ws.id <= -2 ) ) // filter out special workspaces
|
||||
.sort( ( a, b ) => a.id - b.id )
|
||||
.map( ws => (
|
||||
<button
|
||||
cssClasses={bind( hypr, 'focusedWorkspace' ).as( fw => ws === fw
|
||||
? [
|
||||
'focused-workspace-button',
|
||||
'workspace-button',
|
||||
]
|
||||
: [ 'workspace-button' ], )}
|
||||
onButtonPressed={() => ws.focus()}
|
||||
child={<label label={String( ws.id )}></label>}
|
||||
></button>
|
||||
) ), )}
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Displays the name of the currently active window and provides a popover for
|
||||
* displaying all available clients
|
||||
*/
|
||||
const ActiveWindow = () => {
|
||||
const focused = bind( hypr, 'focusedClient' );
|
||||
|
||||
const WindowPopover = (): Gtk.Popover => {
|
||||
// Set up boxes + Popover
|
||||
const popover = new Gtk.Popover();
|
||||
const popoverBox = WindowPopoverBox();
|
||||
|
||||
popover.set_child( popoverBox );
|
||||
|
||||
return popover;
|
||||
};
|
||||
|
||||
const windowPopover = WindowPopover();
|
||||
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// Return fully assembled HyprlandFocusedClient box
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
return (
|
||||
<box visible={focused.as( Boolean )}>
|
||||
<button
|
||||
onClicked={() => windowPopover.popup()}
|
||||
cssClasses={[ 'bar-button' ]}
|
||||
child={
|
||||
focused.as( client => client && (
|
||||
<label
|
||||
maxWidthChars={70}
|
||||
ellipsize={Pango.EllipsizeMode.END}
|
||||
label={bind( client, 'title' ).as( String )} />
|
||||
), )
|
||||
}></button>
|
||||
{windowPopover}
|
||||
</box >
|
||||
);
|
||||
};
|
||||
|
||||
type submaps = 'device' | 'launch' | 'workspace' | 'windowing' | 'screenshotting' | 'notifications' | '';
|
||||
|
||||
const ModeStatus = () => {
|
||||
let isUsingHyprvim = false;
|
||||
|
||||
try {
|
||||
const path = exec( 'bash -c "cd ~ && pwd"' ) + '/.config/hyprvim';
|
||||
|
||||
isUsingHyprvim = readFile( path ).trim() === 'y';
|
||||
} catch ( e ) {
|
||||
printerr( 'Failed to read hyprvim config', e );
|
||||
}
|
||||
|
||||
const label = new Gtk.Label();
|
||||
|
||||
if ( !isUsingHyprvim ) return label;
|
||||
|
||||
print( '==> Using hyprvim config' );
|
||||
|
||||
const map = {
|
||||
'device': 'DEV',
|
||||
'launch': 'LNC',
|
||||
'workspace': 'WSP',
|
||||
'windowing': 'WIN',
|
||||
'screenshotting': 'SCS',
|
||||
'notifications': 'NOT',
|
||||
'': 'NRM'
|
||||
};
|
||||
|
||||
label.label = map[''];
|
||||
label.cssClasses = [ 'mode-status' ];
|
||||
|
||||
// TODO: Possibly add popover to it that lists binds
|
||||
hypr.connect( 'submap', ( _, name: submaps ) => {
|
||||
label.label = map[name];
|
||||
label.cssClasses = [
|
||||
'mode-status',
|
||||
name + '-mode'
|
||||
];
|
||||
} );
|
||||
|
||||
return label;
|
||||
};
|
||||
|
||||
const WindowPopoverBox = () => {
|
||||
return <box vertical>
|
||||
<label label={'Available Windows'} cssClasses={[ 'title-2' ]}></label>
|
||||
<Gtk.Separator marginTop={5} marginBottom={5}></Gtk.Separator>
|
||||
<box vertical>
|
||||
{bind( hypr, 'clients' ).as( clients => {
|
||||
return clients.map( client => {
|
||||
return <button child={
|
||||
<box>
|
||||
<label label={bind( client, 'workspace' ).as( w => `(WS ${ w.name })` )}></label>
|
||||
<label label={bind( client, 'initialClass' ).as( c => `[${ c }]` )}></label>
|
||||
<label label={bind( client, 'title' )}></label>
|
||||
</box>
|
||||
}
|
||||
onClicked={() => client.focus()}
|
||||
></button>;
|
||||
} );
|
||||
} )}
|
||||
</box>
|
||||
</box>;
|
||||
};
|
||||
|
||||
export default {
|
||||
Workspace,
|
||||
ActiveWindow,
|
||||
ModeStatus
|
||||
};
|
||||
204
configs/userland/astal/components/bar/modules/QuickView.tsx
Normal file
204
configs/userland/astal/components/bar/modules/QuickView.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import AstalBattery from 'gi://AstalBattery';
|
||||
import AstalBluetooth from 'gi://AstalBluetooth';
|
||||
import AstalNetwork from 'gi://AstalNetwork';
|
||||
import AstalWp from 'gi://AstalWp';
|
||||
import Brightness from '../../../util/brightness';
|
||||
import {
|
||||
Gtk
|
||||
} from 'astal/gtk4';
|
||||
import QuickActions from '../../QuickActions/QuickActions';
|
||||
import {
|
||||
bind
|
||||
} from 'astal';
|
||||
import {
|
||||
execAsync
|
||||
} from 'astal';
|
||||
|
||||
const STATE = AstalNetwork.DeviceState;
|
||||
|
||||
const QuickView = () => {
|
||||
const qa = QuickActions.QuickActions();
|
||||
|
||||
const showQuickActions = () => {
|
||||
qa.popup();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClicked={() => showQuickActions()}
|
||||
cssClasses={[ 'quick-action-button' ]}
|
||||
child={
|
||||
<box>
|
||||
<BatteryWidget></BatteryWidget>
|
||||
<Audio></Audio>
|
||||
<BluetoothWidget></BluetoothWidget>
|
||||
<NetworkWidget></NetworkWidget>
|
||||
<image iconName={'system-shutdown-symbolic'}></image>
|
||||
{qa}
|
||||
</box>
|
||||
}
|
||||
></button>
|
||||
);
|
||||
};
|
||||
|
||||
const NetworkWidget = () => {
|
||||
const network = AstalNetwork.get_default();
|
||||
|
||||
return (
|
||||
<box>
|
||||
<image
|
||||
iconName={bind( network, 'state' ).as( state => {
|
||||
if ( state === AstalNetwork.State.CONNECTING ) {
|
||||
return 'chronometer-reset-symbolic';
|
||||
} else if (
|
||||
state === AstalNetwork.State.CONNECTED_LOCAL
|
||||
|| state === AstalNetwork.State.CONNECTED_SITE
|
||||
|| state === AstalNetwork.State.CONNECTED_GLOBAL
|
||||
) {
|
||||
return 'network-wired-activated-symbolic';
|
||||
} else {
|
||||
return 'paint-unknown-symbolic';
|
||||
}
|
||||
} )}
|
||||
cssClasses={[
|
||||
'network-widget',
|
||||
'quick-view-symbol'
|
||||
]}
|
||||
visible={bind( network.wifi, 'state' ).as( state => state !== STATE.ACTIVATED, )}
|
||||
></image>
|
||||
<image
|
||||
iconName={bind( network.wifi, 'state' ).as( state => {
|
||||
if ( state === STATE.ACTIVATED ) {
|
||||
return network.wifi.iconName;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
} )}
|
||||
tooltipText={bind( network.wifi, 'ssid' )}
|
||||
cssClasses={[
|
||||
'network-widget',
|
||||
'quick-view-symbol'
|
||||
]}
|
||||
visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED, )}
|
||||
></image>
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
const BluetoothWidget = () => {
|
||||
const bluetooth = AstalBluetooth.get_default();
|
||||
const enabled = bind( bluetooth, 'isPowered' );
|
||||
const connected = bind( bluetooth, 'isConnected' );
|
||||
|
||||
// For each connected BT device, render status
|
||||
return (
|
||||
<box>
|
||||
<box visible={enabled.as( e => e )}>
|
||||
<image
|
||||
iconName={'bluetooth-active-symbolic'}
|
||||
visible={connected.as( c => c )}
|
||||
></image>
|
||||
<image
|
||||
iconName={'bluetooth-disconnected-symbolic'}
|
||||
visible={connected.as( c => !c )}
|
||||
></image>
|
||||
</box>
|
||||
<image
|
||||
iconName={'bluetooth-disabled-symbolic'}
|
||||
visible={enabled.as( e => !e )}
|
||||
></image>
|
||||
<box>
|
||||
{bind( bluetooth, 'devices' ).as( devices => {
|
||||
return devices.map( device => {
|
||||
return (
|
||||
<image
|
||||
iconName={bind( device, 'icon' ).as( icon => icon, )}
|
||||
visible={bind( device, 'connected' )}
|
||||
tooltipText={bind( device, 'batteryPercentage' ).as( n => {
|
||||
return device.get_name() + ': ' + n + '%';
|
||||
}, )}
|
||||
></image>
|
||||
);
|
||||
} );
|
||||
} )}
|
||||
</box>
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
let hasSentNotification = false;
|
||||
|
||||
const BatteryWidget = () => {
|
||||
const battery = AstalBattery.get_default();
|
||||
|
||||
if ( battery.get_is_present() ) {
|
||||
return (
|
||||
<image
|
||||
iconName={bind( battery, 'batteryIconName' ).as( icon => icon )}
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
tooltipText={bind( battery, 'percentage' ).as( p => {
|
||||
const level = Math.round( p * 100 );
|
||||
|
||||
if ( level < 20 && !hasSentNotification ) {
|
||||
hasSentNotification = true;
|
||||
execAsync( 'bash -c "notify-send \'Battery level below 20%\'"' );
|
||||
}
|
||||
|
||||
return `Battery Level: ${ level }%`;
|
||||
} )}
|
||||
></image>
|
||||
);
|
||||
} else {
|
||||
return <box></box>;
|
||||
}
|
||||
// Else, no battery available -> Don't show the widget
|
||||
};
|
||||
|
||||
const BrightnessWidget = () => {
|
||||
const brightness = Brightness.get_default();
|
||||
const screen_brightness = bind( brightness, 'screen' );
|
||||
|
||||
return (
|
||||
<box cssClasses={[ 'quick-view-symbol' ]}>
|
||||
<image iconName={'brightness-high-symbolic'}></image>
|
||||
<label
|
||||
label={screen_brightness.as( b => '' + Math.round( 100 * b ) )}
|
||||
visible={bind( brightness, 'screenAvailable' )}
|
||||
></label>
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
const Audio = () => {
|
||||
const wireplumber = AstalWp.get_default();
|
||||
|
||||
if ( wireplumber ) {
|
||||
return (
|
||||
<box orientation={Gtk.Orientation.HORIZONTAL}>
|
||||
<image
|
||||
iconName={bind( wireplumber.defaultSpeaker, 'volumeIcon' ).as( icon => icon, )}
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
tooltipText={bind( wireplumber.defaultSpeaker, 'volume' ).as( v => Math.round( 100 * v ) + '%' )}
|
||||
></image>
|
||||
<image
|
||||
iconName={bind( wireplumber.defaultMicrophone,
|
||||
'volumeIcon', ).as( icon => icon )}
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
tooltipText={bind( wireplumber.defaultMicrophone, 'volume' ).as( v => Math.round( 100 * v ) + '%' )}
|
||||
></image>
|
||||
</box>
|
||||
);
|
||||
} else {
|
||||
print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing', );
|
||||
|
||||
return <image iconName={'action-unavailable-symbolic'}></image>;
|
||||
}
|
||||
};
|
||||
|
||||
// cssClasses={[ 'quick-view-symbol' ]}
|
||||
|
||||
export default {
|
||||
QuickView,
|
||||
BrightnessWidget
|
||||
};
|
||||
105
configs/userland/astal/components/bar/modules/SystemInfo.tsx
Normal file
105
configs/userland/astal/components/bar/modules/SystemInfo.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
Gtk
|
||||
} from 'astal/gtk4';
|
||||
import {
|
||||
execAsync
|
||||
} from 'astal';
|
||||
import sysinfo from '../sysinfo';
|
||||
|
||||
const info = () => {
|
||||
return (
|
||||
<box vertical>
|
||||
<label
|
||||
label={'System Information'}
|
||||
cssClasses={[ 'title-2' ]}
|
||||
></label>
|
||||
<Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
|
||||
<label
|
||||
vexpand
|
||||
halign={Gtk.Align.START}
|
||||
hexpand
|
||||
label={sysinfo.ramUsed( used => {
|
||||
return 'RAM: ' + used + ` (${ sysinfo.ramUtil.get() }%)`;
|
||||
} )}
|
||||
></label>
|
||||
<label
|
||||
label={sysinfo.systemStats( stats => {
|
||||
return `CPU: ${ stats.cpuTemp }, ${ stats.cpuClk }
|
||||
GPU: ${ stats.gpuTemp }, ${ stats.gpuClk } (${ stats.vram } / ${ stats.availableVRAM })
|
||||
Kernel: ${ stats.kernel }`;
|
||||
} )}
|
||||
></label>
|
||||
<Gtk.Separator marginTop={10}></Gtk.Separator>
|
||||
<button
|
||||
onClicked={() => execAsync( '/bin/sh -c "kitty --hold fish -c \'fastfetch\'"' )}
|
||||
child={
|
||||
<label label={'View FastFetch'}></label>
|
||||
}></button>
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
const SystemInformationPanel = () => {
|
||||
const popover = new Gtk.Popover();
|
||||
|
||||
popover.set_child( info() );
|
||||
|
||||
return popover;
|
||||
};
|
||||
|
||||
|
||||
const panel = SystemInformationPanel();
|
||||
|
||||
const SystemInfo = () => {
|
||||
sysinfo.startSysInfoFetcher();
|
||||
|
||||
const openSysInfo = async () => {
|
||||
panel.popup();
|
||||
sysinfo.refreshStats();
|
||||
};
|
||||
|
||||
if ( sysinfo.enabled ) {
|
||||
return (
|
||||
<button
|
||||
onClicked={() => openSysInfo()}
|
||||
child={
|
||||
<box tooltipText={sysinfo.ramUsed( v => v )}>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image
|
||||
iconName={'power-profile-performance-symbolic'}
|
||||
marginEnd={1}
|
||||
></image>
|
||||
<label
|
||||
label={sysinfo.cpuUtil( util => util )}
|
||||
marginEnd={5}
|
||||
></label>
|
||||
</box>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image iconName={'memory'}></image>
|
||||
<label label={sysinfo.ramUtil( util => util )}></label>
|
||||
</box>
|
||||
<box
|
||||
cssClasses={[ 'quick-view-symbol' ]}
|
||||
>
|
||||
<image iconName={'show-gpu-effects-symbolic'}></image>
|
||||
<label label={sysinfo.gpuUtil( util => util )}></label>
|
||||
</box>
|
||||
{panel}
|
||||
</box>
|
||||
}
|
||||
cssClasses={[ 'bar-button' ]}
|
||||
></button>
|
||||
);
|
||||
} else {
|
||||
return <image iconName={'action-unavailable-symbolic'}></image>;
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
SystemInfo,
|
||||
panel,
|
||||
};
|
||||
9
configs/userland/astal/components/bar/modules/stats.d.ts
vendored
Normal file
9
configs/userland/astal/components/bar/modules/stats.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
interface Stats {
|
||||
kernel: string;
|
||||
cpuTemp: string;
|
||||
cpuClk: string;
|
||||
gpuTemp: string;
|
||||
gpuClk: string;
|
||||
vram: string;
|
||||
availableVRAM: string;
|
||||
}
|
||||
137
configs/userland/astal/components/bar/sysinfo.ts
Normal file
137
configs/userland/astal/components/bar/sysinfo.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
import { exec, execAsync, interval, Variable } from "astal";
|
||||
|
||||
const FETCH_INTERVAL = 2000;
|
||||
const cpuUtil = Variable("0%");
|
||||
const ramUtil = Variable("0%");
|
||||
const ramUsed = Variable("0MiB");
|
||||
const gpuUtil = Variable("0%");
|
||||
let gpuName = "card1";
|
||||
let enabled = true;
|
||||
|
||||
const getStats = (): Stats => {
|
||||
gpuName = exec(`/bin/bash -c "ls /sys/class/drm/ | grep '^card[0-9]*$'"`);
|
||||
const cpuNameInSensors = "CPUTIN";
|
||||
const stats = {
|
||||
kernel: exec("uname -sr"),
|
||||
cpuTemp: exec(
|
||||
`/bin/bash -c "sensors | grep -m1 ${cpuNameInSensors} | awk '{print $2}'"`,
|
||||
),
|
||||
cpuClk: exec(
|
||||
`awk '/cpu MHz/ {sum+=$4; ++n} END {print sum/n " MHz"}' /proc/cpuinfo`,
|
||||
),
|
||||
gpuTemp: exec(
|
||||
`/bin/bash -c "sensors | grep -E 'edge' | awk '{print $2}'"`,
|
||||
),
|
||||
gpuClk: exec(
|
||||
`/bin/bash -c "cat /sys/class/drm/${gpuName}/device/pp_dpm_sclk | grep '\\*' | awk '{print $2 $3}'"`,
|
||||
),
|
||||
vram:
|
||||
Math.round(
|
||||
parseInt(
|
||||
exec(
|
||||
`cat /sys/class/drm/${gpuName}/device/mem_info_vram_used`,
|
||||
),
|
||||
) /
|
||||
1024 /
|
||||
1024,
|
||||
) + "MiB",
|
||||
availableVRAM:
|
||||
Math.round(
|
||||
parseInt(
|
||||
exec(
|
||||
`cat /sys/class/drm/${gpuName}/device/mem_info_vram_total`,
|
||||
),
|
||||
) /
|
||||
1024 /
|
||||
1024,
|
||||
) + "MiB",
|
||||
};
|
||||
|
||||
return stats;
|
||||
};
|
||||
|
||||
const systemStats: Variable<Stats> = Variable(getStats());
|
||||
const availableFeatures = {
|
||||
cpu: true,
|
||||
ram: true,
|
||||
};
|
||||
|
||||
const refreshStats = () => {
|
||||
systemStats.set(getStats());
|
||||
}
|
||||
|
||||
const featureTest = () => {
|
||||
print('[SysInfo] Feature test started...');
|
||||
// Check if awk & sed are available
|
||||
try {
|
||||
exec("awk -V");
|
||||
exec("sed --version");
|
||||
} catch (e) {
|
||||
printerr(
|
||||
"[ SysInfo ] AWK or SED missing! No system info will be available",
|
||||
);
|
||||
enabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if mpstat is available
|
||||
try {
|
||||
exec("mpstat -V");
|
||||
} catch (e) {
|
||||
availableFeatures.cpu = false;
|
||||
printerr(
|
||||
"[ SysInfo ] Feature Test for CPU info failed. mpstat from the sysstat package missing!",
|
||||
);
|
||||
}
|
||||
print('[SysInfo] Feature test complete');
|
||||
};
|
||||
|
||||
const sysInfoFetcher = () => {
|
||||
if (enabled) {
|
||||
if (availableFeatures.cpu) {
|
||||
execAsync(`/bin/fish -c cpu-utilization`).then(v => {
|
||||
cpuUtil.set("" + Math.round(parseFloat(v)));
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
}
|
||||
if (availableFeatures.ram) {
|
||||
execAsync(
|
||||
`/bin/bash -c "free | awk '/Mem:/ {print $3 \\" \\" $2}'"`,
|
||||
).then(v => {
|
||||
const util = parseInt(v.split(' ')[0]);
|
||||
const available = parseInt(v.split(' ')[1]);
|
||||
ramUtil.set("" + Math.round(util / available * 100));
|
||||
ramUsed.set(`${Math.round(util / 1024 / 1024 * 10) / 10} GiB of ${Math.round(available / 1024 / 1024 * 10) / 10} GiB used`);
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
}
|
||||
gpuUtil.set(exec("cat /sys/class/drm/card1/device/gpu_busy_percent"));
|
||||
}
|
||||
};
|
||||
|
||||
let sysInfoFetcherRunning = false;
|
||||
const startSysInfoFetcher = () => {
|
||||
if (!sysInfoFetcherRunning) {
|
||||
sysInfoFetcherRunning = true;
|
||||
|
||||
featureTest();
|
||||
|
||||
if (enabled) {
|
||||
// Start interval
|
||||
interval(FETCH_INTERVAL, sysInfoFetcher);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
startSysInfoFetcher,
|
||||
enabled,
|
||||
gpuUtil,
|
||||
cpuUtil,
|
||||
ramUsed,
|
||||
ramUtil,
|
||||
refreshStats,
|
||||
systemStats
|
||||
}
|
||||
Reference in New Issue
Block a user