Overlay Bar with Eww

I have been revamping and completing my configs this week and created this simple eww overlay bar in the process that I wanted to share.

While wob and xob do the same thing, they are pretty minimal for my taste.

Besides, Linux == "modularity" && Linux == "choice" and I hadn’t tried eww, hence this small attempt.

The eww part is self explanatory so you can just grab it below. However closing the opened eww window requires a wrapper script since eww doesn’t have timeouts.

Here’s what we do:

We keep track of how many times the script is invoked. Thanks to eww running as a daemon, eww vars can help us here.
If the script is successful, we increment the counter by 1.
We then sleep/wait for the amount of time we want the overlay bar to stay open. Say, for example, 1 second.
We then decrement the counter value by 1.
If there are no additional invocations in between that one second, the counter value returns to 0. This is when we close the bar, ensuring that the bar is closed only after the last invocation.

And we just got ourselves an overlay bar that can be styled as you want.

bash wrapperScript.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#!/bin/bash

barCount=$(eww get barCount)
entity="$1"
verb="$2"
barIcon=""
barPercent=""

function openWindow() {
    eww update barIcon="$barIcon" barPercent="$barPercent" && eww open overlayWindow
    barCount=$((barCount + 1))
    eww update barCount="$barCount"

    sleep 1

    barCount=$(eww get barCount)
    barCount=$((barCount - 1))
    eww update barCount="$barCount"
    if [ $barCount -lt 1 ]; then
        eww close overlayWindow
    fi
}

if [ "$entity" == "volume" ]; then
    barPercent=$(pactl get-sink-volume @DEFAULT_SINK@ | head -n 1 | awk '{print substr($5, 1, length($5)-1)}')
    if [ "$verb" == "up" ]; then
        if [ "$barPercent" -lt 100 ]; then
            pactl set-sink-volume @DEFAULT_SINK@ +5%
            barIcon="󰝝"
        else
            exit 1
        fi
    elif [ "$verb" == "down" ]; then
        pactl set-sink-volume @DEFAULT_SINK@ -5%
        barIcon="󰝞"
    elif [ "$verb" == "mute" ]; then
        pactl set-sink-mute @DEFAULT_SINK@ toggle
        barIcon="󰝟"
        if [ "$(pactl get-sink-mute @DEFAULT_SINK@ | cut --delimiter=" " -f 2)" == "no" ]; then
            barIcon="󰕾"
        fi
    else
        exit 1
    fi
    barPercent=$(pactl get-sink-volume @DEFAULT_SINK@ | head -n 1 | awk '{print substr($5, 1, length($5)-1)}')
elif [ "$entity" == "brightness" ]; then
    if [ "$verb" == "up" ]; then
        brightnessctl set 5%+
    elif [ "$verb" == "down" ]; then
        brightnessctl set 5%-
    else
        exit 1
    fi
    barIcon="󰳲"
    barPercent=$(brightnessctl | sed -En 's/.*\(([0-9]+)%\).*/\1/p')
else
    exit 1
fi

openWindow

yuck eww.yuck

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(defvar barIcon "󰃠")
(defvar barPercent 0)
(defvar barCount 0)

(defwindow overlayWindow
    :monitor 0
    :stacking "overlay"
    :focusable false
    :exclusive false
    :geometry (geometry :width "170px" :height "10px" :anchor "center")
    (progressBar :icon barIcon :percent barPercent)
)

(defwidget progressBar [icon percent]
    (box
        :class "progressBar"
        :orientation "h"
        :halign "center"
        :valign "center"
        :space-evenly false
        (label :text icon :yalign 0.5 :valign "center")
        (progress :valign "center" :flipped false :value percent :orientation "h")
    )
)

scss eww.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// =========================
// █▀▀ █▀█ █░░ █▀█ █▀█ █▀
// █▄▄ █▄█ █▄▄ █▄█ █▀▄ ▄█
// =========================
$base: #1e1e2e;
$surface0: #313244;
$red: #f38ba8;
$green: #a6e3a1;
$blue: #89b4fa;
$yellow: #f9e2af;
$orange: #fab387;
$surface2: #585b70;
$surface1: #45475a;

* {
  all: unset;
  font-family: "MonoLisa Nerd Font Mono";
}

// =========================================
// █▀█ █░█ █▀▀ █▀█ █░░ ▄▀█ █▄█   █▄▄ ▄▀█ █▀█
// █▄█ ▀▄▀ ██▄ █▀▄ █▄▄ █▀█ ░█░   █▄█ █▀█ █▀▄
// =========================================
.progressBar {
  $borderRadius: 50px;
  $barHeight: 11px;
  $barColor: $yellow;

  background: $base;
  padding: 2px 8px;
  border-radius: $borderRadius;

  label {
    color: $barColor;
    margin-right: 10px;
    font-size: 20px;
  }

  progressbar trough {
    min-width: 200px;
    min-height: $barHeight;
    background: $surface1;
    border-radius: $borderRadius;
  }

  progressbar trough progress {
    background: $barColor;
    border-radius: $borderRadius;
    min-height: $barHeight;
  }
}