ui/widgets/brightness.js

64 lines
2.1 KiB
JavaScript

const { exec, execAsync } = Utils;
import Brightness from '../services/brightness.js'
const brightness_dial = Widget.EventBox({
className: 'eventbox-hide-pointer',
'on-primary-click': () => {execAsync('hyprshade toggle blue-light-filter')},
'on-scroll-up': () => {Brightness.screen += 0.01},
'on-scroll-down': () => {Brightness.screen -= 0.01},
child: Widget.CircularProgress({
rounded: false,
className: 'brightness-dial',
inverted: false,
startAt: 0.75,
value: Brightness.bind('screen'),
child: Widget.Label({
className: "dial-icon",
hexpand: true,
hpack: 'center',
setup: (self) => {
self.hook(Brightness, (self => {
const brightness = Brightness.screen * 100;
self.label = ["󰃚", "󰃛", "󰃜", "󰃝", "󰃞", "󰃟", "󰃠"][Math.floor(brightness/15)]
self.tooltip_text = `Brightness ${Math.floor(brightness)}%`;
}))
}
})
})
})
const brightness_slider = Widget.Box({
className: 'brightness',
children: [
Widget.Button({
on_clicked: () => execAsync('hyprshade toggle blue-light-filter'),
child: Widget.Icon().hook(Brightness, self => {
const brightness = Brightness.screen * 100;
const icon = [
[80, 'display-brightness-high-symbolic'],
[50, 'display-brightness-medium-symbolic'],
[20, 'display-brightness-low-symbolic'],
[0, 'display-brightness-off-symbolic']
].find(([threshold]) => brightness >= threshold)?.[1];
self.icon = icon;
self.tooltip_text = `Brightness ${Math.floor(brightness)}%`;
}),
}),
Widget.Slider({
className: 'slider',
hexpand: true,
drawValue: false,
onChange: ({ value }) => Brightness.screen = value,
value: Brightness.bind('screen'),
})
]
});
export {
brightness_dial,
brightness_slider
}