feat: Eww bar capture control

wayland/eww
Leni Aniva 2024-06-02 14:57:12 -07:00
parent c601a17ae9
commit aecf181eac
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
3 changed files with 175 additions and 165 deletions

View File

@ -18,35 +18,49 @@ $media-progress-bg: #333333;
$media: rgba(224, 232, 224, 0.7);
$media-paused: rgba(224, 200, 200, 0.7);
$tray_bg: rgba(204, 204, 204, 0.1);
// Dims the desktop background so status icons can be seen against darker wallpapers
$status_bg: rgba(0, 0, 0, 0.3);
$tray_bg: rgba(204, 204, 204, 0.1);
$tray: #c9cbff;
$keyboard: #f2cdcd;
$language: #e8a2af;
$idle_inhibitor: #f28fad;
$audio: #fae3b0;
$backlight: #f8bd96;
$bluetooth: #caa9c7;
$network: #bd93f9;
$network: #f8bd96;
$backlight: #bd93f9;
$cpu_bg: #333333;
$cpu: #96cdfb;
$memory_bg: #333333;
$memory: #88bbeb;
// previously bluetooth colour
$memory: #caa9c7;
//$memory: #88bbeb;
$temperature: #ddb6f2;
$temperature_critical: #ff6666;
$battery: #b6b2b3;
//* { all: unset; }
// Styles all scales
scale trough {
all: unset;
background-color: #333333;
border-radius: 5px;
min-height: 80px;
min-width: 2px;
//margin: .3rem 0 .3rem 0;
}
trough highlight {
all: unset;
background-color: #eeeeee;
border-radius: 5px;
}
trough slider {
background-color: transparent;
border-width: 0px;
border-radius: 10px;
}
.vbar {
background-color: transparent;
margin-left: 5px;
font-size: 15px;
font-family: monospace;
}
.hbar {
background-color: transparent;
margin-top: 5px;
font-size: 15px;
font-family: monospace;
}
@ -58,7 +72,7 @@ $battery: #b6b2b3;
.launcher {
all: unset;
font-size: 40px;
margin: -2px -5px 5px -3px;
margin: -2px -5px 5px 0px;
}
box .workspaces {
@ -88,6 +102,10 @@ box .workspaces {
}
}
box .status {
background-color: $status_bg;
}
box .weather {
color: $weather;
margin-left: 2px;
@ -118,100 +136,67 @@ box .weather {
color: mix($weather_end, $weather, 100%);
}
}
//.audio-scale .audio .audio-icon {
// background-color: transparent;
// color: $audio;
//}
scale {
border-radius: 5px;
min-height: 80px;
min-width: 10px;
margin: .3rem 0 .3rem 0;
}
.volume-icon {
margin: 2pt 0 2pt 0;
color: $audio;
}
box .cpu {
background-color: $cpu_bg;
color: $cpu;
padding: 5pt;
}
box .memory {
background-color: $memory_bg;
color: $memory;
padding: 5pt;
}
box .clock {
.audio {
background-color: transparent;
border-radius: 5;
color: $clock;
padding: 2pt 2pt 2pt 2pt;
.icon {
color: $audio;
}
color: $audio;
border-left: 2px solid $audio;
margin-bottom: 1px;
margin-top: 1px;
}
.media {
font-family: "Noto Serif";
padding-left: 5px;
padding-right: 5px;
min-height: 15px;
min-width: 15px;
color: $media;
border: none;
}
.media-playing {
background-color: $media-progress-bg;
color: $media;
}
.media-paused {
background-color: $media-progress-bg;
color: $media-paused;
}
.media-text-paused {
color: $media-paused;
}
.status {
font-family: monospace;
.media-text-playing {
padding-left: 10px;
}
.media-text-paused {
padding-left: 10px;
color: $media-paused;
}
.media-playing {
background-color: $media-progress-bg;
color: $media;
}
.media-paused {
background-color: $media-progress-bg;
color: $media-paused;
}
}
box .cpu {
.progress {
background-color: $cpu_bg;
}
color: $cpu;
border-left: 2px solid $cpu;
margin-bottom: 1px;
margin-top: 1px;
}
box .memory {
.progress {
background-color: $memory_bg;
}
color: $memory;
border-left: 2px solid $memory;
margin-bottom: 1px;
margin-top: 1px;
}
box .clock {
background-color: transparent;
color: $clock;
margin-top: 1px;
border-left: 2px solid $clock;
}
.systray {
background-color: $tray_bg;
//background-color: $tray_bg;
color: $tray;
}
// Styles on classes (see eww.yuck for more information)
.status slider {
all: unset;
color: #ffd5cd;
}
.metric scale trough highlight {
all: unset;
background-color: #D35D6E;
color: #000000;
border-radius: 10px;
}
.metric scale trough {
all: unset;
background-color: #4e4e4e;
border-radius: 50px;
min-height: 3px;
min-width: 50px;
margin-left: 10px;
margin-right: 20px;
}
.metric scale trough highlight {
all: unset;
background-color: #D35D6E;
color: #000000;
border-radius: 10px;
}
.metric scale trough {
all: unset;
background-color: #4e4e4e;
border-radius: 50px;
min-height: 3px;
min-width: 50px;
margin-left: 10px;
margin-right: 20px;
border-left: 2px dotted $tray;
}

View File

@ -1,4 +1,5 @@
(defvar eww "eww --config $HOME/.config/eww/bar")
(defvar eww-flags "--config $HOME/.config/eww/bar")
(defvar amixer "amixer -D pulse")
(defwindow vbar
:exclusive true
@ -15,7 +16,6 @@
(centerbox
:orientation "v"
(box :orientation "v" :space-evenly false :valign "start"
;(box :class "launcher" :valign "start" :width "10px" :height "10px" "☯")
(label
:class "launcher" :valign "start" :width "20px" :height "20px"
:unindent true
@ -24,14 +24,17 @@
(widget-workspaces)
)
(widget-media)
(box :orientation "v" :space-evenly false :valign "end"
(box
:class "status"
:orientation "v" :space-evenly false :valign "end"
(widget-tray)
(widget-audio)
(widget-volume)
(widget-microphone)
;(widget-temperature)
(widget-cpu)
(widget-memory)
(widget-clock)
)
;(widget_status)
))
(defwindow hbar
:exclusive true
@ -73,30 +76,6 @@
"scripts/compositor-control active-title")
; Weather
(defwidget widget-weather [orientation]
(box
:class "weather"
:orientation orientation
:space-evenly false
:valign "start"
:halign "center"
:spacing 10
(button :onclick "scripts/popup weather" "W")
))
(defpoll weather-text :initial "" :interval "180s"
"curl --max-time 2 wttr.in")
(defwindow weather
:geometry (geometry :x "70px"
:y "50%"
:width "270px"
:height "60px")
(box weather-text))
(defwidget widget-media []
(box
:class "media"
@ -115,11 +94,12 @@
:visible {media-current != "" && media-length != 1}
))
(label
:class { media-status == "Paused" ? "media-text-paused" : "media-text-playing" }
:class { media-status == "Paused" ? "media-text-paused" : "media-text-playing" }
:angle 270
:xalign 0.5
:yalign 0.5
:justify "center"
:limit-width 120
:text {media-current != "" ? "『${media-current}』" : "『』"})
))
@ -135,55 +115,99 @@
(deflisten media-status :initial "Stopped"
"playerctl --follow status")
(defwidget widget-audio []
(defwidget widget-volume []
(eventbox
:class "audio"
:onhover "${eww} update show-audio=true"
:onhoverlost "${eww} update show-audio=false"
:onhover "${EWW_EXECUTABLE} ${eww-flags} update show-volume=true"
:onhoverlost "${EWW_EXECUTABLE} ${eww-flags} update show-volume=false"
:onclick "${amixer} sset Master toggle"
(box
:class "audio"
:orientation "v"
:space-evenly "false"
:spacing "2"
(revealer :transition "slideup" :reveal show-audio
:tooltip "Volume: ${current-volume}%"
(revealer :transition "slideup" :reveal show-volume
(scale
:class "audio-scale"
:class "scale"
:value current-volume
:orientation "v"
:flipped true
:marks true
:tooltip "Volume: ${current-volume}%"
:max 101
:min 0
:onchange "amixer -D pulse sset Master {}%" ))
:onchange "${amixer} sset Master {}%" ))
(label
:class "audio-icon"
:class "icon"
:width 20 :height 20
:xalign 0.5 :yalign 0.5
:noindent true
:tooltip "Volume: ${current-volume}%"
:text { current-volume == 0 ? "" : (current-volume > 80 ? "" : "") }))))
:text { current-volume-state == "off" ? "" : (current-volume > 80 ? "" : "") }))))
(defwidget widget-microphone []
(eventbox
:onhover "${EWW_EXECUTABLE} ${eww-flags} update show-microphone=true"
:onhoverlost "${EWW_EXECUTABLE} ${eww-flags} update show-microphone=false"
:onclick "${amixer} sset Capture toggle"
(box
:class "audio"
:orientation "v"
:space-evenly "false"
:spacing "2"
:tooltip "Capture : ${current-microphone}%"
(revealer :transition "slideup" :reveal show-microphone
(scale
:class "scale"
:value current-microphone
:orientation "v"
:flipped true
:marks true
:max 101
:min 0
:onchange "${amixer} sset Capture {}%" ))
(label
:class "icon"
:width 20 :height 20
:xalign 0.5 :yalign 0.5
:noindent true
:text { current-microphone-state == "off" ? "" : "" }))))
(defpoll current-volume :interval "1s" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
(defvar show-audio false)
(defpoll current-volume-state :interval "1s" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $4 }'")
(defpoll current-microphone :interval "1s" "amixer -D pulse sget Capture | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
(defpoll current-microphone-state :interval "1s" "amixer -D pulse sget Capture | grep 'Left:' | awk -F'[][]' '{ print $4 }'")
(defvar show-volume false)
(defvar show-microphone false)
(defwidget widget-temperature []
(label
:class "temperature"
:width 20
:height 20
:tooltip {EWW_TEMPS}
:text ""
))
(defwidget widget-cpu []
(circular-progress
:class "cpu"
(box
:class "cpu"
:orientation "v"
(circular-progress
:class "progress"
:width 20
:height 20
:thickness 4
:tooltip {EWW_CPU.cores}
:tooltip " ${round(EWW_CPU.avg, 2)}%"
:value {EWW_CPU.avg}
))
)))
(defwidget widget-memory []
(circular-progress
:class "memory"
(box
:class "memory"
:orientation "v"
(circular-progress
:class "progress"
:width 20
:height 20
:thickness 4
:tooltip "${EWW_RAM.used_mem} / ${EWW_RAM.total_mem}"
:tooltip "${round(100 * EWW_RAM.used_mem / EWW_RAM.total_mem, 2)}%"
:value {EWW_RAM.used_mem_perc}
))
)))
(defwidget widget-tray []
(systray
:class "systray"
@ -200,7 +224,7 @@
:valign "end"
:spacing 1
:width 20
(box :class "icon" "")
;(box :class "icon" "")
"${clock.m}" "${clock.d}"
(box :class "icon" "")
"${clock.H}" "${clock.M}"
@ -210,7 +234,6 @@
"date '+{\"H\":\"%H\", \"M\":\"%M\", \"d\":\"%d\", \"m\":\"%m\", \"b\":\"%b\", \"Y\":\"%Y\"}'")
; Calendar
(defwindow calendar
@ -236,20 +259,25 @@
(defpoll calendar_year :interval "10h"
"date '+%Y'")
(defwidget metric [label value onchange]
; Weather
(defwidget widget-weather [orientation]
(box
:orientation "v"
:class "metric"
:class "weather"
:orientation orientation
:space-evenly false
(box :class "label" label)
(circular-progress :value value)
;(scale
; :min 0 :max 101
; :active {onchange != ""}
; :orientation "v"
; :value value
; :onchange onchange)
:valign "start"
:halign "center"
:spacing 10
(button :onclick "scripts/popup weather" "W")
))
(defpoll volume :initial 0 :interval "1s"
"scripts/get-volume.sh")
(defpoll weather-text :initial "" :interval "180s"
"curl --max-time 2 wttr.in")
(defwindow weather
:geometry (geometry :x "70px"
:y "50%"
:width "270px"
:height "60px")
(box weather-text))

View File

@ -1,3 +0,0 @@
#!/bin/bash
amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%' | head -1