What are we making today?

The idea is an always-on-top persistent widget that integrates with my application Smoker and shows a live counter of how many cigarettes I have smoked today.

This is a nice addition to my existing Stream Deck hotkey which adds a cigarette to the app.

A simple counter in a box should suffice.

Word of advice

If you intend to follow along with this, take it carefully. Yea, I know it's just a widget, but still. I haven't tested anything of this on any other OS or desktop environment or whatever. I just did it, thought it was cool and wanted to share.

I'm using KDE Plasma on EndeavourOS.

Framework

Since I'm using KDE Plasma with Wayland, a fitting library is eww.

yay -S eww

Setup

We need two files, located in ~/.config/eww/ called eww.yuck (layout and functionality) and eww.scss (styling).

 1;; function that listens to a stdin stream
 2(deflisten smoker_count
 3  :initial "--"
 4  "/home/masco/.config/eww/scripts/smoker-stream.sh")
 5
 6;; bounding box and counter, bound to the 'smoker_count' function
 7(defwidget counter []
 8  (box :class "counter-box" :orientation "h"
 9    (label :class "count" :text {smoker_count})))
10
11;; layout definition on the monitor
12(defwindow smoker
13  :monitor 0
14  :stacking "fg"
15  :wm-ignore true
16  :windowtype "normal"
17  :geometry (geometry :anchor "bottom right" :width "3%" :x "20px" :y "20px")
18  (counter))

Then of course we need to style it a bit, so it doesn't look as trash as plain HTML.

 1* {
 2    all: unset; // removes all GTK (default) styling
 3}
 4
 5.counter-box {
 6    background-color: rgba(20, 20, 20, 0);
 7    border: 1px solid #f97316;
 8    border-radius: 10px;
 9    padding: 6px 12px;
10}
11
12.count { 
13    color: #f97316; 
14    font-size: 24px; 
15    font-weight: bold; 
16}

Fetching Data

Now that we have the widget set up, we still need some way to get the actual data. One way would be to use a defpoll component and just let it run a curl task like every 10 seconds.

But that would be kinda inefficient and lazy, but we want ✨efficiency✨ right.

So, for exactly this purpose, the Smoker app already exposes an /api/v1/events endpoint that can be used to update dynamically. That endpoint sends data as text/event-stream so the connection is kept alive by the client. These updates are then captured by the deflisten function and passed into the component.

In other words, every time a cigarette is logged, that endpoint will send a new "refresh" event to the client and update the widget.

So the smoker-stream.sh file looks like this:

Warning

If you're recreating this, make sure the prod.env file contains API_KEY and BASE fields, or set them directly in the script.

Specific to this application:

The base should be a valid Smoker endpoint. In my case that is https://smoker.domain.com/api/v1.

 1#!/usr/bin/env bash
 2# load .env file
 3SCRIPT_DIR="/home/masco/.config/eww/scripts"
 4set -a; source "$SCRIPT_DIR/prod.env"; set +a
 5
 6# fetch today's count
 7get_data () {
 8  curl -s -H "Authorization: Bearer $API_KEY" "$BASE/stats" | jq -r '.data.session.count'
 9}
10
11# run once on init
12get_data
13
14while true; do
15  # subscribe to events and read from stream
16  curl -sN -H "Authorization: Bearer $API_KEY" "$BASE/events" | while IFS= read -r line; do
17      case "$line" in # if line has data
18        data:*)
19          get_data # print data to stdout
20          ;;
21      esac
22    done
23  sleep 2 # reconnect after 2s
24done

Nice. We got the layout, styling and logic done. Last thing is to actually start the widget by running:

eww open smoker

Final words

I really like this implementation of a widget. It's easy to implement, doesn't take long and can be directly connected to bash scripts.

This was more or less a test if I can get a widget to run -- also kinda the first real blog post on here hihi -- and I'm pretty sure that I'm gonna do more stupid stuff with this in the future.

I hope you enjoyed this little adventure. Happy coding! :3